Merge pull request #1987 from jadmsaadaot/TRACK-task#1986

Make my workplan filters sticky
bcgov · Mar 14, 2024 · 8ed4151 · 8ed4151
2 parents fa47222 + b227d30
commit 8ed4151
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) || "[]"
+    ),
+  };
+};