diff --git a/ui2/src/components/Commander/Commander.tsx b/ui2/src/components/Commander/Commander.tsx index cc2f9524e..a1cd8640a 100644 --- a/ui2/src/components/Commander/Commander.tsx +++ b/ui2/src/components/Commander/Commander.tsx @@ -1,3 +1,4 @@ +import {useContext} from "react" import {Group} from "@mantine/core" import {useSelector, useDispatch} from "react-redux" @@ -20,12 +21,10 @@ import type {RootState} from "@/app/types" import type {NType, NodeType, PanelMode} from "@/types" import Breadcrumbs from "@/components/Breadcrumbs" import Pagination from "@/components/Pagination" +import PanelContext from "@/contexts/PanelContext" -type Args = { - mode: PanelMode -} - -export default function Commander({mode}: Args) { +export default function Commander() { + const mode: PanelMode = useContext(PanelContext) const dispatch = useDispatch() const navigate = useNavigate() const {data, status, error} = useSelector((state: RootState) => @@ -111,14 +110,14 @@ export default function Commander({mode}: Args) { } const nodes = data.map((n: NodeType) => ( - + )) if (nodes.length > 0) { return (
- - + + {nodes} - - + + Empty
) diff --git a/ui2/src/components/DualPanel/DualPanel.tsx b/ui2/src/components/DualPanel/DualPanel.tsx index 1b88e53f6..79353d4b2 100644 --- a/ui2/src/components/DualPanel/DualPanel.tsx +++ b/ui2/src/components/DualPanel/DualPanel.tsx @@ -3,17 +3,27 @@ import {useSelector} from "react-redux" import {selectPanels} from "@/slices/dualPanel" import SinglePanel from "@/components/SinglePanel" +import PanelContext from "@/contexts/PanelContext" + export default function DualPanel() { const [_, secondaryPanel] = useSelector(selectPanels) if (secondaryPanel) { return ( - - + + + + + + ) } - return + return ( + + + + ) } diff --git a/ui2/src/components/SinglePanel/SinglePanel.tsx b/ui2/src/components/SinglePanel/SinglePanel.tsx index 28aba17bf..80c2dd307 100644 --- a/ui2/src/components/SinglePanel/SinglePanel.tsx +++ b/ui2/src/components/SinglePanel/SinglePanel.tsx @@ -1,24 +1,24 @@ +import {useContext} from "react" + import {selectPanelComponents} from "@/slices/dualPanel" import {useSelector} from "react-redux" import Commander from "@/components/Commander" import Viewer from "@/components/Viewer" +import PanelContext from "@/contexts/PanelContext" import {PanelMode} from "@/types" import {RootState} from "@/app/types" -type Args = { - mode: PanelMode -} - -export default function SinglePanel({mode}: Args) { +export default function SinglePanel() { + const mode: PanelMode = useContext(PanelContext) const [commander, viewer] = useSelector((state: RootState) => selectPanelComponents(state, mode) ) if (commander) { - return + return } if (viewer) { - return + return } return <>Error: neither viewer nor commander diff --git a/ui2/src/components/Viewer/Viewer.tsx b/ui2/src/components/Viewer/Viewer.tsx index d84b71438..28588f0ba 100644 --- a/ui2/src/components/Viewer/Viewer.tsx +++ b/ui2/src/components/Viewer/Viewer.tsx @@ -1,9 +1,3 @@ -import {PanelMode} from "@/types" - -type Args = { - mode: PanelMode -} - -export default function Viewer({mode}: Args) { - return
Viewer {mode}
+export default function Viewer() { + return
Viewer
} diff --git a/ui2/src/contexts/PanelContext.ts b/ui2/src/contexts/PanelContext.ts new file mode 100644 index 000000000..116ec9240 --- /dev/null +++ b/ui2/src/contexts/PanelContext.ts @@ -0,0 +1,6 @@ +import {createContext} from "react" +import type {PanelMode} from "@/types" + +const PanelContext = createContext("main") + +export default PanelContext