added CurrentFlowState to zustand

src/frontend/src/App.tsx

@@ -22,6 +22,7 @@ import { getHealth, getVersion } from "./controllers/API";
 import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import { useTypesStore } from "./stores/typesStore";
+import { useDarkStore } from "./stores/darkStore";
 
 export default function App() {
   let { setCurrent, setShowSideBar, setIsStackedOpen } =
@@ -130,7 +131,8 @@ export default function App() {
   };
 
   const { isAuthenticated } = useContext(AuthContext);
-  const { refreshFlows, setVersion } = useContext(FlowsContext);
+  const { refreshFlows } = useContext(FlowsContext);
+  const setVersion = useDarkStore((state) => state.setVersion);
   const getTypes = useTypesStore((state) => state.getTypes);
 
   useEffect(() => {

src/frontend/src/modals/exportModal/index.tsx

@@ -8,10 +8,12 @@ import { FlowsContext } from "../../contexts/flowsContext";
 import useAlertStore from "../../stores/alertStore";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
+import { useDarkStore } from "../../stores/darkStore";
 
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {
-    const { flows, tabId, downloadFlow, version } = useContext(FlowsContext);
+    const { flows, tabId, downloadFlow  } = useContext(FlowsContext);
+    const version = useDarkStore((state) => state.version);
     const setNoticeData = useAlertStore((state) => state.setNoticeData);
     const [checked, setChecked] = useState(true);
     const flow = flows.find((f) => f.id === tabId);

src/frontend/src/modals/shareModal/index.tsx

@@ -23,6 +23,7 @@ import {
 import { getTagsIds } from "../../utils/storeUtils";
 import ConfirmationModal from "../ConfirmationModal";
 import BaseModal from "../baseModal";
+import { useDarkStore } from "../../stores/darkStore";
 
 export default function ShareModal({
   component,
@@ -39,7 +40,7 @@ export default function ShareModal({
   setOpen?: (open: boolean) => void;
   disabled?: boolean;
 }): JSX.Element {
-  const { version } = useContext(FlowsContext);
+  const version = useDarkStore((state) => state.version);
   const hasStore = useStoreStore((state) => state.hasStore);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
 

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx

@@ -15,6 +15,7 @@ import {
   getNodeId,
 } from "../../../../../utils/reactflowUtils";
 import { removeCountFromString } from "../../../../../utils/utils";
+import { useDarkStore } from "../../../../../stores/darkStore";
 
 export default function SidebarDraggableComponent({
   sectionName,
@@ -36,8 +37,8 @@ export default function SidebarDraggableComponent({
   official: boolean;
 }) {
   const [open, setOpen] = useState(false);
-  const { deleteComponent, version } = useContext(FlowsContext);
-  const { autoLogin, userData } = useContext(AuthContext);
+  const { deleteComponent } = useContext(FlowsContext);
+  const version = useDarkStore((state) => state.version);
   const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
   const popoverRef = useRef<HTMLDivElement>(null);
 

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

@@ -24,6 +24,7 @@ import {
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
 import { classNames } from "../../../../utils/utils";
+import { useDarkStore } from "../../../../stores/darkStore";
 
 export default function NodeToolbarComponent({
   data,
@@ -72,7 +73,8 @@ export default function NodeToolbarComponent({
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
 
-  const { saveComponent, flows, version } = useContext(FlowsContext);
+  const { saveComponent, flows  } = useContext(FlowsContext);
+  const version = useDarkStore((state) => state.version);
   const { takeSnapshot } = useContext(undoRedoContext);
   const [showModalAdvanced, setShowModalAdvanced] = useState(false);
   const [showconfirmShare, setShowconfirmShare] = useState(false);

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

@@ -3,9 +3,11 @@ import { useParams } from "react-router-dom";
 import Header from "../../components/headerComponent";
 import { FlowsContext } from "../../contexts/flowsContext";
 import Page from "./components/PageComponent";
+import { useDarkStore } from "../../stores/darkStore";
 
 export default function FlowPage(): JSX.Element {
-  const { flows, tabId, setTabId, version } = useContext(FlowsContext);
+  const { flows, tabId, setTabId } = useContext(FlowsContext);
+  const version = useDarkStore((state) => state.version);
   const { id } = useParams();
 
   // Set flow tab id

src/frontend/src/stores/darkStore.tsx

@@ -12,6 +12,8 @@ export const useDarkStore = create<DarkStoreType>((set) => ({
   dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false,
   stars: 0,
   gradientIndex: gradientIndexInitialState(),
+  version: "",
+  setVersion: (version) => set(() => ({ version: version })),
   setDark: (dark) => set(() => ({ dark: dark })),
   setStars: (starts) => set(() => ({ stars: starts })),
   setGradientIndex: (gradientIndex) =>

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,11 +1,25 @@
 import { create } from "zustand";
 import { FlowsManagerStoreType } from "../types/zustand/flowsManager";
-
-let currentFlowId: string = "";
+import { FlowState } from "../types/tabs";
 
 const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
+  currentFlowId: "",
   flows: [],
-  currentFlow: get().flows[currentFlowId],
+  currentFlow: get().flows[get().currentFlowId],
+  isLoading: true,
+  setIsLoading: (isLoading: boolean) => set({ isLoading }),
+  flowsState: {},
+  currentFlowState: get().flowsState[get().currentFlowId],
+  setCurrentFlowState: (flowState: FlowState | ((oldState: FlowState) => FlowState)) => {
+    const newFlowState = typeof flowState === "function" ? flowState(get().currentFlowState) : flowState;
+    set((state) => ({
+      flowsState: {
+        ...state.flowsState,
+        [state.currentFlowId]: newFlowState,
+      },
+    }));
+  },
+
 }));
 
 export default useFlowsManagerStore;

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

@@ -55,14 +55,16 @@ export type FlowsContextType = {
 };
 
 export type FlowsState = {
-  [key: string]: {
-    isPending: boolean;
-    formKeysData: {
-      template?: string;
-      input_keys?: Object;
-      memory_keys?: Array<string>;
-      handle_keys?: Array<string>;
-    };
+  [key: string]: FlowState;
+};
+
+export type FlowState = {
+  isPending: boolean;
+  formKeysData: {
+    template?: string;
+    input_keys?: Object;
+    memory_keys?: Array<string>;
+    handle_keys?: Array<string>;
   };
 };
 

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

@@ -2,6 +2,8 @@ export type DarkStoreType = {
   dark: boolean;
   stars: number;
   gradientIndex: number;
+  version: string;
+  setVersion: (version: string) => void;
   setDark: (dark: boolean) => void;
   setStars: (stars: number) => void;
   setGradientIndex: (gradientIndex: number) => void;

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

@@ -1,6 +1,13 @@
 import { FlowType } from "../../flow";
+import { FlowState, FlowsState } from "../../tabs";
 
 export type FlowsManagerStoreType = {
   flows: Array<FlowType>;
   currentFlow: FlowType | undefined;
+  currentFlowId: string;
+  isLoading: boolean;
+  setIsLoading: (isLoading: boolean) => void;
+  flowsState: FlowsState;
+  currentFlowState: FlowState;
+  setCurrentFlowState: (state: FlowState | ((oldState: FlowState) => FlowState)) => void;
 };