move from useEffect to onClick

theopensystemslab · Jan 13, 2025 · 305318c · 305318c
1 parent efeea7c
commit 305318c
Showing 1 changed file with 52 additions and 7 deletions.
diff --git a/editor.planx.uk/src/pages/Filters.tsx b/editor.planx.uk/src/pages/Filters.tsx
@@ -4,6 +4,7 @@ import Button from "@mui/material/Button";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import React, { useEffect, useState } from "react";
+import { useNavigation } from "react-navi";
 import ChecklistItem from "ui/shared/ChecklistItem/ChecklistItem";
 
 import { FlowSummary } from "./FlowEditor/lib/store/editor";
@@ -54,6 +55,9 @@ interface FilterState {
   serviceType?: "statutory" | "discretionary";
 }
 
+type FilterKeys = keyof FilterState;
+type FilterValues = FilterState[keyof FilterState];
+
 export const Filters: React.FC<FiltersProps> = ({
   flows,
   setFilteredFlows,
@@ -71,7 +75,52 @@ export const Filters: React.FC<FiltersProps> = ({
 
   const [filters, setFilters] = useState<FilterState>();
 
+  const navigation = useNavigation();
+
+  const addToSearchParams = (params: FilterState) => {
+    const newSearchParams = new URLSearchParams();
+    filters &&
+      Object.entries(params).forEach(([key, value]) => {
+        if (value) {
+          newSearchParams.set(key, value);
+        } else {
+          newSearchParams.delete(key);
+        }
+      });
+
+    navigation.navigate(
+      {
+        pathname: window.location.pathname,
+        search: newSearchParams.toString()
+          ? `?${newSearchParams.toString()}`
+          : "",
+      },
+      {
+        replace: true,
+      },
+    );
+  };
+
   useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    let filterObj = {};
+    params.forEach((value, key) => {
+      switch (key) {
+        case "status":
+          filterObj = { ...filterObj, status: value };
+          break;
+        case "applicationType":
+          filterObj = { ...filterObj, applicationType: value };
+          break;
+        case "serviceType":
+          filterObj = { ...filterObj, serviceType: value };
+          break;
+      }
+      setFilters(filterObj);
+    });
+  }, []);
+
+  const handleFiltering = () => {
     const filterByStatus = flows.filter((flow: FlowSummary) => {
       if (filters?.status) {
         return flow.status === filters.status;
@@ -80,21 +129,17 @@ export const Filters: React.FC<FiltersProps> = ({
       }
     });
     filterByStatus && setFilteredFlows(filterByStatus);
+    filters && addToSearchParams(filters);
     if (
       !filters?.status &&
       !filters?.applicationType &&
       !filters?.serviceType
     ) {
       setFilteredFlows(flows);
     }
-  }, [filters]);
-
-  const handleFiltering = () => {};
+  };
 
-  const handleChange = (
-    filterKey: keyof FilterState,
-    filterValue: FilterState[keyof FilterState],
-  ) =>
+  const handleChange = (filterKey: FilterKeys, filterValue: FilterValues) =>
     filters?.[filterKey] === filterValue
       ? setFilters({ ...filters, [filterKey]: undefined })
       : setFilters({ ...filters, [filterKey]: filterValue });