feat: swagger link in appbar

src/client/Root.tsx

@@ -5,6 +5,7 @@ import {
   Link,
   Stack,
   Toolbar,
+  Typography,
 } from "@mui/material";
 import {
   Outlet,
@@ -13,6 +14,7 @@ import {
   useParams,
 } from "react-router";
 import "./theme";
+import { serverRoot } from "./client";
 
 export function Root() {
   const location = useLocation();
@@ -23,22 +25,28 @@ export function Root() {
       <Stack spacing={2}>
         <AppBar position="static">
           <Toolbar>
-            <Breadcrumbs aria-label="breadcrumb">
+            <Typography variant="h6" component="h1" sx={{ flexGrow: 1 }}>
-              <Link variant="breadcrumb" component={RouterLink} to="/">
+              Game Logger
-                Sessions
+            </Typography>
-              </Link>
+            <Link
-              {location.pathname.includes("/session/") && (
+              variant="appbar"
-                <Link
+              href={serverRoot + "/swagger-ui"}
-                  variant="breadcrumb"
+              target="_blank"
-                  component={RouterLink}
+            >
-                  to={`/session/${params.sessionId}`}
+              Swagger UI
-                >
+            </Link>
-                  {`${params.sessionId}`}
-                </Link>
-              )}
-            </Breadcrumbs>
           </Toolbar>
         </AppBar>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link component={RouterLink} to="/">
+            Sessions
+          </Link>
+          {location.pathname.includes("/session/") && (
+            <Link component={RouterLink} to={`/session/${params.sessionId}`}>
+              {`${params.sessionId}`}
+            </Link>
+          )}
+        </Breadcrumbs>
         <Outlet />
       </Stack>
     </Container>

src/client/api.ts

@@ -1,10 +0,0 @@
-const serverRoot =
-  import.meta.env.MODE === "development"
-    ? "http://localhost:9283"
-    : window.location.protocol + "//" + window.location.host;
-
-const getSessions = () =>
-  fetch(`${serverRoot}/api/get-sessions`)
-    .then((x) => x.json())
-    .then(console.log)
-    .catch(console.error);

src/client/client.ts

@@ -2,7 +2,7 @@
 import { initQueryClient } from "@ts-rest/react-query";
 import { contract } from "../common/contract";
 
-const serverRoot =
+export const serverRoot =
   import.meta.env.MODE === "development"
     ? "http://localhost:9283"
     : window.location.protocol + "//" + window.location.host;

src/client/theme.ts

@@ -1,15 +1,9 @@
 import { createTheme } from "@mui/material/styles";
 import { red } from "@mui/material/colors";
-import { TypographyOwnProps, TypographyPropsVariantOverrides } from "@mui/material";
-import { OverridableStringUnion} from "@mui/types"
-import { Variant } from "@mui/material/styles/createTypography";
 
 declare module "@mui/material/Typography" {
-  // interface ButtonPropsVariantOverrides {
-  //   dashed: true;
-  // }
   interface TypographyPropsVariantOverrides {
-    breadcrumb: true;
+    appbar: true;
   }
 }
 
@@ -35,7 +29,7 @@ const theme = createTheme({
         root: {
           variants: [
             {
-              props: { variant: "breadcrumb" },
+              props: { variant: "appbar" },
               style: {
                 color: "#fff",
               },