Presist filters between refreshes (#167)

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

Author: steviekong

src/components/Table/filters.js

@@ -1,11 +1,12 @@
 import React from 'react';
 
-function CreateDropDownListHelper(options, filterValue, setFilter) {
+function CreateDropDownListHelper(options, filterValue, setFilter, id) {
   return (
     <select
       value={filterValue}
       onChange={e => {
         setFilter(e.target.value || '');
+        localStorage.setItem(id, e.target.value);
       }}
     >
       <option value="">All</option>
@@ -37,11 +38,11 @@ export function DefaultColumnFilter({
 }
 
 export function SelectDifficultyColumnFilter({
-  column: { filterValue, setFilter },
+  column: { filterValue, setFilter, id },
 }) {
   const options = ['Easy', 'Medium', 'Hard'];
 
-  return CreateDropDownListHelper(options, filterValue, setFilter);
+  return CreateDropDownListHelper(options, filterValue, setFilter, id);
 }
 
 export function SelectColumnFilter({
@@ -61,5 +62,5 @@ export function SelectColumnFilter({
     return [...set.values()].sort();
   }, [id, preFilteredRows]);
 
-  return CreateDropDownListHelper(options, filterValue, setFilter);
+  return CreateDropDownListHelper(options, filterValue, setFilter, id);
 }

src/components/Table/index.js

@@ -280,6 +280,7 @@ const Table = () => {
             },
             accessor: 'pattern',
             disableSortBy: true,
+            id: 'pattern',
             Cell: cellInfo => {
               const patterns = `${cellInfo.row.original.pattern}`
                 .split(',')
@@ -307,6 +308,7 @@ const Table = () => {
           {
             Header: 'Difficulty',
             accessor: 'difficulty',
+            id: 'difficulty',
             disableSortBy: true,
             Cell: cellInfo => (
               <Row>
@@ -380,6 +382,22 @@ const Table = () => {
       columns,
       data,
       defaultColumn,
+      initialState: {
+        filters: [
+          {
+            id: 'difficulty',
+            value: localStorage.getItem('difficulty') || '',
+          },
+          {
+            id: 'pattern',
+            value: localStorage.getItem('pattern') || '',
+          },
+          {
+            id: 'companies',
+            value: localStorage.getItem('companies') || '',
+          },
+        ],
+      },
     },
     useFilters,
     useSortBy,