From e80c73f8022506acaf6520ba999b3d16726c4dcb Mon Sep 17 00:00:00 2001
From: Loris Van Katwijk <loris.vankatwijk@gmail.com>
Date: Tue, 16 Apr 2024 11:56:51 +0200
Subject: [PATCH] feat: change pages structure to avoid dashboard menu refresh

---
 .../{ => (dashboard)}/jobmonitor/error.tsx    |  0
 src/app/(dashboard)/jobmonitor/layout.tsx     |  2 --
 src/app/{ => (dashboard)}/jobmonitor/page.tsx |  0
 src/app/(dashboard)/layout.tsx                | 33 +++++++++++++++++++
 src/app/{ => (dashboard)}/page.tsx            |  0
 src/app/jobmonitor/layout.tsx                 |  7 ----
 src/components/applications/JobMonitor.tsx    | 18 +++-------
 src/components/applications/UserDashboard.tsx | 19 +++--------
 8 files changed, 41 insertions(+), 38 deletions(-)
 rename src/app/{ => (dashboard)}/jobmonitor/error.tsx (100%)
 rename src/app/{ => (dashboard)}/jobmonitor/page.tsx (100%)
 create mode 100644 src/app/(dashboard)/layout.tsx
 rename src/app/{ => (dashboard)}/page.tsx (100%)
 delete mode 100644 src/app/jobmonitor/layout.tsx

diff --git a/src/app/jobmonitor/error.tsx b/src/app/(dashboard)/jobmonitor/error.tsx
similarity index 100%
rename from src/app/jobmonitor/error.tsx
rename to src/app/(dashboard)/jobmonitor/error.tsx
diff --git a/src/app/(dashboard)/jobmonitor/layout.tsx b/src/app/(dashboard)/jobmonitor/layout.tsx
index c0bcec50..1f26a53c 100644
--- a/src/app/(dashboard)/jobmonitor/layout.tsx
+++ b/src/app/(dashboard)/jobmonitor/layout.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function JobMonitorLayout({
   children,
 }: {
diff --git a/src/app/jobmonitor/page.tsx b/src/app/(dashboard)/jobmonitor/page.tsx
similarity index 100%
rename from src/app/jobmonitor/page.tsx
rename to src/app/(dashboard)/jobmonitor/page.tsx
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
new file mode 100644
index 00000000..d28307df
--- /dev/null
+++ b/src/app/(dashboard)/layout.tsx
@@ -0,0 +1,33 @@
+"use client";
+import * as React from "react";
+import CssBaseline from "@mui/material/CssBaseline";
+import { Box } from "@mui/material";
+import { useMUITheme } from "@/hooks/theme";
+import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
+import Dashboard from "@/components/layout/Dashboard";
+
+export default function JobMonitorLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const theme = useMUITheme();
+
+  return (
+    <section>
+      <Dashboard>
+        <MUIThemeProvider theme={theme}>
+          <CssBaseline />
+          <Box
+            sx={{
+              ml: "5%",
+              mr: "5%",
+            }}
+          >
+            {children}
+          </Box>
+        </MUIThemeProvider>
+      </Dashboard>
+    </section>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/(dashboard)/page.tsx
similarity index 100%
rename from src/app/page.tsx
rename to src/app/(dashboard)/page.tsx
diff --git a/src/app/jobmonitor/layout.tsx b/src/app/jobmonitor/layout.tsx
deleted file mode 100644
index 1f26a53c..00000000
--- a/src/app/jobmonitor/layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function JobMonitorLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <section>{children}</section>;
-}
diff --git a/src/components/applications/JobMonitor.tsx b/src/components/applications/JobMonitor.tsx
index e4224299..09c2fa6f 100644
--- a/src/components/applications/JobMonitor.tsx
+++ b/src/components/applications/JobMonitor.tsx
@@ -15,19 +15,9 @@ export default function JobMonitor() {
   const theme = useMUITheme();
 
   return (
-    <Dashboard>
-      <MUIThemeProvider theme={theme}>
-        <CssBaseline />
-        <Box
-          sx={{
-            ml: "5%",
-            mr: "5%",
-          }}
-        >
-          <h2>Job Monitor</h2>
-          <JobDataTable />
-        </Box>
-      </MUIThemeProvider>
-    </Dashboard>
+    <div>
+      <h2>Job Monitor</h2>
+      <JobDataTable />
+    </div>
   );
 }
diff --git a/src/components/applications/UserDashboard.tsx b/src/components/applications/UserDashboard.tsx
index 15a701a9..57b93774 100644
--- a/src/components/applications/UserDashboard.tsx
+++ b/src/components/applications/UserDashboard.tsx
@@ -13,7 +13,6 @@ import { useMUITheme } from "@/hooks/theme";
  * @returns User Dashboard content
  */
 export default function UserDashboard() {
-  const theme = useMUITheme();
   const { configuration } = useOIDCContext();
   const { accessTokenPayload } = useOidcAccessToken(configuration?.scope);
 
@@ -22,20 +21,10 @@ export default function UserDashboard() {
   }
 
   return (
-    <Dashboard>
-      <MUIThemeProvider theme={theme}>
-        <CssBaseline />
-        <Box
-          sx={{
-            ml: "5%",
-            mr: "5%",
-          }}
-        >
-          <h2>Hello {accessTokenPayload["preferred_username"]}</h2>
+    <div>
+      <h2>Hello {accessTokenPayload["preferred_username"]}</h2>
 
-          <p>To start with, select an application in the side bar</p>
-        </Box>
-      </MUIThemeProvider>
-    </Dashboard>
+      <p>To start with, select an application in the side bar</p>
+    </div>
   );
 }