diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 7e4d80f4d..9b7ec8b75 100644 --- a/src/frontend/src/App.tsx +++ b/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("/")); diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx index 7090b7c40..d026153c9 100644 --- a/src/frontend/src/contexts/index.tsx +++ b/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 }) { - {children} - diff --git a/src/frontend/src/contexts/locationContext.tsx b/src/frontend/src/contexts/locationContext.tsx deleted file mode 100644 index b0a9ef8c5..000000000 --- a/src/frontend/src/contexts/locationContext.tsx +++ /dev/null @@ -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(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 ( - - {children} - - ); -} diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 1d2264947..274eaf10b 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/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 (
{!view && } diff --git a/src/frontend/src/stores/locationStore.tsx b/src/frontend/src/stores/locationStore.tsx new file mode 100644 index 000000000..ca3f08289 --- /dev/null +++ b/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((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 }); + }, +})); diff --git a/src/frontend/src/types/zustand/location/index.ts b/src/frontend/src/types/zustand/location/index.ts new file mode 100644 index 000000000..2d2d44766 --- /dev/null +++ b/src/frontend/src/types/zustand/location/index.ts @@ -0,0 +1,28 @@ +export type LocationStoreType = { + current: Array; + setCurrent: (newState: Array) => 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; + }>; + }; + setExtraNavigation: (newState: { + title: string; + options?: Array<{ + name: string; + href: string; + icon: React.ElementType; + children?: Array; + }>; + }) => void; + extraComponent: any; + setExtraComponent: (newState: JSX.Element) => void; +};