Removed useEffects from flowsContext

src/frontend/src/App.tsx

@@ -19,6 +19,9 @@ import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
 import { typesContext } from "./contexts/typesContext";
 import Router from "./routes";
+import { AuthContext } from "./contexts/authContext";
+import { FlowsContext } from "./contexts/flowsContext";
+import { getVersion } from "./controllers/API";
 
 export default function App() {
   let { setCurrent, setShowSideBar, setIsStackedOpen } =
@@ -42,7 +45,7 @@ export default function App() {
     setSuccessOpen,
     loading,
   } = useContext(alertContext);
-  const navigate = useNavigate();
+
   const { fetchError } = useContext(typesContext);
 
   // Initialize state variable for the list of alerts
@@ -129,6 +132,21 @@ export default function App() {
     );
   };
 
+  const { getAuthentication } = useContext(AuthContext);
+  const { refreshFlows, setVersion } = useContext(FlowsContext);
+
+  useEffect(() => {
+    // 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
+      refreshFlows();
+    }
+    
+    getVersion().then((data) => {
+      setVersion(data.version);
+    });
+  }, [getAuthentication()]);
+
   return (
     //need parent component with width and height
     <div className="flex h-full flex-col">

src/frontend/src/contexts/flowsContext.tsx

@@ -5,7 +5,6 @@ import {
   createContext,
   useCallback,
   useContext,
-  useEffect,
   useRef,
   useState,
 } from "react";
@@ -72,6 +71,7 @@ const FlowsContextInitialValue: FlowsContextType = {
   setTabId: (index: string) => {},
   isLoading: true,
   flows: [],
+  setVersion: () => {},
   removeFlow: (id: string) => {},
   addFlow: async (
     newProject: boolean,
@@ -88,6 +88,7 @@ const FlowsContextInitialValue: FlowsContextType = {
   saveComponent: async (component: NodeDataType, override: boolean) => "",
   deleteComponent: (key: string) => {},
   version: "",
+  refreshFlows: () => {},
 };
 
 export const FlowsContext = createContext<FlowsContextType>(
@@ -101,8 +102,8 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
   const [tabId, setTabId] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [flows, setFlows] = useState<Array<FlowType>>([]);
-  const { setData } = useContext(typesContext);
   const [tabsState, setTabsState] = useState<FlowsState>({});
+  const {setData} = useContext(typesContext);
 
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
@@ -123,14 +124,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
     });
   }
 
-  useEffect(() => {
-    // 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
-      refreshFlows();
-    }
-  }, [getAuthentication(), tabId]);
-
   function getTabsDataFromDB() {
     //get tabs from db
     return readFlowsFromDatabase();
@@ -386,7 +379,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
       // updateNodes(data.nodes, data.edges);
       if (refreshIds) updateIds(data); // Assuming updateIds is defined elsewhere
     }
-
     return data;
   };
 
@@ -506,17 +498,13 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
 
   // Initialize state variable for the version
   const [version, setVersion] = useState("");
-  useEffect(() => {
-    getVersion().then((data) => {
-      setVersion(data.version);
-    });
-  }, []);
 
 
   return (
     <FlowsContext.Provider
       value={{
         version,
+        setVersion,
         flows,
         saveFlow,
         tabId,
@@ -529,6 +517,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
         uploadFlow,
         tabsState,
         setTabsState,
+        refreshFlows,
         isLoading,
         saveComponent,
         deleteComponent,

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

@@ -297,8 +297,8 @@ export async function saveFlowStyleToDatabase(flowStyle: FlowStyleType) {
  * @returns {Promise<AxiosResponse<any>>} A promise that resolves to an AxiosResponse containing the version information.
  */
 export async function getVersion() {
-  const respnose = await api.get(`${BASE_URL_API}version`);
+  const response = await api.get(`${BASE_URL_API}version`);
-  return respnose.data;
+  return response.data;
 }
 
 /**

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,9 +1,11 @@
 import { create } from "zustand";
-import { FlowsContextType } from "../types/tabs";
 import { FlowsManagerStoreType } from "../types/zustand/flowsManager";
   
-const useFlowStore = create<FlowsManagerStoreType>((set, get) => ({
+let currentFlowId: string = "";
+
+const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     flows: [],
+    currentFlow: get().flows[currentFlowId],
 }));
 
-export default useFlowStore;
+export default useFlowsManagerStore;

src/frontend/src/types/tabs/index.ts

@@ -13,6 +13,7 @@ export type FlowsContextType = {
   setTabId: (index: string) => void;
   //keep
   removeFlow: (id: string) => void;
+  refreshFlows: () => void;
   //keep
   addFlow: (
     newProject: boolean,
@@ -29,6 +30,7 @@ export type FlowsContextType = {
   downloadFlows: () => void;
   //keep
   uploadFlows: () => void;
+  setVersion: (version: string) => void;
   uploadFlow: ({
     newProject,
     file,

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

@@ -4,4 +4,5 @@ import { FlowsState } from "../../tabs";
 
 export type FlowsManagerStoreType = {
     flows: Array<FlowType>;
+    currentFlow: FlowType | undefined;
   };