Delete Lesson Functionality

src/components/DeleteConfirmation/DeleteConfirmation.js

@@ -0,0 +1,26 @@
+import React from "react";
+import "./DeleteConfirmation.scss";
+
+function DeleteConfirmation(props) {
+  return (
+    <div className="confirmation-background">
+      <div className="delete-note">Delete Lesson: {props.lessonName}?</div>
+      <div className="delete-lesson-button-container">
+        <div
+          className="delete-confirmation-button"
+          onClick={() => props.handleDelete()}
+        >
+          YES
+        </div>
+        <div
+          className="delete-confirmation-button"
+          onClick={() => props.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,21 @@ 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 } = props;
   const [editLessonRedirect, setEditLessonRedirect] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
   const ref = useRef();
   useOutsideClick(ref, () => {
-    props.setDisplay(false);
+    if (!showDelete) {
+      props.setDisplay(false);
+    }
   });
 
   function toFormatDate(date) {
@@ -37,6 +43,13 @@ function LessonInfoDisplay(props) {
     );
   }
 
+  function handleDeleteLesson() {
+    firebase.deleteCustomLesson(props.lesson.id, props.lesson.dueDates);
+    props.handleDeletedLesson();
+    setShowDelete(false);
+    props.setDisplay(false);
+  }
+
   if (editLessonRedirect) {
     return (
       <Redirect
@@ -72,11 +85,19 @@ function LessonInfoDisplay(props) {
             </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>
@@ -89,8 +110,18 @@ function LessonInfoDisplay(props) {
           </div>
         </Row>
       </div>
+      {showDelete && (
+        <DeleteConfirmation
+          lessonName={props.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/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-light-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,