Lots of changes

Author: PythonCoderAS

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import Sidebar from "./Sidebar";
+import Sidebar from "./AppFrame";
 import Home from "./routes/Home";
 
 export default function App() {

frontend/src/AppFrame.tsx

@@ -0,0 +1,97 @@
+import {
+  Box,
+  Drawer,
+  List,
+  ListItemButton,
+  ListItemText,
+  Paper,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import {
+  Outlet,
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+  useLocation,
+} from "react-router-dom";
+
+interface ListItemLinkProps {
+  children: string;
+  to: string;
+}
+
+const Link = React.forwardRef<HTMLAnchorElement, RouterLinkProps>(function Link(
+  itemProps,
+  ref
+) {
+  return <RouterLink ref={ref} {...itemProps} role={undefined} />;
+});
+
+export function ListItemLink(props: ListItemLinkProps) {
+  const { children, to } = props;
+  const currentPath = useLocation().pathname;
+
+  const child = (
+    <ListItemButton component={Link} to={to}>
+      <ListItemText primary={children} />
+    </ListItemButton>
+  );
+
+  return (
+    <li>
+      {currentPath === to ? (
+        <Paper square sx={{ backgroundColor: "#DDDDDD" }} elevation={1}>
+          {child}
+        </Paper>
+      ) : (
+        child
+      )}
+    </li>
+  );
+}
+
+function Sidebar() {
+  return (
+    <Box component="aside" sx={{ width: { sm: "10%" }, flexShrink: { sm: 0 } }}>
+      <Drawer
+        variant="permanent"
+        anchor="left"
+        sx={{ "& .MuiDrawer-paper": { boxSizing: "border-box", width: "10%" } }}
+      >
+        <Paper elevation={0} square>
+          <List>
+            <ListItemLink to="/">Home</ListItemLink>
+          </List>
+        </Paper>
+      </Drawer>
+    </Box>
+  );
+}
+
+export const SetTitleContext = React.createContext<
+  (newTitle: string) => unknown
+>(() => {});
+
+export default function AppFrameOutlet() {
+  const [title, setTitle] = React.useState("");
+
+  return (
+    <div>
+      <Box sx={{ display: "flex" }}>
+        <Sidebar />
+        <Box component="main" sx={{ flexGrow: 1, p: 3, width: { sm: "90%" } }}>
+        <Box sx={{ width: { sm: "100%" }, px: 3, pb: 1.5, textAlign: "center", borderBottom: "1px solid black" }}>
+        <Box>
+          <Typography variant="h1" sx={{fontSize: "200%"}}>
+            {title} {title ?? "-"} Wayback Archiver Server Data Viewer
+          </Typography>
+        </Box>
+      </Box>
+          <SetTitleContext.Provider value={setTitle}>
+            <Outlet />
+          </SetTitleContext.Provider>
+        </Box>
+      </Box>
+    </div>
+  );
+}

frontend/src/Sidebar.tsx

@@ -8,4 +8,5 @@ const client = createClient<paths>({ baseUrl: basePath });
 export const { GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, TRACE } = client;
 
 export type JobMaybe = paths["/current_job"]["get"]["responses"]["200"]["content"]["application/json"]["job"];
-export type Job = NonNullable<JobMaybe>;
+export type Job = NonNullable<JobMaybe>;
+export type Stats = paths["/stats"]["get"]["responses"]["200"]["content"]["application/json"];

frontend/src/api/api.ts

@@ -0,0 +1,9 @@
+import ListAltIcon from '@mui/icons-material/ListAlt';
+import { Chip } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+export default function BatchChip({batchId}: { batchId: number} ) {
+    return (
+        <Chip color='secondary' clickable={true} icon={<ListAltIcon />} label={'Batch ' + batchId} component={Link} to={`/batch/${batchId}`} />
+    )
+}