Delete Lesson Functionality

src/components/DeleteConfirmation/DeleteConfirmation.js

@@ -0,0 +1,24 @@
+import React from "react";
+import "./DeleteConfirmation.scss";
+
+function DeleteConfirmation(props) {
+  const { lessonName, handleDelete, handleClose } = props;
+  return (
+    <div className="confirmation-background">
+      <div className="delete-note">Delete Lesson: {lessonName}?</div>
+      <div className="delete-lesson-button-container">
+        <div className="delete-confirmation-button" onClick={handleDelete}>
+          YES
+        </div>
+        <div
+          className="delete-confirmation-button"
+          onClick={() => handleClose(false)}
+        >
+          NO
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DeleteConfirmation;

src/components/DeleteConfirmation/DeleteConfirmation.scss

@@ -1 +1,43 @@
 @import "../../pages/Index/index.scss";
+
+.confirmation-background {
+    background-color: white;
+    border: 4px solid $assignments-font-color;
+    box-shadow: $assignments-box-shadow;
+    border-radius: 1vw;
+    width: 30vw;
+    min-height: 10vw;
+    margin: auto;
+    padding: 1vw;
+    position: fixed;
+    left: 40%;
+    top: 25%;
+
+    .delete-note {
+      font-size: 1.5rem;
+      color: black;
+      font-weight: bold;
+    }
+
+    .delete-lesson-button-container {
+      margin-top: 1vw;
+      display:flex;
+      flex-direction: row;
+    }
+
+    .delete-confirmation-button {
+      color: black;
+      background-color: $assignments-light-purple;
+      font-family: $assignments-roboto-font;
+      font-size: 1.5rem;
+      width: 6vw;
+      border-radius: 8px;
+      transition-duration: 0.3s;
+      font-weight: bold;
+      margin: auto;
+      cursor: pointer;
+      &:hover {
+        background-color: $assignments-light-green;
+      }
+    }
+}

src/components/LessonInfoDisplay/LessonInfoDisplay.js

@@ -2,15 +2,28 @@ import React, { useState } from "react";
 import { Col, Row } from "reactstrap";
 import { compose } from "recompose";
 import { withRouter, Redirect } from "react-router-dom";
+import { withFirebase } from "utils/Firebase";
 import { useRef } from "react";
 import useOutsideClick from "../WordSelector/useOutsideClick";
 import "./LessonInfoDisplay.scss";
+import DeleteConfirmation from "../../components/DeleteConfirmation/DeleteConfirmation";
 
 function LessonInfoDisplay(props) {
+  const {
+    firebase,
+    lesson,
+    template,
+    setDisplay,
+    handleDeletedLesson,
+    nameMap
+  } = props;
   const [editLessonRedirect, setEditLessonRedirect] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
   const ref = useRef();
   useOutsideClick(ref, () => {
-    props.setDisplay(false);
+    if (!showDelete) {
+      setDisplay(false);
+    }
   });
 
   function toFormatDate(date) {
@@ -29,20 +42,27 @@ function LessonInfoDisplay(props) {
           </div>
           <div className="student-container">
             {students.map(id => (
-              <div className="student-name">{props.nameMap[id]}</div>
+              <div className="student-name">{nameMap[id]}</div>
             ))}
           </div>
         </div>
       </Col>
     );
   }
 
+  function handleDeleteLesson() {
+    firebase.deleteCustomLesson(lesson.id, lesson.dueDates);
+    handleDeletedLesson();
+    setShowDelete(false);
+    setDisplay(false);
+  }
+
   if (editLessonRedirect) {
     return (
       <Redirect
         to={{
           pathname: "/createlesson",
-          state: { existingAssignment: props.lesson }
+          state: { existingAssignment: lesson }
         }}
       />
     );
@@ -55,42 +75,58 @@ function LessonInfoDisplay(props) {
           <div className="info-display">
             <div className="column">
               <div className="word-group-display">
-                <div className="lesson-group-name">{props.template}</div>
+                <div className="lesson-group-name">{template}</div>
               </div>
               <div className="lesson-info-word-display">
                 <div className="grey-box">
-                  <div className="word-group-name">
-                    {props.lesson.wordGroup}
-                  </div>
+                  <div className="word-group-name">{lesson.wordGroup}</div>
                 </div>
                 <div className="words-list">
-                  {props.lesson.words.map(word => (
+                  {lesson.words.map(word => (
                     <div className="words">{word}</div>
                   ))}
                 </div>
               </div>
             </div>
 
             <Col className="wide-column">
-              <div
-                onClick={() => setEditLessonRedirect(true)}
-                className="button-container"
-              >
-                <img src="images/icons/edit-icon.svg" alt="edit" />
+              <div className="lesson-info-button-bar">
+                <div
+                  onClick={() => setEditLessonRedirect(true)}
+                  className="button-container"
+                >
+                  <img src="images/icons/edit-icon.svg" alt="edit" />
+                </div>
+                <div
+                  onClick={() => setShowDelete(true)}
+                  className="button-container"
+                >
+                  <img src="images/icons/delete-icon.svg" alt="delete" />
+                </div>
               </div>
               <div className="card-container">
                 <Row>
-                  {Object.keys(props.lesson.dueDates).map(key => (
-                    <div>{LessonCard(key, props.lesson.dueDates[key])}</div>
+                  {Object.keys(lesson.dueDates).map(key => (
+                    <div>{LessonCard(key, lesson.dueDates[key])}</div>
                   ))}
                 </Row>
               </div>
             </Col>
           </div>
         </Row>
       </div>
+      {showDelete && (
+        <DeleteConfirmation
+          lessonName={lesson.lessonName}
+          handleDelete={handleDeleteLesson}
+          handleClose={setShowDelete}
+        />
+      )}
     </div>
   );
 }
 
-export default compose(withRouter)(LessonInfoDisplay);
+export default compose(
+  withFirebase,
+  withRouter
+)(LessonInfoDisplay);

src/components/LessonInfoDisplay/LessonInfoDisplay.scss

@@ -145,11 +145,16 @@
   margin-top: 2%;
 }
 
-.button-container {
-  margin-right: .5vw;
-  margin-top: .3vw;
-  margin-left: 46vw;
+.button-container{
   cursor: pointer;
+  margin-right: 1vw;
+  margin-top: .5vw;
+}
+
+.lesson-info-button-bar {
+  display:flex;
+  flex-direction: row;
+  justify-content: flex-end;
 }
 .wide-column  {
   width: 60vw

src/components/LessonNameDisplay/LessonNameDisplay.scss

@@ -6,7 +6,7 @@
   background-color: white;
   border: 4px solid $assignments-light-purple;
   border-radius: 1em;
-  box-shadow: "5px 10px #888888";
+  box-shadow: $assignments-box-shadow;
   margin: auto;
   margin-top: 1vw;
   overflow: hidden;

src/pages/Confirmation/ConfirmationStyle.scss

@@ -70,7 +70,7 @@
 
 .flex-container .cards-display-section {
   display: flex;
-  background-color: $confirmation-light-light-grey-background-color;
+  background-color: $confirmation-extra-light-grey-background-color;
   flex-wrap: wrap;
   flex-grow: 12;
   height: 100vh;

src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js

@@ -24,6 +24,7 @@ function CustomLessonsDisplay(props) {
   const [displayLessonInfo, setDisplayLessonInfo] = useState(false);
   const [createLessonRedirect, setCreateLessonRedirect] = useState(false);
   const [confirmationRedirect, setConfirmationRedirect] = useState(false);
+  const [deletedLesson, setDeletedLesson] = useState(false);
   const [nameMap, setNameMap] = useState({});
   const editLessonRedirect = props?.location.state?.redirect;
 
@@ -32,7 +33,7 @@ function CustomLessonsDisplay(props) {
     firebase.getAdminCustomLessons(ADMIN_ACCOUNT).then(lesson => {
       setAllLessons(lesson);
     });
-  }, [editLessonRedirect]); // Updates lessons when redirected to page from CreateAssignment
+  }, [editLessonRedirect, deletedLesson]); // Updates lessons when redirected to page from CreateAssignment or lesson deleted
 
   async function deploymentNameMap(lesson) {
     let deploymentAccountIds = getDeploymentAccountIdsFromLesson(lesson);
@@ -56,6 +57,10 @@ function CustomLessonsDisplay(props) {
     setDisplayLessonInfo(display);
   }
 
+  function handleDeletedLesson() {
+    setDeletedLesson(!deletedLesson);
+  }
+
   function handleClick(lesson) {
     handleChangeDisplayLessonInfo(!displayLessonInfo);
     setDisplayLesson(lesson);
@@ -152,6 +157,7 @@ function CustomLessonsDisplay(props) {
             lesson={displayLesson}
             template={displayLessonTemplate}
             setDisplay={handleChangeDisplayLessonInfo}
+            handleDeletedLesson={handleDeletedLesson}
             nameMap={nameMap}
           />
         )}

src/pages/Index/index.scss

@@ -8,4 +8,5 @@ $assignments-light-purple: #b1b0ff;
 $assignments-light-green: #B7E3D9;
 $assignments-roboto-font: "Roboto", sans-serif;
 $confirmation-light-grey-background-color: #DADADA;
-$confirmation-light-light-grey-background-color: #EEEEEE;
+$confirmation-extra-light-grey-background-color: #EEEEEE;
+$assignments-box-shadow: "5px 10px #888888";

src/utils/Firebase/firebase.js

@@ -191,6 +191,26 @@ class Firebase {
       })
       .catch(error => console.error("Error getting admin account: ", error));
 
+  deleteCustomLesson = (lessonId, dueDates) => {
+    this.db
+      .collection(FIREBASE_DB.CUSTOM_LESSONS_COL)
+      .doc(lessonId)
+      .delete()
+      .catch(error => console.error("Error deleting doc: ", error));
+
+    let deploymentAccountIds = getDeploymentAccountIdsFromLesson({
+      dueDates: dueDates
+    });
+    deploymentAccountIds.forEach(deploymentAccountId => {
+      this.db
+        .collection(FIREBASE_DB.DEPLOYMENT_ACCOUNTS_COL)
+        .doc(deploymentAccountId)
+        .update({
+          [`${FIREBASE_DB.CUSTOM_LESSONS_FIELD}.${lessonId}`]: app.firestore.FieldValue.delete()
+        });
+    });
+  };
+
   setCustomLesson = (
     adminAccountId,
     lessonTemplate,