From 6195acee22a4ea524c57890c986024bc9e430e45 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 5 Jan 2024 22:19:45 -0300 Subject: [PATCH] added CurrentFlowState to zustand --- src/frontend/src/App.tsx | 4 +++- src/frontend/src/modals/exportModal/index.tsx | 4 +++- src/frontend/src/modals/shareModal/index.tsx | 3 ++- .../sideBarDraggableComponent/index.tsx | 5 +++-- .../components/nodeToolbarComponent/index.tsx | 4 +++- src/frontend/src/pages/FlowPage/index.tsx | 4 +++- src/frontend/src/stores/darkStore.tsx | 2 ++ src/frontend/src/stores/flowsManagerStore.ts | 20 ++++++++++++++++--- src/frontend/src/types/tabs/index.ts | 18 +++++++++-------- src/frontend/src/types/zustand/dark/index.ts | 2 ++ .../src/types/zustand/flowsManager/index.ts | 7 +++++++ 11 files changed, 55 insertions(+), 18 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 220778e22..bfd704d78 100644 --- a/src/frontend/src/App.tsx +++ b/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(() => { diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx index bafaf6ab9..19f27062d 100644 --- a/src/frontend/src/modals/exportModal/index.tsx +++ b/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); diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx index f70e0b21c..90e20f9aa 100644 --- a/src/frontend/src/modals/shareModal/index.tsx +++ b/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); diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx index 0d1bcdddb..41d9ebd34 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx +++ b/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(null); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index a6a801907..2ee07f792 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/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); diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index 9c11f66da..db72f83e6 100644 --- a/src/frontend/src/pages/FlowPage/index.tsx +++ b/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 diff --git a/src/frontend/src/stores/darkStore.tsx b/src/frontend/src/stores/darkStore.tsx index dd512fe31..a3467a72e 100644 --- a/src/frontend/src/stores/darkStore.tsx +++ b/src/frontend/src/stores/darkStore.tsx @@ -12,6 +12,8 @@ export const useDarkStore = create((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) => diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts index f4c04a2bd..3c33e7f2d 100644 --- a/src/frontend/src/stores/flowsManagerStore.ts +++ b/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((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; diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index b921ef921..4196cecdc 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/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; - handle_keys?: Array; - }; + [key: string]: FlowState; +}; + +export type FlowState = { + isPending: boolean; + formKeysData: { + template?: string; + input_keys?: Object; + memory_keys?: Array; + handle_keys?: Array; }; }; diff --git a/src/frontend/src/types/zustand/dark/index.ts b/src/frontend/src/types/zustand/dark/index.ts index 544160067..0fd91e84c 100644 --- a/src/frontend/src/types/zustand/dark/index.ts +++ b/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; diff --git a/src/frontend/src/types/zustand/flowsManager/index.ts b/src/frontend/src/types/zustand/flowsManager/index.ts index f2f9f45a4..4f7645c29 100644 --- a/src/frontend/src/types/zustand/flowsManager/index.ts +++ b/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; currentFlow: FlowType | undefined; + currentFlowId: string; + isLoading: boolean; + setIsLoading: (isLoading: boolean) => void; + flowsState: FlowsState; + currentFlowState: FlowState; + setCurrentFlowState: (state: FlowState | ((oldState: FlowState) => FlowState)) => void; };