From b227d30226b45ed428d9b96ab61e151346782a4f Mon Sep 17 00:00:00 2001
From: Jad <jad.saad@aot-technologies.com>
Date: Tue, 12 Mar 2024 15:29:49 -0700
Subject: [PATCH] use session storage to cache filter values

---
 .../myWorkplans/Filters/EnvRegionFilter.tsx   |  2 +-
 .../myWorkplans/Filters/ProjectTypeFilter.tsx |  2 +-
 .../myWorkplans/Filters/TeamFilter.tsx        |  2 +-
 .../myWorkplans/Filters/WorkStateFilter.tsx   |  8 +---
 .../myWorkplans/Filters/WorkType.tsx          |  2 +-
 .../myWorkplans/MyWorkPlanContext.tsx         | 37 ++++++++++++++++++-
 .../src/components/myWorkplans/constants.ts   | 12 ++++++
 .../src/components/myWorkplans/utils.ts       | 19 ++++++++++
 8 files changed, 71 insertions(+), 13 deletions(-)
 create mode 100644 epictrack-web/src/components/myWorkplans/constants.ts
 create mode 100644 epictrack-web/src/components/myWorkplans/utils.ts

diff --git a/epictrack-web/src/components/myWorkplans/Filters/EnvRegionFilter.tsx b/epictrack-web/src/components/myWorkplans/Filters/EnvRegionFilter.tsx
index 752418b6e..3446158a4 100644
--- a/epictrack-web/src/components/myWorkplans/Filters/EnvRegionFilter.tsx
+++ b/epictrack-web/src/components/myWorkplans/Filters/EnvRegionFilter.tsx
@@ -34,7 +34,7 @@ export const EnvRegionFilter = () => {
     return options.filter((option) =>
       searchOptions.regions.includes(String(option.value))
     );
-  }, [searchOptions.regions]);
+  }, [searchOptions.regions, options]);
 
   return (
     <FilterSelect
diff --git a/epictrack-web/src/components/myWorkplans/Filters/ProjectTypeFilter.tsx b/epictrack-web/src/components/myWorkplans/Filters/ProjectTypeFilter.tsx
index 76c95bb85..77152c6b6 100644
--- a/epictrack-web/src/components/myWorkplans/Filters/ProjectTypeFilter.tsx
+++ b/epictrack-web/src/components/myWorkplans/Filters/ProjectTypeFilter.tsx
@@ -33,7 +33,7 @@ export const ProjectTypeFilter = () => {
     return options.filter((option) =>
       searchOptions.project_types.includes(String(option.value))
     );
-  }, [searchOptions.project_types]);
+  }, [searchOptions.project_types, options]);
 
   return (
     <FilterSelect
diff --git a/epictrack-web/src/components/myWorkplans/Filters/TeamFilter.tsx b/epictrack-web/src/components/myWorkplans/Filters/TeamFilter.tsx
index d9628f512..88be4b246 100644
--- a/epictrack-web/src/components/myWorkplans/Filters/TeamFilter.tsx
+++ b/epictrack-web/src/components/myWorkplans/Filters/TeamFilter.tsx
@@ -33,7 +33,7 @@ export const TeamFilter = () => {
     return options.filter((option) =>
       searchOptions.teams.includes(String(option.value))
     );
-  }, [searchOptions.teams]);
+  }, [searchOptions.teams, options]);
 
   return (
     <FilterSelect
diff --git a/epictrack-web/src/components/myWorkplans/Filters/WorkStateFilter.tsx b/epictrack-web/src/components/myWorkplans/Filters/WorkStateFilter.tsx
index cf9cb246f..a1de4b8d0 100644
--- a/epictrack-web/src/components/myWorkplans/Filters/WorkStateFilter.tsx
+++ b/epictrack-web/src/components/myWorkplans/Filters/WorkStateFilter.tsx
@@ -15,7 +15,7 @@ export const WorkStateFilter = () => {
     return options.filter((option) =>
       searchOptions.work_states.includes(String(option.value))
     );
-  }, [searchOptions.work_states]);
+  }, [searchOptions.work_states, options]);
 
   return (
     <FilterSelect
@@ -40,12 +40,6 @@ export const WorkStateFilter = () => {
       name="workState"
       isMulti
       info={true}
-      defaultValue={[
-        {
-          label: DEFAULT_WORK_STATE.label,
-          value: DEFAULT_WORK_STATE.value,
-        },
-      ]}
     />
   );
 };
diff --git a/epictrack-web/src/components/myWorkplans/Filters/WorkType.tsx b/epictrack-web/src/components/myWorkplans/Filters/WorkType.tsx
index 84731c259..05cfaed4c 100644
--- a/epictrack-web/src/components/myWorkplans/Filters/WorkType.tsx
+++ b/epictrack-web/src/components/myWorkplans/Filters/WorkType.tsx
@@ -33,7 +33,7 @@ export const WorkTypeFilter = () => {
     return options.filter((option) =>
       searchOptions.work_types.includes(String(option.value))
     );
-  }, [searchOptions.work_types]);
+  }, [searchOptions.work_types, options]);
 
   return (
     <FilterSelect
diff --git a/epictrack-web/src/components/myWorkplans/MyWorkPlanContext.tsx b/epictrack-web/src/components/myWorkplans/MyWorkPlanContext.tsx
index fda559b26..f8c556b64 100644
--- a/epictrack-web/src/components/myWorkplans/MyWorkPlanContext.tsx
+++ b/epictrack-web/src/components/myWorkplans/MyWorkPlanContext.tsx
@@ -6,6 +6,10 @@ import { useAppSelector } from "../../hooks";
 import { showNotification } from "components/shared/notificationProvider";
 import { COMMON_ERROR_MESSAGE } from "constants/application-constant";
 import { MY_WORKPLAN_VIEW, MyWorkPlanView } from "./type";
+import {
+  MY_WORKLAN_FILTERS,
+  MY_WORKPLAN_CACHED_SEARCH_OPTIONS,
+} from "./constants";
 
 interface MyWorkplanContextProps {
   workplans: WorkPlan[];
@@ -83,11 +87,40 @@ export const MyWorkplansProvider = ({
   const [workplans, setWorkplans] = useState<WorkPlan[]>([]);
   const [totalWorkplans, setTotalWorkplans] = useState<number>(0);
   const [page, setPage] = useState<number>(1);
+
+  const cachedSearchOptions = useMemo(() => {
+    try {
+      const cachedValue = sessionStorage.getItem(
+        MY_WORKPLAN_CACHED_SEARCH_OPTIONS
+      );
+      if (!cachedValue) return null;
+
+      return JSON.parse(cachedValue) as Partial<WorkPlanSearchOptions>;
+    } catch (error) {
+      return null;
+    }
+  }, []);
+
   const [searchOptions, setSearchOptions] = useState<WorkPlanSearchOptions>({
-    ...defaultSearchOptions,
-    staff_id: user.staffId,
+    teams: cachedSearchOptions?.teams || defaultSearchOptions.teams,
+    work_states:
+      cachedSearchOptions?.work_states || defaultSearchOptions.work_states,
+    regions: cachedSearchOptions?.regions || defaultSearchOptions.regions,
+    project_types:
+      cachedSearchOptions?.project_types || defaultSearchOptions.project_types,
+    work_types:
+      cachedSearchOptions?.work_types || defaultSearchOptions.work_types,
+    text: defaultSearchOptions.text,
+    staff_id: user?.staffId || null,
   });
 
+  useEffect(() => {
+    sessionStorage.setItem(
+      MY_WORKPLAN_CACHED_SEARCH_OPTIONS,
+      JSON.stringify(searchOptions)
+    );
+  }, [searchOptions]);
+
   const [myWorkPlanView, setMyWorkPlanView] = useState<MyWorkPlanView>(
     MY_WORKPLAN_VIEW.CARDS
   );
diff --git a/epictrack-web/src/components/myWorkplans/constants.ts b/epictrack-web/src/components/myWorkplans/constants.ts
new file mode 100644
index 000000000..c9b744bc5
--- /dev/null
+++ b/epictrack-web/src/components/myWorkplans/constants.ts
@@ -0,0 +1,12 @@
+import { WorkPlanFilters } from "./MyWorkPlanContext";
+
+export const MY_WORKLAN_FILTERS: { [key in keyof WorkPlanFilters]: string } = {
+  teams: "my-workplan-teams",
+  work_states: "my-workplan-work-states",
+  regions: "my-workplan-regions",
+  project_types: "my-workplan-project-types",
+  work_types: "my-workplan-work-types",
+  text: "my-workplan-text",
+};
+
+export const MY_WORKPLAN_CACHED_SEARCH_OPTIONS = "my-workplan-search-options";
diff --git a/epictrack-web/src/components/myWorkplans/utils.ts b/epictrack-web/src/components/myWorkplans/utils.ts
new file mode 100644
index 000000000..48bda0a55
--- /dev/null
+++ b/epictrack-web/src/components/myWorkplans/utils.ts
@@ -0,0 +1,19 @@
+import { MY_WORKLAN_FILTERS } from "./constants";
+
+export const getCachedSearchOptions = () => {
+  return {
+    teams: JSON.parse(sessionStorage.getItem(MY_WORKLAN_FILTERS.teams) || "[]"),
+    work_states: JSON.parse(
+      sessionStorage.getItem(MY_WORKLAN_FILTERS.work_states) || "[]"
+    ),
+    regions: JSON.parse(
+      sessionStorage.getItem(MY_WORKLAN_FILTERS.regions) || "[]"
+    ),
+    project_types: JSON.parse(
+      sessionStorage.getItem(MY_WORKLAN_FILTERS.project_types) || "[]"
+    ),
+    work_types: JSON.parse(
+      sessionStorage.getItem(MY_WORKLAN_FILTERS.work_types) || "[]"
+    ),
+  };
+};