fix(App.tsx): increase the timer interval for fetching data to 20 seconds for better performance

feat(App.tsx): add cleanup function to clean up flow state when component unmounts
feat(PageComponent/index.tsx): add cleanFlow function to reset flow state when component unmounts
fix(PageComponent/index.tsx): fix bug where newEdges were not being set correctly in onConnect function
fix(PageComponent/index.tsx): remove unnecessary dependencies from onConnect function
fix(PageComponent/index.tsx): fix bug where setEdges was not returning the newEdges array correctly
feat(flowStore.ts): add cleanFlow function to reset flow state to initial values
feat(flowStore.ts): add cleanFlow function to reset flow state to initial values in flowStore type

src/frontend/src/App.tsx

@@ -149,7 +149,7 @@ export default function App() {
         .catch(() => {
           setFetchError(true);
         });
-    }, 5000);
+    }, 20000);
 
     // Clean up the timer on component unmount
     return () => {

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -64,6 +64,7 @@ export default function Page({
   const onEdgesChange = useFlowStore((state) => state.onEdgesChange);
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
+  const cleanFlow = useFlowStore((state) => state.cleanFlow);
   const deleteNode = useFlowStore((state) => state.deleteNode);
   const deleteEdge = useFlowStore((state) => state.deleteEdge);
   const undo = useFlowsManagerStore((state) => state.undo);
@@ -170,6 +171,12 @@ export default function Page({
     }
   }, [currentFlowId, reactFlowInstance]);
 
+  useEffect(() => {
+    return () => {
+      cleanFlow();
+    }
+  }, [])
+
   const onConnectMod = useCallback(
     (params: Connection) => {
       takeSnapshot();
@@ -210,26 +217,30 @@ export default function Page({
 
   const onConnect = useCallback(
     (connection: Connection) => {
-      const newEdges = addEdge(
+      let newEdges:Edge[] = []
-        {
+      setEdges((oldEdges) => {
-          ...connection,
+        newEdges = addEdge(
-          data: {
+          {
-            targetHandle: scapeJSONParse(connection.targetHandle!),
+            ...connection,
-            sourceHandle: scapeJSONParse(connection.sourceHandle!),
+            data: {
+              targetHandle: scapeJSONParse(connection.targetHandle!),
+              sourceHandle: scapeJSONParse(connection.sourceHandle!),
+            },
+            style: { stroke: "#555" },
+            className:
+              ((scapeJSONParse(connection.targetHandle!) as targetHandleType)
+                .type === "Text"
+                ? "stroke-foreground "
+                : "stroke-foreground ") + " stroke-connection",
+            animated:
+              (scapeJSONParse(connection.targetHandle!) as targetHandleType)
+                .type === "Text",
           },
-          style: { stroke: "#555" },
+          oldEdges
-          className:
+        );
-            ((scapeJSONParse(connection.targetHandle!) as targetHandleType)
+        return newEdges;
-              .type === "Text"
+
-              ? "stroke-foreground "
+      })
-              : "stroke-foreground ") + " stroke-connection",
-          animated:
-            (scapeJSONParse(connection.targetHandle!) as targetHandleType)
-              .type === "Text",
-        },
-        edges
-      );
-      setEdges(newEdges);
       useFlowsManagerStore
         .getState()
         .autoSaveCurrentFlow(
@@ -238,7 +249,7 @@ export default function Page({
           reactFlowInstance?.getViewport() ?? { x: 0, y: 0, zoom: 1 }
         );
     },
-    [nodes, edges, setEdges, reactFlowInstance, addEdge]
+    [nodes, setEdges, reactFlowInstance, addEdge]
   );
 
   const onDrop = useCallback(
@@ -357,7 +368,7 @@ export default function Page({
         <div className="h-full w-full">
           <div className="h-full w-full" ref={reactFlowWrapper}>
             {Object.keys(templates).length > 0 &&
-            Object.keys(types).length > 0 ? (
+              Object.keys(types).length > 0 ? (
               <div id="react-flow-id" className="h-full w-full">
                 <ReactFlow
                   nodes={nodes}

src/frontend/src/stores/flowStore.ts

@@ -250,6 +250,15 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   setLastCopiedSelection: (newSelection) => {
     set({ lastCopiedSelection: newSelection });
   },
+  cleanFlow: () => {
+    set({
+      nodes: [],
+      edges: [],
+      flowState: undefined,
+      sseData: {},
+      isBuilt: false,
+    });
+  },
 }));
 
 export default useFlowStore;

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

@@ -49,4 +49,5 @@ export type FlowStoreType = {
   ) => void;
   isBuilt: boolean;
   setIsBuilt: (isBuilt: boolean) => void;
+  cleanFlow: () => void;
 };