From 0dd0f8ff010b074006874c2f000871b9bafa905e Mon Sep 17 00:00:00 2001
From: mattia <mattia.belletti@gmail.com>
Date: Mon, 6 Jan 2025 17:09:44 +0100
Subject: [PATCH] feat: swagger link in appbar

---
 src/client/Root.tsx  | 36 ++++++++++++++++++++++--------------
 src/client/api.ts    | 10 ----------
 src/client/client.ts |  2 +-
 src/client/theme.ts  | 10 ++--------
 4 files changed, 25 insertions(+), 33 deletions(-)
 delete mode 100644 src/client/api.ts

diff --git a/src/client/Root.tsx b/src/client/Root.tsx
index 811148d..419ba13 100644
--- a/src/client/Root.tsx
+++ b/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">
-              <Link variant="breadcrumb" component={RouterLink} to="/">
-                Sessions
-              </Link>
-              {location.pathname.includes("/session/") && (
-                <Link
-                  variant="breadcrumb"
-                  component={RouterLink}
-                  to={`/session/${params.sessionId}`}
-                >
-                  {`${params.sessionId}`}
-                </Link>
-              )}
-            </Breadcrumbs>
+            <Typography variant="h6" component="h1" sx={{ flexGrow: 1 }}>
+              Game Logger
+            </Typography>
+            <Link
+              variant="appbar"
+              href={serverRoot + "/swagger-ui"}
+              target="_blank"
+            >
+              Swagger UI
+            </Link>
           </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>
diff --git a/src/client/api.ts b/src/client/api.ts
deleted file mode 100644
index 36b44bc..0000000
--- a/src/client/api.ts
+++ /dev/null
@@ -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);
diff --git a/src/client/client.ts b/src/client/client.ts
index 5bd3a83..54dbf5d 100644
--- a/src/client/client.ts
+++ b/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;
diff --git a/src/client/theme.ts b/src/client/theme.ts
index 5684ae1..cf3b29f 100644
--- a/src/client/theme.ts
+++ b/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",
               },