From df5808262227a1a376d50bac173045422277105f Mon Sep 17 00:00:00 2001
From: Leo Stepanewk <44349262+leo-step@users.noreply.github.com>
Date: Sat, 23 Jul 2022 15:24:29 -0400
Subject: [PATCH 1/6] implement filter dropdown based on checkbox

---
 src/components/Table/filters.js | 14 ++++++++-
 src/components/Table/index.js   | 50 +++++++++++++++++++++++++++++----
 2 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/src/components/Table/filters.js b/src/components/Table/filters.js
index 5f065fe8..5f9c2284 100644
--- a/src/components/Table/filters.js
+++ b/src/components/Table/filters.js
@@ -5,8 +5,8 @@ function CreateDropDownListHelper(options, filterValue, setFilter, id) {
     <select
       value={filterValue}
       onChange={e => {
-        setFilter(e.target.value || '');
         localStorage.setItem(id, e.target.value);
+        setFilter(e.target.value || '');
       }}
     >
       <option value="">All</option>
@@ -64,3 +64,15 @@ export function SelectColumnFilter({
 
   return CreateDropDownListHelper(options, filterValue, setFilter, id);
 }
+
+export function SelectCheckedColumnFilter({
+  column: { filterValue, setFilter, id, filterByCheckbox },
+}) {
+  const options = ['Checked', 'Unchecked'];
+  const filter = val => {
+    setFilter(val);
+    filterByCheckbox();
+  };
+
+  return CreateDropDownListHelper(options, filterValue, filter, id);
+}
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index bfe152cd..0f8b25d1 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -19,6 +19,7 @@ import {
   DefaultColumnFilter,
   SelectDifficultyColumnFilter,
   SelectColumnFilter,
+  SelectCheckedColumnFilter,
 } from './filters';
 import { Event } from '../Shared/Tracking';
 
@@ -31,11 +32,10 @@ import PatternFrequencies from '../PatternFrequencies';
 const iconPath = `${process.env.PUBLIC_URL}/assets/icons/`;
 
 const Table = () => {
-  const data = React.useMemo(() => questions, []);
   const [resetCount, setResetCount] = useState(0);
   let checkedList =
     JSON.parse(localStorage.getItem('checked')) ||
-    new Array(data.length).fill(false);
+    new Array(questions.length).fill(false);
 
   /* If the user has previously visited the website, then an array in
   LocalStorage would exist of a certain length which corresponds to which
@@ -43,8 +43,8 @@ const Table = () => {
   to the list, then we would need to resize and copy the existing 'checked'
   array before updating it in LocalStorage in order to transfer their saved
   progress. */
-  if (checkedList.length !== data.length) {
-    const resizedCheckedList = new Array(data.length).fill(false);
+  if (checkedList.length !== questions.length) {
+    const resizedCheckedList = new Array(questions.length).fill(false);
 
     for (let i = 0; i < checkedList.length; i += 1) {
       resizedCheckedList[i] = checkedList[i];
@@ -54,6 +54,24 @@ const Table = () => {
     window.localStorage.setItem('checked', JSON.stringify(checkedList));
   }
 
+  const filteredByCheckbox = () => {
+    return questions.filter(question => {
+      const checkbox = localStorage.getItem('checkbox') || '';
+      if (!checkbox) return true;
+      return question.checkbox === checkbox;
+    });
+  };
+
+  for (let i = 0; i < questions.length; i += 1) {
+    if (checkedList[questions[i].id]) {
+      questions[i].checkbox = 'Checked';
+    } else {
+      questions[i].checkbox = 'Unchecked';
+    }
+  }
+
+  const [data, setData] = useState(filteredByCheckbox());
+
   const difficultyMap = { Easy: 0, Medium: 0, Hard: 0 };
   const totalDifficultyCount = { Easy: 0, Medium: 0, Hard: 0 };
   for (let i = 0; i < data.length; i += 1) {
@@ -160,6 +178,8 @@ const Table = () => {
                   >
                     Reset
                   </Button>
+                  <br />
+                  <br />
                   <Modal isOpen={resetModal} toggle={toggleResetModal}>
                     <ModalHeader toggle={toggleResetModal}>
                       Are you sure you want to reset your progress?
@@ -174,7 +194,12 @@ const Table = () => {
                 </span>
               );
             },
-            id: 'Checkbox',
+            accessor: 'checkbox',
+            id: 'checkbox',
+            filterByCheckbox: () => {
+              setData(filteredByCheckbox());
+            },
+            disableSortBy: true,
             Cell: cellInfo => {
               return (
                 <span data-tip={`Question #${Number(cellInfo.row.id) + 1}`}>
@@ -185,7 +210,14 @@ const Table = () => {
                       checked[cellInfo.row.original.id] = !checked[
                         cellInfo.row.original.id
                       ];
-
+                      const question = questions.find(
+                        q => q.id === cellInfo.row.original.id,
+                      );
+                      if (checked[cellInfo.row.original.id]) {
+                        question.checkbox = 'Checked';
+                      } else {
+                        question.checkbox = 'Unchecked';
+                      }
                       const additive = checked[cellInfo.row.original.id]
                         ? 1
                         : -1;
@@ -194,11 +226,13 @@ const Table = () => {
                       ] += additive;
                       setDifficultyCount(difficultyCount);
                       setChecked([...checked]);
+                      setData(filteredByCheckbox());
                     }}
                   />
                 </span>
               );
             },
+            Filter: SelectCheckedColumnFilter,
           },
           {
             Header: 'Questions',
@@ -384,6 +418,10 @@ const Table = () => {
       defaultColumn,
       initialState: {
         filters: [
+          {
+            id: 'checkbox',
+            value: localStorage.getItem('checkbox') || '',
+          },
           {
             id: 'difficulty',
             value: localStorage.getItem('difficulty') || '',

From 5b02819ee97db47100aeabdc1fe169ccee84c5f1 Mon Sep 17 00:00:00 2001
From: Leo Stepanewk <44349262+leo-step@users.noreply.github.com>
Date: Sat, 23 Jul 2022 17:54:31 -0400
Subject: [PATCH 2/6] move local storage access out of filter function

---
 src/components/Table/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index 0f8b25d1..a86d85c6 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -55,8 +55,8 @@ const Table = () => {
   }
 
   const filteredByCheckbox = () => {
+    const checkbox = localStorage.getItem('checkbox') || '';
     return questions.filter(question => {
-      const checkbox = localStorage.getItem('checkbox') || '';
       if (!checkbox) return true;
       return question.checkbox === checkbox;
     });

From 4073748fceb345eee7379e3a993512f772b3f765 Mon Sep 17 00:00:00 2001
From: Leo Stepanewk <44349262+leo-step@users.noreply.github.com>
Date: Sat, 23 Jul 2022 18:05:05 -0400
Subject: [PATCH 3/6] clean up function

---
 src/components/Table/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index a86d85c6..94da40fb 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -56,10 +56,8 @@ const Table = () => {
 
   const filteredByCheckbox = () => {
     const checkbox = localStorage.getItem('checkbox') || '';
-    return questions.filter(question => {
-      if (!checkbox) return true;
-      return question.checkbox === checkbox;
-    });
+    if (!checkbox) return questions;
+    return questions.filter(q => q.checkbox === checkbox);
   };
 
   for (let i = 0; i < questions.length; i += 1) {

From 9797bf5575c43e859d4ad884e945d69dd2fef04b Mon Sep 17 00:00:00 2001
From: Leo Stepanewk <44349262+leo-step@users.noreply.github.com>
Date: Sat, 23 Jul 2022 18:36:03 -0400
Subject: [PATCH 4/6] move difficulty map code so it gets computed properly

---
 src/components/Table/index.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index 94da40fb..db97919d 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -68,15 +68,14 @@ const Table = () => {
     }
   }
 
-  const [data, setData] = useState(filteredByCheckbox());
-
   const difficultyMap = { Easy: 0, Medium: 0, Hard: 0 };
   const totalDifficultyCount = { Easy: 0, Medium: 0, Hard: 0 };
-  for (let i = 0; i < data.length; i += 1) {
-    difficultyMap[data[i].difficulty] += checkedList[data[i].id];
-    totalDifficultyCount[data[i].difficulty] += 1;
+  for (let i = 0; i < questions.length; i += 1) {
+    difficultyMap[questions[i].difficulty] += checkedList[questions[i].id];
+    totalDifficultyCount[questions[i].difficulty] += 1;
   }
 
+  const [data, setData] = useState(filteredByCheckbox());
   const [difficultyCount, setDifficultyCount] = useState(difficultyMap);
   const [checked, setChecked] = useState(checkedList);
   const [showPatterns, setShowPatterns] = useState(

From 98a9cdc5d27aadd554968004b320982df7fe0383 Mon Sep 17 00:00:00 2001
From: Leo Stepanewk <44349262+leo-step@users.noreply.github.com>
Date: Sat, 23 Jul 2022 19:04:10 -0400
Subject: [PATCH 5/6] Revert "clean up function"

This reverts commit 4073748fceb345eee7379e3a993512f772b3f765.
---
 src/components/Table/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index db97919d..cb51dfc6 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -56,8 +56,10 @@ const Table = () => {
 
   const filteredByCheckbox = () => {
     const checkbox = localStorage.getItem('checkbox') || '';
-    if (!checkbox) return questions;
-    return questions.filter(q => q.checkbox === checkbox);
+    return questions.filter(question => {
+      if (!checkbox) return true;
+      return question.checkbox === checkbox;
+    });
   };
 
   for (let i = 0; i < questions.length; i += 1) {

From 9b5d6379fd4e57085be9f4228b03d22d743f8f99 Mon Sep 17 00:00:00 2001
From: Leo Stepanewk <44349262+leo-step@users.noreply.github.com>
Date: Mon, 25 Jul 2022 12:50:21 -0400
Subject: [PATCH 6/6] replace br with css

---
 src/components/Table/index.js    | 2 --
 src/components/Table/styles.scss | 1 +
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index cb51dfc6..833c62e2 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -177,8 +177,6 @@ const Table = () => {
                   >
                     Reset
                   </Button>
-                  <br />
-                  <br />
                   <Modal isOpen={resetModal} toggle={toggleResetModal}>
                     <ModalHeader toggle={toggleResetModal}>
                       Are you sure you want to reset your progress?
diff --git a/src/components/Table/styles.scss b/src/components/Table/styles.scss
index a7e65541..5925bee2 100644
--- a/src/components/Table/styles.scss
+++ b/src/components/Table/styles.scss
@@ -47,6 +47,7 @@
 
   .reset-button {
     margin-top: 10px;
+    margin-bottom: 10px;
     font-size: 0.7rem;
   }
 }