From 17e8d659bf4a4bdc84346dba98c3a3d2416e3c10 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Mon, 20 Jan 2025 11:52:49 +0000
Subject: [PATCH] wire up clearFilters trigger and button

---
 editor.planx.uk/src/pages/Filters.tsx |  2 --
 editor.planx.uk/src/pages/Team.tsx    | 27 +++++++++++++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/editor.planx.uk/src/pages/Filters.tsx b/editor.planx.uk/src/pages/Filters.tsx
index 7298af4bb1..d3269faee0 100644
--- a/editor.planx.uk/src/pages/Filters.tsx
+++ b/editor.planx.uk/src/pages/Filters.tsx
@@ -183,7 +183,6 @@ export const Filters: React.FC<FiltersProps> = ({
     setSelectedFilters([]);
     formik.setFieldValue("pattern", "");
     clearSearchParams();
-    window.location.reload();
   };
 
   const handleFiltering = (filtersArg: FilterState | undefined) => {
@@ -300,7 +299,6 @@ export const Filters: React.FC<FiltersProps> = ({
             {expanded ? "Hide filters" : "Show filters"}
           </Typography>
         </FiltersToggle>
-        <Button onClick={() => clearAllFilters()} title="Clear" />
         <Box sx={{ display: "flex", gap: 1 }}>
           {selectedFilters &&
             selectedFilters.map((filter) => {
diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx
index 706335d43e..623519152b 100644
--- a/editor.planx.uk/src/pages/Team.tsx
+++ b/editor.planx.uk/src/pages/Team.tsx
@@ -403,6 +403,15 @@ const Team: React.FC = () => {
     onSubmit: () => {},
   });
 
+  const haveFlowsBeenFiltered = filteredFlows?.length !== flows?.length;
+
+  useEffect(() => {
+    // resets trigger when filters cleared
+    if (!haveFlowsBeenFiltered) {
+      setTriggerClearFilters(false);
+    }
+  }, [haveFlowsBeenFiltered]);
+
   const sortOptions: SortableFields<FlowSummary>[] = [
     {
       displayName: "Last updated",
@@ -442,7 +451,6 @@ const Team: React.FC = () => {
 
   const numberOfServices = filteredFlows?.length || 0;
   const pluralisedService = numberOfServices === 1 ? "service" : "services";
-  const haveFlowsBeenFiltered = filteredFlows?.length === flows?.length;
   const listTitle = haveFlowsBeenFiltered
     ? "Showing all services"
     : `Showing ${numberOfServices} ${pluralisedService}`;
@@ -544,14 +552,15 @@ const Team: React.FC = () => {
                 <Typography variant="h3" component="h2">
                   {listTitle}
                 </Typography>
-                {!haveFlowsBeenFiltered && (
-                  <Button variant="link">Clear filters</Button>
+                {haveFlowsBeenFiltered && (
+                  <Button
+                    onClick={() => setTriggerClearFilters(true)}
+                    variant="link"
+                  >
+                    Clear filters
+                  </Button>
                 )}
               </Box>
-              <Button
-                title="Clear"
-                onClick={() => setTriggerClearFilters(true)}
-              />
               {hasFeatureFlag("SORT_FLOWS") && flows && (
                 <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
                   <Typography variant="body2">
@@ -594,7 +603,9 @@ const Team: React.FC = () => {
             <Typography variant="h3" textAlign="center">
               No results
             </Typography>
-            <Button variant="link">Clear filters</Button>
+            <Button onClick={() => setTriggerClearFilters(true)} variant="link">
+              Clear filters
+            </Button>
           </Box>
         )}
         {flows && !flows.length && <GetStarted flows={flows} />}