@@ -25,34 +25,36 @@ import './styles.scss';
25
25
const images = require.context('../../icons', true);
26
26
27
27
const Table = () => {
28
+ const data = React.useMemo(() => questions, []);
29
+
28
30
let checkedList =
29
31
JSON.parse(localStorage.getItem('checked')) ||
30
- new Array(questions .length).fill(false);
32
+ new Array(data .length).fill(false);
31
33
32
- if (checkedList.length !== questions.length) {
33
- const newCheckedList = new Array(questions.length).fill(false);
34
+ /* If the user has previously visited the website, then an array in
35
+ LocalStorage would exist of a certain length which corresponds to which
36
+ questions they have/have not completed. In the event that we add new questions
37
+ to the list, then we would need to resize and copy the existing 'checked'
38
+ array before updating it in LocalStorage in order to transfer their saved
39
+ progress. */
40
+ if (checkedList.length !== data.length) {
41
+ const resizedCheckedList = new Array(data.length).fill(false);
34
42
35
43
for (let i = 0; i < checkedList.length; i += 1) {
36
- newCheckedList [i] = checkedList[i];
44
+ resizedCheckedList [i] = checkedList[i];
37
45
}
38
46
39
- checkedList = newCheckedList ;
47
+ checkedList = resizedCheckedList ;
40
48
window.localStorage.setItem('checked', JSON.stringify(checkedList));
41
49
}
42
- const data = React.useMemo(() => questions, []);
43
- /* Get a list of all checked questions in the form of a dictionary keys as question difficulty */
44
- const checkedQuestionsByDifficulty = { Easy: 0, Hard: 0, Medium: 0 };
45
- for (let i = 0; i < checkedList.length; i += 1) {
46
- if (checkedList[i]) {
47
- checkedQuestionsByDifficulty[data[i].difficulty] += 1;
48
- }
50
+
51
+ const difficultyMap = { Easy: 0, Medium: 0, Hard: 0 };
52
+ for (let i = 0; i < data.length; i += 1) {
53
+ difficultyMap[data[i].difficulty] += checkedList[data[i].id];
49
54
}
50
- const [checkQuestionsDict, setcheckQuestionsDict] = useState(
51
- checkedQuestionsByDifficulty,
52
- );
53
55
56
+ const [difficultyCount, setDifficultyCount] = useState(difficultyMap);
54
57
const [checked, setChecked] = useState(checkedList);
55
-
56
58
const [showPatterns, setShowPatterns] = useState(
57
59
JSON.parse(localStorage.getItem('showPatterns')) || new Array(1).fill(true),
58
60
);
@@ -65,8 +67,8 @@ const Table = () => {
65
67
window.localStorage.setItem('showPatterns', JSON.stringify(showPatterns));
66
68
}, [showPatterns]);
67
69
68
- /*To view the number of question solved by difficulty*/
69
- console.log(checkQuestionsDict );
70
+ /* To view the number of question solved by difficulty */
71
+ console.log(difficultyCount );
70
72
71
73
const defaultColumn = React.useMemo(
72
74
() => ({
@@ -93,22 +95,14 @@ const Table = () => {
93
95
checked[cellInfo.row.original.id] = !checked[
94
96
cellInfo.row.original.id
95
97
];
96
- /*increment or decrement question count for the correct difficulty from the checkbox */
97
- if (checked[cellInfo.row.original.id]) {
98
- setcheckQuestionsDict(prevState => ({
99
- ...prevState,
100
- [cellInfo.row.original.difficulty]:
101
- prevState[cellInfo.row.original.difficulty] + 1,
102
- }));
103
- } else {
104
- setcheckQuestionsDict(prevState => ({
105
- ...prevState,
106
- [cellInfo.row.original.difficulty]:
107
- prevState[cellInfo.row.original.difficulty] === 0
108
- ? 0
109
- : prevState[cellInfo.row.original.difficulty] - 1,
110
- }));
111
- }
98
+
99
+ const additive = checked[cellInfo.row.original.id] ? 1 : -1;
100
+ setDifficultyCount(prevState => ({
101
+ ...prevState,
102
+ [cellInfo.row.original.difficulty]:
103
+ prevState[cellInfo.row.original.difficulty] + additive,
104
+ }));
105
+
112
106
setChecked([...checked]);
113
107
}}
114
108
/>
0 commit comments