From 8f181f4f1675578a1c8f3e308402dfe562491763 Mon Sep 17 00:00:00 2001
From: Topvennie <vincent@vallaeys.com>
Date: Fri, 19 Jul 2024 14:39:05 +0200
Subject: [PATCH] vinvoor: add an admin route

---
 vinvoor/package.json                   |  1 -
 vinvoor/src/components/BrowserView.tsx | 13 +++++++++++++
 vinvoor/src/main.tsx                   |  5 +++++
 vinvoor/src/navbar/NavBarUserMenu.tsx  | 23 ++++++++++++++++++++---
 vinvoor/src/overview/Overview.tsx      |  2 +-
 vinvoor/src/settings/admin/Admin.tsx   |  6 ++++++
 vinvoor/yarn.lock                      | 12 ------------
 7 files changed, 45 insertions(+), 17 deletions(-)
 create mode 100644 vinvoor/src/components/BrowserView.tsx
 create mode 100644 vinvoor/src/settings/admin/Admin.tsx

diff --git a/vinvoor/package.json b/vinvoor/package.json
index fdfbba9..20ea43d 100644
--- a/vinvoor/package.json
+++ b/vinvoor/package.json
@@ -26,7 +26,6 @@
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
-    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",
     "react-router-hash-link": "^2.4.3",
diff --git a/vinvoor/src/components/BrowserView.tsx b/vinvoor/src/components/BrowserView.tsx
new file mode 100644
index 0000000..1f05829
--- /dev/null
+++ b/vinvoor/src/components/BrowserView.tsx
@@ -0,0 +1,13 @@
+import { useMediaQuery, useTheme } from "@mui/material";
+import { FC } from "react";
+
+interface BrowserViewProps {
+    children: React.ReactNode;
+}
+
+export const BrowserView: FC<BrowserViewProps> = ({ children }) => {
+    const theme = useTheme();
+    const isMobileView = useMediaQuery(theme.breakpoints.down("md"));
+
+    return isMobileView ? null : <>{children}</>;
+};
diff --git a/vinvoor/src/main.tsx b/vinvoor/src/main.tsx
index 4fb04b4..0621eee 100644
--- a/vinvoor/src/main.tsx
+++ b/vinvoor/src/main.tsx
@@ -16,6 +16,7 @@ import { CustomSnackbarProvider } from "./providers/CustomSnackbarProvider.tsx";
 import { ThemeProvider } from "./providers/ThemeProvider.tsx";
 import { UserProvider } from "./providers/UserProvider.tsx";
 import { Scans } from "./scans/Scans.tsx";
+import { Admin } from "./settings/admin/Admin.tsx";
 import { SettingsOverview } from "./settings/SettingsOverview.tsx";
 import { Login } from "./user/Login.tsx";
 import { Logout } from "./user/Logout.tsx";
@@ -50,6 +51,10 @@ const router = createBrowserRouter([
                 path: "settings",
                 element: <SettingsOverview />,
             },
+            {
+                path: "admin",
+                element: <Admin />,
+            },
         ],
     },
 ]);
diff --git a/vinvoor/src/navbar/NavBarUserMenu.tsx b/vinvoor/src/navbar/NavBarUserMenu.tsx
index 70f5836..02bef28 100644
--- a/vinvoor/src/navbar/NavBarUserMenu.tsx
+++ b/vinvoor/src/navbar/NavBarUserMenu.tsx
@@ -1,6 +1,5 @@
-import { AccountCircle } from "@mui/icons-material";
 import { Button, Divider, Menu, MenuItem, Typography } from "@mui/material";
-import { ExitRun } from "mdi-material-ui";
+import { Cow, ExitRun, ShieldAccountOutline } from "mdi-material-ui";
 import { FC, MouseEvent, useContext, useState } from "react";
 import { UnstyledLink } from "../components/UnstyledLink";
 import { UserContext } from "../providers/UserProvider";
@@ -39,7 +38,7 @@ export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
                             color: "secondary.contrastText",
                         }}
                     >
-                        <AccountCircle sx={{ mr: "3px" }} />
+                        <ShieldAccountOutline sx={{ mr: "3px" }} />
                         <Typography variant="h6">{user.username}</Typography>
                     </Button>
                     <Menu
@@ -66,6 +65,24 @@ export const NavBarUserMenu: FC<NavBarUserMenuProps> = ({ pageIcons }) => {
                             </UnstyledLink>
                         ))}
                         <Divider />
+                        {user.admin && (
+                            <UnstyledLink to="admin">
+                                <MenuItem
+                                    onClick={handleCloseUserMenu}
+                                    sx={{
+                                        paddingX: "0",
+                                        justifyContent: "center",
+                                        backgroundColor: "error.dark",
+                                        "&:hover": {
+                                            backgroundColor: "error.light",
+                                        },
+                                    }}
+                                >
+                                    <Cow sx={{ mr: ".3rem", ml: "-12px" }} />
+                                    <Typography>Admin</Typography>
+                                </MenuItem>
+                            </UnstyledLink>
+                        )}
                         <MenuItem
                             onClick={handleCloseUserMenu}
                             sx={{
diff --git a/vinvoor/src/overview/Overview.tsx b/vinvoor/src/overview/Overview.tsx
index cccbaff..76897dc 100644
--- a/vinvoor/src/overview/Overview.tsx
+++ b/vinvoor/src/overview/Overview.tsx
@@ -1,8 +1,8 @@
 import { Box, Paper, Stack, Switch, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import { createContext, useEffect, useRef, useState } from "react";
-import { BrowserView } from "react-device-detect";
 import { Tooltip } from "react-tooltip";
+import { BrowserView } from "../components/BrowserView";
 import { LoadingSkeleton } from "../components/LoadingSkeleton";
 import { useFetch } from "../hooks/useFetch";
 import { convertScanJSON, Scan } from "../types/scans";
diff --git a/vinvoor/src/settings/admin/Admin.tsx b/vinvoor/src/settings/admin/Admin.tsx
new file mode 100644
index 0000000..c181dea
--- /dev/null
+++ b/vinvoor/src/settings/admin/Admin.tsx
@@ -0,0 +1,6 @@
+import { Typography } from "@mui/material";
+import { FC } from "react";
+
+export const Admin: FC = () => {
+    return <Typography>Admin</Typography>;
+};
diff --git a/vinvoor/yarn.lock b/vinvoor/yarn.lock
index 8a3865f..36016bc 100644
--- a/vinvoor/yarn.lock
+++ b/vinvoor/yarn.lock
@@ -2071,13 +2071,6 @@ react-apexcharts@^1.4.1:
   dependencies:
     prop-types "^15.8.1"
 
-react-device-detect@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca"
-  integrity sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==
-  dependencies:
-    ua-parser-js "^1.0.33"
-
 react-dom@^18.2.0:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
@@ -2398,11 +2391,6 @@ typescript@^5.2.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.3.tgz#e1b0a3c394190838a0b168e771b0ad56a0af0faa"
   integrity sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==
 
-ua-parser-js@^1.0.33:
-  version "1.0.38"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.38.tgz#66bb0c4c0e322fe48edfe6d446df6042e62f25e2"
-  integrity sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==
-
 update-browserslist-db@^1.0.16:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz#7ca61c0d8650766090728046e416a8cde682859e"