From 0cc756f84760a7f17ef83118d633ec281f5e8c99 Mon Sep 17 00:00:00 2001
From: aldbr <aldbr@outlook.com>
Date: Fri, 29 Sep 2023 16:48:09 +0200
Subject: [PATCH] feat: create sub-directories in components

---
 src/app/dashboard/jobmonitor/page.tsx         |   2 +-
 src/app/dashboard/layout.tsx                  |   4 +-
 src/app/layout.tsx                            |   2 +-
 src/app/page.tsx                              |   2 +-
 src/components/DashboardAppBar.tsx            | 185 ------------------
 src/components/{ => auth}/OIDCUtils.tsx       |   0
 src/components/{ => data}/JobDataGrid.tsx     |   3 +-
 src/components/layout/DashboardAppBar.tsx     | 114 +++++++++++
 src/components/layout/DashboardDrawer.tsx     |  66 +++++++
 .../{ => layout}/ShowcaseAppBar.tsx           |   7 +-
 src/components/{ => ui}/DashboardButton.tsx   |   1 -
 src/components/{ => ui}/DiracLogo.tsx         |   0
 src/components/{ => ui}/LoginButton.tsx       |   0
 13 files changed, 190 insertions(+), 196 deletions(-)
 delete mode 100644 src/components/DashboardAppBar.tsx
 rename src/components/{ => auth}/OIDCUtils.tsx (100%)
 rename src/components/{ => data}/JobDataGrid.tsx (95%)
 create mode 100644 src/components/layout/DashboardAppBar.tsx
 create mode 100644 src/components/layout/DashboardDrawer.tsx
 rename src/components/{ => layout}/ShowcaseAppBar.tsx (92%)
 rename src/components/{ => ui}/DashboardButton.tsx (88%)
 rename src/components/{ => ui}/DiracLogo.tsx (100%)
 rename src/components/{ => ui}/LoginButton.tsx (100%)

diff --git a/src/app/dashboard/jobmonitor/page.tsx b/src/app/dashboard/jobmonitor/page.tsx
index 4f9a4c3e..4cd3a60f 100644
--- a/src/app/dashboard/jobmonitor/page.tsx
+++ b/src/app/dashboard/jobmonitor/page.tsx
@@ -1,4 +1,4 @@
-import { JobDataGrid } from "@/components/JobDataGrid";
+import { JobDataGrid } from "@/components/data/JobDataGrid";
 
 export default async function Page() {
   return (
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 9a8e9f58..ecf2fea4 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import DashboardAppBar from "@/components/DashboardAppBar";
-import { OIDCSecure } from "@/components/OIDCUtils";
+import DashboardAppBar from "@/components/layout/DashboardAppBar";
+import { OIDCSecure } from "@/components/auth/OIDCUtils";
 
 export default function DashboardLayout({
   children,
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4674d2f8..aba44b2d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import "./globals.css";
 import { Inter } from "next/font/google";
-import { OIDCProvider } from "@/components/OIDCUtils";
+import { OIDCProvider } from "@/components/auth/OIDCUtils";
 import { OidcConfiguration } from "@axa-fr/react-oidc";
 
 const inter = Inter({ subsets: ["latin"] });
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 53503ec3..4ed1d83e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import ShowcaseAppBar from "@/components/ShowcaseAppBar";
+import ShowcaseAppBar from "@/components/layout/ShowcaseAppBar";
 
 const containerStyles = {
   marginLeft: "30%",
diff --git a/src/components/DashboardAppBar.tsx b/src/components/DashboardAppBar.tsx
deleted file mode 100644
index debb40c6..00000000
--- a/src/components/DashboardAppBar.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-"use client";
-import * as React from "react";
-import NextLink from "next/link";
-import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
-import CssBaseline from "@mui/material/CssBaseline";
-import Drawer from "@mui/material/Drawer";
-import IconButton from "@mui/material/IconButton";
-import MenuIcon from "@mui/icons-material/Menu";
-import MonitorIcon from "@mui/icons-material/Monitor";
-import MenuBookIcon from "@mui/icons-material/MenuBook";
-import Icon from "@mui/material/Icon";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Toolbar from "@mui/material/Toolbar";
-import Stack from "@mui/material/Stack";
-import { DiracLogo } from "./DiracLogo";
-import { Dashboard, FolderCopy } from "@mui/icons-material";
-import { LoginButton } from "./LoginButton";
-
-interface DashboardAppBarProps {
-  children: React.ReactNode;
-}
-
-// Sections accessible to the users
-const userSections: Record<
-  string,
-  { icon: React.ComponentType; path: string }
-> = {
-  Dashboard: { icon: Dashboard, path: "/dashboard" },
-  "Job Monitor": { icon: MonitorIcon, path: "/dashboard/jobmonitor" },
-  "File Catalog": { icon: FolderCopy, path: "/dashboard/filecatalog" },
-};
-
-/**
- * Build a side bar on the left containing the available sections as well as a top bar.
- * The side bar is expected to collapse if displayed on a small screen
- *
- * @param props - children
- * @return an dashboard layout
- */
-export default function DashboardAppBar(props: DashboardAppBarProps) {
-  /** State management for mobile drawer */
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-  const handleDrawerToggle = () => {
-    setMobileOpen(!mobileOpen);
-  };
-
-  /** State management for selected section in the drawer */
-  const [selectedIndex, setSelectedIndex] = React.useState<number>(0);
-  const handleListItemClick = (index: number) => {
-    setSelectedIndex(index);
-  };
-
-  /** Drawer width */
-  const drawerWidth = 240;
-
-  /** Drawer component: a logo, a list of sections and a link to the documentation */
-  const drawer = (
-    <div>
-      <Toolbar>
-        <DiracLogo />
-      </Toolbar>
-      <List>
-        {Object.keys(userSections).map((title: string, index: number) => (
-          <ListItem key={title} disablePadding>
-            <ListItemButton
-              component={NextLink}
-              href={userSections[title]["path"]}
-              selected={selectedIndex === index}
-              onClick={() => handleListItemClick(index)}
-            >
-              <ListItemIcon>
-                <Icon component={userSections[title]["icon"]} />
-              </ListItemIcon>
-              <ListItemText primary={title} />
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
-
-      <List style={{ position: "absolute", bottom: "0" }}>
-        <ListItem key={"Documentation"}>
-          <ListItemButton
-            target="_blank"
-            href="https://dirac.readthedocs.io/en/latest/"
-          >
-            <ListItemIcon>
-              <MenuBookIcon />
-            </ListItemIcon>
-            <ListItemText primary={"Documentation"} />
-          </ListItemButton>
-        </ListItem>
-      </List>
-    </div>
-  );
-
-  const container =
-    window !== undefined ? () => window.document.body : undefined;
-
-  /** Return an App bar embedding the drawer */
-  return (
-    <Box sx={{ display: "flex" }}>
-      <CssBaseline />
-      <AppBar
-        position="fixed"
-        elevation={0}
-        sx={{
-          width: { sm: `calc(100% - ${drawerWidth}px)` },
-          ml: { sm: `${drawerWidth}px` },
-          bgcolor: "white",
-        }}
-      >
-        <Stack direction="row">
-          <Toolbar>
-            <IconButton
-              aria-label="open drawer"
-              edge="start"
-              onClick={handleDrawerToggle}
-              sx={{ mr: 2, display: { sm: "none" } }}
-            >
-              <MenuIcon />
-            </IconButton>
-          </Toolbar>
-          <Toolbar
-            sx={{
-              justifyContent: "space-between",
-              flexGrow: 1,
-            }}
-          >
-            <div />
-            <LoginButton />
-          </Toolbar>
-        </Stack>
-      </AppBar>
-      <Box
-        component="nav"
-        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
-        aria-label="side bar"
-      >
-        {}
-        <Drawer
-          container={container}
-          variant="temporary"
-          open={mobileOpen}
-          onClose={handleDrawerToggle}
-          ModalProps={{
-            keepMounted: true,
-          }}
-          sx={{
-            display: { xs: "block", sm: "none" },
-            "& .MuiDrawer-paper": {
-              boxSizing: "border-box",
-              width: drawerWidth,
-            },
-          }}
-        >
-          {drawer}
-        </Drawer>
-        <Drawer
-          variant="permanent"
-          sx={{
-            display: { xs: "none", sm: "block" },
-            "& .MuiDrawer-paper": {
-              boxSizing: "border-box",
-              width: drawerWidth,
-            },
-          }}
-          open
-        >
-          {drawer}
-        </Drawer>
-      </Box>
-      <Box
-        component="main"
-        sx={{ pt: 10, px: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
-      >
-        {props.children}
-      </Box>
-    </Box>
-  );
-}
diff --git a/src/components/OIDCUtils.tsx b/src/components/auth/OIDCUtils.tsx
similarity index 100%
rename from src/components/OIDCUtils.tsx
rename to src/components/auth/OIDCUtils.tsx
diff --git a/src/components/JobDataGrid.tsx b/src/components/data/JobDataGrid.tsx
similarity index 95%
rename from src/components/JobDataGrid.tsx
rename to src/components/data/JobDataGrid.tsx
index ec7717f6..a4ced3d5 100644
--- a/src/components/JobDataGrid.tsx
+++ b/src/components/data/JobDataGrid.tsx
@@ -11,7 +11,8 @@ const columns = [
 ];
 
 /**
- * Table of jobs
+ * It gets rows from diracx and build the data grid
+ *
  * @returns a DataGrid displaying details about jobs
  */
 export function JobDataGrid() {
diff --git a/src/components/layout/DashboardAppBar.tsx b/src/components/layout/DashboardAppBar.tsx
new file mode 100644
index 00000000..b53eabfa
--- /dev/null
+++ b/src/components/layout/DashboardAppBar.tsx
@@ -0,0 +1,114 @@
+"use client";
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import CssBaseline from "@mui/material/CssBaseline";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import Toolbar from "@mui/material/Toolbar";
+import Stack from "@mui/material/Stack";
+import { LoginButton } from "../ui/LoginButton";
+import DashboardDrawer from "./DashboardDrawer";
+
+interface DashboardAppBarProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Build a side bar on the left containing the available sections as well as a top bar.
+ * The side bar is expected to collapse if displayed on a small screen
+ *
+ * @param props - children
+ * @return an dashboard layout
+ */
+export default function DashboardAppBar(props: DashboardAppBarProps) {
+  /** State management for mobile drawer */
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
+  /** Drawer width */
+  const drawerWidth = 240;
+
+  /** Drawer component: a logo, a list of sections and a link to the documentation */
+  const container =
+    window !== undefined ? () => window.document.body : undefined;
+
+  const renderDrawer = (variant: "permanent" | "temporary") => {
+    const isTemporary = variant === "temporary";
+
+    return (
+      <Drawer
+        container={isTemporary ? container : undefined}
+        variant={variant}
+        open={isTemporary ? mobileOpen : true}
+        onClose={handleDrawerToggle}
+        sx={{
+          display: {
+            xs: isTemporary ? "block" : "none",
+            sm: isTemporary ? "none" : "block",
+          },
+          "& .MuiDrawer-paper": {
+            boxSizing: "border-box",
+            width: drawerWidth,
+          },
+        }}
+      >
+        <DashboardDrawer />
+      </Drawer>
+    );
+  };
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      <CssBaseline />
+      <AppBar
+        position="fixed"
+        elevation={0}
+        sx={{
+          width: { sm: `calc(100% - ${drawerWidth}px)` },
+          ml: { sm: `${drawerWidth}px` },
+          bgcolor: "white",
+        }}
+      >
+        <Stack direction="row">
+          <Toolbar>
+            <IconButton
+              aria-label="open drawer"
+              edge="start"
+              onClick={handleDrawerToggle}
+              sx={{ mr: 2, display: { sm: "none" } }}
+            >
+              <MenuIcon />
+            </IconButton>
+          </Toolbar>
+          <Toolbar
+            sx={{
+              justifyContent: "space-between",
+              flexGrow: 1,
+            }}
+          >
+            <div />
+            <LoginButton />
+          </Toolbar>
+        </Stack>
+      </AppBar>
+      <Box
+        component="nav"
+        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+        aria-label="side bar"
+      >
+        {renderDrawer("temporary")}
+        {renderDrawer("permanent")}
+      </Box>
+      <Box
+        component="main"
+        sx={{ pt: 10, px: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+      >
+        {props.children}
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/components/layout/DashboardDrawer.tsx b/src/components/layout/DashboardDrawer.tsx
new file mode 100644
index 00000000..87b017f4
--- /dev/null
+++ b/src/components/layout/DashboardDrawer.tsx
@@ -0,0 +1,66 @@
+import { DiracLogo } from "../ui/DiracLogo";
+import { usePathname } from "next/navigation";
+import NextLink from "next/link";
+import {
+  Icon,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+} from "@mui/material";
+import { Dashboard, FolderCopy } from "@mui/icons-material";
+import MonitorIcon from "@mui/icons-material/Monitor";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+
+// Sections accessible to the users
+const userSections: Record<
+  string,
+  { icon: React.ComponentType; path: string }
+> = {
+  Dashboard: { icon: Dashboard, path: "/dashboard" },
+  "Job Monitor": { icon: MonitorIcon, path: "/dashboard/jobmonitor" },
+  "File Catalog": { icon: FolderCopy, path: "/dashboard/filecatalog" },
+};
+
+export default function DashboardDrawerContents() {
+  const pathname = usePathname();
+
+  return (
+    <div>
+      <Toolbar>
+        <DiracLogo />
+      </Toolbar>
+      <List>
+        {Object.keys(userSections).map((title: string) => (
+          <ListItem key={title} disablePadding>
+            <ListItemButton
+              component={NextLink}
+              href={userSections[title]["path"]}
+              selected={pathname === userSections[title]["path"]}
+            >
+              <ListItemIcon>
+                <Icon component={userSections[title]["icon"]} />
+              </ListItemIcon>
+              <ListItemText primary={title} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <List style={{ position: "absolute", bottom: "0" }}>
+        <ListItem key={"Documentation"}>
+          <ListItemButton
+            target="_blank"
+            href="https://dirac.readthedocs.io/en/latest/"
+          >
+            <ListItemIcon>
+              <MenuBookIcon />
+            </ListItemIcon>
+            <ListItemText primary={"Documentation"} />
+          </ListItemButton>
+        </ListItem>
+      </List>
+    </div>
+  );
+}
diff --git a/src/components/ShowcaseAppBar.tsx b/src/components/layout/ShowcaseAppBar.tsx
similarity index 92%
rename from src/components/ShowcaseAppBar.tsx
rename to src/components/layout/ShowcaseAppBar.tsx
index d6d7a7c9..4bbb4c25 100644
--- a/src/components/ShowcaseAppBar.tsx
+++ b/src/components/layout/ShowcaseAppBar.tsx
@@ -3,14 +3,13 @@ import * as React from "react";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import CssBaseline from "@mui/material/CssBaseline";
-import useScrollTrigger from "@mui/material/useScrollTrigger";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 import { styled } from "@mui/material/styles";
-import { DiracLogo } from "./DiracLogo";
-import { LoginButton } from "./LoginButton";
+import { DiracLogo } from "../ui/DiracLogo";
+import { LoginButton } from "../ui/LoginButton";
 import { Stack } from "@mui/material";
-import { DashboardButton } from "./DashboardButton";
+import { DashboardButton } from "../ui/DashboardButton";
 import Image from "next/image";
 
 /**
diff --git a/src/components/DashboardButton.tsx b/src/components/ui/DashboardButton.tsx
similarity index 88%
rename from src/components/DashboardButton.tsx
rename to src/components/ui/DashboardButton.tsx
index 972d83a1..f29ff92a 100644
--- a/src/components/DashboardButton.tsx
+++ b/src/components/ui/DashboardButton.tsx
@@ -1,6 +1,5 @@
 import { useOidcAccessToken } from "@axa-fr/react-oidc";
 import { Button } from "@mui/material";
-import { deepOrange, lightGreen } from "@mui/material/colors";
 import Link from "next/link";
 
 /**
diff --git a/src/components/DiracLogo.tsx b/src/components/ui/DiracLogo.tsx
similarity index 100%
rename from src/components/DiracLogo.tsx
rename to src/components/ui/DiracLogo.tsx
diff --git a/src/components/LoginButton.tsx b/src/components/ui/LoginButton.tsx
similarity index 100%
rename from src/components/LoginButton.tsx
rename to src/components/ui/LoginButton.tsx