SSE Context moved to Zustand

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);

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);

src/frontend/src/contexts/SSEContext.tsx

@@ -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 (
-    <SSEContext.Provider
-      value={{ sseData, updateSSEData, isBuilding, setIsBuilding }}
-    >
-      {children}
-    </SSEContext.Provider>
-  );
-}

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 }) {
           <TooltipProvider>
             <ReactFlowProvider>
                 <ApiInterceptor />
-                <SSEProvider>
                   {children}
-                </SSEProvider>
             </ReactFlowProvider>
           </TooltipProvider>
         </AuthProvider>

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<LocationStoreType>((set, get) => ({

src/frontend/src/stores/sseStore.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+import { SSEStoreType } from "../types/zustand/sse";
+
+export const useSSEStore = create<SSEStoreType>((set) => ({
+    updateSSEData: (sseData) => {
+        set({ sseData });
+    },
+    sseData: {},
+    isBuilding: false,
+    setIsBuilding: (isBuilding) => {
+        set({ isBuilding });
+    },
+}));

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,
+}