From 2006ed4cfdfb70de03a123814012527dd5e13beb Mon Sep 17 00:00:00 2001 From: Lam Date: Tue, 10 Mar 2020 18:19:33 -0500 Subject: [PATCH 01/17] Updating custom lesson endpoint to allow updating existing lessons --- src/components/ExampleComponent/ExampleComponent.js | 2 +- src/pages/CreateAssignment/CreateAssignment.js | 2 +- src/utils/Firebase/firebase.js | 7 ++++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/ExampleComponent/ExampleComponent.js b/src/components/ExampleComponent/ExampleComponent.js index f6d9a18..285d23e 100644 --- a/src/components/ExampleComponent/ExampleComponent.js +++ b/src/components/ExampleComponent/ExampleComponent.js @@ -49,7 +49,7 @@ const ExampleComponent = ({ firebase }) => { let words = ["couch", "chair", "television"]; let dueDate = new Date(); - firebase.addCustomLesson( + firebase.setCustomLesson( adminAccountId, deploymentAccountIds, lessonTemplate, diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 3edd7d2..2f35a41 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -37,7 +37,7 @@ function CreateAssignment({ firebase }) { } const pushLesson = () => { - firebase.addCustomLesson( + firebase.setCustomLesson( LAM_ADMIN_ACCOUNT, deploymentAccountIds, "A2", diff --git a/src/utils/Firebase/firebase.js b/src/utils/Firebase/firebase.js index 31df450..23588ae 100644 --- a/src/utils/Firebase/firebase.js +++ b/src/utils/Firebase/firebase.js @@ -137,16 +137,17 @@ class Firebase { }) .catch(error => console.log("Error getting admin account: ", error)); - addCustomLesson = ( + setCustomLesson = ( adminAccountId, deploymentAccountIds, lessonTemplate, wordGroup, words, - dueDate + dueDate, + lessonDocId = null ) => { // Push specific custom lesson to admin account - let customLessonRef = this.db.collection("custom_lesson").doc(); + let customLessonRef = this.db.collection("custom_lesson").doc(lessonDocId); customLessonRef .set({ From 4276860d01f500ed41fbdd809568a78f9111a401 Mon Sep 17 00:00:00 2001 From: Lam Date: Thu, 12 Mar 2020 18:39:47 -0500 Subject: [PATCH 02/17] commit --- .../CreateAssignment/CreateAssignment.js | 15 +++---- src/utils/Firebase/firebase.js | 44 +++++++++---------- 2 files changed, 25 insertions(+), 34 deletions(-) diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 2f35a41..3135bec 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -9,18 +9,16 @@ import WordGroupSelector from "../../components/WordGroupSelector/WordGroupSelec const LAM_ADMIN_ACCOUNT = "AxtySwFjYwR0uEsyP3Ds9nO22CY2"; -function CreateAssignment({ firebase }) { +function CreateAssignment({ firebase, lessonDocId = null }) { const [words, setWords] = useState([]); const [wordGroup, setWordGroup] = useState(); const [date, setDate] = useState(); const [deploymentAccountIds, setDeploymentAccountIds] = useState([]); const [adminDeployments, setAdminDeployments] = useState([]); useEffect(() => { - firebase - .getDeploymentAccountsFromAdmin(LAM_ADMIN_ACCOUNT) - .then(deploymentAccounts => { - setAdminDeployments(deploymentAccounts); - }); + firebase.getDeploymentAccountsFromAdmin(LAM_ADMIN_ACCOUNT).then(deploymentAccounts => { + setAdminDeployments(deploymentAccounts); + }); }, [firebase]); function handleDatePickerChange(value) { @@ -59,10 +57,7 @@ function CreateAssignment({ firebase }) { - + diff --git a/src/utils/Firebase/firebase.js b/src/utils/Firebase/firebase.js index 23588ae..f382e43 100644 --- a/src/utils/Firebase/firebase.js +++ b/src/utils/Firebase/firebase.js @@ -37,9 +37,7 @@ class Firebase { .doc(`deployment_account/${deploymentAccountId}/`) .get() .then(deploymentAccountDoc => { - const lastMasteredLesson = deploymentAccountDoc.get( - "profile.glenLearn.lastMasteredLesson" - ); + const lastMasteredLesson = deploymentAccountDoc.get("profile.glenLearn.lastMasteredLesson"); return new Promise((resolve, reject) => { if (deploymentAccountDoc) { resolve(lastMasteredLesson); @@ -84,9 +82,7 @@ class Firebase { const customLessons = customLessonDocs.map(doc => doc.data()); return customLessons; }) - .catch(error => - console.log("Error getting all custom lessons: ", error) - ); + .catch(error => console.log("Error getting all custom lessons: ", error)); }) .catch(error => console.log("Error getting student account: ", error)); @@ -98,9 +94,7 @@ class Firebase { .then(adminDoc => { const deploymentIds = Object.keys(adminDoc.get("deployments")); const deploymentRefs = deploymentIds.map(id => - this.db - .collection(`deployment_account`) - .where("deploymentId", "==", id) + this.db.collection(`deployment_account`).where("deploymentId", "==", id) ); return Promise.all(deploymentRefs) @@ -118,22 +112,16 @@ class Firebase { .then(querySnapshot => { let deploymentDocs = querySnapshot.docs; for (let deploymentDoc of deploymentDocs) { - deployment.deploymentAccounts[ - deploymentDoc.id - ] = deploymentDoc.data(); + deployment.deploymentAccounts[deploymentDoc.id] = deploymentDoc.data(); } }) - .catch(error => - console.log("Error gettng all deployments: ", error) - ); + .catch(error => console.log("Error gettng all deployments: ", error)); deployments.push(deployment); } return deployments; }) - .catch(error => - console.log("Error getting all deployment refs: ", error) - ); + .catch(error => console.log("Error getting all deployment refs: ", error)); }) .catch(error => console.log("Error getting admin account: ", error)); @@ -148,6 +136,7 @@ class Firebase { ) => { // Push specific custom lesson to admin account let customLessonRef = this.db.collection("custom_lesson").doc(lessonDocId); + let currentAssignedDeploymentIds = customLessonRef.get("deploymentAccountIds"); customLessonRef .set({ @@ -166,20 +155,27 @@ class Firebase { let batch = this.db.batch(); let deploymentAccountId; + // Add/update deploymentAccount docs for (deploymentAccountId of deploymentAccountIds) { - let deploymentRef = this.db.doc( - `deployment_account/${deploymentAccountId}/` - ); + let deploymentRef = this.db.doc(`deployment_account/${deploymentAccountId}/`); batch.update(deploymentRef, { customLessons: app.firestore.FieldValue.arrayUnion(customLessonRef.id) }); } + // Remove old deployment assignments + for (let deploymentAccountId of currentAssignedDeploymentIds) { + if (!(deploymentAccountId in deploymentAccountIds)) { + let deploymentRef = this.db.doc(`deployment_account/${deploymentAccountId}/`); + batch.update(deploymentRef, { + customLessons: app.firestore.FieldValue.arrayRemove(customLessonRef.id) + }); + } + } + return batch .commit() - .catch(error => - console.log("Pushing custom lessons to deployments failed: ", error) - ); + .catch(error => console.log("Pushing custom lessons to deployments failed: ", error)); // needs better promise rejection }; } From aa89a5fb45db2b949ba183b703459f44d4fad900 Mon Sep 17 00:00:00 2001 From: Lam Date: Fri, 13 Mar 2020 00:25:12 -0500 Subject: [PATCH 03/17] Allowing editing of created lessons --- src/components/App/App.js | 3 +- src/components/DatePicker/DatePicker.js | 13 +- .../ExampleComponent/ExampleComponent.js | 93 +----------- src/components/StudentList/StudentList.js | 10 +- .../CreateAssignment/CreateAssignment.js | 33 +++- src/utils/Firebase/firebase.js | 141 ++++++++++++------ 6 files changed, 148 insertions(+), 145 deletions(-) diff --git a/src/components/App/App.js b/src/components/App/App.js index 3e12d15..017a315 100755 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -3,11 +3,12 @@ import "./App.scss"; import { withFirebase } from "utils/Firebase"; import { compose } from "recompose"; import CreateAssignment from "../../pages/CreateAssignment/CreateAssignment"; +import ExampleComponent from "../ExampleComponent/ExampleComponent.js"; function App() { return (
- +
); } diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js index 64ad913..068bcfa 100644 --- a/src/components/DatePicker/DatePicker.js +++ b/src/components/DatePicker/DatePicker.js @@ -1,11 +1,18 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import Calendar from "react-calendar/dist/entry.nostyle"; import "DatePicker/DatePicker.scss"; import { withFirebase } from "utils/Firebase"; function DatePicker(props) { + const [date, setDate] = useState(null); + + useEffect(() => { + if (props.assignedDate) setDate(props.assignedDate.toDate()); + else setDate(new Date()); + }, []); + function onChange(date) { - props.handleChange({ date }); + props.handleChange(date); } return ( @@ -14,7 +21,7 @@ function DatePicker(props) { onClickDay={event => { onChange(event); }} - defaultValue={new Date()} + value={date} className="calendar" calendarType="US" minDetail="month" diff --git a/src/components/ExampleComponent/ExampleComponent.js b/src/components/ExampleComponent/ExampleComponent.js index 285d23e..4b6d43e 100644 --- a/src/components/ExampleComponent/ExampleComponent.js +++ b/src/components/ExampleComponent/ExampleComponent.js @@ -1,5 +1,6 @@ import React, { useState, useEffect } from "react"; import { withFirebase } from "utils/Firebase"; +import CreateAssignment from "../../pages/CreateAssignment/CreateAssignment"; // Example constants const LAM_ADMIN_ACCOUNT = "AxtySwFjYwR0uEsyP3Ds9nO22CY2"; @@ -10,97 +11,19 @@ const FATIMA_STUDENT_ACCOUNT = "S1ewuj5tOwC7z6EGTP3e"; * Example of how to get customLessons given an adminID */ const ExampleComponent = ({ firebase }) => { - const [adminLessons, setAdminLessons] = useState(null); - const [studentLessons, setStudentLessons] = useState(null); - const [lastMasteredLesson, setLastMasteredLesson] = useState(null); - const [deployments, setDeployments] = useState(null); + const [customLessons, setCustomLessons] = useState([]); useEffect(() => { - // Get student accounts - firebase - .getDeploymentAccountsFromAdmin(LAM_ADMIN_ACCOUNT) - .then(deploymentAccounts => { - setDeployments(deploymentAccounts); - }); - - // Get custom lessons made by admin - firebase.getAdminCustomLessons(LAM_ADMIN_ACCOUNT).then(lessons => { - setAdminLessons(lessons); + firebase.getAdminCustomLessons(LAM_ADMIN_ACCOUNT).then(customLesson => { + setCustomLessons(customLesson); }); - - // Get custom lessons for student - firebase - .getDeploymentAccountCustomLessons(LAM_STUDENT_ACCOUNT) - .then(lessons => { - setStudentLessons(lessons); - }); - - // Get last mastered lesson - firebase.getLastMasteredLesson(LAM_STUDENT_ACCOUNT).then(lesson => { - setLastMasteredLesson(lesson); - }); - }, []); - - const pushCustomLesson = () => { - let adminAccountId = LAM_ADMIN_ACCOUNT; - let deploymentAccountIds = [LAM_STUDENT_ACCOUNT, FATIMA_STUDENT_ACCOUNT]; - let lessonTemplate = "A2"; - let wordGroup = "furniture"; - let words = ["couch", "chair", "television"]; - let dueDate = new Date(); - - firebase.setCustomLesson( - adminAccountId, - deploymentAccountIds, - lessonTemplate, - wordGroup, - words, - dueDate - ); - }; + }, [firebase]); return (
-
Example Component
-

-
Deployments
- {deployments && - deployments.map((deployment, index) => ( -
-
- Class {index} ({deployment.deploymentId}) students: -
-
    - {Object.keys(deployment.deploymentAccounts).map( - deploymentAccountId => ( -
  1. - {deploymentAccountId} :{" "} - { - deployment.deploymentAccounts[deploymentAccountId] - .username - } -
    2. - ) - )} -
-
- ))} - -
Lam's (admin) assigned custom lesson wordgroups:
- {adminLessons && - adminLessons.map(lesson =>
{lesson.wordGroup}
)} -

- -
Lam's (student) assigned custom lesson wordgroups:
- {studentLessons && - studentLessons.map(lesson =>
{lesson.wordGroup}
)} -

- -
Lam's (student) last mastered lesson:
-
{lastMasteredLesson}
-

- - + {customLessons[0] && ( + + )}
); }; diff --git a/src/components/StudentList/StudentList.js b/src/components/StudentList/StudentList.js index 037c5e4..7851f1f 100644 --- a/src/components/StudentList/StudentList.js +++ b/src/components/StudentList/StudentList.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { withFirebase } from "utils/Firebase"; import { Checkbox, @@ -14,14 +14,18 @@ import useStyles from "StudentList/StudentListStyles.js"; function StudentList(props) { const classes = useStyles(); - const [checked, setChecked] = React.useState([]); - const [open, setOpen] = React.useState( + const [checked, setChecked] = useState([]); + const [open, setOpen] = useState( Array(props.deployments.length) .fill() .map((_, i) => false) ); let deployments = props.deployments; + useEffect(() => { + if (props.assignedStudents) setChecked(props.assignedStudents); + }, []); + const handleClick = index => { let openCopy = [...open]; openCopy[index] = !openCopy[index]; diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 6a10c3f..57e3ba7 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -10,18 +10,29 @@ import WordGroupSelector from "../../components/WordGroupSelector/WordGroupSelec const LAM_ADMIN_ACCOUNT = "AxtySwFjYwR0uEsyP3Ds9nO22CY2"; -function CreateAssignment({ firebase, lessonDocId = null }) { +function CreateAssignment({ firebase, existingAssignment }) { const [words, setWords] = useState([]); const [wordGroup, setWordGroup] = useState(); const [date, setDate] = useState(); const [deploymentAccountIds, setDeploymentAccountIds] = useState([]); const [adminDeployments, setAdminDeployments] = useState([]); useEffect(() => { - firebase.getDeploymentAccountsFromAdmin(LAM_ADMIN_ACCOUNT).then(deploymentAccounts => { - setAdminDeployments(deploymentAccounts); - }); + firebase + .getDeploymentAccountsFromAdmin(LAM_ADMIN_ACCOUNT) + .then(deploymentAccounts => { + setAdminDeployments(deploymentAccounts); + }); + + if (existingAssignment) prePopulateAssignment(existingAssignment); }, [firebase]); + function prePopulateAssignment(existingAssignment) { + handleDatePickerChange(existingAssignment.dueDate); + handleStudentListChange(existingAssignment.deploymentAccountIds); + handleWordSelectorChange(existingAssignment.words); + handleWordGroupChange(existingAssignment.wordGroup); + } + function handleDatePickerChange(value) { setDate(value); } @@ -42,7 +53,8 @@ function CreateAssignment({ firebase, lessonDocId = null }) { "A2", wordGroup, words, - date.date + date, + existingAssignment?.id ); }; @@ -58,10 +70,17 @@ function CreateAssignment({ firebase, lessonDocId = null }) { - + - + diff --git a/src/utils/Firebase/firebase.js b/src/utils/Firebase/firebase.js index f382e43..5aefe1d 100644 --- a/src/utils/Firebase/firebase.js +++ b/src/utils/Firebase/firebase.js @@ -37,7 +37,9 @@ class Firebase { .doc(`deployment_account/${deploymentAccountId}/`) .get() .then(deploymentAccountDoc => { - const lastMasteredLesson = deploymentAccountDoc.get("profile.glenLearn.lastMasteredLesson"); + const lastMasteredLesson = deploymentAccountDoc.get( + "profile.glenLearn.lastMasteredLesson" + ); return new Promise((resolve, reject) => { if (deploymentAccountDoc) { resolve(lastMasteredLesson); @@ -55,7 +57,15 @@ class Firebase { .where("adminAccountId", "==", adminAccountId) .get() .then(lessonQuerySnapshot => { - const customLessons = lessonQuerySnapshot.docs.map(doc => doc.data()); + const customLessons = lessonQuerySnapshot.docs.map(doc => { + let docData = doc.data(); + let lessonDoc = { + id: doc.id, + ...docData + }; + + return lessonDoc; + }); return new Promise((resolve, reject) => { if (lessonQuerySnapshot) { resolve(customLessons); @@ -82,7 +92,9 @@ class Firebase { const customLessons = customLessonDocs.map(doc => doc.data()); return customLessons; }) - .catch(error => console.log("Error getting all custom lessons: ", error)); + .catch(error => + console.log("Error getting all custom lessons: ", error) + ); }) .catch(error => console.log("Error getting student account: ", error)); @@ -94,7 +106,9 @@ class Firebase { .then(adminDoc => { const deploymentIds = Object.keys(adminDoc.get("deployments")); const deploymentRefs = deploymentIds.map(id => - this.db.collection(`deployment_account`).where("deploymentId", "==", id) + this.db + .collection(`deployment_account`) + .where("deploymentId", "==", id) ); return Promise.all(deploymentRefs) @@ -112,16 +126,22 @@ class Firebase { .then(querySnapshot => { let deploymentDocs = querySnapshot.docs; for (let deploymentDoc of deploymentDocs) { - deployment.deploymentAccounts[deploymentDoc.id] = deploymentDoc.data(); + deployment.deploymentAccounts[ + deploymentDoc.id + ] = deploymentDoc.data(); } }) - .catch(error => console.log("Error gettng all deployments: ", error)); + .catch(error => + console.log("Error gettng all deployments: ", error) + ); deployments.push(deployment); } return deployments; }) - .catch(error => console.log("Error getting all deployment refs: ", error)); + .catch(error => + console.log("Error getting all deployment refs: ", error) + ); }) .catch(error => console.log("Error getting admin account: ", error)); @@ -135,48 +155,77 @@ class Firebase { lessonDocId = null ) => { // Push specific custom lesson to admin account - let customLessonRef = this.db.collection("custom_lesson").doc(lessonDocId); - let currentAssignedDeploymentIds = customLessonRef.get("deploymentAccountIds"); - - customLessonRef - .set({ - adminAccountId: adminAccountId, - deploymentAccountIds: deploymentAccountIds, - lessonTemplate: lessonTemplate, - wordGroup: wordGroup, - words: words, - dueDate: dueDate - }) - .catch(error => console.log("Error creating custom lesson: ", error)); + let customLessonRef = this.db.collection("custom_lesson"); + if (lessonDocId) customLessonRef = customLessonRef.doc(lessonDocId); + else customLessonRef.doc(); // TODO: needs error validation to stop function if customLesson fails + customLessonRef + .get() + .then(customLessonDoc => { + let currentAssignedDeploymentIds = customLessonDoc.get( + "deploymentAccountIds" + ); - // Push custom lessons to deployments - let batch = this.db.batch(); - let deploymentAccountId; - - // Add/update deploymentAccount docs - for (deploymentAccountId of deploymentAccountIds) { - let deploymentRef = this.db.doc(`deployment_account/${deploymentAccountId}/`); - batch.update(deploymentRef, { - customLessons: app.firestore.FieldValue.arrayUnion(customLessonRef.id) - }); - } - - // Remove old deployment assignments - for (let deploymentAccountId of currentAssignedDeploymentIds) { - if (!(deploymentAccountId in deploymentAccountIds)) { - let deploymentRef = this.db.doc(`deployment_account/${deploymentAccountId}/`); - batch.update(deploymentRef, { - customLessons: app.firestore.FieldValue.arrayRemove(customLessonRef.id) - }); - } - } - - return batch - .commit() - .catch(error => console.log("Pushing custom lessons to deployments failed: ", error)); - // needs better promise rejection + // Create or update lesson + customLessonRef + .set({ + adminAccountId: adminAccountId, + deploymentAccountIds: deploymentAccountIds, + lessonTemplate: lessonTemplate, + wordGroup: wordGroup, + words: words, + dueDate: dueDate + }) + .catch(error => console.log("Error creating custom lesson: ", error)); + + // Push custom lessons to deployments + let batch = this.db.batch(); + let deploymentAccountId; + + // Add/update deploymentAccount docs + for (deploymentAccountId of deploymentAccountIds) { + let deploymentRef = this.db.doc( + `deployment_account/${deploymentAccountId}/` + ); + batch.update(deploymentRef, { + customLessons: app.firestore.FieldValue.arrayUnion( + customLessonRef.id + ) + }); + } + + // Remove old deployment assignments + console.log("currently assigned"); + + console.log(currentAssignedDeploymentIds); + console.log("deployment accounts"); + + console.log(deploymentAccountIds); + for (let deploymentAccountId of currentAssignedDeploymentIds) { + if (!deploymentAccountIds.includes(deploymentAccountId)) { + console.log("to remove"); + console.log(deploymentAccountId); + + let deploymentRef = this.db.doc( + `deployment_account/${deploymentAccountId}/` + ); + batch.update(deploymentRef, { + customLessons: app.firestore.FieldValue.arrayRemove( + customLessonRef.id + ) + }); + } + } + + return batch + .commit() + .catch(error => + console.log("Pushing custom lessons to deployments failed: ", error) + ); + // needs better promise rejection + }) + .catch(error => console.log("Error getting custom lesson: ", error)); }; } From 3c122f0f39065ce753644d562a88b0f97dc4a55a Mon Sep 17 00:00:00 2001 From: Lam Date: Tue, 31 Mar 2020 13:18:19 -0400 Subject: [PATCH 04/17] finishing editing assignments functionality --- .../LessonInfoDisplay/LessonInfoDisplay.js | 29 ++++++++-- .../LessonInfoDisplay/LessonInfoDisplay.scss | 14 ++++- .../CreateAssignment/CreateAssignment.js | 24 ++++++--- .../CustomLessonsDisplay.js | 54 +++++++++---------- src/utils/Firebase/firebase.js | 10 ---- 5 files changed, 79 insertions(+), 52 deletions(-) diff --git a/src/components/LessonInfoDisplay/LessonInfoDisplay.js b/src/components/LessonInfoDisplay/LessonInfoDisplay.js index 8381a09..ce5dadc 100644 --- a/src/components/LessonInfoDisplay/LessonInfoDisplay.js +++ b/src/components/LessonInfoDisplay/LessonInfoDisplay.js @@ -1,11 +1,26 @@ -import React from "react"; +import React, { useState } from "react"; +import { compose } from "recompose"; +import { withRouter, Redirect } from "react-router-dom"; import "./LessonInfoDisplay.scss"; function LessonInfoDisplay(props) { + const [editLessonRedirect, setEditLessonRedirect] = useState(false); + function handleClose() { props.setDisplay(false); } + if (editLessonRedirect) { + return ( + + ); + } + return (
@@ -30,13 +45,19 @@ function LessonInfoDisplay(props) {
-
- +
); } -export default LessonInfoDisplay; +export default compose(withRouter)(LessonInfoDisplay); diff --git a/src/components/LessonInfoDisplay/LessonInfoDisplay.scss b/src/components/LessonInfoDisplay/LessonInfoDisplay.scss index 1421789..5e74af5 100644 --- a/src/components/LessonInfoDisplay/LessonInfoDisplay.scss +++ b/src/components/LessonInfoDisplay/LessonInfoDisplay.scss @@ -69,7 +69,10 @@ color: black; } -.CloseButton { +.CloseButton2 { + display: flex; + justify-content: center; + align-items: center; color: #ffc700; margin: auto; border-radius: 8px; @@ -79,7 +82,14 @@ transition-duration: 0.3s; } -.CloseButton:hover { +.CloseButton2:hover { background-color: #ffc700; color: white; } + +.buttonContainer { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; +} diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 84cb76d..5e27ac1 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -12,7 +12,9 @@ import DatePicker from "components/DatePicker/DatePicker.js"; import WordGroupSelector from "../../components/WordGroupSelector/WordGroupSelector"; import SectionSelector from "../../components/SectionSelector/SectionSelector"; -function CreateAssignment({ firebase }) { +function CreateAssignment(props) { + const { firebase } = props; + const { existingAssignment } = props?.location.state; const [submitted, setSubmitted] = useState(false); const [showVocab, setShowVocab] = useState(false); const [showWriting, setShowWriting] = useState(false); @@ -24,9 +26,11 @@ function CreateAssignment({ firebase }) { const [deploymentAccountIds, setDeploymentAccountIds] = useState([]); const [adminDeployments, setAdminDeployments] = useState([]); useEffect(() => { - firebase.getDeploymentAccountsFromAdmin(ADMIN_ACCOUNT).then(deploymentAccounts => { - setAdminDeployments(deploymentAccounts); - }); + firebase + .getDeploymentAccountsFromAdmin(ADMIN_ACCOUNT) + .then(deploymentAccounts => { + setAdminDeployments(deploymentAccounts); + }); if (existingAssignment) prePopulateAssignment(existingAssignment); }, [firebase]); @@ -36,6 +40,7 @@ function CreateAssignment({ firebase }) { handleStudentListChange(existingAssignment.deploymentAccountIds); handleWordSelectorChange(existingAssignment.words); handleWordGroupChange(existingAssignment.wordGroup); + handleSectionSelection(existingAssignment.lessonTemplate); } function handleDatePickerChange(value) { @@ -50,6 +55,11 @@ function CreateAssignment({ firebase }) { function handleWordGroupChange(value) { setWordGroup(value); } + function handleSectionSelection(value) { + if (value === "A") handleVocab(); + else if (value === "C") handlePhonics(); + else if (value === "A3") handleWriting(); + } function handleVocab() { setLessonType("A"); setShowVocab(true); @@ -71,19 +81,19 @@ function CreateAssignment({ firebase }) { const pushLesson = () => { firebase.setCustomLesson( - LAM_ADMIN_ACCOUNT, + ADMIN_ACCOUNT, deploymentAccountIds, lessonType, wordGroup, words, date, - existingAssignment?.id + props?.location.state.existingAssignment?.id ); setSubmitted(true); }; if (submitted) { - return ; + return ; } return ( diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js index f32ef18..1856147 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js @@ -3,17 +3,18 @@ import { withFirebase } from "utils/Firebase"; import { TEMPLATE_LESSON_MAP, ADMIN_ACCOUNT } from "utils/constants.js"; import "./CustomLessonsDisplay.css"; import { compose } from "recompose"; -import { withRouter, Redirect } from "react-router-dom"; +import { withRouter, Redirect, useHistory } from "react-router-dom"; import LessonDateDisplay from "../../components/LessonDateDisplay/LessonDateDisplay"; import LessonInfoDisplay from "../../components/LessonInfoDisplay/LessonInfoDisplay"; const CustomLessonsDisplay = ({ firebase }) => { const [adminLessons, setAdminLessons] = useState([]); - const [template, setTemplate] = useState(null); - const [lessonWords, setLessonWords] = useState(null); - const [students, setStudents] = useState([]); + const [displayLesson, setDisplayLesson] = useState(null); + const [displayLessonTemplate, setDisplayTemplate] = useState(null); + const [displayLessonStudents, setDisplayStudents] = useState([]); const [displayLessonInfo, setDisplayLessonInfo] = useState(false); const [createLessonRedirect, setCreateLessonRedirect] = useState(false); + const history = useHistory(); function orderAdminLessons(reverse) { const sortedLessons = [...adminLessons].sort((a, b) => { @@ -27,34 +28,36 @@ const CustomLessonsDisplay = ({ firebase }) => { } useEffect(() => { - // Get custom lessons made by admin - firebase.getAdminCustomLessons(ADMIN_ACCOUNT).then(lesson => { - setAdminLessons(lesson); - }); - }, [firebase]); + setTimeout(() => { + // Get custom lessons made by admin + firebase.getAdminCustomLessons(ADMIN_ACCOUNT).then(lesson => { + setAdminLessons(lesson); + }); + }, 50); // Timeout for firebase to update and display updated lessons properly + }, [history.length]); // Updates lessons when redirected to page from CreateAssignment function handleChangeDisplayLessonInfo(display) { setDisplayLessonInfo(display); } - function handleClick(lessonTemplate, words, studentIds) { + function handleClick(lesson) { handleChangeDisplayLessonInfo(!displayLessonInfo); - if (lessonTemplate in TEMPLATE_LESSON_MAP) { - setTemplate(TEMPLATE_LESSON_MAP[lessonTemplate]); + setDisplayLesson(lesson); + if (lesson.lessonTemplate in TEMPLATE_LESSON_MAP) { + setDisplayTemplate(TEMPLATE_LESSON_MAP[lesson.lessonTemplate]); } else { - setTemplate(lessonTemplate); + setDisplayTemplate(lesson.lessonTemplate); } - setLessonWords(words); Promise.all( - studentIds.map(id => { + lesson.deploymentAccountIds.map(id => { return firebase.getDeploymentAccountInformation(id); }) ).then(value => { let usernames = value.map(studentInfo => { return studentInfo["username"]; }); - setStudents(usernames); + setDisplayStudents(usernames); }); } @@ -85,25 +88,18 @@ const CustomLessonsDisplay = ({ firebase }) => {
{adminLessons && adminLessons.map((lesson, index) => ( -
- handleClick( - lesson.lessonTemplate, - lesson.words, - lesson.deploymentAccountIds - ) - } - > +
handleClick(lesson)}>
))}
- {displayLessonInfo && ( + {displayLessonInfo && displayLesson && ( )} diff --git a/src/utils/Firebase/firebase.js b/src/utils/Firebase/firebase.js index be469cb..530d212 100644 --- a/src/utils/Firebase/firebase.js +++ b/src/utils/Firebase/firebase.js @@ -212,18 +212,8 @@ class Firebase { }); } - // Remove old deployment assignments - console.log("currently assigned"); - - console.log(currentAssignedDeploymentIds); - console.log("deployment accounts"); - - console.log(deploymentAccountIds); for (let deploymentAccountId of currentAssignedDeploymentIds) { if (!deploymentAccountIds.includes(deploymentAccountId)) { - console.log("to remove"); - console.log(deploymentAccountId); - let deploymentRef = this.db.doc( `deployment_account/${deploymentAccountId}/` ); From 20cfcb235acfbd4aa2784ffd4a4e2d606ed4b321 Mon Sep 17 00:00:00 2001 From: Lam Date: Thu, 2 Apr 2020 21:13:31 -0400 Subject: [PATCH 05/17] fixing changes --- .../LessonInfoDisplay/LessonInfoDisplay.js | 6 ++--- .../LessonInfoDisplay/LessonInfoDisplay.scss | 6 ++--- .../CreateAssignment/CreateAssignment.js | 13 ++++++--- .../CustomLessonsDisplay.js | 7 ++--- src/utils/Firebase/firebase.js | 27 +++++++++++-------- 5 files changed, 36 insertions(+), 23 deletions(-) diff --git a/src/components/LessonInfoDisplay/LessonInfoDisplay.js b/src/components/LessonInfoDisplay/LessonInfoDisplay.js index ce5dadc..473b946 100644 --- a/src/components/LessonInfoDisplay/LessonInfoDisplay.js +++ b/src/components/LessonInfoDisplay/LessonInfoDisplay.js @@ -45,13 +45,13 @@ function LessonInfoDisplay(props) {
-
- diff --git a/src/components/LessonInfoDisplay/LessonInfoDisplay.scss b/src/components/LessonInfoDisplay/LessonInfoDisplay.scss index 5e74af5..5aa5a77 100644 --- a/src/components/LessonInfoDisplay/LessonInfoDisplay.scss +++ b/src/components/LessonInfoDisplay/LessonInfoDisplay.scss @@ -69,7 +69,7 @@ color: black; } -.CloseButton2 { +.LessonButton { display: flex; justify-content: center; align-items: center; @@ -82,12 +82,12 @@ transition-duration: 0.3s; } -.CloseButton2:hover { +.LessonButton:hover { background-color: #ffc700; color: white; } -.buttonContainer { +.ButtonContainer { display: flex; flex-direction: row; justify-content: flex-start; diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 5e27ac1..99158b4 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -79,7 +79,7 @@ function CreateAssignment(props) { setShowWriting(true); } - const pushLesson = () => { + function pushLesson() { firebase.setCustomLesson( ADMIN_ACCOUNT, deploymentAccountIds, @@ -90,10 +90,17 @@ function CreateAssignment(props) { props?.location.state.existingAssignment?.id ); setSubmitted(true); - }; + } if (submitted) { - return ; + return ( + + ); } return ( diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js index 1856147..bf4cceb 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js @@ -7,14 +7,15 @@ import { withRouter, Redirect, useHistory } from "react-router-dom"; import LessonDateDisplay from "../../components/LessonDateDisplay/LessonDateDisplay"; import LessonInfoDisplay from "../../components/LessonInfoDisplay/LessonInfoDisplay"; -const CustomLessonsDisplay = ({ firebase }) => { +const CustomLessonsDisplay = props => { + const { firebase } = props; const [adminLessons, setAdminLessons] = useState([]); const [displayLesson, setDisplayLesson] = useState(null); const [displayLessonTemplate, setDisplayTemplate] = useState(null); const [displayLessonStudents, setDisplayStudents] = useState([]); const [displayLessonInfo, setDisplayLessonInfo] = useState(false); const [createLessonRedirect, setCreateLessonRedirect] = useState(false); - const history = useHistory(); + const editLessonRedirect = props?.location.state?.redirect; function orderAdminLessons(reverse) { const sortedLessons = [...adminLessons].sort((a, b) => { @@ -34,7 +35,7 @@ const CustomLessonsDisplay = ({ firebase }) => { setAdminLessons(lesson); }); }, 50); // Timeout for firebase to update and display updated lessons properly - }, [history.length]); // Updates lessons when redirected to page from CreateAssignment + }, [editLessonRedirect]); // Updates lessons when redirected to page from CreateAssignment function handleChangeDisplayLessonInfo(display) { setDisplayLessonInfo(display); diff --git a/src/utils/Firebase/firebase.js b/src/utils/Firebase/firebase.js index 530d212..efac747 100644 --- a/src/utils/Firebase/firebase.js +++ b/src/utils/Firebase/firebase.js @@ -48,7 +48,7 @@ class Firebase { } }); }) - .catch(error => console.log("Error getting student account: ", error)); + .catch(error => console.error("Error getting student account: ", error)); // Gets custom lessons made by admin getAdminCustomLessons = adminAccountId => @@ -74,7 +74,7 @@ class Firebase { } }); }) - .catch(error => console.log("Error getting custom lessons: ", error)); + .catch(error => console.error("Error getting custom lessons: ", error)); getDeploymentAccountInformation = deploymentAccountId => this.db @@ -91,7 +91,7 @@ class Firebase { } }); }) - .catch(error => console.log("Error getting student account: ", error)); + .catch(error => console.error("Error getting student account: ", error)); // Get student's assigned custom lessons getDeploymentAccountCustomLessons = deploymentAccountId => @@ -110,10 +110,10 @@ class Firebase { return customLessons; }) .catch(error => - console.log("Error getting all custom lessons: ", error) + console.error("Error getting all custom lessons: ", error) ); }) - .catch(error => console.log("Error getting student account: ", error)); + .catch(error => console.error("Error getting student account: ", error)); // Get students of admin getDeploymentAccountsFromAdmin = adminAccountId => @@ -149,7 +149,7 @@ class Firebase { } }) .catch(error => - console.log("Error gettng all deployments: ", error) + console.error("Error gettng all deployments: ", error) ); deployments.push(deployment); @@ -157,10 +157,10 @@ class Firebase { return deployments; }) .catch(error => - console.log("Error getting all deployment refs: ", error) + console.error("Error getting all deployment refs: ", error) ); }) - .catch(error => console.log("Error getting admin account: ", error)); + .catch(error => console.error("Error getting admin account: ", error)); setCustomLesson = ( adminAccountId, @@ -194,7 +194,9 @@ class Firebase { words: words, dueDate: dueDate }) - .catch(error => console.log("Error creating custom lesson: ", error)); + .catch(error => + console.error("Error creating custom lesson: ", error) + ); // Push custom lessons to deployments let batch = this.db.batch(); @@ -228,11 +230,14 @@ class Firebase { return batch .commit() .catch(error => - console.log("Pushing custom lessons to deployments failed: ", error) + console.error( + "Pushing custom lessons to deployments failed: ", + error + ) ); // needs better promise rejection }) - .catch(error => console.log("Error getting custom lesson: ", error)); + .catch(error => console.error("Error getting custom lesson: ", error)); }; } From bfaf0625e2b7a4955ac3866aba40f42d1b6d5346 Mon Sep 17 00:00:00 2001 From: Lam Date: Fri, 3 Apr 2020 17:44:28 -0400 Subject: [PATCH 06/17] fixing section selection --- .../SectionSelector/SectionSelector.js | 8 +++++-- .../CreateAssignment/CreateAssignment.js | 21 +++++++++++++------ 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/SectionSelector/SectionSelector.js b/src/components/SectionSelector/SectionSelector.js index 5f669e3..686a811 100644 --- a/src/components/SectionSelector/SectionSelector.js +++ b/src/components/SectionSelector/SectionSelector.js @@ -1,17 +1,21 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { withFirebase } from "utils/Firebase"; import { Button, Box } from "@material-ui/core/"; import { Row, Col, Container } from "react-bootstrap"; import useStyles from "SectionSelector/SectionSelectorStyle.js"; function SectionSelector(props) { const classes = useStyles(); - const [button, setButton] = React.useState([true, true, true]); + const [button, setButton] = useState(props.default); const propFunctions = [ props.handlePhonics, props.handleVocab, props.handleWriting ]; + useEffect(() => { + setButton(props.default); + }, [props.default]); + const handleClick = index => { let buttonCopy = [true, true, true]; buttonCopy[index] = !buttonCopy[index]; diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 5c89cf7..c89290a 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -15,7 +15,7 @@ import InvalidAssignment from "../../components/InvalidAssignment/InvalidAssignm function CreateAssignment(props) { const { firebase } = props; - const { existingAssignment } = props?.location.state; + const { existingAssignment } = props?.location.state || {}; const [submitted, setSubmitted] = useState(false); const [showVocab, setShowVocab] = useState(false); const [showWriting, setShowWriting] = useState(false); @@ -30,9 +30,11 @@ function CreateAssignment(props) { const [invalidMessage, setInvalidMessage] = useState([]); useEffect(() => { - firebase.getDeploymentAccountsFromAdmin(ADMIN_ACCOUNT).then(deploymentAccounts => { - setAdminDeployments(deploymentAccounts); - }); + firebase + .getDeploymentAccountsFromAdmin(ADMIN_ACCOUNT) + .then(deploymentAccounts => { + setAdminDeployments(deploymentAccounts); + }); if (existingAssignment) prePopulateAssignment(existingAssignment); }, [firebase]); @@ -84,7 +86,10 @@ function CreateAssignment(props) { var validAssignment = true; // TODO: Add validation for Phonics based on pending requirements if (lessonType != "C" && (wordGroup == null || words.length < 4)) { - setInvalidMessage(invalidMessage => [...invalidMessage, "Please include at least 4 words."]); + setInvalidMessage(invalidMessage => [ + ...invalidMessage, + "Please include at least 4 words." + ]); validAssignment = false; } if (deploymentAccountIds < 1) { @@ -133,6 +138,7 @@ function CreateAssignment(props) { return ( <>
{invalidMessage.length > 0 && ( - + )}
From a6f285a12d8a018d8f8296dd0c355b9a2e308e95 Mon Sep 17 00:00:00 2001 From: Lam Date: Sat, 4 Apr 2020 12:27:22 -0400 Subject: [PATCH 07/17] formatting --- .../CreateAssignment/CreateAssignment.js | 31 ++++++++--- .../CustomLessonsDisplay.js | 5 +- src/utils/Firebase/firebase.js | 55 ++++++++++++++----- 3 files changed, 70 insertions(+), 21 deletions(-) diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index bdbefe7..80cdd54 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -2,7 +2,14 @@ import React, { useState, useEffect } from "react"; import { withRouter, Redirect } from "react-router-dom"; import "bootstrap/dist/css/bootstrap.min.css"; import "./CreateAssignment.scss"; -import { Container, Row, Col, Form, InputGroup, FormControl } from "react-bootstrap"; +import { + Container, + Row, + Col, + Form, + InputGroup, + FormControl +} from "react-bootstrap"; import { compose } from "recompose"; import { Button, Input } from "reactstrap"; import { ADMIN_ACCOUNT } from "utils/constants.js"; @@ -31,9 +38,11 @@ function CreateAssignment(props) { const [invalidMessage, setInvalidMessage] = useState([]); useEffect(() => { - firebase.getDeploymentAccountsFromAdmin(ADMIN_ACCOUNT).then(deploymentAccounts => { - setAdminDeployments(deploymentAccounts); - }); + firebase + .getDeploymentAccountsFromAdmin(ADMIN_ACCOUNT) + .then(deploymentAccounts => { + setAdminDeployments(deploymentAccounts); + }); if (existingAssignment) prePopulateAssignment(existingAssignment); }, [firebase]); @@ -108,7 +117,10 @@ function CreateAssignment(props) { var validAssignment = true; // TODO: Add validation for Phonics based on pending requirements if (lessonType != "C" && (wordGroup == null || words.length < 4)) { - setInvalidMessage(invalidMessage => [...invalidMessage, "Please include at least 4 words."]); + setInvalidMessage(invalidMessage => [ + ...invalidMessage, + "Please include at least 4 words." + ]); validAssignment = false; } if (deploymentAccountIds < 1) { @@ -194,7 +206,9 @@ function CreateAssignment(props) { - Lesson Name + + Lesson Name +
{invalidMessage.length > 0 && ( - + )}
diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js index 6661452..daaf374 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js @@ -73,7 +73,10 @@ const CustomLessonsDisplay = props => {
- - - +
+ +
+
+ +
+
+ +
{invalidMessage.length > 0 && ( Date: Tue, 7 Apr 2020 14:07:20 -0700 Subject: [PATCH 10/17] Added usernames, fixed card deletion bug --- src/components/LessonCards/LessonCard.js | 6 ++++-- src/components/LessonCards/LessonCard.scss | 13 +++++++++---- .../LessonCards/LessonCardsDisplay.js | 4 +++- src/pages/CreateAssignment/CreateAssignment.js | 18 ++++++++++++++---- 4 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/components/LessonCards/LessonCard.js b/src/components/LessonCards/LessonCard.js index d3e9611..4b7ab82 100644 --- a/src/components/LessonCards/LessonCard.js +++ b/src/components/LessonCards/LessonCard.js @@ -17,9 +17,11 @@ function LessonCard(props) { onClick={() => props.deleteLessons(props.lessonNumber)} >
-
+
{props.lessonStudents.map((student, index) => ( -
{student}
+
+ {student} +
))}
diff --git a/src/components/LessonCards/LessonCard.scss b/src/components/LessonCards/LessonCard.scss index c353bc7..8d5e6a2 100644 --- a/src/components/LessonCards/LessonCard.scss +++ b/src/components/LessonCards/LessonCard.scss @@ -34,18 +34,23 @@ .LessonCardMonth { margin: auto; - margin-right: 0.2vw; + margin-right: -3.5vw; } .LessonCardDay { margin: auto; - margin-left: 0.2vw; + margin-right: 2vw; } -.LessonCardStudents { +.LessonCardContent { display: flex; - flex-wrap: wrap; + flex-direction: column; overflow: scroll; + height: 11vw; + width: 12vw; +} + +.LessonCardStudent { font-family: $assignments-roboto-font; color: $assignments-font-color; } diff --git a/src/components/LessonCards/LessonCardsDisplay.js b/src/components/LessonCards/LessonCardsDisplay.js index 4f9bd0a..9782546 100644 --- a/src/components/LessonCards/LessonCardsDisplay.js +++ b/src/components/LessonCards/LessonCardsDisplay.js @@ -5,7 +5,9 @@ import DefaultCard from "./DefaultCard"; function LessonCardsDisplay(props) { function deleteLessonCard(lessonNumber) { - props.setCards(props.cards.splice(lessonNumber, lessonNumber)); + const tempCards = [...props.cards]; + tempCards.splice(lessonNumber, 1); + props.setCards(tempCards); } return ( diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 07bca44..eab96dc 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -115,10 +115,20 @@ function CreateAssignment(props) { validCard = false; } if (validCard) { - setLessonCards((lessonCards) => [ - ...lessonCards, - [deploymentAccountIds, date], - ]); + Promise.all( + deploymentAccountIds.map((id) => { + return firebase.getDeploymentAccountInformation(id); + }) + ).then((value) => { + let usernames = value.map((studentInfo) => { + return studentInfo["username"]; + }); + // Storing deploymentAccountIds specific to date (in addition to usernames) so that we don't need to repeat API call when lesson is pushed to DB + setLessonCards((lessonCards) => [ + ...lessonCards, + [usernames, date, deploymentAccountIds], + ]); + }); } } From ca8b7f6feb6dfb89846025f75dc610839dab5b46 Mon Sep 17 00:00:00 2001 From: Prashant Pokhriyal Date: Tue, 7 Apr 2020 16:47:28 -0700 Subject: [PATCH 11/17] Clickable Default Card, Buggy Reverse Ordered Cards --- src/components/LessonCards/DefaultCard.js | 2 +- src/components/LessonCards/DefaultCard.scss | 2 +- src/components/LessonCards/LessonCardsDisplay.js | 10 ++++++++-- src/pages/CreateAssignment/CreateAssignment.js | 14 +++++++------- 4 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/LessonCards/DefaultCard.js b/src/components/LessonCards/DefaultCard.js index 2062d11..1b41996 100644 --- a/src/components/LessonCards/DefaultCard.js +++ b/src/components/LessonCards/DefaultCard.js @@ -4,7 +4,7 @@ import "./DefaultCard.scss"; function DefaultCard(props) { return (
- Click Create to assign students to a selected date! + Click to assign students to a selected date!
); } diff --git a/src/components/LessonCards/DefaultCard.scss b/src/components/LessonCards/DefaultCard.scss index 3f8f903..f18f878 100644 --- a/src/components/LessonCards/DefaultCard.scss +++ b/src/components/LessonCards/DefaultCard.scss @@ -8,7 +8,7 @@ width: 10vw; border-radius: 20px; margin: 2vw; - margin-left: auto; + margin-right: auto; background-color: $assignments-background-color; color: $assignments-font-color; font-family: $assignments-roboto-font; diff --git a/src/components/LessonCards/LessonCardsDisplay.js b/src/components/LessonCards/LessonCardsDisplay.js index 9782546..6d1183a 100644 --- a/src/components/LessonCards/LessonCardsDisplay.js +++ b/src/components/LessonCards/LessonCardsDisplay.js @@ -10,11 +10,17 @@ function LessonCardsDisplay(props) { props.setCards(tempCards); } + function addLessonCard() { + props.addCard(); + } + return (
- {props.cards.length == 0 && } +
+ +
{props.cards.length > 0 && - props.cards.map((card, index) => ( + props.cards.reverse().map((card, index) => (
[ @@ -159,7 +160,7 @@ function CreateAssignment(props) { ]); validAssignment = false; } - if (lessonCards.length < 2) { + if (lessonCards.length < 1) { setInvalidMessage((invalidMessage) => [ ...invalidMessage, "Please assign students to due dates on the Calendar by clicking the Create Button.", @@ -253,12 +254,11 @@ function CreateAssignment(props) {
- -
-
- +
{props.cards.length > 0 && - props.cards.reverse().map((card, index) => ( + props.cards.map((card, index) => (
[ - ...lessonCards, [usernames, date, deploymentAccountIds], + ...lessonCards, ]); }); } From 756b1ecc45ea1b37c2be1391f7ccc271eb90b07f Mon Sep 17 00:00:00 2001 From: Prashant Pokhriyal Date: Thu, 9 Apr 2020 18:47:01 -0700 Subject: [PATCH 14/17] Fixed CSS --- public/images/icons/remove-card.svg | 3 ++ src/components/LessonCards/DefaultCard.js | 12 ------ src/components/LessonCards/LessonCard.js | 6 ++- src/components/LessonCards/LessonCard.scss | 6 +-- .../LessonCards/LessonCardsDisplay.scss | 16 -------- .../LessonCardsDisplay.js | 7 ++-- .../LessonCardsDisplay.scss} | 15 +++++++ .../CreateAssignment/CreateAssignment.js | 39 +++++++++---------- .../CreateAssignment/CreateAssignment.scss | 7 +--- 9 files changed, 48 insertions(+), 63 deletions(-) create mode 100644 public/images/icons/remove-card.svg delete mode 100644 src/components/LessonCards/DefaultCard.js delete mode 100644 src/components/LessonCards/LessonCardsDisplay.scss rename src/components/{LessonCards => LessonCardsDisplay}/LessonCardsDisplay.js (83%) rename src/components/{LessonCards/DefaultCard.scss => LessonCardsDisplay/LessonCardsDisplay.scss} (55%) diff --git a/public/images/icons/remove-card.svg b/public/images/icons/remove-card.svg new file mode 100644 index 0000000..559bf9e --- /dev/null +++ b/public/images/icons/remove-card.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/LessonCards/DefaultCard.js b/src/components/LessonCards/DefaultCard.js deleted file mode 100644 index 1b41996..0000000 --- a/src/components/LessonCards/DefaultCard.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import "./DefaultCard.scss"; - -function DefaultCard(props) { - return ( -
- Click to assign students to a selected date! -
- ); -} - -export default DefaultCard; diff --git a/src/components/LessonCards/LessonCard.js b/src/components/LessonCards/LessonCard.js index 4b7ab82..8df2d3a 100644 --- a/src/components/LessonCards/LessonCard.js +++ b/src/components/LessonCards/LessonCard.js @@ -13,9 +13,11 @@ function LessonCard(props) {
{toDateTime()[1]}
{toDateTime()[2]}
props.deleteLessons(props.lessonNumber)} - >
+ className="DeleteLessonCard" + > + +
{props.lessonStudents.map((student, index) => ( diff --git a/src/components/LessonCards/LessonCard.scss b/src/components/LessonCards/LessonCard.scss index 8d5e6a2..127ba7f 100644 --- a/src/components/LessonCards/LessonCard.scss +++ b/src/components/LessonCards/LessonCard.scss @@ -27,14 +27,12 @@ } .DeleteLessonCard { - height: 2vw; - width: 2vw; - background-color: lightcoral; + margin: 0.5vw; } .LessonCardMonth { margin: auto; - margin-right: -3.5vw; + margin-right: -3vw; } .LessonCardDay { diff --git a/src/components/LessonCards/LessonCardsDisplay.scss b/src/components/LessonCards/LessonCardsDisplay.scss deleted file mode 100644 index 198cefe..0000000 --- a/src/components/LessonCards/LessonCardsDisplay.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import "../../pages/Index/index.scss"; - -.LessonCardsDisplay { - display: flex; - flex-direction: row; - flex-wrap: wrap; - overflow: scroll; - width: 80vw; - height: 20vw; - border-radius: 20px; - margin: auto; - margin-top: 2vw; - margin-bottom: 2vw; - padding-bottom: 1vw; - background-color: $assignments-darker-color; -} diff --git a/src/components/LessonCards/LessonCardsDisplay.js b/src/components/LessonCardsDisplay/LessonCardsDisplay.js similarity index 83% rename from src/components/LessonCards/LessonCardsDisplay.js rename to src/components/LessonCardsDisplay/LessonCardsDisplay.js index f4d5110..b432240 100644 --- a/src/components/LessonCards/LessonCardsDisplay.js +++ b/src/components/LessonCardsDisplay/LessonCardsDisplay.js @@ -1,7 +1,6 @@ import React from "react"; import "./LessonCardsDisplay.scss"; -import LessonCard from "./LessonCard"; -import DefaultCard from "./DefaultCard"; +import LessonCard from "../LessonCards/LessonCard"; function LessonCardsDisplay(props) { function deleteLessonCard(lessonNumber) { @@ -17,7 +16,9 @@ function LessonCardsDisplay(props) { return (
- +
+ Click to assign students to a selected date! +
{props.cards.length > 0 && props.cards.map((card, index) => ( diff --git a/src/components/LessonCards/DefaultCard.scss b/src/components/LessonCardsDisplay/LessonCardsDisplay.scss similarity index 55% rename from src/components/LessonCards/DefaultCard.scss rename to src/components/LessonCardsDisplay/LessonCardsDisplay.scss index f18f878..44180e0 100644 --- a/src/components/LessonCards/DefaultCard.scss +++ b/src/components/LessonCardsDisplay/LessonCardsDisplay.scss @@ -1,5 +1,20 @@ @import "../../pages/Index/index.scss"; +.LessonCardsDisplay { + display: flex; + flex-direction: row; + flex-wrap: wrap; + overflow: scroll; + width: 80vw; + height: 20vw; + border-radius: 20px; + margin: auto; + margin-top: 2vw; + margin-bottom: 2vw; + padding-bottom: 1vw; + background-color: $assignments-darker-color; +} + .DefaultCard { display: flex; flex-wrap: wrap; diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 459e97a..b45a95c 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -8,7 +8,7 @@ import { Col, Form, InputGroup, - FormControl, + FormControl } from "react-bootstrap"; import { compose } from "recompose"; import { Button, Input } from "reactstrap"; @@ -19,7 +19,7 @@ import DatePicker from "components/DatePicker/DatePicker.js"; import WordGroupSelector from "../../components/WordGroupSelector/WordGroupSelector"; import SectionSelector from "../../components/SectionSelector/SectionSelector"; import InvalidAssignment from "../../components/InvalidAssignment/InvalidAssignment"; -import LessonCardsDisplay from "../../components/LessonCards/LessonCardsDisplay"; +import LessonCardsDisplay from "../../components/LessonCardsDisplay/LessonCardsDisplay"; function CreateAssignment(props) { const { firebase } = props; @@ -43,7 +43,7 @@ function CreateAssignment(props) { useEffect(() => { firebase .getDeploymentAccountsFromAdmin(ADMIN_ACCOUNT) - .then((deploymentAccounts) => { + .then(deploymentAccounts => { setAdminDeployments(deploymentAccounts); }); @@ -99,35 +99,34 @@ function CreateAssignment(props) { setShowWriting(true); } function createLessonCard() { - console.log("Creating New Card!"); var validCard = true; if (deploymentAccountIds < 1) { - setInvalidMessage((invalidMessage) => [ + setInvalidMessage(invalidMessage => [ ...invalidMessage, - "Please assign to at least one student.", + "Please assign to at least one student." ]); validCard = false; } if (date == null) { - setInvalidMessage((invalidMessage) => [ + setInvalidMessage(invalidMessage => [ ...invalidMessage, - "Please select a date on the calendar.", + "Please select a date on the calendar." ]); validCard = false; } if (validCard) { Promise.all( - deploymentAccountIds.map((id) => { + deploymentAccountIds.map(id => { return firebase.getDeploymentAccountInformation(id); }) - ).then((value) => { - let usernames = value.map((studentInfo) => { + ).then(value => { + let usernames = value.map(studentInfo => { return studentInfo["username"]; }); // Storing deploymentAccountIds specific to date (in addition to usernames) so that we don't need to repeat API call when lesson is pushed to DB - setLessonCards((lessonCards) => [ + setLessonCards(lessonCards => [ [usernames, date, deploymentAccountIds], - ...lessonCards, + ...lessonCards ]); }); } @@ -154,16 +153,16 @@ function CreateAssignment(props) { var validAssignment = true; // TODO: Add validation for Phonics based on pending requirements if (lessonType != "C" && (wordGroup == null || words.length < 4)) { - setInvalidMessage((invalidMessage) => [ + setInvalidMessage(invalidMessage => [ ...invalidMessage, - "Please include at least 4 words.", + "Please include at least 4 words." ]); validAssignment = false; } if (lessonCards.length < 1) { - setInvalidMessage((invalidMessage) => [ + setInvalidMessage(invalidMessage => [ ...invalidMessage, - "Please assign students to due dates on the Calendar by clicking the Create Button.", + "Please assign students to due dates on the Calendar by clicking the Create Button." ]); validAssignment = false; } @@ -172,7 +171,7 @@ function CreateAssignment(props) { } } - const pushLesson = (lessonNameValue) => { + const pushLesson = lessonNameValue => { firebase.setCustomLesson( ADMIN_ACCOUNT, deploymentAccountIds, @@ -191,7 +190,7 @@ function CreateAssignment(props) { ); @@ -220,7 +219,7 @@ function CreateAssignment(props) { className="input" placeholder={"Ex. Vocab"} defaultValue={lessonName || ""} - onChange={(e) => handleLessonNameChange(e.target.value)} + onChange={e => handleLessonNameChange(e.target.value)} />
diff --git a/src/pages/CreateAssignment/CreateAssignment.scss b/src/pages/CreateAssignment/CreateAssignment.scss index 82cbc97..b804689 100644 --- a/src/pages/CreateAssignment/CreateAssignment.scss +++ b/src/pages/CreateAssignment/CreateAssignment.scss @@ -16,12 +16,12 @@ font-weight: bold; border-radius: 1em; margin-left: 10em; - // margin-right: 1em; position: "absolute"; } .name-assignment { margin: auto; + width: 60vw; } .input { color: $assignments-font-color; @@ -31,8 +31,6 @@ font-family: $assignments-roboto-font; font-weight: bold; width: 20vw; - position: absolute; - left: 20%; } .input-header { color: $assignments-background-color; @@ -41,9 +39,6 @@ border-radius: 1em; font-family: $assignments-roboto-font; font-weight: bold; - width: 10vw; - position: absolute; - left: 10%; } .spacing { From 3fbd6d93f3e3c73479b41481cac5d407b3136f26 Mon Sep 17 00:00:00 2001 From: Prashant Pokhriyal Date: Tue, 14 Apr 2020 00:22:13 -0700 Subject: [PATCH 15/17] Updated Lesson Cards, commented out API issues on Lesson Cards Display --- src/components/LessonCards/LessonCard.js | 12 ++--- src/components/LessonCards/LessonCard.scss | 11 ++--- .../LessonCardsDisplay/LessonCardsDisplay.js | 33 +++++++------- .../CreateAssignment/CreateAssignment.js | 45 +++++++++++-------- .../CustomLessonsDisplay.js | 16 ++++--- 5 files changed, 63 insertions(+), 54 deletions(-) diff --git a/src/components/LessonCards/LessonCard.js b/src/components/LessonCards/LessonCard.js index 8df2d3a..0e8ec7c 100644 --- a/src/components/LessonCards/LessonCard.js +++ b/src/components/LessonCards/LessonCard.js @@ -2,18 +2,18 @@ import React from "react"; import "./LessonCard.scss"; function LessonCard(props) { - function toDateTime() { - let dateComponents = props.lessonDate.toDateString().split(" "); - return dateComponents; + function getCardDate() { + var dateComponents = props.lessonDate.split(" "); + var dateString = dateComponents[1] + " " + dateComponents[2]; + return dateString; } return (
-
{toDateTime()[1]}
-
{toDateTime()[2]}
+
{getCardDate()}
props.deleteLessons(props.lessonNumber)} + onClick={() => props.deleteCard(props.lessonDate)} className="DeleteLessonCard" > diff --git a/src/components/LessonCards/LessonCard.scss b/src/components/LessonCards/LessonCard.scss index 127ba7f..19aa3ed 100644 --- a/src/components/LessonCards/LessonCard.scss +++ b/src/components/LessonCards/LessonCard.scss @@ -27,17 +27,12 @@ } .DeleteLessonCard { - margin: 0.5vw; + margin-top: 0.5vw; + margin-right: 0.75vw; } -.LessonCardMonth { +.LessonCardDate { margin: auto; - margin-right: -3vw; -} - -.LessonCardDay { - margin: auto; - margin-right: 2vw; } .LessonCardContent { diff --git a/src/components/LessonCardsDisplay/LessonCardsDisplay.js b/src/components/LessonCardsDisplay/LessonCardsDisplay.js index b432240..0614101 100644 --- a/src/components/LessonCardsDisplay/LessonCardsDisplay.js +++ b/src/components/LessonCardsDisplay/LessonCardsDisplay.js @@ -3,16 +3,14 @@ import "./LessonCardsDisplay.scss"; import LessonCard from "../LessonCards/LessonCard"; function LessonCardsDisplay(props) { - function deleteLessonCard(lessonNumber) { - const tempCards = [...props.cards]; - tempCards.splice(lessonNumber, 1); - props.setCards(tempCards); - } - function addLessonCard() { props.addCard(); } + function removeLessonCard(cardDate) { + props.removeCard(cardDate); + } + return (
@@ -20,17 +18,18 @@ function LessonCardsDisplay(props) { Click to assign students to a selected date!
- {props.cards.length > 0 && - props.cards.map((card, index) => ( -
- -
- ))} + {Object.keys(props.cards).length > 0 && + Object.keys(props.cards) + .reverse() + .map((date, index) => ( +
+ +
+ ))}
); } diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index b45a95c..bc45d09 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -2,16 +2,9 @@ import React, { useState, useEffect } from "react"; import { withRouter, Redirect } from "react-router-dom"; import "bootstrap/dist/css/bootstrap.min.css"; import "./CreateAssignment.scss"; -import { - Container, - Row, - Col, - Form, - InputGroup, - FormControl -} from "react-bootstrap"; +import { Container, Row, Col, InputGroup, FormControl } from "react-bootstrap"; import { compose } from "recompose"; -import { Button, Input } from "reactstrap"; +import { Button } from "reactstrap"; import { ADMIN_ACCOUNT } from "utils/constants.js"; import { withFirebase } from "utils/Firebase"; import StudentList from "components/StudentList/StudentList"; @@ -38,7 +31,7 @@ function CreateAssignment(props) { // Message that displays when an assignment hasn't been created properly const [invalidMessage, setInvalidMessage] = useState([]); // A lesson "card" contains a group of students that have been assigned a due date for the current lesson. - const [lessonCards, setLessonCards] = useState([]); + const [lessonCards, setLessonCards] = useState({}); useEffect(() => { firebase @@ -113,6 +106,12 @@ function CreateAssignment(props) { "Please select a date on the calendar." ]); validCard = false; + } else if (date in lessonCards) { + setInvalidMessage(invalidMessage => [ + ...invalidMessage, + "Cannot have duplicate dates in the same lesson." + ]); + validCard = false; } if (validCard) { Promise.all( @@ -123,14 +122,18 @@ function CreateAssignment(props) { let usernames = value.map(studentInfo => { return studentInfo["username"]; }); - // Storing deploymentAccountIds specific to date (in addition to usernames) so that we don't need to repeat API call when lesson is pushed to DB - setLessonCards(lessonCards => [ - [usernames, date, deploymentAccountIds], - ...lessonCards - ]); + setLessonCards({ + ...lessonCards, + [date]: [deploymentAccountIds, usernames] + }); }); } } + function deleteLessonCard(cardDate) { + const tempCards = { ...lessonCards }; + delete tempCards[cardDate]; + setLessonCards(tempCards); + } function verifyNameAndPush() { var options = { month: "long" }; @@ -152,7 +155,7 @@ function CreateAssignment(props) { function validateAssignment() { var validAssignment = true; // TODO: Add validation for Phonics based on pending requirements - if (lessonType != "C" && (wordGroup == null || words.length < 4)) { + if (lessonType !== "C" && (wordGroup == null || words.length < 4)) { setInvalidMessage(invalidMessage => [ ...invalidMessage, "Please include at least 4 words." @@ -172,13 +175,19 @@ function CreateAssignment(props) { } const pushLesson = lessonNameValue => { + var dates = {}; + const lessonKeys = Object.keys(lessonCards); + for (const key of lessonKeys) { + dates[key] = lessonCards[key][0]; + } + firebase.setCustomLesson( ADMIN_ACCOUNT, deploymentAccountIds, lessonType, wordGroup, words, - date, + dates, lessonNameValue, existingAssignment?.id ); @@ -256,7 +265,7 @@ function CreateAssignment(props) {
diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js index 39598c6..d713bae 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js @@ -80,24 +80,30 @@ const CustomLessonsDisplay = props => { > Create Lesson - + */}
{adminLessons && adminLessons.map(lesson => ( -
handleClick(lesson)}> + //
handleClick(lesson)}> + // + //
+ + // TODO: Redo Lesson Info Display. + // Also commented out the above code due to API issues (fix once page / LessonInfoDisplay overhauled) +
))}
- {displayLessonInfo && displayLesson && ( + {/* {displayLessonInfo && displayLesson && ( { studentNames={displayLessonStudents} setDisplay={handleChangeDisplayLessonInfo} /> - )} + )} */}
); From 8b14072edc7a7e9d8aae1b296af261b399dfbdb0 Mon Sep 17 00:00:00 2001 From: Lam Date: Tue, 14 Apr 2020 19:30:12 -0400 Subject: [PATCH 16/17] edit button displays properly --- .../CreateAssignment/CreateAssignment.js | 36 +++++++++++++++++-- .../CustomLessonsDisplay.js | 25 ++++++++----- 2 files changed, 50 insertions(+), 11 deletions(-) diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index bc45d09..f62781b 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -43,9 +43,41 @@ function CreateAssignment(props) { if (existingAssignment) prePopulateAssignment(existingAssignment); }, [firebase]); + function parseCardsFromLesson(lesson) { + let lessonCards = {}; + let deploymentAccountIds = new Set(); + for (const dueDate in lesson.dueDates) { + for (const deploymentAccount of lesson.dueDates[dueDate]) { + deploymentAccountIds.add(deploymentAccount); + } + } + + let deploymentNameMap = {}; + Array.from(deploymentAccountIds).forEach(id => { + firebase.getDeploymentAccountInformation(id).then(deploymentAccount => { + deploymentNameMap[id] = deploymentAccount.username; + }).catch(error => console.error("Error getting custom lesson: ", error)); + }) + + for (const date in lesson.dueDates) { + let lessonCard = [[], []]; + for (const deploymentAccountId of lesson.dueDates[date]) { + lessonCard[0].push(deploymentAccountId); // inputting account id + lessonCard[1].push(deploymentNameMap[deploymentAccountId]); // input corresponding username + } + + lessonCards[date] = lessonCard; + } + + setLessonCards(lessonCards); + } + function prePopulateAssignment(existingAssignment) { - handleDatePickerChange(existingAssignment.dueDate.toDate()); - handleStudentListChange(existingAssignment.deploymentAccountIds); + parseCardsFromLesson(existingAssignment); + // handleDatePickerChange(existingAssignment.dueDate.toDate()); + // handleStudentListChange(existingAssignment.deploymentAccountIds); + + // TODO: make sure lesson cards display properly, date, deploymentAccounts are updated to first card handleWordSelectorChange(existingAssignment.words); handleWordGroupChange(existingAssignment.wordGroup); handleLessonNameChange(existingAssignment.lessonName); diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js index d713bae..e93d2fd 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js @@ -52,8 +52,15 @@ const CustomLessonsDisplay = props => { setDisplayTemplate(lesson.lessonTemplate); } + let deploymentAccountIds = new Set(); + for (const dueDate in lesson.dueDates) { + for (const deploymentAccount of lesson.dueDates[dueDate]) { + deploymentAccountIds.add(deploymentAccount); + } + } + Promise.all( - lesson.deploymentAccountIds.map(id => { + Array.from(deploymentAccountIds).map(id => { return firebase.getDeploymentAccountInformation(id); }) ).then(value => { @@ -91,19 +98,19 @@ const CustomLessonsDisplay = props => {
{adminLessons && adminLessons.map(lesson => ( - //
handleClick(lesson)}> - // - //
+
handleClick(lesson)}> + +
// TODO: Redo Lesson Info Display. // Also commented out the above code due to API issues (fix once page / LessonInfoDisplay overhauled) -
- -
+ //
+ // + //
))}
- {/* {displayLessonInfo && displayLesson && ( + {displayLessonInfo && displayLesson && ( { studentNames={displayLessonStudents} setDisplay={handleChangeDisplayLessonInfo} /> - )} */} + )}
); From b351d7ca1d2ea07703548d92b81a208e83e625a6 Mon Sep 17 00:00:00 2001 From: Prashant Pokhriyal Date: Tue, 14 Apr 2020 18:56:11 -0700 Subject: [PATCH 17/17] Date Bugs Fixed and PR Changes --- src/components/LessonCards/LessonCard.js | 4 +- .../LessonCardsDisplay/LessonCardsDisplay.js | 24 ++++------- .../CreateAssignment/CreateAssignment.js | 40 ++++++++++++++++--- .../CustomLessonsDisplay.js | 9 ++++- 4 files changed, 51 insertions(+), 26 deletions(-) diff --git a/src/components/LessonCards/LessonCard.js b/src/components/LessonCards/LessonCard.js index 0e8ec7c..fe9f929 100644 --- a/src/components/LessonCards/LessonCard.js +++ b/src/components/LessonCards/LessonCard.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import "./LessonCard.scss"; function LessonCard(props) { @@ -16,7 +16,7 @@ function LessonCard(props) { onClick={() => props.deleteCard(props.lessonDate)} className="DeleteLessonCard" > - + Close
diff --git a/src/components/LessonCardsDisplay/LessonCardsDisplay.js b/src/components/LessonCardsDisplay/LessonCardsDisplay.js index 0614101..4e8c411 100644 --- a/src/components/LessonCardsDisplay/LessonCardsDisplay.js +++ b/src/components/LessonCardsDisplay/LessonCardsDisplay.js @@ -3,17 +3,9 @@ import "./LessonCardsDisplay.scss"; import LessonCard from "../LessonCards/LessonCard"; function LessonCardsDisplay(props) { - function addLessonCard() { - props.addCard(); - } - - function removeLessonCard(cardDate) { - props.removeCard(cardDate); - } - return (
-
+
Click to assign students to a selected date!
@@ -21,14 +13,12 @@ function LessonCardsDisplay(props) { {Object.keys(props.cards).length > 0 && Object.keys(props.cards) .reverse() - .map((date, index) => ( -
- -
+ .map(date => ( + ))}
); diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 5f340f4..c62b52d 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -33,6 +33,7 @@ function CreateAssignment(props) { const [invalidMessage, setInvalidMessage] = useState([]); // A lesson "card" contains a group of students that have been assigned a due date for the current lesson. const [lessonCards, setLessonCards] = useState({}); + const [lessonCreationDate, setLessonCreationDate] = useState(); useEffect(() => { firebase @@ -42,6 +43,13 @@ function CreateAssignment(props) { }); if (existingAssignment) prePopulateAssignment(existingAssignment); + let originalDate = new Date(); + // The following are set to 0 to allow for edge case where teacher wants to include today in lesson dates. + originalDate.setHours(0); + originalDate.setMinutes(0); + originalDate.setSeconds(0); + originalDate.setMilliseconds(0); + setLessonCreationDate(originalDate); }, [firebase]); function prePopulateAssignment(existingAssignment) { @@ -113,6 +121,12 @@ function CreateAssignment(props) { "Cannot have duplicate dates in the same lesson." ]); validCard = false; + } else if (date.getTime() < lessonCreationDate.getTime()) { + setInvalidMessage(invalidMessage => [ + ...invalidMessage, + "Cannot select a date before the current date." + ]); + validCard = false; } if (validCard) { Promise.all( @@ -138,9 +152,11 @@ function CreateAssignment(props) { function verifyNameAndPush() { var options = { month: "long" }; - let month = new Intl.DateTimeFormat("en-US", options).format(date); - let day = date.getDate(); - let year = date.getFullYear(); + let month = new Intl.DateTimeFormat("en-US", options).format( + lessonCreationDate + ); + let day = lessonCreationDate.getDate(); + let year = lessonCreationDate.getFullYear(); let defaultName = `${wordGroup}: ${month} ${day} ${year}`; if (!lessonName) { @@ -155,8 +171,7 @@ function CreateAssignment(props) { } function validateAssignment() { var validAssignment = true; - // TODO: Add validation for Phonics based on pending requirements - if (lessonType !== "C" && (wordGroup == null || words.length < 4)) { + if (wordGroup == null || words.length < 4) { setInvalidMessage(invalidMessage => [ ...invalidMessage, "Please include at least 4 words." @@ -216,6 +231,21 @@ function CreateAssignment(props) {

Create Assignment


+
+ + + + Lesson Name + + + handleLessonNameChange(e.target.value)} + /> + +
{showPhonics && ( { > Create Lesson + {/* The below code was previously used to sort lessons by date. + Currently causes API error, but might not be used as lessons can now be named. */} {/* @@ -91,18 +93,21 @@ const CustomLessonsDisplay = props => {
{adminLessons && adminLessons.map(lesson => ( + // The below code previously displayed lesson names. + // Currently commented out due to Firebase endpoint changes + //
handleClick(lesson)}> // //
- // TODO: Redo Lesson Info Display. - // Also commented out the above code due to API issues (fix once page / LessonInfoDisplay overhauled) + // TODO: Remove the code below this line once the above is fixed
))}
+ {/* TODO: LessonInfoDisplay will require overhaul. */} {/* {displayLessonInfo && displayLesson && (