Code splitting (#598)

* add rollupOptions to split third party dependencies into separate fils to decrease initial bundle size

* migrate from react-router-dom's old route based system to the new 'data' router

convert nested routes (site and manifest) to new browser router definition
convert features to lazy loaded react components routed though rrd createBrowserRouter function

* adjust feature directory exports so the feature components can be lazy loaded

* implement private route and login page using the createBrowserRouter

* move manifest features to separate directories and use dynamic import to implement code splitting

* move static assets to new static directory

client/src/App.tsx

@@ -1,29 +1,16 @@
 import { ErrorBoundary } from 'components/ErrorBoundary';
-import { HtCard } from 'components/Ht';
-import { Sidebar, TopNav } from 'components/Nav';
-import { PrivateRoute } from 'components/PrivateRoute';
-import { UnderConstruction } from 'features/comingSoon';
-import { About } from 'features/help';
-import { Home } from 'features/home';
-import { Login } from 'features/login';
-import { Manifest } from 'features/manifest';
-import { Notifications } from 'features/notifications';
-import { Profile } from 'features/profile';
-import { Sites } from 'features/haztrakSite';
 import React, { ReactElement, useEffect } from 'react';
-import { Button, Container } from 'react-bootstrap';
-import { Route, Routes, useNavigate } from 'react-router-dom';
+import { RouterProvider, useNavigate } from 'react-router-dom';
+import { router } from 'routes';
 import { useAppDispatch, useAppSelector } from 'store';
-import './App.scss';
-import { getProfile } from 'store/rcraProfileSlice';
-import { selectRcraProfile } from 'store/rcraProfileSlice';
+import { getProfile, selectRcraProfile } from 'store/rcraProfileSlice';
 import { selectUserName } from 'store/userSlice';
 import { getHaztrakUser } from 'store/userSlice/user.slice';
+import './App.scss';
 
 function App(): ReactElement {
   const userName = useAppSelector(selectUserName);
   const profile = useAppSelector(selectRcraProfile);
-  const navigate = useNavigate();
   const dispatch = useAppDispatch();
 
   useEffect(() => {
@@ -34,77 +21,9 @@ function App(): ReactElement {
   }, [profile.user]);
 
   return (
-    <div className="App">
-      <TopNav />
-      <div id="layoutSidenav">
-        <Sidebar />
-        <Container fluid id="layoutSidenav_content">
-          <ErrorBoundary>
-            <Routes>
-              <Route
-                path="/"
-                element={
-                  <PrivateRoute authUser={userName}>
-                    <Home />
-                  </PrivateRoute>
-                }
-              />
-              <Route
-                path="/notifications"
-                element={
-                  <PrivateRoute authUser={userName}>
-                    <Notifications />
-                  </PrivateRoute>
-                }
-              />
-              <Route
-                path="/profile/*"
-                element={
-                  <PrivateRoute authUser={userName}>
-                    <Profile />
-                  </PrivateRoute>
-                }
-              />
-              <Route
-                path="/site/*"
-                element={
-                  <PrivateRoute authUser={userName}>
-                    <Sites user={userName ? userName : ''} />
-                  </PrivateRoute>
-                }
-              />
-              <Route
-                path="/manifest/*"
-                element={
-                  <PrivateRoute authUser={userName}>
-                    <Manifest />
-                  </PrivateRoute>
-                }
-              />
-              <Route path="/coming-soon" element={<UnderConstruction />} />
-              <Route path="/login" element={<Login />} />
-              <Route path="/about" element={<About />} />
-              {/* If unknown route, display 404*/}
-              <Route
-                path="*"
-                element={
-                  <HtCard>
-                    <HtCard.Header title="This is not the page you're looking for..." />
-                    <HtCard.Body className="d-grid justify-content-center">
-                      <h1 className="display-1 d-flex justify-content-center">404</h1>
-                      <h4>Resource not found</h4>
-                    </HtCard.Body>
-                    <HtCard.Footer>
-                      <Button onClick={() => navigate(-1)}>Return</Button>
-                    </HtCard.Footer>
-                  </HtCard>
-                }
-              />
-            </Routes>
-          </ErrorBoundary>
-        </Container>
-      </div>
-    </div>
+    <ErrorBoundary>
+      <RouterProvider router={router} />
+    </ErrorBoundary>
   );
 }
 

client/src/components/Ht/HtCard/HtCard.tsx

@@ -1,9 +1,9 @@
 import { ErrorBoundary } from 'components/ErrorBoundary';
 import { HtSpinner } from 'components/Ht';
 import React, { ReactElement } from 'react';
-import { Card, CardProps } from 'react-bootstrap';
+import { Card, CardHeaderProps, CardProps } from 'react-bootstrap';
 
-interface HeaderProps extends CardProps {
+interface HeaderProps extends CardHeaderProps {
   title?: string;
   size?: string;
 }

client/src/components/PrivateRoute/PrivateRoute.tsx → client/src/components/Layout/PrivateRoute.tsx

@@ -1,17 +1,19 @@
 import React, { ReactElement } from 'react';
 import { Navigate } from 'react-router-dom';
+import { useAppSelector } from 'store';
+import { selectUserName } from 'store/userSlice';
 
 interface Props {
   children: any;
-  authUser: string | undefined;
 }
 
 /**
  * Wraps around Route component to redirect to og in if not authenticated user
  * @param { children } Route to wrap around
  * @constructor
  */
-export function PrivateRoute({ children, authUser }: Props): ReactElement {
+export function PrivateRoute({ children }: Props): ReactElement {
+  const authUser = useAppSelector(selectUserName);
   if (!authUser) {
     // not logged in so redirect to login page with the return url
     return <Navigate to="/login" />;

client/src/components/Layout/Root.tsx

@@ -0,0 +1,25 @@
+import { ErrorBoundary } from 'components/ErrorBoundary';
+import { Sidebar } from './Sidebar';
+import { TopNav } from './TopNav';
+import { PrivateRoute } from './PrivateRoute';
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+
+export function Root() {
+  return (
+    <div className="App">
+      <PrivateRoute>
+        <TopNav />
+        <div id="layoutSidenav">
+          <Sidebar />
+          <Container fluid id="layoutSidenav_content">
+            <ErrorBoundary>
+              <Outlet />
+            </ErrorBoundary>
+          </Container>
+        </div>
+      </PrivateRoute>
+    </div>
+  );
+}

client/src/components/Nav/Sidebar.spec.tsx → client/src/components/Layout/Sidebar.spec.tsx

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { Sidebar } from 'components/Nav';
+import { Sidebar } from 'components/Layout';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'test-utils';
 import { afterEach, describe, expect, test } from 'vitest';

client/src/components/Nav/TopNav.spec.tsx → client/src/components/Layout/TopNav.spec.tsx

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { TopNav } from 'components/Nav';
+import { TopNav } from 'components/Layout';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'test-utils';
 import { afterEach, describe, expect, test } from 'vitest';

client/src/env.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="vite/client" />
+
+// see Vite's documentation on environment variables
+// https://vitejs.dev/guide/env-and-mode.html#intellisense-for-typescript
+
 interface ImportMetaEnv {
   readonly VITE_HT_API_URL: string;
+  // more env variables...
 }
 
 interface ImportMeta {

client/src/features/404/NotFound.tsx

@@ -0,0 +1,22 @@
+import happyRobot from '/static/robot-bad-sign.jpg';
+import { HtCard } from 'components/Ht';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+export const NotFound = () => {
+  const navigate = useNavigate();
+  return (
+    <HtCard>
+      <HtCard.Header title="Page not found" />
+      <HtCard.Body className="d-grid justify-content-center">
+        <img src={happyRobot} alt="happy robot" width={200} height={'auto'} />
+        <h1 className="display-1 d-flex justify-content-center">404</h1>
+        <h4>Resource not found</h4>
+      </HtCard.Body>
+      <HtCard.Footer>
+        <Button onClick={() => navigate(-1)}>Return</Button>
+      </HtCard.Footer>
+    </HtCard>
+  );
+};

client/src/features/404/index.ts

@@ -0,0 +1,3 @@
+import { NotFound as Component } from './NotFound';
+
+export { Component };

client/src/features/SiteDetails/index.ts

@@ -0,0 +1,3 @@
+import { SiteDetails as Component } from 'features/SiteDetails/SiteDetails';
+
+export { Component };

client/src/features/haztrakSite/SiteList/SiteList.spec.tsx → client/src/features/SiteList/SiteList.spec.tsx

@@ -1,4 +1,4 @@
-import { SiteList } from 'features/haztrakSite/SiteList';
+import { SiteList } from './SiteList';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';

client/src/features/SiteList/index.ts

@@ -0,0 +1,3 @@
+import { SiteList as Component } from 'features/SiteList/SiteList';
+
+export { Component };

client/src/features/comingSoon/UnderConstruction.tsx

@@ -1,8 +1,8 @@
+import underConstruction from '/static/under-construction.png';
 import { HtCard } from 'components/Ht';
+import { useTitle } from 'hooks';
 import React from 'react';
 import { Card, Col, Container, Row } from 'react-bootstrap';
-import { useTitle } from 'hooks';
-import underConstruction from '/under-construction.png';
 import { Link } from 'react-router-dom';
 
 /**

client/src/features/comingSoon/index.ts

@@ -1,3 +1,3 @@
-import { UnderConstruction } from 'features/comingSoon/UnderConstruction';
+import { UnderConstruction as Component } from 'features/comingSoon/UnderConstruction';
 
-export { UnderConstruction };
+export { Component };

client/src/features/help/index.ts

@@ -1,3 +1,3 @@
-import { About } from './About';
+import { About as Component } from './About';
 
-export { About };
+export { Component };

client/src/features/home/Home.spec.tsx

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { Home } from 'features/home';
+import { Home } from './Home';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';

client/src/features/home/index.ts

@@ -1,3 +1,3 @@
-import { Home } from './Home';
+import { Home as Component } from './Home';
 
-export { Home };
+export { Component };

client/src/features/login/Login.tsx

@@ -44,9 +44,9 @@ export function Login(): ReactElement {
   }
 
   return (
-    <Container className="d-flex justify-content-center m-5">
-      <Col className="m-5">
-        <Row className="d-flex justify-content-center">
+    <Container className="py-3 d-flex justify-content-center">
+      <Col xs={10} md={8} lg={6}>
+        <Row>
           <img
             src={logo}
             alt="haztrak logo, hazardous waste tracking made easy."

client/src/features/manifestDetails/index.ts

@@ -0,0 +1,3 @@
+import { ManifestDetails as Component } from './ManifestDetails';
+
+export { Component };

client/src/features/manifest/ManifestList.tsx → client/src/features/manifestList/ManifestList.tsx

@@ -29,7 +29,7 @@ export function ManifestList(): ReactElement {
   }
 
   return (
-    <>
+    <Container className="py-2">
       <Container className="py-2">
         <Row className="d-flex justify-content-between">
           <Col className="d-flex justify-content-start">
@@ -57,6 +57,6 @@ export function ManifestList(): ReactElement {
           </HtCard>
         </Col>
       </Container>
-    </>
+    </Container>
   );
 }

client/src/features/manifest/NewManifest.spec.tsx → client/src/features/manifestList/NewManifest.spec.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
-import { NewManifest } from 'features/manifest/NewManifest';
+import { NewManifest } from 'features/newManifest/NewManifest';
 import React from 'react';
 import { renderWithProviders, screen } from 'test-utils';
 import { createMockPermission, createMockSite } from 'test-utils/fixtures/mockHandler';

client/src/features/manifestList/index.ts

@@ -0,0 +1,3 @@
+import { ManifestList as Component } from './ManifestList';
+
+export { Component };

client/src/features/newManifest/index.ts

@@ -0,0 +1,3 @@
+import { NewManifest as Component } from './NewManifest';
+
+export { Component };

client/src/features/notifications/index.ts

@@ -1,3 +1,3 @@
-import { Notifications } from './Notifications';
+import { Notifications as Component } from './Notifications';
 
-export { Notifications };
+export { Component };