From d1f82fa6915da445e2f143c04b75718e9b1e5b69 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 8 Jan 2024 14:20:03 -0300 Subject: [PATCH] SSE Context moved to Zustand --- .../src/CustomNodes/GenericNode/index.tsx | 5 +-- .../chatComponent/buildTrigger/index.tsx | 7 ++-- src/frontend/src/contexts/SSEContext.tsx | 34 ------------------- src/frontend/src/contexts/index.tsx | 3 -- src/frontend/src/stores/locationStore.tsx | 1 - src/frontend/src/stores/sseStore.ts | 13 +++++++ src/frontend/src/types/zustand/sse/index.ts | 6 ++++ 7 files changed, 27 insertions(+), 42 deletions(-) delete mode 100644 src/frontend/src/contexts/SSEContext.tsx create mode 100644 src/frontend/src/stores/sseStore.ts create mode 100644 src/frontend/src/types/zustand/sse/index.ts diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 339eb73ac..8503a2fa2 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -6,7 +6,6 @@ import IconComponent from "../../components/genericIconComponent"; import InputComponent from "../../components/inputComponent"; import { Textarea } from "../../components/ui/textarea"; import { priorityFields } from "../../constants/constants"; -import { useSSE } from "../../contexts/SSEContext"; import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent"; import useFlowStore from "../../stores/flowStore"; import { validationStatusType } from "../../types/components"; @@ -17,6 +16,7 @@ import { classNames, cn, getFieldTitle } from "../../utils/utils"; import ParameterComponent from "./components/parameterComponent"; import { useTypesStore } from "../../stores/typesStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore"; +import { useSSEStore } from "../../stores/sseStore"; export default function GenericNode({ data, @@ -80,7 +80,8 @@ export default function GenericNode({ }, [data, data.node]); // State for outline color - const { sseData, isBuilding } = useSSE(); + const sseData = useSSEStore((state) => state.sseData); + const isBuilding = useSSEStore((state) => state.isBuilding); useEffect(() => { setNodeDescription(data.node!.description); diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx index 1dcc327ee..860d1dc15 100644 --- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx +++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx @@ -1,7 +1,6 @@ import { Transition } from "@headlessui/react"; import { useContext, useState } from "react"; import Loading from "../../../components/ui/loading"; -import { useSSE } from "../../../contexts/SSEContext"; import { postBuildInit } from "../../../controllers/API"; import { FlowType } from "../../../types/flow"; @@ -13,6 +12,7 @@ import { FlowState } from "../../../types/tabs"; import { validateNodes } from "../../../utils/reactflowUtils"; import RadialProgressComponent from "../../RadialProgress"; import IconComponent from "../../genericIconComponent"; +import { useSSEStore } from "../../../stores/sseStore"; export default function BuildTrigger({ open, @@ -24,7 +24,10 @@ export default function BuildTrigger({ setIsBuilt: any; isBuilt: boolean; }): JSX.Element { - const { updateSSEData, isBuilding, setIsBuilding, sseData } = useSSE(); + const updateSSEData = useSSEStore((state) => state.updateSSEData); + const isBuilding = useSSEStore((state) => state.isBuilding); + const setIsBuilding = useSSEStore((state) => state.setIsBuilding); + const sseData = useSSEStore((state) => state.sseData); const nodes = useFlowStore((state) => state.nodes); const edges = useFlowStore((state) => state.edges); const setErrorData = useAlertStore((state) => state.setErrorData); diff --git a/src/frontend/src/contexts/SSEContext.tsx b/src/frontend/src/contexts/SSEContext.tsx deleted file mode 100644 index 9db32310b..000000000 --- a/src/frontend/src/contexts/SSEContext.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { createContext, useCallback, useContext, useState } from "react"; - -const initialValue = { - updateSSEData: ({}) => {}, - sseData: {}, - isBuilding: false, - setIsBuilding: (isBuilding: boolean) => {}, -}; - -const SSEContext = createContext(initialValue); - -export function useSSE() { - return useContext(SSEContext); -} - -export function SSEProvider({ children }) { - const [sseData, setSSEData] = useState({}); - const [isBuilding, setIsBuilding] = useState(false); - - const updateSSEData = useCallback((newData: any) => { - setSSEData((prevData) => ({ - ...prevData, - ...newData, - })); - }, []); - - return ( - - {children} - - ); -} diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx index d026153c9..f6660e7fe 100644 --- a/src/frontend/src/contexts/index.tsx +++ b/src/frontend/src/contexts/index.tsx @@ -3,7 +3,6 @@ import { BrowserRouter } from "react-router-dom"; import { ReactFlowProvider } from "reactflow"; import { TooltipProvider } from "../components/ui/tooltip"; import { ApiInterceptor } from "../controllers/API/api"; -import { SSEProvider } from "./SSEContext"; import { AuthProvider } from "./authContext"; export default function ContextWrapper({ children }: { children: ReactNode }) { @@ -15,9 +14,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) { - {children} - diff --git a/src/frontend/src/stores/locationStore.tsx b/src/frontend/src/stores/locationStore.tsx index ca3f08289..247304712 100644 --- a/src/frontend/src/stores/locationStore.tsx +++ b/src/frontend/src/stores/locationStore.tsx @@ -1,5 +1,4 @@ import { create } from "zustand"; -import { getRepoStars, getVersion } from "../controllers/API"; import { LocationStoreType } from "../types/zustand/location"; export const useLocationStore = create((set, get) => ({ diff --git a/src/frontend/src/stores/sseStore.ts b/src/frontend/src/stores/sseStore.ts new file mode 100644 index 000000000..17bb68447 --- /dev/null +++ b/src/frontend/src/stores/sseStore.ts @@ -0,0 +1,13 @@ +import { create } from "zustand"; +import { SSEStoreType } from "../types/zustand/sse"; + +export const useSSEStore = create((set) => ({ + updateSSEData: (sseData) => { + set({ sseData }); + }, + sseData: {}, + isBuilding: false, + setIsBuilding: (isBuilding) => { + set({ isBuilding }); + }, +})); diff --git a/src/frontend/src/types/zustand/sse/index.ts b/src/frontend/src/types/zustand/sse/index.ts new file mode 100644 index 000000000..baa088171 --- /dev/null +++ b/src/frontend/src/types/zustand/sse/index.ts @@ -0,0 +1,6 @@ +export type SSEStoreType = { + updateSSEData: (sseData: object) => void, + sseData: object, + isBuilding: boolean, + setIsBuilding: (isBuilding: boolean) => void, +} \ No newline at end of file