diff --git a/client/package.json b/client/package.json index 1a0790f..a18aed2 100644 --- a/client/package.json +++ b/client/package.json @@ -22,30 +22,27 @@ } ], "private": true, - "proxy": "http://0.0.0.0:$PORT/", + "proxy": "http://127.0.0.1:3001/", "license": "GNU GPLv3", "dependencies": { "axios": "^0.16.2", "dompurify": "^1.0.8", - "logrocket": "^0.6.19", "moment": "^2.22.2", - "node-pre-gyp": "^0.17.0", - "node-sass": "npm:sass", - "nuka-carousel": "^4.4.5", - "react": "^16.6.0", - "react-datetime-picker": "^2.0.0", - "react-dom": "^16.6.0", - "react-flippy": "^0.1.2", - "react-quill": "^1.3.3", - "react-router-dom": "^4.3.1", - "react-router-hash-link": "^1.2.1", - "react-scripts": "2.0.3", - "reactstrap": "^7.0.2", - "sass": "^1.62.0", - "styled-components": "^4.1.3" + "nuka-carousel": "4.8.0", + "react": "17.0.0", + "react-datetime-picker": "3.3.0", + "react-dom": "17.0.0", + "react-flippy": "^1.1.0", + "react-quill": "1.3.5", + "react-router-dom": "5.3.4", + "react-router-hash-link": "2.4.3", + "react-scripts": "4.0.0", + "reactstrap": "8.9.0", + "sass": "^1.63.3", + "styled-components": "5.3.3" }, "scripts": { - "start": "react-scripts --openssl-legacy-provider start", + "start": "react-scripts start", "build": "react-scripts --openssl-legacy-provider build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" diff --git a/client/src/App.js b/client/src/App.js index f223b9c..b2c9c49 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,6 +1,7 @@ import React, { Component } from "react"; import { BrowserRouter as Router, Route, Redirect } from "react-router-dom"; import axios from "axios"; +import GithubIcon from "./img/github.png"; // Pages import Home from "./pages/Home"; @@ -190,7 +191,7 @@ class App extends Component { > github logo {" "} diff --git a/client/src/index.js b/client/src/index.js index 0fb597c..c0fee0d 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1,9 +1,7 @@ import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; -import './css/Global.scss'; +import "./css/Global.scss"; import "./css/balloon.min.css"; -import LogRocket from 'logrocket'; ReactDOM.render(, document.querySelector("#root")); -LogRocket.init('d6pvgs/zephyr-node'); \ No newline at end of file diff --git a/client/src/pages/Flashcards.js b/client/src/pages/Flashcards.js index 8000e7f..5505778 100644 --- a/client/src/pages/Flashcards.js +++ b/client/src/pages/Flashcards.js @@ -717,12 +717,11 @@ class PlayCards extends React.Component { {this.state.flashcards.map((item) => { return ( -
+
{ - event.preventDefault(); - this.setState({ - search: true, - notFound: false - }); - // console.log("input: " +tagInput.replace(/\s/g, '')) - axios.get('/decks/tags/' + tagInput.replace(/\s/g, '')).then((response) => { - console.log(response.data); - if (response.data === null || response.data.length === 0) { - this.setState({ - notFound: true, - decks: [] - }); - } else { - console.log(response.data); - this.setState({ - decks: response.data - }); - } - }); - }; + searchTags = (event, tagInput) => { + event.preventDefault(); + this.setState({ + search: true, + notFound: false, + }); + // console.log("input: " +tagInput.replace(/\s/g, '')) + axios.get("/decks/tags/" + tagInput.replace(/\s/g, "")).then((response) => { + console.log(response.data); + if (response.data === null || response.data.length === 0) { + this.setState({ + notFound: true, + decks: [], + }); + } else { + console.log(response.data); + this.setState({ + decks: response.data, + }); + } + }); + }; - getFlashcards = (id) => { - axios.get('/flashcard/' + id).then((response) => { - this.setState({ - flashcard: response.data, - showCards: true, - search: false, - notFound: false // Confusing wording - }); - }); - }; + getFlashcards = (id) => { + axios.get("/flashcard/" + id).then((response) => { + this.setState({ + flashcard: response.data, + showCards: true, + search: false, + notFound: false, // Confusing wording + }); + }); + }; - displayPublicDecks = (event) => { - console.log('hit'); - event.preventDefault(); - axios.get('/decks/public').then((response) => { - this.setState({ - decks: response.data, - showCards: false, - search: true, - notFound: false - }); - console.log(this.state.decks); - }); - }; + displayPublicDecks = (event) => { + console.log("hit"); + event.preventDefault(); + axios.get("/decks/public").then((response) => { + this.setState({ + decks: response.data, + showCards: false, + search: true, + notFound: false, + }); + console.log(this.state.decks); + }); + }; - showHome = () => { - this.setState({ showFeatures: false }); - }; + showHome = () => { + this.setState({ showFeatures: false }); + }; - showFeatures = () => { - this.setState({ showFeatures: true }); - }; + showFeatures = () => { + this.setState({ showFeatures: true }); + }; - render() { - let renderDecks, emptyDeckValidation, disclaimer; - if (this.props.user) { - return ; - } + render() { + let renderDecks, emptyDeckValidation, disclaimer; + if (this.props.user) { + return ; + } - if (this.state.showDisclaimer) { - disclaimer = ( -
-

- This website records user interactions to address issues and improve the experience{' '} - -

-
- ); - } + // if (this.state.showDisclaimer) { + // disclaimer = ( + //
+ //

+ // This website records user interactions to address issues and improve + // the experience{" "} + // + //

+ //
+ // ); + // } - if (!this.state.flashcard.length) { - emptyDeckValidation = ( -
-
- (this.Flippy = r)} - style={{ width: '400px', height: '200px' }} - > - -

- This deck currently has no flashcards.
- If you're the creator, you could add some flashcards by logging in and going to the{' '} - Decks page. -

- - -

- Alternatively, you can set the deck to private and the deck will not show up in public. -

- - -
-
- ); - } - if (this.state.search) { - if (this.state.notFound) { - document.querySelector('#render-decks').style.height = 'auto'; - document.querySelector('#render-decks').style.boxShadow = ''; - renderDecks = ( -
-
- {' '} - - Deck was not found. You have entered an invalid tag name. - -
-
- ); - } else if (!this.state.notFound) { - renderDecks = this.state.decks.map((item, index) => { - return ( - - -
-
-

this.getFlashcards(item.id)} - > - {item.subject} -

-
-
- {item.Tags.map((elem) => { - return ( - - ); - })} -
-
- - - ); - }); - } - } else if (this.state.showCards) { - renderDecks = ( - - {this.state.flashcard.map((item) => { - return ( - -
-
- (this.Flippy = r)} - style={{ width: '400px', height: '200px' }} - > - -

{item.front}

- + if (!this.state.flashcard.length) { + emptyDeckValidation = ( +
+
+ (this.Flippy = r)} + style={{ width: "400px", height: "200px" }} + > + +

+ This deck currently has no flashcards. +
+ If you're the creator, you could add some flashcards by logging + in and going to the Decks page. +

+ + +

+ Alternatively, you can set the deck to private and the deck will + not show up in public. +

+ + +
+
+ ); + } + if (this.state.search) { + if (this.state.notFound) { + document.querySelector("#render-decks").style.height = "auto"; + document.querySelector("#render-decks").style.boxShadow = ""; + renderDecks = ( +
+
+ {" "} + + Deck was not found. You have entered an invalid tag name. + +
+
+ ); + } else if (!this.state.notFound) { + renderDecks = this.state.decks.map((item, index) => { + return ( + + +
+
+

this.getFlashcards(item.id)} + > + {item.subject} +

+
+
+ {item.Tags.map((elem) => { + return ( + + ); + })} +
+
+ + + ); + }); + } + } else if (this.state.showCards) { + renderDecks = ( + + {this.state.flashcard.map((item) => { + return ( + +
+
+ (this.Flippy = r)} + style={{ width: "400px", height: "200px" }} + > + +

{item.front}

+ - -

{item.back}

- - -
-
- - ); - })} - {emptyDeckValidation} - - ); - } - return ( -
- {this.props.user && } - -
-
-

Zephyr Node

-
-
-
-
- {!this.state.showFeatures ? ( - - ) : ( -

Features

- )} -
- {!this.state.showFeatures ? ( - - - {renderDecks} - - - - ) : ( - '' - )} + +

{item.back}

+ + +
+
+ + ); + })} + {emptyDeckValidation} + + ); + } + return ( +
+ {this.props.user && } + +
+
+

Zephyr Node

+
+
+
+
+ {!this.state.showFeatures ? ( + + ) : ( +

+ Features +

+ )} +
+ {!this.state.showFeatures ? ( + + + {renderDecks} + + + + ) : ( + "" + )} - {disclaimer} + {disclaimer} - {this.state.showFeatures ? ( -
-
- -
-
-
-

- -

-
Flashcards
-

- Create decks of flashcards with associated tags. Type in the question on - the front and the answer on the back of the flashcard. You can set your - decks to private or leave them public. Keep your mind sharp for the big - exam by quizzing yourself and flipping the flashcard to reveal the - answer you created. -

-
-
-
- - -
-
-
-

- -

-
Notes
-

- Ideas and information swimming around in your head? Capture all of them - here. Type and save whatever you want, whether it's business or - personal, for future reference. You can include URLs, images, and video - links. -

-
-
-
- -
-
- -
-
-
-

- -

-
Lists
-

- Prioritize what you intend to do for the day, week, month or whenever by - organizing a list of tasks. -

-
-
-
-
- - -
-
-
-
-

- -

-
Reminders
-

- Select a time and day to send yourself a reminder of an upcoming event, - so you don't panick and miss it. -

-
-
-
-
- -
- -
-
-
-
-

- -

-
SMS
-

- Provides a text messaging feature for both decks and reminders. Need to - remind yourself about an event? Turn on the option to send yourself an - alert. Want to keep your memory sharp? Our app will send you each question - with an answer following after, depending on which deck you choose. -

-
-
-
-
- -
- ) : ( - '' - )} -
- ); - } + {this.state.showFeatures ? ( +
+
+ +
+
+
+

+ +

+
Flashcards
+

+ Create decks of flashcards with associated tags. Type in + the question on the front and the answer on the back of + the flashcard. You can set your decks to private or + leave them public. Keep your mind sharp for the big exam + by quizzing yourself and flipping the flashcard to + reveal the answer you created. +

+
+
+
+ + +
+
+
+

+ +

+
Notes
+

+ Ideas and information swimming around in your head? + Capture all of them here. Type and save whatever you + want, whether it's business or personal, for future + reference. You can include URLs, images, and video + links. +

+
+
+
+ +
+
+ +
+
+
+

+ +

+
Lists
+

+ Prioritize what you intend to do for the day, week, + month or whenever by organizing a list of tasks. +

+
+
+
+
+ + +
+
+
+
+

+ +

+
Reminders
+

+ Select a time and day to send yourself a reminder of an + upcoming event, so you don't panick and miss it. +

+
+
+
+
+ +
+ +
+
+
+
+

+ +

+
SMS
+

+ Provides a text messaging feature for both decks and + reminders. Need to remind yourself about an event? Turn on + the option to send yourself an alert. Want to keep your + memory sharp? Our app will send you each question with an + answer following after, depending on which deck you + choose. +

+
+
+
+
+ +
+ ) : ( + "" + )} +
+ ); + } } export default Home; diff --git a/client/src/pages/Notes.js b/client/src/pages/Notes.js index 4a76bcf..7f620a6 100644 --- a/client/src/pages/Notes.js +++ b/client/src/pages/Notes.js @@ -1,213 +1,271 @@ -import React from 'react'; -import ReactQuill from 'react-quill'; -import moment from 'moment'; -import axios from 'axios'; -import { HashLink as Link } from 'react-router-hash-link'; -import DOMPurify from 'dompurify'; -import styled from 'styled-components'; +import React from "react"; +import ReactQuill from "react-quill"; +import moment from "moment"; +import axios from "axios"; +import { HashLink as Link } from "react-router-hash-link"; +import DOMPurify from "dompurify"; +import styled from "styled-components"; -import Sidebar from '../components/Sidebar'; +import Sidebar from "../components/Sidebar"; -import '../css/Notes.scss'; +import "../css/Notes.scss"; const Menu = styled.menu` - #sidebar { - top: 0; - } - .sidebar-nav__link--notes { - background: hsla(214, 100%, 96%, 1); - box-shadow: 0px 2px 1px #888, 0px -2px 1px #888; - border-left: 5px solid hsla(220, 15%, 23%, 1); - } - .sidebar-nav__link--notes .sidebar-nav__text { - color: black; - } + #sidebar { + top: 0; + } + .sidebar-nav__link--notes { + background: hsla(214, 100%, 96%, 1); + box-shadow: 0px 2px 1px #888, 0px -2px 1px #888; + border-left: 5px solid hsla(220, 15%, 23%, 1); + } + .sidebar-nav__link--notes .sidebar-nav__text { + color: black; + } `; class Note extends React.Component { - constructor(props) { - super(props); - this.state = { - text: '', - note: '', - notesArr: [], - userId: JSON.parse(localStorage.getItem('user')).id, - timeNdate: moment().format('ddd, MMMM Do YYYY, h:mm:ss a') - }; - this.handleChange = this.handleChange.bind(this); - // this.saveNote = this.saveNote.bind(this); - } + constructor(props) { + super(props); + this.state = { + text: "", + note: "", + notesArr: [], + userId: JSON.parse(localStorage.getItem("user")).id, + timeNdate: moment().format("ddd, MMMM Do YYYY, h:mm:ss a"), + }; + this.handleChange = this.handleChange.bind(this); + // this.saveNote = this.saveNote.bind(this); + } - modules = { - toolbar: [ - [ { header: [ 1, 2, false ] } ], - [ 'bold', 'italic', 'underline', 'strike', 'blockquote' ], - [ { list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' } ], - [ 'link', 'image', 'video', 'code-block' ] - ] - }; + modules = { + toolbar: [ + [{ header: [1, 2, false] }], + ["bold", "italic", "underline", "strike", "blockquote"], + [ + { list: "ordered" }, + { list: "bullet" }, + { indent: "-1" }, + { indent: "+1" }, + ], + ["link", "image", "video", "code-block"], + ], + }; - formats = [ - 'header', - 'bold', - 'italic', - 'underline', - 'strike', - 'blockquote', - 'list', - 'bullet', - 'indent', - 'link', - 'image', - 'video', - 'code-block' - ]; + formats = [ + "header", + "bold", + "italic", + "underline", + "strike", + "blockquote", + "list", + "bullet", + "indent", + "link", + "image", + "video", + "code-block", + ]; - handleChange(value) { - this.setState({ text: DOMPurify.sanitize(value) }); - } + handleChange(value) { + this.setState({ text: DOMPurify.sanitize(value) }); + } - getNotes = () => { - axios.get(`/notes/users/${this.state.userId}`).then((response) => { - // console.log(response.data); - this.setState({ - notesArr: [ ...response.data ] - }); - }); - }; + getNotes = () => { + axios.get(`/notes/users/${this.state.userId}`).then((response) => { + // console.log(response.data); + this.setState({ + notesArr: [...response.data], + }); + }); + }; - createNote = () => { - // console.log("Creating Note"); - // this.setState({ note: this.state.text }); - axios.post(`/notes/${this.state.userId}`, { note: this.state.text }).then((response) => { - // console.log(response); - this.getNotes(); - }); - }; + createNote = () => { + // console.log("Creating Note"); + // this.setState({ note: this.state.text }); + axios + .post(`/notes/${this.state.userId}`, { note: this.state.text }) + .then((response) => { + // console.log(response); + this.getNotes(); + }); + }; - deleteNote = (id) => { - axios.delete(`/notes/${id}`).then((response) => { - this.getNotes(); - }); - }; + deleteNote = (id) => { + axios.delete(`/notes/${id}`).then((response) => { + this.getNotes(); + }); + }; - componentDidMount() { - this.getNotes(); - document.querySelector('.ql-bold').setAttribute('data-balloon', 'Bold'); - document.querySelector('.ql-bold').setAttribute('data-balloon-pos', 'down'); - document.querySelector('.ql-italic').setAttribute('data-balloon', 'Italicize'); - document.querySelector('.ql-italic').setAttribute('data-balloon-pos', 'down'); - document.querySelector('.ql-underline').setAttribute('data-balloon', 'Underline'); - document.querySelector('.ql-underline').setAttribute('data-balloon-pos', 'down'); - document.querySelector('.ql-strike').setAttribute('data-balloon', 'Strikethrough'); - document.querySelector('.ql-strike').setAttribute('data-balloon-pos', 'down'); - document.querySelector('.ql-blockquote').setAttribute('data-balloon', 'Block quote'); - document.querySelector('.ql-blockquote').setAttribute('data-balloon-pos', 'down'); - document.querySelectorAll('.ql-list')[0].setAttribute('data-balloon', 'Ordered list'); - document.querySelectorAll('.ql-list')[0].setAttribute('data-balloon-pos', 'down'); - document.querySelectorAll('.ql-list')[1].setAttribute('data-balloon', 'Bulleted list'); - document.querySelectorAll('.ql-list')[1].setAttribute('data-balloon-pos', 'down'); - document.querySelectorAll('.ql-indent')[0].setAttribute('data-balloon', 'Indent left'); - document.querySelectorAll('.ql-indent')[0].setAttribute('data-balloon-pos', 'down'); - document.querySelectorAll('.ql-indent')[1].setAttribute('data-balloon', 'Indent right'); - document.querySelectorAll('.ql-indent')[1].setAttribute('data-balloon-pos', 'down'); - document.querySelector('.ql-link').setAttribute('data-balloon', 'Embed URL link'); - document.querySelector('.ql-link').setAttribute('data-balloon-pos', 'down'); - document.querySelector('.ql-image').setAttribute('data-balloon', 'Insert image'); - document.querySelector('.ql-image').setAttribute('data-balloon-pos', 'down'); - document.querySelector('.ql-video').setAttribute('data-balloon', 'Insert video URL'); - document.querySelector('.ql-video').setAttribute('data-balloon-pos', 'down'); - document.querySelector('.ql-code-block').setAttribute('data-balloon', 'Code block'); - document.querySelector('.ql-code-block').setAttribute('data-balloon-pos', 'down'); - } + componentDidMount() { + this.getNotes(); + document.querySelector(".ql-bold").setAttribute("data-balloon", "Bold"); + document.querySelector(".ql-bold").setAttribute("data-balloon-pos", "down"); + document + .querySelector(".ql-italic") + .setAttribute("data-balloon", "Italicize"); + document + .querySelector(".ql-italic") + .setAttribute("data-balloon-pos", "down"); + document + .querySelector(".ql-underline") + .setAttribute("data-balloon", "Underline"); + document + .querySelector(".ql-underline") + .setAttribute("data-balloon-pos", "down"); + document + .querySelector(".ql-strike") + .setAttribute("data-balloon", "Strikethrough"); + document + .querySelector(".ql-strike") + .setAttribute("data-balloon-pos", "down"); + document + .querySelector(".ql-blockquote") + .setAttribute("data-balloon", "Block quote"); + document + .querySelector(".ql-blockquote") + .setAttribute("data-balloon-pos", "down"); + document + .querySelectorAll(".ql-list")[0] + .setAttribute("data-balloon", "Ordered list"); + document + .querySelectorAll(".ql-list")[0] + .setAttribute("data-balloon-pos", "down"); + document + .querySelectorAll(".ql-list")[1] + .setAttribute("data-balloon", "Bulleted list"); + document + .querySelectorAll(".ql-list")[1] + .setAttribute("data-balloon-pos", "down"); + document + .querySelectorAll(".ql-indent")[0] + .setAttribute("data-balloon", "Indent left"); + document + .querySelectorAll(".ql-indent")[0] + .setAttribute("data-balloon-pos", "down"); + document + .querySelectorAll(".ql-indent")[1] + .setAttribute("data-balloon", "Indent right"); + document + .querySelectorAll(".ql-indent")[1] + .setAttribute("data-balloon-pos", "down"); + document + .querySelector(".ql-link") + .setAttribute("data-balloon", "Embed URL link"); + document.querySelector(".ql-link").setAttribute("data-balloon-pos", "down"); + document + .querySelector(".ql-image") + .setAttribute("data-balloon", "Insert image"); + document + .querySelector(".ql-image") + .setAttribute("data-balloon-pos", "down"); + document + .querySelector(".ql-video") + .setAttribute("data-balloon", "Insert video URL"); + document + .querySelector(".ql-video") + .setAttribute("data-balloon-pos", "down"); + document + .querySelector(".ql-code-block") + .setAttribute("data-balloon", "Code block"); + document + .querySelector(".ql-code-block") + .setAttribute("data-balloon-pos", "down"); + } - render() { - return ( -
- {/* Logout redirection */} - {this.props.handleUserRedirect()} + render() { + return ( +
+ {/* Logout redirection */} + {this.props.handleUserRedirect()} - - - - -
- {this.state.notesArr.map((item, index) => { - return ( -
-
-
-
-
-
-
- -
-
-
-
- ); - })} + + + + +
+ {this.state.notesArr.map((item, index) => { + return ( +
+
+
+
+
+
+
+ +
+
+
+
+ ); + })} -
- - -
-
- ); - } +
+ + +
+
+ ); + } } export default Note; diff --git a/client/src/pages/Reminder.js b/client/src/pages/Reminder.js index 0d814ee..4204c90 100644 --- a/client/src/pages/Reminder.js +++ b/client/src/pages/Reminder.js @@ -1,4 +1,4 @@ -import React, {Component} from "react"; +import React, { Component } from "react"; import moment from "moment-timezone"; import axios from "axios"; @@ -16,10 +16,10 @@ import { CardTitle, CardText, Col, - Row + Row, } from "reactstrap"; import DateTimePicker from "react-datetime-picker"; -import styled from 'styled-components'; +import styled from "styled-components"; import "../css/Reminder.scss"; @@ -76,14 +76,15 @@ const Calendar = styled.section` border-radius: 5px; margin-left: 7px; } - .react-datetime-picker__clear-button:hover, .react-datetime-picker__clear-button:active { + .react-datetime-picker__clear-button:hover, + .react-datetime-picker__clear-button:active { outline: none !important; border-radius: 5px; transition: box-shadow 150ms; box-shadow: 0 7px 8px rgb(124, 124, 124), 0 2px 2px rgb(187, 187, 187); position: relative; top: -1px; - } + } .react-datetime-picker__calendar-button { box-shadow: 0 2px 8px rgb(124, 124, 124), 0 2px 2px rgb(187, 187, 187); border: 1px solid dodgerblue; @@ -92,14 +93,15 @@ const Calendar = styled.section` border-radius: 5px; margin-left: 7px; } - .react-datetime-picker__calendar-button:hover, .react-datetime-picker__calendar-button:active { + .react-datetime-picker__calendar-button:hover, + .react-datetime-picker__calendar-button:active { outline: none !important; border-radius: 5px; transition: box-shadow 150ms; position: relative; top: -1px; box-shadow: 0 7px 8px rgb(124, 124, 124), 0 2px 2px rgb(187, 187, 187); - } + } .react-datetime-picker--open .react-datetime-picker__calendar-button { outline: none !important; border-top: 1px solid dodgerblue; @@ -121,78 +123,78 @@ const Calendar = styled.section` margin: auto; width: 300px; } - .react-calendar__navigation { + .react-calendar__navigation { border-top: 5px solid dodgerblue; } } `; class Reminder extends Component { - constructor(props) { - super(props); - this.state = { - item: "", - note: "", - date: new Date(), - modal: false, - phoneNumberSaved: false, - phone: "", - sendReminder: false, - alertTime: 0, - saveClicked: false, - events: [], - currentModal: "", - editingObj: {}, - userId: null - }; - } - - componentDidMount() { - console.log("start") - try { - const userId = JSON.parse(localStorage.getItem("user")).id, - redirect = !userId; - if (userId) { - this.setState(() => ({userId, redirect}), - () => { - this.getReminders(); - this.getUserInfo(); - }); + constructor(props) { + super(props); + this.state = { + item: "", + note: "", + date: new Date(), + modal: false, + phoneNumberSaved: false, + phone: "", + sendReminder: false, + alertTime: 0, + saveClicked: false, + events: [], + currentModal: "", + editingObj: {}, + userId: null, + }; + } + + componentDidMount() { + console.log("start"); + try { + const userId = JSON.parse(localStorage.getItem("user")).id, + redirect = !userId; + if (userId) { + this.setState( + () => ({ userId, redirect }), + () => { + this.getReminders(); + this.getUserInfo(); } - } catch (err) { - console.log(err); - } - } - - getReminders = () => { - console.log(this.state.userId) - axios.get("/reminders/users/" + this.state.userId) - .then (data => { - console.log(data); - this.setState({ - events: data.data - }) - } - ) + ); + } + } catch (err) { + console.log(err); } + } - getUserInfo = () => { - axios.get("/user/" + this.state.userId).then(data => { - console.log(data) - if (data.data[0].phoneNumber !== null) { - this.setState({ - phoneNumberSaved: true - }); - } + getReminders = () => { + console.log(this.state.userId); + axios.get("/reminders/users/" + this.state.userId).then((data) => { + console.log(data); + this.setState({ + events: data.data, }); - }; + }); + }; - toggle = () => { + getUserInfo = () => { + axios.get("/user/" + this.state.userId).then((data) => { + console.log(data); + if (data.data[0].phoneNumber !== null) { this.setState({ - modal: !this.state.modal + phoneNumberSaved: true, }); - this.clearModal(); - } + } + }); + }; + + toggle = () => { + this.setState({ + modal: !this.state.modal, + }); + this.clearModal(); + }; createEvent = () => { this.setState({ currentModal: "create" }); @@ -212,36 +214,36 @@ class Reminder extends Component { date: convertDate, // moment(obj.date.replace(":00.000Z", "").replace("T", " ")).format("YYYY-MM-DD HH:mm"), sendReminder: obj.sendAlert, - editingObj: obj + editingObj: obj, }); if (obj.sendAlert) { this.setState({ alertTime: obj.alertTime }); } }; - handleSubjectChange = event => { + handleSubjectChange = (event) => { // console.log(event.target.value) this.setState({ - item: event.target.value + item: event.target.value, }); }; - handleDateChange = date => { + handleDateChange = (date) => { console.log(date); this.setState({ date }); }; - handleNoteChange = event => { + handleNoteChange = (event) => { // console.log(event.target.value) this.setState({ - note: event.target.value + note: event.target.value, }); }; handleAlertChange = () => { // console.log(!this.state.privacy); this.setState({ - sendReminder: !this.state.sendReminder + sendReminder: !this.state.sendReminder, }); }; @@ -252,17 +254,17 @@ class Reminder extends Component { // console.log(event.target.checked); // }; - handleSelectChange = event => { + handleSelectChange = (event) => { this.setState({ - alertTime: event.target.value + alertTime: event.target.value, }); // console.log(event.target.value) }; - handlePhoneChange = event => { - console.log(event.target.value.replace(/\D/g, '')) + handlePhoneChange = (event) => { + console.log(event.target.value.replace(/\D/g, "")); this.setState({ - phone: event.target.value + phone: event.target.value, }); }; @@ -274,7 +276,7 @@ class Reminder extends Component { note: this.state.note, date: moment(this.state.date).format("YYYY-MM-DD HH:mm"), sendAlert: this.state.sendReminder, - userId: this.state.userId + userId: this.state.userId, }; if (this.state.sendReminder) { eventObj.alertTime = this.state.alertTime; @@ -283,35 +285,37 @@ class Reminder extends Component { } this.setState({ - modal: !this.state.modal + modal: !this.state.modal, }); if (!this.state.phoneNumberSaved && this.state.phone !== "") { - let phoneObj = { - phoneNumber: this.state.phone.replace(/\D/g, "") + phoneNumber: this.state.phone.replace(/\D/g, ""), }; - axios.put("/users/" + this.state.userId, phoneObj).then(data => { + axios.put("/users/" + this.state.userId, phoneObj).then((data) => { // console.log(data); this.setState({ - phoneNumberSaved: true + phoneNumberSaved: true, }); - let eventDate = moment(Date.now()).add(1, "minutes").format("YYYY-MM-DD HH:mm"); + let eventDate = moment(Date.now()) + .add(1, "minutes") + .format("YYYY-MM-DD HH:mm"); let newObj = { date: eventDate, notification: 0, - message: "You will be receiving event reminders to this number. Text STOP to unsubscribe.", + message: + "You will be receiving event reminders to this number. Text STOP to unsubscribe.", type: "initial text", - userId: this.state.userId + userId: this.state.userId, }; - axios.post("/appointment", newObj).then(data => { + axios.post("/appointment", newObj).then((data) => { console.log("phone number set - " + data); }); }); } - axios.put("/reminders", eventObj).then(data => { + axios.put("/reminders", eventObj).then((data) => { console.log(data); let eventDate = moment(eventObj.date).format("YYYY-MM-DD HH:mm"); let obj = { @@ -322,7 +326,7 @@ class Reminder extends Component { ).format("MMMM D")} at ${moment(eventDate).format("hh:mm A")}`, userId: this.state.userId, type: "reminder", - reminderId: eventObj.id + reminderId: eventObj.id, }; //if event was changed to send to an alert, create a new appointment @@ -332,7 +336,7 @@ class Reminder extends Component { ) { console.log("create appt"); - axios.post("/appointment", obj).then(function(data) { + axios.post("/appointment", obj).then(function (data) { console.log(data); }); } @@ -344,8 +348,8 @@ class Reminder extends Component { this.state.editingObj.date !== eventObj.date) ) { console.log("update appt"); - console.log(obj) - axios.put("/appointments/reminders", obj).then(function(data) { + console.log(obj); + axios.put("/appointments/reminders", obj).then(function (data) { console.log(data); }); } @@ -358,7 +362,7 @@ class Reminder extends Component { console.log(obj.reminderId); axios .delete("/appointments/reminders/" + obj.reminderId) - .then(function(data) { + .then(function (data) { console.log(data); }); } @@ -374,18 +378,18 @@ class Reminder extends Component { note: this.state.note, date: moment(this.state.date).format("YYYY-MM-DD HH:mm"), sendAlert: this.state.sendReminder, - userId: this.state.userId + userId: this.state.userId, }; if (this.state.sendReminder) { eventObj.alertTime = this.state.alertTime; } this.setState({ - modal: !this.state.modal + modal: !this.state.modal, }); console.log(eventObj); - axios.post("/reminder", eventObj).then(data => { + axios.post("/reminder", eventObj).then((data) => { //updates array of events in state to update the page display // this.setState({events: [...this.state.events, data.data]}) @@ -394,37 +398,41 @@ class Reminder extends Component { let obj = { date: eventDate, notification: this.state.alertTime, - message: `You have an upcoming event: ${this.state.item} on ${moment( + message: `You have an upcoming event: ${ + this.state.item + } on ${moment(eventDate).format("MMMM D")} at ${moment( eventDate - ).format("MMMM D")} at ${moment(eventDate).format("HH:mm")}`, + ).format("HH:mm")}`, userId: this.state.userId, type: "reminder", - reminderId: data.data.id + reminderId: data.data.id, }; - axios.post("/appointment", obj).then(function(data) { + axios.post("/appointment", obj).then(function (data) { console.log(data); }); if (!this.state.phoneNumberSaved && this.state.phone !== "") { - let phoneObj = { - phoneNumber: this.state.phone.replace(/\D/g, "") + phoneNumber: this.state.phone.replace(/\D/g, ""), }; - axios.put("/users/" + this.state.userId, phoneObj).then(data => { + axios.put("/users/" + this.state.userId, phoneObj).then((data) => { // console.log(data); this.setState({ - phoneNumberSaved: true + phoneNumberSaved: true, }); - - let eventDate = moment(Date.now()).add(1, "minutes").format("YYYY-MM-DD HH:mm"); + + let eventDate = moment(Date.now()) + .add(1, "minutes") + .format("YYYY-MM-DD HH:mm"); let newObj = { date: eventDate, notification: 0, - message: "You will be receiving event reminders to this number. Text STOP to unsubscribe.", + message: + "You will be receiving event reminders to this number. Text STOP to unsubscribe.", type: "initial text", - userId: this.state.userId + userId: this.state.userId, }; - axios.post("/appointment", newObj).then(data => { + axios.post("/appointment", newObj).then((data) => { // console.log("phone number set - " + data); }); }); @@ -438,15 +446,14 @@ class Reminder extends Component { } }; - deleteEvent = id => { - axios.delete("/appointments/reminders/" + id) - .then((data) => { - // console.log(data); - axios.delete("/reminders/" + id).then(data => { - console.log(data); - this.getReminders(); - }); + deleteEvent = (id) => { + axios.delete("/appointments/reminders/" + id).then((data) => { + // console.log(data); + axios.delete("/reminders/" + id).then((data) => { + console.log(data); + this.getReminders(); }); + }); }; //resets all states settings on the modal whenever it's opened or closed @@ -459,7 +466,7 @@ class Reminder extends Component { alert: 0, saveClicked: false, sendReminder: false, - alertTime: 0 + alertTime: 0, }); }; @@ -469,15 +476,23 @@ class Reminder extends Component { if (this.state.modal && this.state.currentModal === "create") { modalDisplay = ( - ); } else if (this.state.modal && this.state.currentModal === "edit") { modalDisplay = ( - - @@ -548,7 +563,14 @@ class Reminder extends Component { let phoneRequest; if (!this.state.phoneNumberSaved && this.state.sendReminder) { phoneRequest = ( - + @@ -570,71 +592,79 @@ class Reminder extends Component { {/* Logout Redirection */} {this.props.handleUserRedirect()} - + + + -
+
- +

-
- {/**************Display of existing events****************/} - {this.state.events.map((item, index) => { - return ( - - - - - <CardTitle> - {item.item} - </CardTitle> - -
- -

- {moment(item.date).format("ddd, MMMM D")} at{" "} - {moment(item.date.replace(":00.000Z", "").replace("T", " ")).format("hh:mma")} -

-

{item.note}

- -
- - -
- - - - ); - })} -
+
+ {/**************Display of existing events****************/} + {this.state.events.map((item, index) => { + return ( + + + + + <CardTitle>{item.item}</CardTitle> + +
+ + + {moment(item.date).format("ddd, MMMM D")} at{" "} + {moment( + item.date.replace(":00.000Z", "").replace("T", " ") + ).format("hh:mma")} + + {item.note} + +
+ + +
+ + + + ); + })} +
- + Create Event -
+ -
-

Date & Time (PST)

+
+

Date & Time (PST)

- Send Alert + + Send Alert +