implement filtering by completion status (seanprashad#180)

* implement filter dropdown based on checkbox * move local storage access out of filter function * clean up function * move difficulty map code so it gets computed properly * Revert "clean up function" This reverts commit 4073748. * replace br with css

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);
+}

src/components/Table/index.js

@@ -19,6 +19,7 @@ import {
  DefaultColumnFilter,
  SelectDifficultyColumnFilter,
  SelectColumnFilter,
+ SelectCheckedColumnFilter,
 } from './filters';
 import { Event } from '../Shared/Tracking';
 
@@ -31,20 +32,19 @@ 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
  questions they have/have not completed. In the event that we add new questions
  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,13 +54,30 @@ const Table = () => {
  window.localStorage.setItem('checked', JSON.stringify(checkedList));
  }
 
+ const filteredByCheckbox = () => {
+ const checkbox = localStorage.getItem('checkbox') || '';
+ return questions.filter(question => {
+ 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 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(
@@ -174,7 +191,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 +207,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 +223,13 @@ const Table = () => {
  ] += additive;
  setDifficultyCount(difficultyCount);
  setChecked([...checked]);
+ setData(filteredByCheckbox());
  }}
  />
  </span>
  );
  },
+ Filter: SelectCheckedColumnFilter,
  },
  {
  Header: 'Questions',
@@ -384,6 +415,10 @@ const Table = () => {
  defaultColumn,
  initialState: {
  filters: [
+ {
+ id: 'checkbox',
+ value: localStorage.getItem('checkbox') || '',
+ },
  {
  id: 'difficulty',
  value: localStorage.getItem('difficulty') || '',

src/components/Table/styles.scss

@@ -47,6 +47,7 @@
 
  .reset-button {
  margin-top: 10px;
+ margin-bottom: 10px;
  font-size: 0.7rem;
  }
 }