fix(App.tsx): remove unused setErrorData and setLoading variables to improve code readability

feat(App.tsx): add support for successData, successOpen, and setSuccessOpen variables from alertContext to handle success alerts
feat(App.tsx): add support for fetchError variable from typesContext to handle fetch errors
fix(tabsContext.tsx): add setData variable to useContext to update data state
feat(tabsContext.tsx): add support for saving custom components to data state in typesContext
fix(typesContext.tsx): remove unused imports and commented code
feat(typesContext.tsx): add support for saveFlowToDatabase function to save flow to the database
fix(index.ts): add missing newline at the end of the file

src/frontend/src/App.tsx

@@ -42,9 +42,7 @@ export default function App() {
     successData,
     successOpen,
     setSuccessOpen,
-    setErrorData,
     loading,
-    setLoading,
   } = useContext(alertContext);
   const navigate = useNavigate();
   const { fetchError } = useContext(typesContext);

src/frontend/src/contexts/tabsContext.tsx

@@ -90,7 +90,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   const [flows, setFlows] = useState<Array<FlowType>>([]);
   const [id, setId] = useState(uid());
-  const { templates, reactFlowInstance } = useContext(typesContext);
+  const { templates, reactFlowInstance, setData } = useContext(typesContext);
   const [lastCopiedSelection, setLastCopiedSelection] = useState<{
     nodes: any;
     edges: any;
@@ -139,11 +139,24 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   }
 
   function processDBData(DbData: FlowType[]) {
+    let storeComponents: { [key: string]: APIClassType } = {};
     DbData.forEach((flow: FlowType) => {
       try {
         if (!flow.data) {
           return;
         }
+        if (flow.data && flow.is_component) {
+          storeComponents[(flow.data.nodes[0].data as NodeDataType).type] = (
+            flow.data.nodes[0].data as NodeDataType
+          ).node!;
+        }
+        setData((prev) => {
+          let newData = _.cloneDeep(prev);
+          Object.keys(storeComponents).forEach((key) => {
+            newData["custom_components"][key] = storeComponents[key];
+          });
+          return newData;
+        });
         processDataFromFlow(flow, false);
       } catch (e) {}
     });

src/frontend/src/contexts/typesContext.tsx

@@ -7,7 +7,7 @@ import {
   useState,
 } from "react";
 import { Edge, Node, ReactFlowInstance } from "reactflow";
-import { getAll, getHealth, saveFlowStore } from "../controllers/API";
+import { getAll, getHealth, saveFlowToDatabase } from "../controllers/API";
 import { APIClassType, APIKindType } from "../types/api";
 import { localStorageUserType } from "../types/entities";
 import { NodeDataType } from "../types/flow";
@@ -72,19 +72,19 @@ export function TypesProvider({ children }: { children: ReactNode }) {
       if (isMounted && result?.status === 200) {
         setLoading(false);
         let { data } = _.cloneDeep(result);
-        const savedComponents = autoLogin
-          ? localStorage.getItem("auto")
-          : localStorage.getItem(userData?.id!);
-        if (savedComponents !== null) {
-          const { components }: localStorageUserType = JSON.parse(
-            savedComponents!
-          );
-          Object.keys(components).forEach((key) => {
-            data["custom_components"][key] = (
-              components[key].data?.nodes[0].data! as NodeDataType
-            ).node!;
-          });
-        }
+        // const savedComponents = autoLogin
+        //   ? localStorage.getItem("auto")
+        //   : localStorage.getItem(userData?.id!);
+        // if (savedComponents !== null) {
+        //   // const { components }: localStorageUserType = JSON.parse(
+        //   //   savedComponents!
+        //   // );
+        //   Object.keys(components).forEach((key) => {
+        //     data["custom_components"][key] = (
+        //       components[key].data?.nodes[0].data! as NodeDataType
+        //     ).node!;
+        //   });
+        // }
         setData(data);
         setTemplates(
           Object.keys(data).reduce((acc, curr) => {
@@ -150,12 +150,12 @@ export function TypesProvider({ children }: { children: ReactNode }) {
   }
 
   function saveComponent(component: NodeDataType, id: string) {
-    let savedComponentsJSON: localStorageUserType = { components: {} };
-    if (checkLocalStorageKey(id)) {
-      let savedComponents = localStorage.getItem(id)!;
-      savedComponentsJSON = JSON.parse(savedComponents);
-    }
-    let components = savedComponentsJSON.components;
+    // let savedComponentsJSON: localStorageUserType = { components: {} };
+    // if (checkLocalStorageKey(id)) {
+    //   let savedComponents = localStorage.getItem(id)!;
+    //   savedComponentsJSON = JSON.parse(savedComponents);
+    // }
+    // let components = savedComponentsJSON.components;
     let key = component.type;
     if (data["custom_components"][key] !== undefined) {
       let { newKey, increment } = IncrementObjectKey(
@@ -184,10 +184,10 @@ export function TypesProvider({ children }: { children: ReactNode }) {
       }
     }
     component.node!.official = false;
-    components[key] = createFlowComponent(component);
-    saveFlowStore(createFlowComponent(component));
-    savedComponentsJSON.components = components;
-    localStorage.setItem(id, JSON.stringify(savedComponentsJSON));
+    // components[key] = createFlowComponent(component);
+    saveFlowToDatabase(createFlowComponent(component));
+    // savedComponentsJSON.components = components;
+    // localStorage.setItem(id, JSON.stringify(savedComponentsJSON));
     setData((prev) => {
       let newData = { ...prev };
       //clone to prevent reference erro

src/frontend/src/controllers/API/index.ts

@@ -112,12 +112,14 @@ export async function saveFlowToDatabase(newFlow: {
   data: ReactFlowJsonObject | null;
   description: string;
   style?: FlowStyleType;
+  is_component?: boolean;
 }): Promise<FlowType> {
   try {
     const response = await api.post(`${BASE_URL_API}flows/`, {
       name: newFlow.name,
       data: newFlow.data,
       description: newFlow.description,
+      is_component: newFlow.is_component,
     });
 
     if (response.status !== 201) {
@@ -568,3 +570,12 @@ export async function saveFlowStore(newFlow: {
     throw error;
   }
 }
+
+/**
+ * Fetches the flows from the store.
+ * @returns {Promise<>} A promise that resolves to an AxiosResponse containing the build status.
+ *
+ */
+export async function getFlowsStore(): Promise<AxiosResponse<FlowType[]>> {
+  return await api.get(`${BASE_URL_API}store/`);
+}