feat: new app structure

ocadotechnology · Jul 1, 2023 · f49a62d · f49a62d
1 parent eeed81f
commit f49a62d
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 52 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,34 +1,42 @@
 import React from 'react';
-import { Provider } from 'react-redux';
+import {
+  Provider,
+  ProviderProps
+} from 'react-redux';
+import {
+  BrowserRouter
+} from 'react-router-dom';
 import {
   Action,
-  AnyAction,
-  Store
+  AnyAction
 } from 'redux';
 import {
-  Theme,
   ThemeProvider,
-  CssBaseline,
-  Box
+  CssBaseline
 } from '@mui/material';
+import {
+  ThemeProviderProps
+} from '@mui/material/styles/ThemeProvider';
 
 import {
   useExternalScript,
   useFreshworksWidget,
-  useCountdown
+  useCountdown,
+  useEventListener
 } from '../hooks';
 import {
   InactiveDialog,
   ScreenTimeDialog
 } from '../features';
 import '../scripts';
+import ScrollRoutes from './ScrollRoutes';
 
 export interface AppProps<
   A extends Action = AnyAction,
   S = unknown
 > {
-  theme: Theme;
-  store: Store<S, A>;
+  theme: ThemeProviderProps['theme'];
+  store: ProviderProps<A, S>['store'];
   header?: React.ReactElement;
   footer?: React.ReactElement;
   children: React.ReactNode;
@@ -48,6 +56,8 @@ const App = <
   maxIdleSeconds = 60 * 60,
   maxTotalSeconds = 60 * 60
 }: AppProps<A, S>): JSX.Element => {
+  const root = document.getElementById('root') as HTMLElement;
+
   // TODO: dynamically check if user is authenticated.
   const isAuthenticated = true;
   const [idleSeconds, setIdleSeconds] = useCountdown(maxIdleSeconds);
@@ -59,49 +69,42 @@ const App = <
   function resetIdleSeconds(): void { setIdleSeconds(maxIdleSeconds); }
   function resetTotalSeconds(): void { setTotalSeconds(maxTotalSeconds); }
 
+  useEventListener(root, 'mousemove', resetIdleSeconds);
+  useEventListener(root, 'keypress', resetIdleSeconds);
+
   React.useEffect(() => {
     if (isAuthenticated) resetIdleSeconds();
   }, [isAuthenticated]);
 
   React.useEffect(() => {
     useFreshworksWidget('hide');
 
-    const root = document.getElementById('root') as HTMLElement;
-
-    root.addEventListener('mousemove', resetIdleSeconds);
-    root.addEventListener('keypress', resetIdleSeconds);
-
-    return () => {
-      root.removeEventListener('mousemove', resetIdleSeconds);
-      root.removeEventListener('keypress', resetIdleSeconds);
-    };
-  }, []);
-
-  if (process.env.NODE_ENV !== 'development') {
-    const oneTrustEventTypes = [
-      useExternalScript({
-        props: {
-          src: 'https://cdn-ukwest.onetrust.com/consent/5da42396-cb12-4493-8d04-5179033cfbad/OtAutoBlock.js',
-          type: 'text/javascript'
-        },
-        eventTypes: ['load', 'error']
-      }),
-      useExternalScript({
-        props: {
-          src: 'https://cdn-ukwest.onetrust.com/scripttemplates/otSDKStub.js',
-          type: 'text/javascript',
-          charset: 'UTF-8'
-        },
-        attrs: {
-          'data-domain-script': '5da42396-cb12-4493-8d04-5179033cfbad'
-        },
-        eventTypes: ['load', 'error']
-      })
-    ];
-    if (oneTrustEventTypes.some(t => t === 'error')) {
-      alert('OneTrust failed to load!');
+    if (process.env.NODE_ENV !== 'development') {
+      const oneTrustEventTypes = [
+        useExternalScript({
+          props: {
+            src: 'https://cdn-ukwest.onetrust.com/consent/5da42396-cb12-4493-8d04-5179033cfbad/OtAutoBlock.js',
+            type: 'text/javascript'
+          },
+          eventTypes: ['load', 'error']
+        }),
+        useExternalScript({
+          props: {
+            src: 'https://cdn-ukwest.onetrust.com/scripttemplates/otSDKStub.js',
+            type: 'text/javascript',
+            charset: 'UTF-8'
+          },
+          attrs: {
+            'data-domain-script': '5da42396-cb12-4493-8d04-5179033cfbad'
+          },
+          eventTypes: ['load', 'error']
+        })
+      ];
+      if (oneTrustEventTypes.some(t => t === 'error')) {
+        alert('OneTrust failed to load!');
+      }
     }
-  }
+  }, []);
 
   return (
     <ThemeProvider theme={theme}>
@@ -139,13 +142,13 @@ const App = <
           open={!isIdle && tooMuchScreenTime}
           onClose={resetTotalSeconds}
         />
-        {header !== undefined &&
-          React.cloneElement(header, { id: 'header' })
-        }
-        <Box id='body'>{children}</Box>
-        {footer !== undefined &&
-          React.cloneElement(footer, { id: 'footer' })
-        }
+        <BrowserRouter>
+          {header}
+          <ScrollRoutes>
+            {children}
+          </ScrollRoutes>
+          {footer}
+        </BrowserRouter>
       </Provider>
     </ThemeProvider>
   );

diff --git a/src/components/ScrollRoutes.tsx b/src/components/ScrollRoutes.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  Routes,
+  RoutesProps,
+  useLocation
+} from 'react-router-dom';
+
+export interface ScrollRoutesProps extends RoutesProps {
+  x?: number;
+  y?: number;
+}
+
+const ScrollRoutes: React.FC<ScrollRoutesProps> = ({
+  x = 0,
+  y = 0,
+  ...routesProps
+}) => {
+  const { pathname } = useLocation();
+
+  React.useEffect(() => {
+    window.scroll(x, y);
+  }, [pathname]);
+
+  return <Routes {...routesProps} />;
+};
+
+export default ScrollRoutes;
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -6,6 +6,7 @@ import ElevatedAppBar, { ElevatedAppBarProps } from './ElevatedAppBar';
 import Image, { ImageProps } from './Image';
 import ItemizedList, { ItemizedListProps } from './ItemizedList';
 import OrderedGrid, { OrderedGridProps } from './OrderedGrid';
+import ScrollRoutes, { ScrollRoutesProps } from './ScrollRoutes';
 import YouTubeVideo, { YouTubeVideoProps } from './YouTubeVideo';
 
 export {
@@ -17,5 +18,6 @@ export {
   Image, type ImageProps,
   ItemizedList, type ItemizedListProps,
   OrderedGrid, type OrderedGridProps,
+  ScrollRoutes, type ScrollRoutesProps,
   YouTubeVideo, type YouTubeVideoProps
 };
diff --git a/src/components/page/Container.tsx b/src/components/page/Container.tsx
@@ -7,6 +7,7 @@ import {
 import { SectionElement } from './Section';
 
 export interface ContainerProps extends Omit<Grid2Props, (
+  'id' |
   'container' |
   'children'
 )> {
@@ -18,7 +19,11 @@ const Container: React.FC<ContainerProps> = ({
   ...otherGridProps
 }) => {
   return (
-    <Grid container {...otherGridProps}>
+    <Grid
+      id='body'
+      container
+      {...otherGridProps}
+    >
       {children}
     </Grid>
   );