Upgrade and migrate React Router to v6 and upgrade Storybook to latest release. Fixes #393

app/.storybook/main.js

@@ -1,11 +1,16 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+
   // Remove aliases to resolve clash between Material UI and storybook Emotion styling
   webpackFinal(config) {
     delete config.resolve.alias['emotion-theming'];
     delete config.resolve.alias['@emotion/styled'];
     delete config.resolve.alias['@emotion/core'];
     return config;
   },
-};
+
+  core: {
+    builder: "webpack5"
+  }
+};

app/package.json

@@ -9,7 +9,8 @@
     "test-watch": "jest --watch --env=jsdom",
     "cypress:open": "cypress open",
     "storybook": "start-storybook -p 6006",
-    "lint": "eslint . --ext ts --ext tsx --max-warnings 0"
+    "lint": "eslint . --ext ts --ext tsx --max-warnings 0",
+    "type-check": "npx tsc --noEmit"
   },
   "author": "",
   "license": "ISC",
@@ -24,13 +25,12 @@
     "@types/node": "^16.9.6",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
-    "@types/react-router-dom": "^5.3.0",
     "core-js": "^3.18.1",
     "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.8",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.3.0",
     "regenerator-runtime": "^0.13.9",
     "ts-loader": "^9.2.6",
     "typescript": "^4.4.3",
@@ -42,10 +42,12 @@
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/react": "^6.3.12",
+    "@storybook/addon-actions": "^6.4.20",
+    "@storybook/addon-essentials": "^6.4.20",
+    "@storybook/addon-links": "^6.4.20",
+    "@storybook/builder-webpack5": "^6.4.20",
+    "@storybook/manager-webpack5": "^6.4.20",
+    "@storybook/react": "^6.4.20",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",

app/src/auth/Auth0ProviderWithHistory.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import {useHistory} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 import {AppState, Auth0Provider} from '@auth0/auth0-react';
 
 interface Auth0ProviderWithHistoryProps {}
 
 export const Auth0ProviderWithHistory = (
   props: React.PropsWithChildren<Auth0ProviderWithHistoryProps>,
 ) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const domain = process.env.AUTH0_DOMAIN || 'UNASSIGNED';
   const clientId = process.env.AUTH0_CLIENT_ID || 'UNASSIGNED';
   const audience = process.env.AUTH0_AUDIENCE;
 
   const onRedirectCallback = (appState: AppState) => {
-    history.push(appState?.returnTo || window.location.pathname);
+    navigate(appState?.returnTo || window.location.pathname);
   };
 
   return (

app/src/auth/ProtectedRoute.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import {Route} from 'react-router-dom';
 import {withAuthenticationRequired} from '@auth0/auth0-react';
 import {Loading} from '../components/common';
 
@@ -9,13 +8,11 @@ interface ProtectedRouteProps {
 }
 
 export const ProtectedRoute = (props: ProtectedRouteProps) => {
-  const {component, ...args} = props;
-  return (
-    <Route
-      component={withAuthenticationRequired(component, {
-        onRedirecting: () => <Loading />,
-      })}
-      {...args}
-    />
-  );
+  const {component} = props;
+
+  const Component = withAuthenticationRequired(component, {
+    onRedirecting: () => <Loading />,
+  });
+
+  return <Component />;
 };

app/src/index.tsx

@@ -2,7 +2,7 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import {BrowserRouter, Route, Switch} from 'react-router-dom';
+import {BrowserRouter, Route, Routes} from 'react-router-dom';
 import {Provider} from 'react-redux';
 import {CssBaseline} from '@mui/material';
 import {ThemeProvider} from '@mui/material/styles';
@@ -16,7 +16,7 @@ import {
   GuestApplicationTracker,
   HostApplicationTracker,
 } from './views';
-import {store} from './redux/store';
+import {store} from './app/store';
 
 function Profile() {
   return <div>Hello from profile</div>;
@@ -25,20 +25,26 @@ function Profile() {
 function App() {
   return (
     <>
-      <Switch>
-        <Route path="/" exact component={Home} />
-        <Route path="/coord" component={CoordinatorDashboard} />
-        <ProtectedRoute path="/profile" component={Profile} />
-        <ProtectedRoute path="/home/host" component={HostApplicationTracker} />
-        <ProtectedRoute
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/coord" element={<CoordinatorDashboard />} />
+        <Route
+          path="/profile"
+          element={<ProtectedRoute component={Profile} />}
+        />
+        <Route
+          path="/home/host"
+          element={<ProtectedRoute component={HostApplicationTracker} />}
+        />
+        <Route
           path="/home/guest"
-          component={GuestApplicationTracker}
+          element={<ProtectedRoute component={GuestApplicationTracker} />}
         />
-        <ProtectedRoute
+        <Route
           path="/home/coordinator"
-          component={CoordinatorDashboard}
+          element={<ProtectedRoute component={CoordinatorDashboard} />}
         />
-      </Switch>
+      </Routes>
     </>
   );
 }

app/tsconfig.json

@@ -20,7 +20,7 @@
     "jsx": "react-jsx",
     "types": ["jest", "@testing-library/jest-dom", "cypress"]
   },
-  "include": ["src", "**/*.ts", "**/*.tsx"],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": [
     "node_modules",
     "**/*.spec.ts",