centralized state (#221)

openziti · Oct 9, 2024 · c02b9c2 · c02b9c2
1 parent f0cd66d
commit c02b9c2
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 45 deletions.
diff --git a/agent/agentUi/src/AgentUi.jsx b/agent/agentUi/src/AgentUi.jsx
@@ -0,0 +1,35 @@
+import {createBrowserRouter, RouterProvider} from "react-router-dom";
+import Overview from "./Overview.jsx";
+import ShareDetail from "./ShareDetail.jsx";
+import {useEffect, useState} from "react";
+import {AgentApi, ApiClient} from "./api/src/index.js";
+
+const AgentUi = (props) => {
+    const [version, setVersion] = useState("");
+
+    let api = new AgentApi(new ApiClient(window.location.protocol+'//'+window.location.host));
+
+    useEffect(() => {
+        let mounted = true;
+        api.agentVersion((err, data) => {
+            if(mounted) {
+                setVersion(data.v);
+            }
+        });
+    }, []);
+
+    const router = createBrowserRouter([
+        {
+            path: "/",
+            element: <Overview version={version} />
+        },
+        {
+            path: "/share/:token",
+            element: <ShareDetail version={version} />
+        }
+    ]);
+
+    return <RouterProvider router={router} />
+}
+
+export default AgentUi;
diff --git a/agent/agentUi/src/NavBar.jsx b/agent/agentUi/src/NavBar.jsx
@@ -1,44 +1,29 @@
-import {useEffect, useState} from "react";
-import {AgentApi, ApiClient} from "./api/src/index.js";
 import {AppBar, Button, IconButton, Toolbar, Typography} from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import {Link} from "react-router-dom";
 import ListIcon from "@mui/icons-material/List";
 import LanIcon from "@mui/icons-material/Lan";
 import ShareIcon from "@mui/icons-material/Share";
 
-function NavBar() {
-    const [version, setVersion] = useState("");
-
-    let api = new AgentApi(new ApiClient(window.location.protocol+'//'+window.location.host));
-
-    useEffect(() => {
-        let mounted = true;
-        api.agentVersion((err, data) => {
-            if(mounted) {
-                setVersion(data.v);
-            }
-        });
-    }, []);
-
+const NavBar = (props) => {
     return (
         <AppBar position={"static"}>
             <Toolbar>
                 <IconButton
-                    size={"large"}
+                    size="large"
                     edge={"start"}
-                    color={"inherit"}
+                    color="inherit"
                     aria-label={"menu"}
                     sx={{mr: 2}}
                 >
                     <MenuIcon/>
                 </IconButton>
-                <Typography variant={"p"} component={"div"} sx={{flexGrow: 1}}>
-                    zrok Agent { version !== "" ? " | " + version : ""}
+                <Typography variant="p" component={"div"} sx={{flexGrow: 1}}>
+                    zrok Agent { props.version !== "" ? " | " + props.version : ""}
                 </Typography>
-                <Button color={"inherit"} component={Link} to={"/"}><ListIcon /></Button>
-                <Button color={"inherit"}><LanIcon /></Button>
-                <Button color={"inherit"}><ShareIcon /></Button>
+                <Button color="inherit" component={Link} to={"/"}><ListIcon /></Button>
+                <Button color="inherit"><LanIcon /></Button>
+                <Button color="inherit"><ShareIcon /></Button>
             </Toolbar>
         </AppBar>
     )

diff --git a/agent/agentUi/src/Overview.jsx b/agent/agentUi/src/Overview.jsx
@@ -4,7 +4,7 @@ import {AgentApi, ApiClient} from "./api/src/index.js";
 import DataTable from "react-data-table-component";
 import NavBar from "./NavBar.jsx";
 
-function Overview() {
+const Overview = (props) => {
     const [shares, setShares] = useState([]);
     const [accesses, setAccesses] = useState([]);
 
@@ -67,7 +67,7 @@ function Overview() {
 
     return (
         <>
-            <NavBar />
+            <NavBar version={props.version} />
 
             <div class={"info"}>
                 <h2>Shares</h2>

diff --git a/agent/agentUi/src/ShareDetail.jsx b/agent/agentUi/src/ShareDetail.jsx
@@ -1,12 +1,12 @@
 import NavBar from "./NavBar.jsx";
 import {useParams} from "react-router-dom";
 
-function ShareDetail() {
+const ShareDetail = (props) => {
     let params = useParams();
 
     return (
         <>
-            <NavBar />
+            <NavBar version={props.version} />
 
             <h1>Share {params.token}</h1>
         </>

diff --git a/agent/agentUi/src/main.jsx b/agent/agentUi/src/main.jsx
@@ -1,23 +1,10 @@
-import './index.css';
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import Overview from "./Overview.jsx";
-import ShareDetail from "./ShareDetail.jsx";
-
-const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <Overview />
-    },
-    {
-        path: "/share/:token",
-        element: <ShareDetail />
-    }
-]);
+import "./index.css";
+import {StrictMode} from "react";
+import {createRoot} from "react-dom/client";
+import AgentUi from "./AgentUi.jsx";
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <RouterProvider router={router} />
+      <AgentUi />
   </StrictMode>,
 )