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

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);

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) => {