diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 6994276ca..83425e4ec 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/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(null); const infoHtml = useRef(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); diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx index eb8b22bc3..e7cf80587 100644 --- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx +++ b/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 }); } } - let current_flow = flows.find((flow) => flow.id === tabId); - return ( + return currentFlow ? (
+ ) : ( + <> ); }; diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index b88f6be70..a69ca1946 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/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 { ⛓️ - - {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( - - )} +
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index 539da2600..f9d8a79ef 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/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"); diff --git a/src/frontend/src/contexts/undoRedoContext.tsx b/src/frontend/src/contexts/undoRedoContext.tsx index d666d7a92..679e6cf9d 100644 --- a/src/frontend/src/contexts/undoRedoContext.tsx +++ b/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(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(flows.map(() => [])); const [future, setFuture] = useState(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)); - }, [flows, tabId]); + setTabIndex(flows.findIndex((flow) => flow.id === currentFlowId)); + }, [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 diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx index 19f27062d..fa7a688dd 100644 --- a/src/frontend/src/modals/exportModal/index.tsx +++ b/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); - setDescription(flow!.description); - }, [flow!.name, flow!.description]); - const [name, setName] = useState(flow!.name); - const [description, setDescription] = useState(flow!.description); + setName(currentFlow!.name); + setDescription(currentFlow!.description); + }, [currentFlow!.name, currentFlow!.description]); + const [name, setName] = useState(currentFlow!.name); + const [description, setDescription] = useState(currentFlow!.description); const [open, setOpen] = useState(false); return ( @@ -67,8 +68,8 @@ const ExportModal = forwardRef( if (checked) { downloadFlow( { - id: tabId, - data: flow!.data!, + id: currentFlow!.id, + data: currentFlow!.data!, description, name, last_tested_version: version, @@ -84,8 +85,8 @@ const ExportModal = forwardRef( } else downloadFlow( removeApiKeys({ - id: tabId, - data: flow!.data!, + id: currentFlow!.id, + data: currentFlow!.data!, description, name, last_tested_version: version, diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx index 626e9b151..2598c7c16 100644 --- a/src/frontend/src/modals/flowSettingsModal/index.tsx +++ b/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 flow = flows.find((f) => f.id === tabId); + const { saveFlow } = useContext(FlowsContext); + const currentFlow = useFlowsManagerStore((state) => state.currentFlow); + const flows = useFlowsManagerStore((state) => state.flows); useEffect(() => { - setName(flow!.name); - setDescription(flow!.description); - }, [flow!.name, flow!.description, open]); + setName(currentFlow!.name); + setDescription(currentFlow!.description); + }, [currentFlow!.name, currentFlow!.description, open]); - const [name, setName] = useState(flow!.name); - const [description, setDescription] = useState(flow!.description); + const [name, setName] = useState(currentFlow!.name); + const [description, setDescription] = useState(currentFlow!.description); function handleClick(): void { - let savedFlow = flows.find((flow) => flow.id === tabId); - savedFlow!.name = name; - savedFlow!.description = description; - saveFlow(savedFlow!); + currentFlow!.name = name; + currentFlow!.description = description; + saveFlow(currentFlow!); 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({
- {flow && flow.data && ( + {currentFlow && currentFlow.data && (