Location Context moved to Zustand

src/frontend/src/App.tsx

@@ -16,17 +16,19 @@ import {
   FETCH_ERROR_MESSAGE,
 } from "./constants/constants";
 import { AuthContext } from "./contexts/authContext";
-import { locationContext } from "./contexts/locationContext";
 import { getHealth, getRepoStars, getVersion } from "./controllers/API";
 import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import { useTypesStore } from "./stores/typesStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
+import { useLocationStore } from "./stores/locationStore";
 
 export default function App() {
-  let { setCurrent, setShowSideBar, setIsStackedOpen } =
-    useContext(locationContext);
+  const setCurrent = useLocationStore((state) => state.setCurrent);
+  const setShowSideBar = useLocationStore((state) => state.setShowSideBar);
+  const setIsStackedOpen = useLocationStore((state) => state.setIsStackedOpen);
+
   let location = useLocation();
   useEffect(() => {
     setCurrent(location.pathname.replace(/\/$/g, "").split("/"));

src/frontend/src/contexts/index.tsx

@@ -5,7 +5,6 @@ import { TooltipProvider } from "../components/ui/tooltip";
 import { ApiInterceptor } from "../controllers/API/api";
 import { SSEProvider } from "./SSEContext";
 import { AuthProvider } from "./authContext";
-import { LocationProvider } from "./locationContext";
 
 export default function ContextWrapper({ children }: { children: ReactNode }) {
   //element to wrap all context
@@ -15,12 +14,10 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
         <AuthProvider>
           <TooltipProvider>
             <ReactFlowProvider>
-              <LocationProvider>
                 <ApiInterceptor />
                 <SSEProvider>
                   {children}
                 </SSEProvider>
-              </LocationProvider>
             </ReactFlowProvider>
           </TooltipProvider>
         </AuthProvider>

src/frontend/src/contexts/locationContext.tsx

@@ -1,50 +0,0 @@
-import { createContext, ReactNode, useState } from "react";
-import { locationContextType } from "../types/typesContext";
-
-//initial value for location context
-const initialValue = {
-  //actual
-  current: window.location.pathname.replace(/\/$/g, "").split("/"),
-  isStackedOpen:
-    window.innerWidth > 1024 && window.location.pathname.split("/")[1]
-      ? true
-      : false,
-  setCurrent: () => {},
-  setIsStackedOpen: () => {},
-  showSideBar: window.location.pathname.split("/")[1] ? true : false,
-  setShowSideBar: () => {},
-  extraNavigation: { title: "" },
-  setExtraNavigation: () => {},
-  extraComponent: <></>,
-  setExtraComponent: () => {},
-};
-
-export const locationContext = createContext<locationContextType>(initialValue);
-
-export function LocationProvider({ children }: { children: ReactNode }) {
-  const [current, setCurrent] = useState(initialValue.current);
-  const [isStackedOpen, setIsStackedOpen] = useState(
-    initialValue.isStackedOpen
-  );
-  const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
-  const [extraNavigation, setExtraNavigation] = useState({ title: "" });
-  const [extraComponent, setExtraComponent] = useState(<></>);
-  return (
-    <locationContext.Provider
-      value={{
-        isStackedOpen,
-        setIsStackedOpen,
-        current,
-        setCurrent,
-        showSideBar,
-        setShowSideBar,
-        extraNavigation,
-        setExtraNavigation,
-        extraComponent,
-        setExtraComponent,
-      }}
-    >
-      {children}
-    </locationContext.Provider>
-  );
-}

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

@@ -1,12 +1,5 @@
 import _ from "lodash";
-import {
-  MouseEvent,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { MouseEvent, useCallback, useEffect, useRef, useState } from "react";
 import ReactFlow, {
   Background,
   Connection,
@@ -18,13 +11,10 @@ import ReactFlow, {
   SelectionDragHandler,
   addEdge,
   updateEdge,
-  useEdgesState,
-  useNodesState,
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import Chat from "../../../../components/chatComponent";
 import Loading from "../../../../components/ui/loading";
-import { locationContext } from "../../../../contexts/locationContext";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
@@ -43,7 +33,7 @@ import { cn, getRandomName, isWrappedWithClass } from "../../../../utils/utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import SelectionMenu from "../SelectionMenuComponent";
 import ExtraSidebar from "../extraSidebarComponent";
-import { stat } from "fs";
+import { useLocationStore } from "../../../../stores/locationStore";
 
 const nodeTypes = {
   genericNode: GenericNode,
@@ -82,7 +72,9 @@ export default function Page({
   const redo = useFlowsManagerStore((state) => state.redo);
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
   const paste = useFlowStore((state) => state.paste);
-  const lastCopiedSelection = useFlowStore((state) => state.lastCopiedSelection);
+  const lastCopiedSelection = useFlowStore(
+    (state) => state.lastCopiedSelection
+  );
   const setLastCopiedSelection = useFlowStore(
     (state) => state.setLastCopiedSelection
   );
@@ -163,7 +155,12 @@ export default function Page({
 
   const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
 
-  const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
+  const setExtraComponent = useLocationStore(
+    (state) => state.setExtraComponent
+  );
+  const setExtraNavigation = useLocationStore(
+    (state) => state.setExtraNavigation
+  );
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
   const edgeUpdateSuccessful = useRef(true);
@@ -224,8 +221,7 @@ export default function Page({
   const onMoveEnd: OnMove = useCallback(() => {
     // 👇 make moving the canvas undoable
     autoSaveCurrentFlow(nodes, edges, reactFlowInstance?.getViewport()!);
-  }
-  , [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
+  }, [takeSnapshot, autoSaveCurrentFlow, nodes, edges, reactFlowInstance]);
 
   const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
     // 👇 make dragging a selection undoable
@@ -290,14 +286,16 @@ export default function Page({
         const newNode: NodeType = {
           id: newId,
           type: "genericNode",
-          position: {x: 0, y:0},
+          position: { x: 0, y: 0 },
           data: {
             ...data,
             id: newId,
           },
         };
-        paste({ nodes: [newNode], edges: [] }, {x: event.clientX, y: event.clientY});
-
+        paste(
+          { nodes: [newNode], edges: [] },
+          { x: event.clientX, y: event.clientY }
+        );
       } else if (event.dataTransfer.types.some((types) => types === "Files")) {
         takeSnapshot();
         if (event.dataTransfer.files.item(0)!.type === "application/json") {
@@ -384,7 +382,6 @@ export default function Page({
     setFilterEdge([]);
   }, []);
 
-
   return (
     <div className="flex h-full overflow-hidden">
       {!view && <ExtraSidebar />}

src/frontend/src/stores/locationStore.tsx

@@ -0,0 +1,29 @@
+import { create } from "zustand";
+import { getRepoStars, getVersion } from "../controllers/API";
+import { LocationStoreType } from "../types/zustand/location";
+
+export const useLocationStore = create<LocationStoreType>((set, get) => ({
+    current: window.location.pathname.replace(/\/$/g, "").split("/"),
+    isStackedOpen:
+      window.innerWidth > 1024 && window.location.pathname.split("/")[1]
+        ? true
+        : false,
+    setCurrent: (newState) => {
+        set({ current: newState });
+        },
+    setIsStackedOpen: (newState) => {
+        set({ isStackedOpen: newState });
+    },
+    showSideBar: window.location.pathname.split("/")[1] ? true : false,
+    setShowSideBar: (newState) => {
+        set({ showSideBar: newState });
+    },
+    extraNavigation: { title: "" },
+    setExtraNavigation: (newState) => {
+        set({ extraNavigation: newState });
+    },
+    extraComponent: <></>,
+    setExtraComponent: (newState) => {
+        set({ extraComponent: newState });
+    },
+}));

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

@@ -0,0 +1,28 @@
+export type LocationStoreType = {
+  current: Array<string>;
+  setCurrent: (newState: Array<string>) => void;
+  isStackedOpen: boolean;
+  setIsStackedOpen: (newState: boolean) => void;
+  showSideBar: boolean;
+  setShowSideBar: (newState: boolean) => void;
+  extraNavigation: {
+    title: string;
+    options?: Array<{
+      name: string;
+      href: string;
+      icon: React.ElementType;
+      children?: Array<JSX.Element>;
+    }>;
+  };
+  setExtraNavigation: (newState: {
+    title: string;
+    options?: Array<{
+      name: string;
+      href: string;
+      icon: React.ElementType;
+      children?: Array<JSX.Element>;
+    }>;
+  }) => void;
+  extraComponent: any;
+  setExtraComponent: (newState: JSX.Element) => void;
+};