Refactor (#84)

* updating firebase endpoints for new db structure

* forgot to merge lol

* doneee

* editing firebase endpoints

* removing console.logs

* pleasing daddy

* finishing daddy

* fixing merge errors

* changing const

* Fixing wordgroupselector but it's functionally broken

* Redirects on time

* nothing really

* formatting

* warnings

* coloring and some css

* wordselector css

* css

* .

* var->let

* wordgroup/wordselector done

* format

* select/set -> set

* I'm tired

* last merge

Co-authored-by: Lam <[email protected]>

src/components/ConfirmationCard/ConfirmationCard.js

@@ -10,7 +10,7 @@ function ConfirmationCard(props) {
       let dateString = dateComponents[1] + "  " + dateComponents[2];
       setTitle(dateString);
     } else setTitle(props.title);
-  });
+  }, [props.confirmation, props.title]);
 
   return (
     <div className="confirmation-card">

src/components/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import Calendar from "react-calendar/dist/entry.nostyle";
 import "DatePicker/DatePicker.scss";
 import { withFirebase } from "utils/Firebase";

src/components/LessonCards/LessonCard.js

@@ -9,7 +9,8 @@ function LessonCard(props) {
     let dateComponents = props.lessonDate.split(" ");
     let dateString = dateComponents[1] + "  " + dateComponents[2];
     setCardDate(dateString);
-  });
+  }, [props]);
+
   return (
     <div className="student-date-card">
       <div className="purple-box">

src/components/LessonCardsDisplay/LessonCardsDisplay.js

@@ -1,6 +1,5 @@
 import React from "react";
 import "./LessonCardsDisplay.scss";
-import { Col, Row, Container } from "reactstrap";
 import LessonCard from "../LessonCards/LessonCard";
 
 function LessonCardsDisplay(props) {

src/components/PhonicSelector/PhonicSelector.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import phonicGroups from "utils/phonics.json";
 import PhonicIcon from "../PhonicIcon/PhonicIcon";
 import PhonicWordSelector from "../PhonicWordSelector/PhonicWordSelector";
@@ -46,7 +46,7 @@ function PhonicSelector(props) {
   }
 
   return (
-    <div className="phonic-background">
+    <div className="phonic-selector">
       <div className="phonic-groups-display">
         {Object.keys(phonicGroups).map((key, index) => (
           <div>

src/components/PhonicSelector/PhonicSelector.scss

@@ -1,15 +1,18 @@
+@import "../../pages/Index/index.scss";
 
-.phonic-background {
-    min-height: 50vh;
-    background-color: #f5f5f5;
-    overflow: auto;
+.phonic-selector {
+  min-height: 50vh;
+  background-color: $assignments-app-background-color;
+  overflow: auto;
+
+  .phonic-groups-display {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .phonic-icon-margin {
+    margin: 2vw;
   }
-.phonic-groups-display {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.phonic-icon-margin {
-  margin: 2vw;
 }

src/components/PhonicWordSelector/PhonicWordSelector.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button } from "reactstrap";
 import "../PhonicWordSelector/PhonicWordSelector.scss";
 import "../PhonicIcon/PhonicIcon.scss";

src/components/SectionSelector/SectionSelector.js

@@ -1,7 +1,7 @@
 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 { Button } from "@material-ui/core/";
+import { Row, Col } from "react-bootstrap";
 import useStyles from "SectionSelector/SectionSelectorStyle.js";
 function SectionSelector(props) {
   const classes = useStyles();

src/components/StudentSelector/StudentSelector.js

@@ -55,6 +55,7 @@ function StudentSelector(props) {
   function handleClickSelectAll(deployment) {
     let index = deployments.indexOf(currentDeployment);
     let newChecked = [...studentsChecked];
+    // eslint-disable-next-line array-callback-return
     Object.keys(deployment.deploymentAccounts).map(deploymentAccountId => {
       if (!chooseAll[index]) {
         newChecked.push(deploymentAccountId);

src/components/StudentSelector/StudentSelector.scss

@@ -5,69 +5,82 @@
     width: 33vw;
     background-color: white;
     border-radius: 1vw;
-}
 
-#deployment-ddown {
-    height: 3.5vw;
-    width:33vw;
-    border-top-left-radius: 1vw;
-    border-top-right-radius: 1vw;
-    background-color: $assignments-font-color;
-    color: white;
-    font-family: $assignments-roboto-font;
-    font-weight: bold;
-    font-size: 1.2rem;
-    transition-duration: 0.3s;
-    &:hover {
-    background-color: white;
-    color: $assignments-font-color;
+    #deployment-ddown {
+        height: 3.5vw;
+        width:33vw;
+        border-top-left-radius: 1vw;
+        border-top-right-radius: 1vw;
+        background-color: $assignments-font-color;
+        color: white;
+        font-family: $assignments-roboto-font;
+        font-weight: bold;
+        font-size: 1.2rem;
+        transition-duration: 0.3s;
+        &:hover {
+        background-color: white;
+        color: $assignments-font-color;
+        }
     }
-}
-.option-ddown {
-    height: 2.5vw;
-    width:33vw;
-    font-family: $assignments-roboto-font;
-    font-weight: bold;
-    font-size: 1.2rem;
-    &:hover {
-        background-color: #f5f5f5;
+    .option-ddown {
+        height: 2.5vw;
+        width:33vw;
+        font-family: $assignments-roboto-font;
+        font-weight: bold;
+        font-size: 1.2rem;
+        &:hover {
+            background-color: $assignments-app-background-color;
+        }
     }
+    .select-all-checkbox {
+        padding-right: 1vw;
+        padding-top: 1vw;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+    }
+    .select-all-label {
+        color: $assignments-font-color;
+        font-size: 1.2rem;
+        font-weight: bold;
+        margin-top: 3%;
+    }
+    #cbox {
+        margin-top: 10%;
+    }
+    .select-all-margins {
+        margin: auto;
+        margin-left: 5%;
+        margin-right: 5%;
+    }
+    .accounts-list {
+        height: 24vw;
+        padding-left: 1vw;
+        margin: auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .student-name-label {
+        width: 20vw;
+        margin-left: 1em;
+        margin-top: 2%;
+        font-weight: bold;
+        font-size: 1.2rem;
+        color: $assignments-font-color;
+        text-align: start;
+    }
+
+    input[type='checkbox'] {
+        -webkit-appearance:none;
+        width:2rem;
+        height:2rem;
+        background:white;
+        border-radius:5px;
+        border:2px solid #555;
+        margin-top: 0%;
+      }
+      input[type='checkbox']:checked {
+        background: $assignments-light-purple;
+      }
 }
-.select-all-checkbox {
-    padding-right: 1vw;
-    padding-top: 1vw;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-}
-.select-all-label {
-    color: $assignments-font-color;
-    font-size: 1.2rem;
-    font-weight: bold;
-    margin-top: 3%;
-}
-#cbox {
-    margin-top: 10%;
-}
-.select-all-margins {
-    margin: auto;
-    margin-left: 5%;
-    margin-right: 5%;
-}
-.accounts-list {
-    height: 24vw;
-    padding-left: 1vw;
-    margin: auto;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-.student-name-label {
-    width: 20vw;
-    margin-left: 1em;
-    margin-top: 2%;
-    font-weight: bold;
-    font-size: 1.2rem;
-    color: $assignments-font-color;
-    text-align: start;
-}