feat: wire up search and filter on Team page (#4265)

theopensystemslab · Feb 7, 2025 · 578c1a3 · 578c1a3
1 parent cccb0de
commit 578c1a3
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx
@@ -542,6 +542,18 @@ const Team: React.FC = () => {
   const [filteredFlows, setFilteredFlows] = useState<FlowSummary[] | null>(
     null,
   );
+  const [searchedFlows, setSearchedFlows] = useState<FlowSummary[] | null>(
+    null,
+  );
+  const [matchingFlows, setMatchingflows] = useState<FlowSummary[] | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const diffFlows =
+      searchedFlows?.filter((flow) => filteredFlows?.includes(flow)) || null;
+    setMatchingflows(diffFlows);
+  }, [searchedFlows, filteredFlows]);
 
   const sortOptions: SortableFields<FlowSummary>[] = [
     {
@@ -607,6 +619,7 @@ const Team: React.FC = () => {
       );
       setFlows(sortedFlows);
       setFilteredFlows(sortedFlows);
+      setSearchedFlows(sortedFlows);
     });
   }, [teamId, setFlows, getFlows]);
 
@@ -646,7 +659,7 @@ const Team: React.FC = () => {
           {hasFeatureFlag("SORT_FLOWS") && flows && (
             <SearchBox<FlowSummary>
               records={flows}
-              setRecords={setFilteredFlows}
+              setRecords={setSearchedFlows}
               searchKey={["name", "slug"]}
             />
           )}
@@ -704,9 +717,9 @@ const Team: React.FC = () => {
             </Box>
           )}
         </Box>
-        {filteredFlows && flows && (
+        {matchingFlows && flows && (
           <DashboardList>
-            {filteredFlows.map((flow) => (
+            {matchingFlows.map((flow) => (
               <FlowCard
                 flow={flow}
                 flows={flows}