nested routes for admin page #1211

src/App.tsx

@@ -1,17 +1,18 @@
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import type { Router } from '@remix-run/router';
 import {
   QueryCache,
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query';
-import React from 'react';
-// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import type { Router } from '@remix-run/router';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AxiosError } from 'axios';
 import { enGB } from 'date-fns/locale/en-GB';
+import React from 'react';
 import {
   RouterProvider,
+  ScrollRestoration,
   createBrowserRouter,
   type RouteObject,
 } from 'react-router-dom';
@@ -119,11 +120,14 @@ const routeObject: RouteObject[] = [
       {
         path: paths.manufacturers,
         Component: ManufacturerLayout,
-        loader: manufacturerLayoutLoader(queryClient),
         ErrorBoundary: ManufacturerLayoutErrorComponent,
         children: [
           { index: true, Component: ManufacturerTable },
-          { path: paths.manufacturer, Component: ManufacturerLandingPage },
+          {
+            path: paths.manufacturer,
+            Component: ManufacturerLandingPage,
+            loader: manufacturerLayoutLoader(queryClient),
+          },
           {
             path: '*',
             Component: ManufacturerErrorComponent,
@@ -188,7 +192,8 @@ export function Layout() {
                 }
               >
                 <ViewTabs />
-                {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+                <ReactQueryDevtools initialIsOpen={false} />
+                <ScrollRestoration />
               </React.Suspense>
             </QueryClientProvider>
           </ConfigProvider>

src/admin/__snapshots__/adminCardView.component.test.tsx.snap

@@ -84,88 +84,3 @@ exports[`AdminCardView > renders admin card view correctly 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`AdminPage > renders admin page correctly 1`] = `
-<DocumentFragment>
-  <div
-    class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
-  >
-    <div
-      class="MuiGrid-root MuiGrid-container css-k6wrnl-MuiGrid-root"
-    >
-      <div
-        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 css-le9sc4-MuiGrid-root"
-      >
-        <div
-          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
-        >
-          <a
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-q760su-MuiButtonBase-root-MuiButton-root"
-            href="/units"
-            tabindex="0"
-          >
-            <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-siqlql-MuiPaper-root-MuiCard-root"
-            >
-              <div
-                class="MuiCardContent-root css-lo1d59-MuiCardContent-root"
-              >
-                <div
-                  class="MuiGrid-root css-vj1n65-MuiGrid-root"
-                >
-                  <div
-                    class="MuiGrid-root css-13qkvwv-MuiGrid-root"
-                  >
-                    <p
-                      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
-                    >
-                      Units
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </a>
-        </div>
-        <div
-          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
-        >
-          <a
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-q760su-MuiButtonBase-root-MuiButton-root"
-            href="/usage-statuses"
-            tabindex="0"
-          >
-            <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-siqlql-MuiPaper-root-MuiCard-root"
-            >
-              <div
-                class="MuiCardContent-root css-lo1d59-MuiCardContent-root"
-              >
-                <div
-                  class="MuiGrid-root css-vj1n65-MuiGrid-root"
-                >
-                  <div
-                    class="MuiGrid-root css-13qkvwv-MuiGrid-root"
-                  >
-                    <p
-                      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
-                    >
-                      Usage Statuses
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;

src/admin/adminCardView.component.tsx

@@ -9,7 +9,7 @@ function AdminCardView() {
           <Grid item key={0} xs={12} sm={6}>
             <Button
               component={Link}
-              to={'units'}
+              to="units"
               fullWidth
               sx={{
                 display: 'flex',
@@ -21,7 +21,7 @@ function AdminCardView() {
             >
               <Card
                 sx={{
-                  padding: '8px',
+                  padding: 1,
                   width: '100%',
                   display: 'flex',
                   height: '100px', // Set a fixed height for all cards
@@ -37,7 +37,7 @@ function AdminCardView() {
                   }}
                 >
                   <Grid>
-                    <Grid position={'relative'}>
+                    <Grid position="relative">
                       <Typography>Units</Typography>
                     </Grid>
                   </Grid>
@@ -60,7 +60,7 @@ function AdminCardView() {
             >
               <Card
                 sx={{
-                  padding: '8px',
+                  padding: 1,
                   width: '100%',
                   display: 'flex',
                   height: '100px',
@@ -76,7 +76,7 @@ function AdminCardView() {
                   }}
                 >
                   <Grid>
-                    <Grid position={'relative'}>
+                    <Grid position="relative">
                       <Typography>Usage Statuses</Typography>
                     </Grid>
                   </Grid>

src/admin/adminLayout.component.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import { BreadcrumbsInfo } from '../api/api.types';
+import { paths } from '../App';
 import BaseLayoutHeader from '../common/baseLayoutHeader.component';
 import ErrorPage from '../common/errorPage.component';
 
@@ -18,13 +19,11 @@ export const useGetAdminPageName = (): string | null => {
   const location = useLocation();
 
   return React.useMemo(() => {
-    let adminPageName: string | null = location.pathname.replace(
-      '/admin-ims',
+    const adminPageName: string | null = location.pathname.replace(
+      paths.admin,
       ''
     );
-    adminPageName =
-      adminPageName === '' ? null : adminPageName.replace('/', '');
-    return adminPageName;
+    return adminPageName === '' ? null : adminPageName.replace('/', '');
   }, [location.pathname]);
 };
 

src/admin/units/__snapshots__/units.component.test.tsx.snap

@@ -214,32 +214,6 @@ exports[`Units > renders table correctly 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="MuiCollapse-root MuiCollapse-vertical css-1xe2rkg-MuiCollapse-root"
-          style="min-height: 0px; height: 0px; transition-duration: 300ms;"
-        >
-          <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
-          >
-            <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
-            >
-              <span
-                aria-busy="true"
-                aria-label="Loading"
-                class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate css-qprkun-MuiLinearProgress-root"
-                role="progressbar"
-              >
-                <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-5ir5xx-MuiLinearProgress-bar1"
-                />
-                <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1r8wrcl-MuiLinearProgress-bar2"
-                />
-              </span>
-            </div>
-          </div>
-        </div>
       </div>
       <div
         class="MuiTableContainer-root css-15zpm7g-MuiTableContainer-root"
@@ -1503,32 +1477,6 @@ exports[`Units > renders table correctly 1`] = `
       <div
         class="MuiBox-root css-10gei56"
       >
-        <div
-          class="MuiCollapse-root MuiCollapse-vertical css-nly5v0-MuiCollapse-root"
-          style="min-height: 0px; height: 0px; transition-duration: 300ms;"
-        >
-          <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
-          >
-            <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
-            >
-              <span
-                aria-busy="true"
-                aria-label="Loading"
-                class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate css-qprkun-MuiLinearProgress-root"
-                role="progressbar"
-              >
-                <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-5ir5xx-MuiLinearProgress-bar1"
-                />
-                <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1r8wrcl-MuiLinearProgress-bar2"
-                />
-              </span>
-            </div>
-          </div>
-        </div>
         <div
           class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"

src/admin/units/units.component.test.tsx

@@ -15,6 +15,10 @@ describe('Units', () => {
   it('renders table correctly', async () => {
     const view = createView();
 
+    await waitFor(() => {
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    });
+
     await waitFor(() => {
       expect(screen.getByText('megapixels')).toBeInTheDocument();
     });