fix(cardComponent): remove unused useContext import to improve code cleanliness

fix(tabsContext): remove commented out code for getting locally saved tabs data to improve code readability
fix(tabsContext): make removeFlow function asynchronous to ensure proper flow deletion from the database
fix(tabsContext): await the deleteFlowFromDatabase function before updating the flows state to prevent race conditions
fix(tabsContext): handle errors when saving flow to the database and log them to the console
fix(tabsContext): handle errors when deleting a component flow and log them to the console
fix(MainPage): remove unused removeFlow function import to improve code cleanliness

src/frontend/src/components/cardComponent/index.tsx

@@ -1,5 +1,3 @@
-import { useContext } from "react";
-import { TabsContext } from "../../contexts/tabsContext";
 import { cardComponentPropsType } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
 import IconComponent from "../genericIconComponent";
@@ -18,8 +16,6 @@ export const CardComponent = ({
   onDelete,
   button,
 }: cardComponentPropsType): JSX.Element => {
-  const { removeFlow } = useContext(TabsContext);
-
   return (
     <Card className="group">
       <CardHeader>

src/frontend/src/contexts/tabsContext.tsx

@@ -137,8 +137,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks.
     if (getAuthentication() === true) {
       // get data from db
-      //get tabs locally saved
-      // let tabsData = getLocalStorageTabsData();
       refreshFlows();
     }
   }, [templates, getAuthentication()]);
@@ -382,12 +380,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
    * Updates the state of flows and tabIndex using setFlows and setTabIndex hooks.
    * @param {string} id - The id of the flow to remove.
    */
-  function removeFlow(id: string) {
+  async function removeFlow(id: string) {
     const index = flows.findIndex((flow) => flow.id === id);
     if (index >= 0) {
-      deleteFlowFromDatabase(id).then(() => {
+      await deleteFlowFromDatabase(id);
-        setFlows(flows.filter((flow) => flow.id !== id));
+      setFlows(flows.filter((flow) => flow.id !== id));
-      });
     }
   }
   /**
@@ -688,30 +685,37 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       }
     }
     component.node!.official = false;
-    saveFlowToDatabase(createFlowComponent(component));
+
-    setData((prev) => {
+    saveFlowToDatabase(createFlowComponent(component))
-      let newData = { ...prev };
+      .then((res) => {
-      //clone to prevent reference erro
+        setData((prev) => {
-      newData["custom_components"][key] = _.cloneDeep({
+          let newData = { ...prev };
-        ...component.node,
+          //clone to prevent reference erro
-        official: false,
+          newData["custom_components"][key] = _.cloneDeep({
+            ...component.node,
+            official: false,
+          });
+          return newData;
+        });
+      })
+      .catch((err) => {
+        console.error(err);
       });
-      return newData;
-    });
   }
 
   function deleteComponent(id: string, key: string) {
-    let flow = flows.find(
+    let componentFlow = flows.find(
-      (flow) =>
+      (componentFlow) =>
-        flow.is_component &&
+        componentFlow.is_component &&
-        (flow.data?.nodes[0].data as NodeDataType).type === key
+        (componentFlow.data?.nodes[0].data as NodeDataType).type === key
     );
-    if (flow) {
+    if (componentFlow) {
-      removeFlow(flow.id);
+      removeFlow(componentFlow.id).then((response) => {
-      setData((prev) => {
+        setData((prev) => {
-        let newData = _.cloneDeep(prev);
+          let newData = _.cloneDeep(prev);
-        delete newData["custom_components"][key];
+          delete newData["custom_components"][key];
-        return newData;
+          return newData;
+        });
       });
     }
   }

src/frontend/src/pages/MainPage/index.tsx

@@ -16,7 +16,6 @@ export default function HomePage(): JSX.Element {
     downloadFlows,
     uploadFlows,
     addFlow,
-    removeFlow,
     uploadFlow,
     isLoading,
   } = useContext(TabsContext);