react router (#221)

agent/agentUi/package.json

@@ -19,6 +19,7 @@
     "react-bootstrap": "^2.10.5",
     "react-data-table-component": "^7.6.2",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
     "superagent": "^10.1.0"
   },
   "devDependencies": {

agent/agentUi/src/NavBar.jsx

@@ -0,0 +1,47 @@
+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);
+            }
+        });
+    }, []);
+
+    return (
+        <AppBar position={"static"}>
+            <Toolbar>
+                <IconButton
+                    size={"large"}
+                    edge={"start"}
+                    color={"inherit"}
+                    aria-label={"menu"}
+                    sx={{mr: 2}}
+                >
+                    <MenuIcon/>
+                </IconButton>
+                <Typography variant={"p"} component={"div"} sx={{flexGrow: 1}}>
+                    zrok Agent { version !== "" ? " | " + version : ""}
+                </Typography>
+                <Button color={"inherit"} component={Link} to={"/"}><ListIcon /></Button>
+                <Button color={"inherit"}><LanIcon /></Button>
+                <Button color={"inherit"}><ShareIcon /></Button>
+            </Toolbar>
+        </AppBar>
+    )
+}
+
+export default NavBar;

agent/agentUi/src/App.jsx → agent/agentUi/src/Overview.jsx

@@ -1,16 +1,10 @@
-import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import {useEffect, useState} from "react";
 import {AgentApi, ApiClient} from "./api/src/index.js";
 import DataTable from "react-data-table-component";
-import ShareIcon from "@mui/icons-material/Share";
-import MenuIcon from "@mui/icons-material/Menu";
-import LanIcon from "@mui/icons-material/Lan";
-import ListIcon from "@mui/icons-material/List";
-import {AppBar, Button, IconButton, Toolbar, Typography} from "@mui/material";
+import NavBar from "./NavBar.jsx";
 
-function App() {
-    const [version, setVersion] = useState("");
+function Overview() {
     const [shares, setShares] = useState([]);
     const [accesses, setAccesses] = useState([]);
 
@@ -55,15 +49,6 @@ function App() {
 
     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);
-           }
-        });
-    }, []);
-
     useEffect(() => {
         let mounted = true;
         let interval = setInterval(() => {
@@ -82,25 +67,7 @@ function App() {
 
     return (
         <>
-            <AppBar position={"static"}>
-                <Toolbar>
-                    <IconButton
-                        size={"large"}
-                        edge={"start"}
-                        color={"inherit"}
-                        aria-label={"menu"}
-                        sx={{mr: 2}}
-                    >
-                        <MenuIcon/>
-                    </IconButton>
-                    <Typography variant={"p"} component={"div"} sx={{flexGrow: 1}}>
-                        zrok Agent { version !== "" ? " | " + version : ""}
-                    </Typography>
-                    <Button color={"inherit"}><ListIcon /></Button>
-                    <Button color={"inherit"}><LanIcon /></Button>
-                    <Button color={"inherit"}><ShareIcon /></Button>
-                </Toolbar>
-            </AppBar>
+            <NavBar />
 
             <div class={"info"}>
                 <h2>Shares</h2>
@@ -119,10 +86,8 @@ function App() {
                     noDataComponent={<div/>}
                 />
             </div>
-
-            <code>Connected Version: {version}</code>
         </>
     )
 }
 
-export default App;
+export default Overview;

agent/agentUi/src/ShareDetail.jsx

@@ -0,0 +1,12 @@
+import NavBar from "./NavBar.jsx";
+
+function ShareDetail() {
+    return (
+        <>
+            <NavBar />
+            <h1>Share Detail</h1>
+        </>
+    )
+}
+
+export default ShareDetail;

agent/agentUi/src/index.css

@@ -44,3 +44,13 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.info {
+  margin-top: 5em;
+}

agent/agentUi/src/main.jsx

@@ -1,10 +1,23 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+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",
+        element: <ShareDetail />
+    }
+]);
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>,
 )