added flows variable and current flow and state to zustand

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -48,6 +48,7 @@ import {
 } from "../../../../utils/styleUtils";
 import { classNames, groupByFamily } from "../../../../utils/utils";
 import { useTypesStore } from "../../../../stores/typesStore";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 
 export default function ParameterComponent({
   left,
@@ -69,12 +70,12 @@ export default function ParameterComponent({
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
   const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const { tabId, flows } = useContext(FlowsContext);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const setNode = useFlowStore((state) => state.setNode);
 
-  const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;
+  const flow = currentFlow?.data?.nodes ?? null;
 
   const groupedEdge = useRef(null);
 

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -12,12 +12,13 @@ import { useNavigate } from "react-router-dom";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
-import { menuBarPropsType } from "../../../../types/components";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
 
-export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
+export const MenuBar = (): JSX.Element => {
   const { addFlow } = useContext(FlowsContext);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const { undo, redo } = useContext(undoRedoContext);
   const [openSettings, setOpenSettings] = useState(false);
@@ -34,9 +35,8 @@ export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
       setErrorData(err as { title: string; list?: Array<string> });
     }
   }
-  let current_flow = flows.find((flow) => flow.id === tabId);
 
-  return (
+  return currentFlow ? (
     <div className="round-button-div">
       <button
         onClick={() => {
@@ -51,7 +51,7 @@ export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
             <Button asChild variant="primary" size="sm">
               <div className="header-menu-bar-display">
                 <div className="header-menu-flow-name">
-                  {current_flow!.name}
+                  {currentFlow.name}
                 </div>
                 <IconComponent name="ChevronDown" className="h-4 w-4" />
               </div>
@@ -108,6 +108,8 @@ export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
         ></FlowSettingsModal>
       </div>
     </div>
+  ) : (
+    <></>
   );
 };
 

src/frontend/src/components/headerComponent/index.tsx

@@ -22,9 +22,9 @@ import {
 } from "../ui/dropdown-menu";
 import { Separator } from "../ui/separator";
 import MenuBar from "./components/menuBar";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function Header(): JSX.Element {
-  const { flows, tabId } = useContext(FlowsContext);
   const notificationCenter = useAlertStore((state) => state.notificationCenter);
   const location = useLocation();
   const { logout, autoLogin, isAdmin, userData } = useContext(AuthContext);
@@ -52,10 +52,7 @@ export default function Header(): JSX.Element {
         <Link to="/">
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
-
+        <MenuBar />
-        {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
-          <MenuBar flows={flows} tabId={tabId} />
-        )}
       </div>
       <div className="round-button-div">
         <Link to="/">

src/frontend/src/components/inputFileComponent/index.tsx

@@ -4,6 +4,7 @@ import { uploadFile } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { FileComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function InputFileComponent({
   value,
@@ -13,10 +14,10 @@ export default function InputFileComponent({
   onFileChange,
   editNode = false,
 }: FileComponentType): JSX.Element {
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
   const [myValue, setMyValue] = useState(value);
   const [loading, setLoading] = useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const { tabId } = useContext(FlowsContext);
 
   // Clear component state
   useEffect(() => {
@@ -58,7 +59,7 @@ export default function InputFileComponent({
       // Check if the file type is correct
       if (file && checkFileType(file.name)) {
         // Upload the file
-        uploadFile(file, tabId)
+        uploadFile(file, currentFlowId)
           .then((res) => res.data)
           .then((data) => {
             console.log("File uploaded successfully");

src/frontend/src/contexts/undoRedoContext.tsx

@@ -14,6 +14,7 @@ import {
 } from "../types/typesContext";
 import { isWrappedWithClass } from "../utils/utils";
 import { FlowsContext } from "./flowsContext";
+import useFlowsManagerStore from "../stores/flowsManagerStore";
 
 const initialValue = {
   undo: () => {},
@@ -29,7 +30,8 @@ const defaultOptions: UseUndoRedoOptions = {
 export const undoRedoContext = createContext<undoRedoContextType>(initialValue);
 
 export function UndoRedoProvider({ children }) {
-  const { tabId, flows } = useContext(FlowsContext);
+  const flows = useFlowsManagerStore((state) => state.flows);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
 
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
@@ -39,7 +41,7 @@ export function UndoRedoProvider({ children }) {
   const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
   const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
   const [tabIndex, setTabIndex] = useState(
-    flows.findIndex((flow) => flow.id === tabId)
+    flows.findIndex((flow) => flow.id === currentFlowId)
   );
 
   useEffect(() => {
@@ -50,8 +52,8 @@ export function UndoRedoProvider({ children }) {
     setFuture((old) =>
       flows.map((flow, index) => (old[index] ? old[index] : []))
     );
-    setTabIndex(flows.findIndex((flow) => flow.id === tabId));
+    setTabIndex(flows.findIndex((flow) => flow.id === currentFlowId));
-  }, [flows, tabId]);
+  }, [flows, currentFlowId]);
 
   const takeSnapshot = useCallback(() => {
     // push the current graph to the past state
@@ -79,7 +81,7 @@ export function UndoRedoProvider({ children }) {
       newFuture[tabIndex] = [];
       return newFuture;
     });
-  }, [nodes, edges, past, future, flows, tabId, setPast, setFuture]);
+  }, [nodes, edges, past, future, flows, currentFlowId, setPast, setFuture]);
 
   const undo = useCallback(() => {
     // get the last state that we want to go back to

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

@@ -9,20 +9,21 @@ import useAlertStore from "../../stores/alertStore";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
 import { useDarkStore } from "../../stores/darkStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {
-    const { flows, tabId, downloadFlow  } = useContext(FlowsContext);
+    const { 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);
+    const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
     useEffect(() => {
-      setName(flow!.name);
+      setName(currentFlow!.name);
-      setDescription(flow!.description);
+      setDescription(currentFlow!.description);
-    }, [flow!.name, flow!.description]);
+    }, [currentFlow!.name, currentFlow!.description]);
-    const [name, setName] = useState(flow!.name);
+    const [name, setName] = useState(currentFlow!.name);
-    const [description, setDescription] = useState(flow!.description);
+    const [description, setDescription] = useState(currentFlow!.description);
     const [open, setOpen] = useState(false);
 
     return (
@@ -67,8 +68,8 @@ const ExportModal = forwardRef(
               if (checked) {
                 downloadFlow(
                   {
-                    id: tabId,
+                    id: currentFlow!.id,
-                    data: flow!.data!,
+                    data: currentFlow!.data!,
                     description,
                     name,
                     last_tested_version: version,
@@ -84,8 +85,8 @@ const ExportModal = forwardRef(
               } else
                 downloadFlow(
                   removeApiKeys({
-                    id: tabId,
+                    id: currentFlow!.id,
-                    data: flow!.data!,
+                    data: currentFlow!.data!,
                     description,
                     name,
                     last_tested_version: version,

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -7,26 +7,27 @@ import { FlowsContext } from "../../contexts/flowsContext";
 import { FlowSettingsPropsType } from "../../types/components";
 import { FlowType } from "../../types/flow";
 import BaseModal from "../baseModal";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function FlowSettingsModal({
   open,
   setOpen,
 }: FlowSettingsPropsType): JSX.Element {
-  const { flows, tabId, saveFlow } = useContext(FlowsContext);
+  const { saveFlow } = useContext(FlowsContext);
-  const flow = flows.find((f) => f.id === tabId);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const flows = useFlowsManagerStore((state) => state.flows);
   useEffect(() => {
-    setName(flow!.name);
+    setName(currentFlow!.name);
-    setDescription(flow!.description);
+    setDescription(currentFlow!.description);
-  }, [flow!.name, flow!.description, open]);
+  }, [currentFlow!.name, currentFlow!.description, open]);
 
-  const [name, setName] = useState(flow!.name);
+  const [name, setName] = useState(currentFlow!.name);
-  const [description, setDescription] = useState(flow!.description);
+  const [description, setDescription] = useState(currentFlow!.description);
 
   function handleClick(): void {
-    let savedFlow = flows.find((flow) => flow.id === tabId);
+    currentFlow!.name = name;
-    savedFlow!.name = name;
+    currentFlow!.description = description;
-    savedFlow!.description = description;
+    saveFlow(currentFlow!);
-    saveFlow(savedFlow!);
     setOpen(false);
   }
 
@@ -37,7 +38,7 @@ export default function FlowSettingsModal({
     flows.forEach((flow: FlowType) => {
       if ((flow.is_component ?? false) === false) tempNameList.push(flow.name);
     });
-    setNameList(tempNameList.filter((name) => name !== flow!.name));
+    setNameList(tempNameList.filter((name) => name !== currentFlow!.name));
   }, [flows]);
 
   return (
@@ -58,7 +59,7 @@ export default function FlowSettingsModal({
 
       <BaseModal.Footer>
         <Button
-          disabled={nameLists.includes(name) && name !== flow!.name}
+          disabled={nameLists.includes(name) && name !== currentFlow!.name}
           onClick={handleClick}
           type="submit"
         >

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

@@ -57,7 +57,7 @@ export default function ShareModal({
   const [unavaliableNames, setUnavaliableNames] = useState<
     { id: string; name: string }[]
   >([]);
-  const { saveFlow, flows, tabId } = useContext(FlowsContext);
+  const { saveFlow } = useContext(FlowsContext);
 
   const [loadingNames, setLoadingNames] = useState(false);
 

src/frontend/src/pages/AdminPage/index.tsx

@@ -33,6 +33,7 @@ import UserManagementModal from "../../modals/UserManagementModal";
 import useAlertStore from "../../stores/alertStore";
 import { Users } from "../../types/api";
 import { UserInputType } from "../../types/components";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function AdminPage() {
   const [inputValue, setInputValue] = useState("");
@@ -44,12 +45,11 @@ export default function AdminPage() {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const { userData } = useContext(AuthContext);
   const [totalRowsCount, setTotalRowsCount] = useState(0);
-
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
-  const { setTabId } = useContext(FlowsContext);
 
   // set null id
   useEffect(() => {
-    setTabId("");
+    setCurrentFlowId("");
   }, []);
 
   const userList = useRef([]);

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

@@ -25,14 +25,15 @@ import {
 import DisclosureComponent from "../DisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
 import { useTypesStore } from "../../../../stores/typesStore";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 
 export default function ExtraSidebar(): JSX.Element {
   const data = useTypesStore((state) => state.data);
   const templates = useTypesStore((state) => state.templates);
   const getFilterEdge = useTypesStore((state) => state.getFilterEdge);
   const setFilterEdge = useTypesStore((state) => state.setFilterEdge);
-  const { flows, tabId, uploadFlow, saveFlow } = useContext(FlowsContext);
+  const { uploadFlow, saveFlow } = useContext(FlowsContext);
-
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const hasStore = useStoreStore((state) => state.hasStore);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
   const validApiKey = useStoreStore((state) => state.validApiKey);
@@ -79,7 +80,7 @@ export default function ExtraSidebar(): JSX.Element {
       return ret;
     });
   }
-  const flow = flows.find((flow) => flow.id === tabId);
+
   useEffect(() => {
     // show components with error on load
     let errors: string[] = [];
@@ -194,7 +195,7 @@ export default function ExtraSidebar(): JSX.Element {
     () => (
       <ShareModal
         is_component={false}
-        component={flow!}
+        component={currentFlow!}
         disabled={!hasApiKey || !validApiKey || !hasStore}
       >
         <button
@@ -219,7 +220,7 @@ export default function ExtraSidebar(): JSX.Element {
         </button>
       </ShareModal>
     ),
-    [hasApiKey, validApiKey, flow, hasStore]
+    [hasApiKey, validApiKey, currentFlow, hasStore]
   );
 
   const ExportMemo = useMemo(
@@ -273,8 +274,8 @@ export default function ExtraSidebar(): JSX.Element {
         {(!hasApiKey || !validApiKey) && ExportMemo}
         <ShadTooltip content={"Code"} side="top">
           <div className="side-bar-button">
-            {flow && flow.data && (
+            {currentFlow && currentFlow.data && (
-              <ApiModal flow={flow}>
+              <ApiModal flow={currentFlow}>
                 <button
                   className={"w-full " + (!isBuilt ? "button-disable" : "")}
                 >
@@ -293,7 +294,7 @@ export default function ExtraSidebar(): JSX.Element {
           </div>
         </ShadTooltip>
         <div className="side-bar-button" data-testid="save-button">
-          {flow && flow.data && (
+          {currentFlow && currentFlow.data && (
             <ShadTooltip content="Save" side="top">
               <button
                 className={

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

@@ -1,29 +1,28 @@
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
 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";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import Page from "./components/PageComponent";
 
 export default function FlowPage(): JSX.Element {
-  const { flows, tabId, setTabId } = useContext(FlowsContext);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
   const version = useDarkStore((state) => state.version);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const { id } = useParams();
 
   // Set flow tab id
   useEffect(() => {
-    setTabId(id!);
+    setCurrentFlowId(id!);
   }, [id]);
 
   return (
     <>
       <Header />
       <div className="flow-page-positioning">
-        {flows.length > 0 &&
+        {currentFlow && <Page flow={currentFlow} />}
-          tabId !== "" &&
-          flows.findIndex((flow) => flow.id === tabId) !== -1 && (
-            <Page flow={flows.find((flow) => flow.id === tabId)!} />
-          )}
         <a
           target={"_blank"}
           href="https://logspace.ai/"

src/frontend/src/pages/MainPage/index.tsx

@@ -9,9 +9,13 @@ import { Button } from "../../components/ui/button";
 import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { FlowsContext } from "../../contexts/flowsContext";
 import useAlertStore from "../../stores/alertStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 export default function HomePage(): JSX.Element {
-  const { setTabId, downloadFlows, uploadFlows, addFlow, uploadFlow } =
+  const { downloadFlows, uploadFlows, addFlow, uploadFlow } =
     useContext(FlowsContext);
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const location = useLocation();
@@ -57,7 +61,7 @@ export default function HomePage(): JSX.Element {
 
   // Set a null id
   useEffect(() => {
-    setTabId("");
+    setCurrentFlowId("");
   }, [pathname]);
 
   const navigate = useNavigate();

src/frontend/src/pages/ProfileSettingsPage/index.tsx

@@ -16,8 +16,9 @@ import {
   patchUserInputStateType,
 } from "../../types/components";
 import { gradients } from "../../utils/styleUtils";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 export default function ProfileSettingsPage(): JSX.Element {
-  const { setTabId } = useContext(FlowsContext);
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
 
   const [inputState, setInputState] = useState<patchUserInputStateType>(
     CONTROL_PATCH_USER_STATE
@@ -25,7 +26,7 @@ export default function ProfileSettingsPage(): JSX.Element {
 
   // set null id
   useEffect(() => {
-    setTabId("");
+    setCurrentFlowId("");
   }, []);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);

src/frontend/src/pages/StorePage/index.tsx

@@ -32,6 +32,7 @@ import useAlertStore from "../../stores/alertStore";
 import { useStoreStore } from "../../stores/storeStore";
 import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function StorePage(): JSX.Element {
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
@@ -45,7 +46,7 @@ export default function StorePage(): JSX.Element {
   const { apiKey } = useContext(AuthContext);
 
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const { setTabId } = useContext(FlowsContext);
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
   const [loading, setLoading] = useState(true);
   const [loadingTags, setLoadingTags] = useState(true);
   const { id } = useParams();
@@ -166,7 +167,7 @@ export default function StorePage(): JSX.Element {
 
   // Set a null id
   useEffect(() => {
-    setTabId("");
+    setCurrentFlowId("");
   }, []);
 
   function resetPagination() {

src/frontend/src/pages/ViewPage/index.tsx

@@ -1,23 +1,22 @@
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { FlowsContext } from "../../contexts/flowsContext";
 import Page from "../FlowPage/components/PageComponent";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export default function ViewPage() {
-  const { flows, tabId, setTabId } = useContext(FlowsContext);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
   const { id } = useParams();
 
   // Set flow tab id
   useEffect(() => {
-    setTabId(id!);
+    setCurrentFlowId(id!);
   }, [id]);
 
   return (
     <div className="flow-page-positioning">
-      {flows.length > 0 &&
+        {currentFlow && (
-        tabId !== "" &&
+          <Page view flow={currentFlow} />
-        flows.findIndex((flow) => flow.id === tabId) !== -1 && (
-          <Page view flow={flows.find((flow) => flow.id === tabId)!} />
         )}
     </div>
   );

src/frontend/src/stores/flowsManagerStore.ts

@@ -4,19 +4,23 @@ import { FlowState } from "../types/tabs";
 
 const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
   currentFlowId: "",
+  setCurrentFlowId: (currentFlowId: string) => {
+    set({ currentFlowId, currentFlow: get().flows.find((flow) => flow.id === currentFlowId) });
+},
   flows: [],
-  currentFlow: get().flows[get().currentFlowId],
+  currentFlow: undefined,
   isLoading: true,
   setIsLoading: (isLoading: boolean) => set({ isLoading }),
   flowsState: {},
-  currentFlowState: get().flowsState[get().currentFlowId],
+  currentFlowState: undefined,
-  setCurrentFlowState: (flowState: FlowState | ((oldState: FlowState) => FlowState)) => {
+  setCurrentFlowState: (flowState: FlowState | ((oldState: FlowState | undefined) => FlowState)) => {
     const newFlowState = typeof flowState === "function" ? flowState(get().currentFlowState) : flowState;
     set((state) => ({
       flowsState: {
         ...state.flowsState,
         [state.currentFlowId]: newFlowState,
       },
+      currentFlowState: newFlowState,
     }));
   },
 

src/frontend/src/types/components/index.ts

@@ -440,11 +440,6 @@ export type headerFlowsType = {
   style?: FlowStyleType;
 };
 
-export type menuBarPropsType = {
-  flows: Array<headerFlowsType>;
-  tabId: string;
-};
-
 export type chatInputType = {
   chatValue: string;
   inputRef: {

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

@@ -5,9 +5,10 @@ export type FlowsManagerStoreType = {
   flows: Array<FlowType>;
   currentFlow: FlowType | undefined;
   currentFlowId: string;
+  setCurrentFlowId: (currentFlowId: string) => void;
   isLoading: boolean;
   setIsLoading: (isLoading: boolean) => void;
   flowsState: FlowsState;
-  currentFlowState: FlowState;
+  currentFlowState: FlowState | undefined;
-  setCurrentFlowState: (state: FlowState | ((oldState: FlowState) => FlowState)) => void;
+  setCurrentFlowState: (state: FlowState | ((oldState: FlowState | undefined) => FlowState)) => void;
 };