vinvoor: footer

ZeusWPI · Oct 20, 2024 · ca2cb91 · ca2cb91
1 parent f5f4c2f
commit ca2cb91
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 4 deletions.
diff --git a/vinvoor/src/App.tsx b/vinvoor/src/App.tsx
@@ -2,12 +2,13 @@ import { Box, Container } from "@mui/material";
 import { useState } from "react";
 import { Navigate, Outlet, useOutlet } from "react-router-dom";
 import { LoadingSkeleton } from "./components/LoadingSkeleton";
+import { Footer } from "./footer/Footer";
+import { useUser } from "./hooks/useUser";
 import { NavBar } from "./navbar/NavBar";
 import { Overview } from "./overview/Overview";
-import { WelcomePage } from "./WelcomePage";
-import { randomInt } from "./util/util";
 import "./themes/background.css";
-import { useUser } from "./hooks/useUser";
+import { randomInt } from "./util/util";
+import { WelcomePage } from "./WelcomePage";
 
 export const App = () => {
   const userQuery = useUser();
@@ -16,11 +17,19 @@ export const App = () => {
   const [backgroundSix] = useState(() => randomInt(0, 50) === 1);
 
   return (
-    <Box className={backgroundSix ? "Six" : ""}>
+    <Box
+      className={backgroundSix ? "Six" : ""}
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "100vh",
+      }}
+    >
       <NavBar />
       <Container
         maxWidth="xl"
         sx={{
+          flexGrow: 1,
           my: "2%",
         }}
       >
@@ -39,6 +48,7 @@ export const App = () => {
           )}
         </LoadingSkeleton>
       </Container>
+      <Footer />
     </Box>
   );
 };
diff --git a/vinvoor/src/footer/Footer.tsx b/vinvoor/src/footer/Footer.tsx
@@ -0,0 +1,47 @@
+import { Box, Container, Icon, Link } from "@mui/material";
+import { TypographyG } from "../components/TypographyG";
+import { useVersion } from "../hooks/useVersion";
+import ZeusIcon from "/zeus.svg";
+
+export const Footer = () => {
+  const { data: version } = useVersion();
+
+  return (
+  <Container disableGutters maxWidth="xl">
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+      }}
+    >
+      <TypographyG width="33%">
+        {version?.version ?? ""}
+      </TypographyG>
+      <TypographyG
+        sx={{
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          width: "33%",
+          justifyContent: "center"
+        }}
+      >
+        Made with ❤️ by
+        <Link href="http://zeus.gent">
+          <Icon sx={{ pl: "4px", height: "40px", display: "flex", alignItems: "center", width: "60px" }}>
+            <img
+              src={ZeusIcon}
+              alt="Zeus Icon"
+              style={{ height: "auto", width: "40px" }}
+            />
+          </Icon>
+        </Link>
+      </TypographyG>
+      <Link href="https://github.com/ZeusWPI/ZeSS" width="33%" textAlign="end">
+        Github © 2024
+      </Link>
+    </Box>
+  </Container>
+  )
+};
diff --git a/vinvoor/src/hooks/useVersion.ts b/vinvoor/src/hooks/useVersion.ts
@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { convertVersionJSON, Version, VersionJSON } from '../types/version';
+import { getApi } from "../util/fetch";
+
+const ENDPOINT = "version";
+
+export const useVersion = () =>
+  useQuery<Version>({
+    queryKey: ["version"],
+    queryFn: () => getApi<Version, VersionJSON>(ENDPOINT, convertVersionJSON),
+    retry: 1
+  })
diff --git a/vinvoor/src/types/version.ts b/vinvoor/src/types/version.ts
@@ -0,0 +1,17 @@
+// External
+
+export interface VersionJSON {
+  version: string;
+}
+
+// Internal
+
+export interface Version {
+  version: string;
+}
+
+// Converters
+
+export const convertVersionJSON = (versionJSON: VersionJSON): Version => ({
+  ...versionJSON,
+});