From 90bf92b2dc0822a6939f908b146d59a6b3cdff10 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Tue, 14 Nov 2023 22:15:39 -0300
Subject: [PATCH] fix(extraSidebarComponent/index.tsx): fix bug causing issues
 with filtering data feat(extraSidebarComponent/index.tsx): add support for
 filtering data based on selected filter edges fix(components/index.tsx): fix
 import statement for FlowsContext in order to use the correct context

---
 .../extraSidebarComponent/index.tsx           | 42 ++++++++++++++++++-
 .../MainPage/components/components/index.tsx  |  4 +-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 0de370b54..fe8f87176 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -122,13 +122,51 @@ export default function ExtraSidebar(): JSX.Element {
       setSearch("");
     }
   }
-  //CAUSADORA DE BUGS
+
   useEffect(() => {
     if (getFilterEdge.length === 0 && search === "") {
       setFilterData(data);
+      setFilterEdge([]);
       setSearch("");
     }
-  }, [getFilterEdge, data]);
+  }, [getFilterEdge]);
+
+  useEffect(() => {
+    if (getFilterEdge?.length > 0) {
+      setFilterData((_) => {
+        let dataClone = cloneDeep(data);
+        let ret = {};
+        Object.keys(dataClone).forEach((d: keyof APIObjectType, i) => {
+          ret[d] = {};
+          if (getFilterEdge.some((x) => x.family === d)) {
+            ret[d] = dataClone[d];
+
+            const filtered = getFilterEdge
+              .filter((x) => x.family === d)
+              .pop()
+              .type.split(",");
+
+            for (let i = 0; i < filtered.length; i++) {
+              filtered[i] = filtered[i].trimStart();
+            }
+
+            if (filtered.some((x) => x !== "")) {
+              let keys = Object.keys(dataClone[d]).filter((nd) =>
+                filtered.includes(nd)
+              );
+              Object.keys(dataClone[d]).forEach((element) => {
+                if (!keys.includes(element)) {
+                  delete ret[d][element];
+                }
+              });
+            }
+          }
+        });
+        setSearch("");
+        return ret;
+      });
+    }
+  }, [getFilterEdge]);
 
   useEffect(() => {
     handleSearchInput(search);
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index 010c0ab1f..c793fa469 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -2,10 +2,10 @@ import { useContext } from "react";
 import { CardComponent } from "../../../../components/cardComponent";
 import CardsWrapComponent from "../../../../components/cardsWrapComponent";
 import { alertContext } from "../../../../contexts/alertContext";
-import { TabsContext } from "../../../../contexts/tabsContext";
+import { FlowsContext } from "../../../../contexts/flowsContext";
 
 export default function ComponentsComponent() {
-  const { flows, removeFlow, uploadFlow, isLoading } = useContext(TabsContext);
+  const { flows, removeFlow, uploadFlow, isLoading } = useContext(FlowsContext);
   const { setErrorData } = useContext(alertContext);
 
   const onFileDrop = (e) => {