Much innovation

Author: PythonCoderAS

frontend/src/App.tsx

@@ -1,22 +1,35 @@
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import Sidebar from "./AppFrame";
 import Home from "./routes/Home";
+import ViewBatch from "./routes/batch/ViewBatch";
+import Error404 from "./routes/404";
 
 export default function App() {
-  const router = createBrowserRouter([
+  const router = createBrowserRouter(
+    [
+      {
+        path: "*",
+        Component: Sidebar,
+        children: [
+          {
+            index: true,
+            Component: Home,
+          },
+          {
+            path: "batches",
+          },
+          {
+            path: "batches/:batchId",
+            Component: ViewBatch,
+          },
+          { path: "*", Component: Error404 },
+        ],
+      },
+    ],
     {
-      path: "*",
-      Component: Sidebar,
-      children: [
-        {
-          index: true,
-          Component: Home,
-        },
-      ]
+      basename: "/app/",
     }
-  ], {
-    basename: "/app/"
-  });
+  );
 
   return <RouterProvider router={router} />;
 }

frontend/src/AppFrame.tsx

@@ -1,24 +1,22 @@
 import {
   Box,
+  Divider,
   Drawer,
   List,
   ListItemButton,
   ListItemText,
   Paper,
   Typography,
 } from "@mui/material";
-import React from "react";
+import React, { PropsWithChildren, useEffect } from "react";
 import {
   Outlet,
   Link as RouterLink,
   LinkProps as RouterLinkProps,
+  To,
   useLocation,
 } from "react-router-dom";
 
-interface ListItemLinkProps {
-  children: string;
-  to: string;
-}
 
 const Link = React.forwardRef<HTMLAnchorElement, RouterLinkProps>(function Link(
   itemProps,
@@ -27,8 +25,7 @@ const Link = React.forwardRef<HTMLAnchorElement, RouterLinkProps>(function Link(
   return <RouterLink ref={ref} {...itemProps} role={undefined} />;
 });
 
-export function ListItemLink(props: ListItemLinkProps) {
-  const { children, to } = props;
+export function ListItemLink({children, to}: PropsWithChildren<{to: To}>) {
   const currentPath = useLocation().pathname;
 
   const child = (
@@ -50,6 +47,15 @@ export function ListItemLink(props: ListItemLinkProps) {
   );
 }
 
+function SidebarSection({ title, children }: PropsWithChildren<{ title: string}>) {
+  return (
+    <section>
+      <Typography variant="h6" textAlign="center">{title}</Typography>
+      {children}
+    </section>
+  )
+}
+
 function Sidebar() {
   return (
     <Box component="aside" sx={{ width: { sm: "10%" }, flexShrink: { sm: 0 } }}>
@@ -61,32 +67,53 @@ function Sidebar() {
         <Paper elevation={0} square>
           <List>
             <ListItemLink to="/">Home</ListItemLink>
+            <Divider />
+            <SidebarSection title="Batches">
+              <ListItemLink to="/batches">View All</ListItemLink>
+              <ListItemLink to="/batches/new">Create New</ListItemLink>
+              <ListItemLink to="/batches/view">View Batch</ListItemLink>
+            </SidebarSection>
           </List>
         </Paper>
       </Drawer>
     </Box>
   );
 }
 
+
 export const SetTitleContext = React.createContext<
   (newTitle: string) => unknown
 >(() => {});
 
 export default function AppFrameOutlet() {
   const [title, setTitle] = React.useState("");
 
+  useEffect(() => {
+    document.title = `${title}${
+      title.length > 0 ? " - " : ""
+    }Wayback Archiver Server Data Viewer`;
+  }, [title]);
+
   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>
+          <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>

frontend/src/api/api.ts

@@ -1,12 +1,25 @@
 import createClient from "openapi-fetch";
-import { paths } from "./schema"; // generated from openapi-typescript
+import { paths, components } from "./schema"; // generated from openapi-typescript
 
 const basePath = import.meta.env.PROD ? "/" : "http://localhost:8000/";
 
 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 Stats = paths["/stats"]["get"]["responses"]["200"]["content"]["application/json"];
+export type Job = components["schemas"]["JobReturn"];
+export type JobMaybe = Job | null;
+export type Stats = components["schemas"]["Stats"];
+export type Batch = components["schemas"]["BatchReturn"];
+export type RepeatURL = components["schemas"]["RepeatURL"];
+
+export interface Paginated<T> {
+    data: T[];
+    pagination: {
+        current_page: number;
+        total_pages: number;
+        items: number;
+    }
+}
+
+export type PaginatedJob = Paginated<Job>;

frontend/src/misc/InlineSkeletonDisplay.tsx

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+import inlineSkeleton from "./inlineSkeleton";
+
+export default function InlineSkeletonDisplay({ children }: PropsWithChildren) {
+  console.log(children);
+  return children !== null ? <b>{children}</b> : inlineSkeleton;
+}

frontend/src/misc/inlineSkeleton.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@mui/material";
+
+const inlineSkeleton = (
+  <Skeleton
+    variant="text"
+    width={50}
+    sx={{ fontSize: "1rem", display: "inline-block" }}
+  />
+);
+
+export default inlineSkeleton;

frontend/src/routes/404.tsx

@@ -0,0 +1,31 @@
+import { Button, Typography, Box } from "@mui/material";
+import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import { SetTitleContext } from "../AppFrame";
+
+export default function Error404() {
+  const nav = useNavigate();
+  const setTitle = useContext(SetTitleContext);
+
+  setTitle("404 Not Found");
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignContent="center"
+      flexDirection="column"
+    >
+      <div>
+        <Typography variant="body1" fontSize="200%">
+          The page you requested does not exist.
+        </Typography>
+      </div>
+      <div>
+        <Button variant="contained" onClick={() => nav(-1)}>
+          Go back
+        </Button>
+      </div>
+    </Box>
+  );
+}