Merge pull request #48 from jadmsaadaot/SUBMIT-task#18

Simplify sidenav

submit-api/src/submit_api/schemas/project.py

@@ -60,6 +60,7 @@ class Meta:  # pylint: disable=too-few-public-methods
 
         unknown = EXCLUDE
 
+    id = fields.Int(data_key="id")
     account_id = fields.Int(data_key="account_id")
     project_id = fields.Int(data_key="project_id")
     project = fields.Nested(ProjectSchema, data_key="project")

submit-web/src/components/Projects/index.tsx

@@ -3,9 +3,10 @@ import { Skeleton, Stack } from "@mui/material";
 import { Project } from "./Project";
 
 type ProjectsParams = {
-  accountProjects: AccountProject[];
+  accountProjects?: AccountProject[];
 };
 export const Projects = ({ accountProjects }: ProjectsParams) => {
+  if (!accountProjects) return null;
   return (
     <Stack spacing={2} direction={"column"}>
       {accountProjects.map((accountProject) => (

submit-web/src/components/Shared/layout/Header/MobileNav.tsx

@@ -1,5 +1,4 @@
 import { Box, Typography } from "@mui/material";
-import React from "react";
 import { AppConfig } from "@/utils/config";
 import MenuIcon from "@mui/icons-material/Menu";
 import { theme } from "@/styles/theme";

submit-web/src/components/Shared/layout/SideNav/MainListItem.tsx

@@ -0,0 +1,41 @@
+import { alpha, ListItem, ListItemButton } from "@mui/material";
+import { RouteType } from "./SideNavElements";
+import { Link, useRouterState } from "@tanstack/react-router";
+import { theme } from "@/styles/theme";
+
+export const MainListItem = ({ route }: { route: RouteType }) => {
+  const router = useRouterState();
+  const currentPath = router.location.pathname;
+  return (
+    <ListItem key={route.name}>
+      <Link
+        to={route.path}
+        style={{
+          color: theme.palette.primary.light,
+          fontWeight: "bold",
+          textDecoration: "none",
+          width: "100%",
+        }}
+      >
+        <ListItemButton
+          sx={{
+            pl: "2rem",
+            backgroundColor:
+              currentPath === route.path
+                ? alpha(theme.palette.secondary.main, 0.1)
+                : theme.palette.primary.light,
+            borderLeft: `4px solid ${theme.palette.primary.main}`,
+          }}
+        >
+          <span
+            style={{
+              color: alpha(theme.palette.primary.main, 0.8),
+            }}
+          >
+            {route.name}
+          </span>
+        </ListItemButton>
+      </Link>
+    </ListItem>
+  );
+};

submit-web/src/components/Shared/layout/SideNav/ProjectsSubRoutes.tsx

@@ -0,0 +1,23 @@
+import { useGetProjects } from "@/hooks/api/useProjects";
+import { useAccount } from "@/store/accountStore";
+import { SubListItem } from "./SubListItem";
+import { SubListItemSkeleton } from "./SubListItemSkeleton";
+
+export default function ProjectsSubRoutes() {
+  const { accountId } = useAccount();
+  const { data: accountProjects, isPending } = useGetProjects({
+    accountId,
+  });
+
+  if (isPending) return <SubListItemSkeleton />;
+
+  return accountProjects?.map((accountProject) => (
+    <SubListItem
+      key={`sub-list-${accountProject.id}`}
+      route={{
+        name: accountProject.project.name,
+        path: `/projects/${accountProject.id}`,
+      }}
+    />
+  ));
+}

submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx

@@ -1,37 +1,8 @@
-import { useState } from "react";
-import {
-  Box,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemText,
-} from "@mui/material";
-import { Link } from "@tanstack/react-router";
-import { theme } from "@/styles/theme";
-import {
-  AuthenticatedRoutes,
-  createProjectRoutes,
-} from "./SideNavElements";
-import { alpha } from "@mui/system";
-import { useDrawer } from "../../Drawers/DrawerStore";
-import { useGetProjects } from "@/hooks/api/useProjects";
-import { useAccount } from "@/store/accountStore";
+import { Box, List } from "@mui/material";
+import { MainListItem } from "./MainListItem";
+import ProjectsSubRoutes from "./ProjectsSubRoutes";
 
 export default function SideNavBar() {
-  const [currentPath, setCurrentPath] = useState(window.location.pathname);
-  const { isOpen, setClose } = useDrawer();
-  const { accountId } = useAccount();
-  const { data: projects } = useGetProjects({
-    accountId,
-  });
-  const projectRoutes = createProjectRoutes(projects);
-  const routeMenuItems = projectRoutes.concat(AuthenticatedRoutes);
-
-  const handleRouteChange = (path: string) => {
-    setCurrentPath(path);
-    if (isOpen) setClose();
-  };
-
   return (
     <div style={{ height: "100%" }}>
       <Box
@@ -45,87 +16,19 @@ export default function SideNavBar() {
         }}
       >
         <List>
-          {routeMenuItems.map((route) => (
-            <>
-              <ListItem key={route.name}>
-                <Link
-                  to={route.path}
-                  onClick={() => handleRouteChange(route.path)}
-                  style={{
-                    color: theme.palette.primary.light,
-                    fontWeight: "bold",
-                    textDecoration: "none",
-                    width: "100%",
-                  }}
-                >
-                  <ListItemButton
-                    sx={{
-                      pl: "2rem",
-                      backgroundColor:
-                        currentPath === route.path
-                          ? alpha(theme.palette.secondary.main, 0.1)
-                          : theme.palette.primary.light,
-                      borderLeft: `4px solid ${theme.palette.primary.main}`,
-                    }}
-                  >
-                    <span
-                      style={{
-                        color: alpha(theme.palette.primary.main, 0.8),
-                      }}
-                    >
-                      {route.name}
-                    </span>
-                  </ListItemButton>
-                </Link>
-              </ListItem>
-              {route.routes && route.routes?.length > 0 && (
-                <List disablePadding key={`list-${route.name}`}>
-                  {route.routes?.map((subRoute) => (
-                    <ListItem
-                      key={`sub-list-${subRoute?.name}`}
-                      sx={{ margin: 0, padding: 0 }}
-                    >
-                      <Link
-                        to={subRoute.path}
-                        onClick={() => handleRouteChange(route.path)}
-                        style={{
-                          textDecoration: "none",
-                          margin: 0,
-                          padding: 0,
-                          color: "inherit",
-                        }}
-                        activeProps={{
-                          style: {
-                            color: theme.palette.primary.main,
-                            fontWeight:
-                              currentPath === subRoute.path ? "bold" : "normal",
-                            width: "100%",
-                          },
-                        }}
-                      >
-                        <ListItemButton
-                          key={`sub-list-button-${subRoute?.name}`}
-                          sx={{
-                            marginLeft: "40px",
-                            borderLeft:
-                              currentPath === subRoute.path
-                                ? `4px solid ${theme.palette.primary.main}`
-                                : `1px solid ${theme.palette.divider}`,
-                          }}
-                        >
-                          <ListItemText key={`sub-list-text-${subRoute?.name}`}>
-                            <span style={{ color: "inherit" }}>
-                              {subRoute.name}
-                            </span>
-                          </ListItemText>
-                        </ListItemButton>
-                      </Link>
-                    </ListItem>
-                  ))}
-                </List>
-              )}
-            </>
-          ))}
+          <MainListItem
+            route={{
+              name: "All Projects",
+              path: "/projects",
+            }}
+          />
+          <ProjectsSubRoutes />
+          <MainListItem
+            route={{
+              name: "Admin",
+              path: "/profile",
+            }}
+          />
         </List>
       </Box>
     </div>

submit-web/src/components/Shared/layout/SideNav/SideNavElements.tsx

@@ -1,29 +1,21 @@
-import { Project } from "@/models/Project";
-
-export const createProjectRoutes = (projects: Project[]): RouteType[] => {
-  const projectRoutes = projects?.map((project) => ({
-    name: project.name,
-    path: `/projects/${project.id}`,
-  }));
-  return [
-    {
-      name: "All Projects",
-      path: "/projects",
-      routes: projectRoutes,
-    },
-  ];
-};
-
 export const AuthenticatedRoutes: RouteType[] = [
   {
     name: "Admin",
     path: "/profile",
   },
 ];
 
+export const AdminRoute: RouteType = {
+  name: "Admin",
+  path: "/admin",
+};
+
+export const ProjectRoute: RouteType = {
+  name: "All Projects",
+  path: "/projects",
+};
+
 export interface RouteType {
   name: string;
   path: string;
-  group?: string;
-  routes?: RouteType[];
 }

submit-web/src/components/Shared/layout/SideNav/SubListItem.tsx

@@ -0,0 +1,44 @@
+import { ListItem, ListItemButton, ListItemText } from "@mui/material";
+import { RouteType } from "./SideNavElements";
+import { Link, useRouterState } from "@tanstack/react-router";
+import { theme } from "@/styles/theme";
+
+export const SubListItem = ({ route }: { route: RouteType }) => {
+  const router = useRouterState();
+  const currentPath = router.location.pathname;
+  return (
+    <ListItem key={`sub-list-${route?.name}`} sx={{ margin: 0, padding: 0 }}>
+      <Link
+        to={route.path}
+        style={{
+          textDecoration: "none",
+          margin: 0,
+          padding: 0,
+          color: "inherit",
+        }}
+        activeProps={{
+          style: {
+            color: theme.palette.primary.main,
+            fontWeight: currentPath === route.path ? "bold" : "normal",
+            width: "100%",
+          },
+        }}
+      >
+        <ListItemButton
+          key={`sub-list-button-${route?.name}`}
+          sx={{
+            marginLeft: "40px",
+            borderLeft:
+              currentPath === route.path
+                ? `4px solid ${theme.palette.primary.main}`
+                : `1px solid ${theme.palette.divider}`,
+          }}
+        >
+          <ListItemText key={`sub-list-text-${route?.name}`}>
+            <span style={{ color: "inherit" }}>{route.name}</span>
+          </ListItemText>
+        </ListItemButton>
+      </Link>
+    </ListItem>
+  );
+};

submit-web/src/components/Shared/layout/SideNav/SubListItemSkeleton.tsx

@@ -0,0 +1,24 @@
+import {
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Skeleton,
+} from "@mui/material";
+import { theme } from "@/styles/theme";
+
+export const SubListItemSkeleton = () => {
+  return (
+    <ListItem sx={{ margin: 0, padding: 0 }}>
+      <ListItemButton
+        sx={{
+          marginLeft: "40px",
+          borderLeft: `1px solid ${theme.palette.divider}`,
+        }}
+      >
+        <ListItemText>
+          <Skeleton />
+        </ListItemText>
+      </ListItemButton>
+    </ListItem>
+  );
+};

submit-web/src/hooks/api/useProjects.tsx

@@ -1,4 +1,4 @@
-import { Project } from "@/models/Project";
+import { AccountProject, Project } from "@/models/Project";
 import { request } from "@/utils/axiosUtils";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { Options } from "./types";
@@ -39,7 +39,7 @@ type GetProjectsByAccountParams = {
   accountId?: number;
 };
 const getProjectsByAccount = ({ accountId }: GetProjectsByAccountParams) => {
-  return request({ url: `/projects/accounts/${accountId}` });
+  return request<AccountProject[]>({ url: `/projects/accounts/${accountId}` });
 };
 
 export const useAddProjects = (options?: Options) => {
@@ -50,13 +50,13 @@ export const useAddProjects = (options?: Options) => {
 };
 
 type UseGetProjectsByAccountParams = {
-  accountId?: number;
+  accountId: number;
 };
 export const useGetProjects = ({
   accountId,
 }: UseGetProjectsByAccountParams) => {
   return useQuery({
-    queryKey: ["projects"],
+    queryKey: ["projects", accountId],
     queryFn: () => getProjectsByAccount({ accountId }),
     enabled: Boolean(accountId),
   });