From f6719b696acac749d107fda81ac9ebd1ceeeb6e8 Mon Sep 17 00:00:00 2001
From: steviekong <sidharth@pingthis.in>
Date: Mon, 4 Apr 2022 14:10:03 +0530
Subject: [PATCH] Presist filters between refreshes

---
 src/components/Table/filters.js |  9 +++++----
 src/components/Table/index.js   | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/Table/filters.js b/src/components/Table/filters.js
index 362f83f2..5f065fe8 100644
--- a/src/components/Table/filters.js
+++ b/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);
 }
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index 0ec28124..bfe152cd 100644
--- a/src/components/Table/index.js
+++ b/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,