Added refresh flows function

src/frontend/src/App.tsx

@@ -23,6 +23,7 @@ import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import { useTypesStore } from "./stores/typesStore";
 import { useDarkStore } from "./stores/darkStore";
+import useFlowsManagerStore from "./stores/flowsManagerStore";
 
 export default function App() {
   let { setCurrent, setShowSideBar, setIsStackedOpen } =
@@ -131,7 +132,7 @@ export default function App() {
   };
 
   const { isAuthenticated } = useContext(AuthContext);
-  const { refreshFlows } = useContext(FlowsContext);
+  const refreshFlows = useFlowsManagerStore((state) => state.refreshFlows);
   const setVersion = useDarkStore((state) => state.setVersion);
   const getTypes = useTypesStore((state) => state.getTypes);
 

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,6 +1,40 @@
+import { cloneDeep } from "lodash";
+import ShortUniqueId from "short-unique-id";
 import { create } from "zustand";
+import { readFlowsFromDatabase } from "../controllers/API";
+import { APIClassType } from "../types/api";
+import { FlowType, NodeDataType } from "../types/flow";
 import { FlowState } from "../types/tabs";
 import { FlowsManagerStoreType } from "../types/zustand/flowsManager";
+import { processDataFromFlow } from "../utils/reactflowUtils";
+import { createRandomKey } from "../utils/utils";
+import { useTypesStore } from "./typesStore";
+import useAlertStore from "./alertStore";
+
+const uid = new ShortUniqueId({ length: 5 });
+
+const processFlows = (DbData: FlowType[], skipUpdate = true) => {
+  let savedComponents: { [key: string]: APIClassType } = {};
+  DbData.forEach((flow: FlowType) => {
+    try {
+      if (!flow.data) {
+        return;
+      }
+      if (flow.data && flow.is_component) {
+        (flow.data.nodes[0].data as NodeDataType).node!.display_name =
+          flow.name;
+        savedComponents[
+          createRandomKey((flow.data.nodes[0].data as NodeDataType).type, uid())
+        ] = cloneDeep((flow.data.nodes[0].data as NodeDataType).node!);
+        return;
+      }
+      if (!skipUpdate) processDataFromFlow(flow, false);
+    } catch (e) {
+      console.log(e);
+    }
+  });
+  return { data: savedComponents, flows: DbData };
+};
 
 const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
   currentFlowId: "",
@@ -32,6 +66,26 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
       currentFlowState: newFlowState,
     }));
   },
+  refreshFlows: () => {
+    return new Promise<void>((resolve, reject) => {
+      set({ isLoading: true });
+      readFlowsFromDatabase().then((dbData) => {
+        if (dbData) {
+          const { data, flows } = processFlows(dbData, false);
+          set({ flows, isLoading: false });
+          useTypesStore.setState((state) => ({
+            data: { ...state.data, ["saved_components"]: data },
+          }));
+          resolve();
+        }
+      }).catch((e) => {
+        useAlertStore.getState().setErrorData({
+          title: "Could not load flows from database",
+        });
+        reject(e);
+      });
+    });
+  },
 }));
 
 export default useFlowsManagerStore;

src/frontend/src/types/zustand/flowsManager/index.ts

@@ -11,4 +11,5 @@ export type FlowsManagerStoreType = {
   flowsState: FlowsState;
   currentFlowState: FlowState | undefined;
   setCurrentFlowState: (state: FlowState | ((oldState: FlowState | undefined) => FlowState)) => void;
+  refreshFlows: () => Promise<void>;
 };

src/frontend/src/utils/reactflowUtils.ts

@@ -153,6 +153,19 @@ export function updateTemplate(
   return clonedObject;
 }
 
+export const processDataFromFlow = (flow: FlowType, refreshIds = true) => {
+  let data = flow?.data ? flow.data : null;
+  if (data) {
+    processFlowEdges(flow);
+    //prevent node update for now
+    // processFlowNodes(flow);
+    //add animation to text type edges
+    updateEdges(data.edges);
+    // updateNodes(data.nodes, data.edges);
+    if (refreshIds) updateIds(data); // Assuming updateIds is defined elsewhere
+  }
+};
+
 export function updateIds(newFlow: ReactFlowJsonObject) {
   let idsMap = {};