diff --git a/src/components/PhonicSelector/PhonicSelector.scss b/src/components/PhonicSelector/PhonicSelector.scss
index 0892439..fd02b11 100644
--- a/src/components/PhonicSelector/PhonicSelector.scss
+++ b/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;
}
diff --git a/src/components/PhonicWordSelector/PhonicWordSelector.js b/src/components/PhonicWordSelector/PhonicWordSelector.js
index b271785..4a355eb 100644
--- a/src/components/PhonicWordSelector/PhonicWordSelector.js
+++ b/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";
diff --git a/src/components/SectionSelector/SectionSelector.js b/src/components/SectionSelector/SectionSelector.js
index c151f4f..7d14af0 100644
--- a/src/components/SectionSelector/SectionSelector.js
+++ b/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();
diff --git a/src/components/StudentSelector/StudentSelector.js b/src/components/StudentSelector/StudentSelector.js
index ffd9400..71fc29e 100644
--- a/src/components/StudentSelector/StudentSelector.js
+++ b/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);
diff --git a/src/components/StudentSelector/StudentSelector.scss b/src/components/StudentSelector/StudentSelector.scss
index 518a35b..3aba2ea 100644
--- a/src/components/StudentSelector/StudentSelector.scss
+++ b/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;
-}
\ No newline at end of file
diff --git a/src/components/WordGroupSelector/WordGroupSelector.js b/src/components/WordGroupSelector/WordGroupSelector.js
index eeadab8..b3f70af 100644
--- a/src/components/WordGroupSelector/WordGroupSelector.js
+++ b/src/components/WordGroupSelector/WordGroupSelector.js
@@ -1,166 +1,79 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useCallback } from "react";
import { collectedWordGroupsService } from "util/GWUtil/resource";
import "./WordGroupSelector.scss";
-import { Button, Row, Col } from "react-bootstrap";
+import { TEMPLATE_WORD_GROUPS } from "../../utils/constants";
import WordGroupIcon from "../WordGroupIcon/WordGroupIcon";
import WordSelector from "../WordSelector/WordSelector";
function WordGroupSelector(props) {
- const wordKeys = useRef(null);
const [wordGroups, setWordGroups] = useState({});
const [clickedName, setClickedName] = useState("");
const [clickedGroup, setClickedGroup] = useState([]);
- // selectMode dictates whether WordSelector component appears and a group's words can be selected
- const [selectMode, setSelectMode] = useState(false);
+ const [wordSelectorToggle, setWordSelectorToggle] = useState(false);
+
+ const handleClick = useCallback(
+ (group, groupName) => {
+ setClickedGroup(group);
+ setClickedName(groupName);
+ setWordSelectorToggle(!wordSelectorToggle);
+ },
+ [wordSelectorToggle]
+ );
+
useEffect(() => {
if (
- Object.keys(wordGroups).length == 0 ||
- props.assignedWordGroup == "phonics"
+ Object.keys(wordGroups).length === 0 ||
+ props.assignedWordGroup === "phonics"
) {
collectedWordGroupsService.all().then(function(collectedWordGroups) {
- wordKeys.current = Object.keys(collectedWordGroups);
- /*
- key is the word group name
- 0th index is the list of words in this word group
- 1st index is the image corresponding with the word group
- 2nd index is the index of this word group among the list of all word groups (used to keep track of color changes)
- */
- setWordGroups({
- People: [
- collectedWordGroups[wordKeys.current[0]],
- "images/word-group/person.svg",
- 0
- ],
- Action: [
- collectedWordGroups[wordKeys.current[1]],
- "images/word-group/action.svg",
- 1
- ],
- Toys: [
- collectedWordGroups[wordKeys.current[2]],
- "images/word-group/toys.svg",
- 2
- ],
- Colors: [
- collectedWordGroups[wordKeys.current[3]],
- "images/word-group/colors.svg",
- 3
- ],
- Animals: [
- collectedWordGroups[wordKeys.current[4]],
- "images/word-group/animals-1.svg",
- 4
- ],
- Transport: [
- collectedWordGroups[wordKeys.current[5]],
- "images/word-group/travel.svg",
- 5
- ],
- "Body Parts": [
- collectedWordGroups[wordKeys.current[6]],
- "images/word-group/body.svg",
- 6
- ],
- Clothing: [
- collectedWordGroups[wordKeys.current[7]],
- "images/word-group/clothes.svg",
- 7
- ],
- Food: [
- collectedWordGroups[wordKeys.current[8]],
- "images/word-group/food-1.svg",
- 8
- ],
- "More Food": [
- collectedWordGroups[wordKeys.current[9]],
- "images/word-group/food-2.svg",
- 9
- ],
- Furniture: [
- collectedWordGroups[wordKeys.current[10]],
- "images/word-group/home.svg",
- 10
- ],
- Emotion: [
- collectedWordGroups[wordKeys.current[11]],
- "images/word-group/emotions.svg",
- 11
- ],
- Media: [
- collectedWordGroups[wordKeys.current[12]],
- "images/word-group/media.svg",
- 12
- ],
- "Animals 2": [
- collectedWordGroups[wordKeys.current[13]],
- "images/word-group/animals-2.svg",
- 13
- ],
- "Animals 3": [
- collectedWordGroups[wordKeys.current[14]],
- "images/word-group/animals-3.svg",
- 14
- ]
+ let tempWordGroups = {};
+ Object.keys(collectedWordGroups).forEach(wordGroupName => {
+ tempWordGroups[TEMPLATE_WORD_GROUPS[wordGroupName]] = {
+ words: collectedWordGroups[wordGroupName],
+ image: "images/word-group/" + wordGroupName + ".svg"
+ };
});
+ setWordGroups(tempWordGroups);
});
} else if (props.assignedWordGroup) {
setClickedName(props.assignedWordGroup);
- setClickedGroup(wordGroups[props.assignedWordGroup][0]);
- setSelectMode(!selectMode);
- handleChangeColor(wordGroups[props.assignedWordGroup][2]);
+ setClickedGroup(wordGroups[props.assignedWordGroup].words);
+ setWordSelectorToggle(true);
}
}, [wordGroups]);
- const [cardColored, setCardColored] = useState(
- Array(wordGroups.length)
- .fill()
- .map((_, i) => false)
- );
- function handleClick(group, groupName) {
- setClickedGroup(group);
- setClickedName(groupName);
- setSelectMode(!selectMode);
- }
- function handleChangeColor(index) {
- //only one colored at a time bc you can only choose one word group
- let cardColoredCopy = Array(wordGroups.length)
- .fill()
- .map((_, i) => false);
- cardColoredCopy[index] = true;
- setCardColored(cardColoredCopy);
- }
-
- function handleChangeSelectMode(selectStatus) {
- setSelectMode(selectStatus);
- }
return (
-
+
- {Object.keys(wordGroups).map((key, index) => (
-
-
handleClick(wordGroups[key][0], key, index)}>
+ {Object.keys(wordGroups).map((wordGroupName, index) => (
+
+
+ handleClick(wordGroups[wordGroupName].words, wordGroupName)
+ }
+ >
handleClick(wordGroups[key][0], key, index)}
+ name={wordGroupName}
+ image={wordGroups[wordGroupName].image}
+ colored={wordGroupName === props.selectedWordGroup}
+ onClick={() =>
+ handleClick(wordGroups[wordGroupName].words, wordGroupName)
+ }
/>
))}
- {selectMode && (
+ {wordSelectorToggle && (
)}
diff --git a/src/components/WordGroupSelector/WordGroupSelector.scss b/src/components/WordGroupSelector/WordGroupSelector.scss
index 30c4a3d..5a963e2 100644
--- a/src/components/WordGroupSelector/WordGroupSelector.scss
+++ b/src/components/WordGroupSelector/WordGroupSelector.scss
@@ -1,21 +1,20 @@
@import "../../pages/Index/index.scss";
-.background {
+.word-group-selector {
min-height: 52vw;
- background-color: #f5f5f5;
+ background-color: $assignments-app-background-color;
margin: auto;
+
+ .word-groups-display {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .word-groups-margins {
+ margin-left: 2rem;
+ margin-right: 2rem;
+ margin-bottom: 1rem;
+ }
}
-
-.word-groups-display {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.word-groups-margins {
- margin-left: 2rem;
- margin-right: 2rem;
- margin-bottom: 1rem;
-}
-
diff --git a/src/components/WordSelector/WordSelector.js b/src/components/WordSelector/WordSelector.js
index 57e888a..b6216e8 100644
--- a/src/components/WordSelector/WordSelector.js
+++ b/src/components/WordSelector/WordSelector.js
@@ -4,34 +4,36 @@ import { useRef } from "react";
import useOutsideClick from "./useOutsideClick";
import "./WordSelector.scss";
+const MIN_WORD_COUNT = 4;
+
function WordSelector(props) {
const [wordCount, updateWordCount] = useState(0);
- const [minWords] = useState(4);
- const [checkedWords, updateWords] = useState([]);
+ const [checkedWords, setCheckedWords] = useState([]);
const [wordGroup, updateWordGroup] = useState();
const [chooseAll, setChooseAll] = useState(false);
const [disableSelect, setDisableSelect] = useState(false);
const ref = useRef();
useOutsideClick(ref, () => {
- props.setSelectMode(false);
+ props.setWordSelectorToggle(false);
});
useEffect(() => {
if (props.assignedWords) {
- updateWords(props.assignedWords);
+ setCheckedWords(props.assignedWords);
updateWordCount(props.assignedWords.length);
updateWordGroup(props.assignedWordGroup);
- setDisableSelect(props.assignedWordGroup != props.name);
+ setDisableSelect(props.assignedWordGroup !== props.name);
}
- }, []);
+ }, [props.assignedWords, props.assignedWordGroup, props.name]);
+
function disableNext() {
- return wordCount < minWords || disableSelect;
+ return wordCount < MIN_WORD_COUNT || disableSelect;
}
function handleCheck(word) {
if (props.name !== wordGroup) {
- updateWords([word]);
+ setCheckedWords([word]);
updateWordCount(1);
updateWordGroup(props.name);
setDisableSelect(false);
@@ -41,7 +43,7 @@ function WordSelector(props) {
checkedWords.splice(index, 1);
updateWordCount(wordCount - 1);
} else {
- updateWords([...checkedWords, word]);
+ setCheckedWords([...checkedWords, word]);
updateWordCount(wordCount + 1);
}
}
@@ -49,9 +51,8 @@ function WordSelector(props) {
function handleSelect() {
props.selectWords(checkedWords);
- props.setSelectMode(false);
- props.selectGroup(props.name);
- props.changeColor(props.index);
+ props.setWordSelectorToggle(false);
+ props.selectWordGroup(props.name);
}
function handleChooseAll() {
@@ -60,20 +61,21 @@ function WordSelector(props) {
setDisableSelect(false);
}
if (!chooseAll) {
- updateWords([...props.group]);
+ setCheckedWords([...props.group]);
updateWordCount(props.group.length);
} else {
- updateWords([]);
+ setCheckedWords([]);
updateWordCount(0);
}
setChooseAll(!chooseAll);
}
+
function wordSelection(word, index) {
return (
-