[WIP] Reintegrate editing of multiple dates

src/components/DatePicker/DatePicker.js

@@ -7,9 +7,9 @@ function DatePicker(props) {
   const [date, setDate] = useState(null);
 
   useEffect(() => {
-    if (props.assignedDate) setDate(props.assignedDate.toDate());
+    if (props.assignedDate) setDate(props.assignedDate);
     else setDate(new Date());
-  }, []);
+  }, [props.assignedDate]);
 
   function onChange(date) {
     props.handleChange(date);

src/components/LessonCards/LessonCard.js

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import "./LessonCard.scss";
+
+function LessonCard(props) {
+  function getCardDate() {
+    var dateComponents = props.lessonDate.split(" ");
+    var dateString = dateComponents[1] + "  " + dateComponents[2];
+    return dateString;
+  }
+
+  return (
+    <div
+      className="LessonCard"
+      onClick={() => props.selectCard(props.lessonDate)}
+    >
+      <div className="LessonCardHeading">
+        <div className="LessonCardDate">{getCardDate()}</div>
+        <div
+          onClick={() => props.deleteCard(props.lessonDate)}
+          className="DeleteLessonCard"
+        >
+          <img src="images/icons/remove-card.svg" alt="Close" />
+        </div>
+      </div>
+      <div className="LessonCardContent">
+        {props.lessonStudents.map((student, index) => (
+          <div key={index} className="LessonCardStudent">
+            {student}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default LessonCard;

src/components/LessonCards/LessonCard.scss

@@ -0,0 +1,49 @@
+@import "../../pages/Index/index.scss";
+
+.LessonCard {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  overflow: scroll;
+  height: 15vw;
+  width: 12vw;
+  border-radius: 20px;
+  margin: 2vw;
+  margin-bottom: 0vw;
+  background-color: $assignments-background-color;
+  color: $assignments-font-color;
+  font-family: $assignments-roboto-font;
+  font-size: 1.2em;
+}
+
+.LessonCardHeading {
+  display: flex;
+  flex-wrap: wrap;
+  height: 4vw;
+  width: 12vw;
+  top: 1vw;
+  background-color: $assignments-light-purple;
+  font-family: $assignments-roboto-font;
+}
+
+.DeleteLessonCard {
+  margin-top: 0.5vw;
+  margin-right: 0.75vw;
+}
+
+.LessonCardDate {
+  margin: auto;
+}
+
+.LessonCardContent {
+  display: flex;
+  flex-direction: column;
+  overflow: scroll;
+  height: 11vw;
+  width: 12vw;
+}
+
+.LessonCardStudent {
+  font-family: $assignments-roboto-font;
+  color: $assignments-font-color;
+}

src/components/LessonCardsDisplay/LessonCardsDisplay.js

@@ -0,0 +1,28 @@
+import React from "react";
+import "./LessonCardsDisplay.scss";
+import LessonCard from "../LessonCards/LessonCard";
+
+function LessonCardsDisplay(props) {
+  return (
+    <div className="LessonCardsDisplay">
+      <div onClick={props.addCard}>
+        <div className="DefaultCard">
+          Click to assign students to a selected date!
+        </div>
+      </div>
+      {Object.keys(props.cards).length > 0 &&
+        Object.keys(props.cards)
+          .reverse()
+          .map(date => (
+            <LessonCard
+              lessonDate={date}
+              lessonStudents={props.cards[date][1]}
+              selectCard={props.selectCard}
+              deleteCard={props.removeCard}
+            />
+          ))}
+    </div>
+  );
+}
+
+export default LessonCardsDisplay;

src/components/LessonCardsDisplay/LessonCardsDisplay.scss

@@ -0,0 +1,31 @@
+@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;
+  overflow: scroll;
+  height: 15vw;
+  width: 10vw;
+  border-radius: 20px;
+  margin: 2vw;
+  margin-right: auto;
+  background-color: $assignments-background-color;
+  color: $assignments-font-color;
+  font-family: $assignments-roboto-font;
+  font-size: 1.2em;
+}

src/components/StudentList/StudentList.js

@@ -24,7 +24,7 @@ function StudentList(props) {
 
   useEffect(() => {
     if (props.assignedStudents) setChecked(props.assignedStudents);
-  }, []);
+  }, [props.assignedStudents]);
 
   const handleClick = index => {
     let openCopy = [...open];