Refactor redirect for plans page to not require a react-router version upgrade

jsapp/js/account/routes.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {Navigate, Route} from 'react-router-dom';
 import RequireAuth from 'js/router/requireAuth';
 import {ROUTES} from 'js/router/routerConstants';
-import {authLoader} from '../router/routerUtils';
 
 const ChangePasswordRoute = React.lazy(
   () => import(/* webpackPrefetch: true */ './changePasswordRoute.component')
@@ -50,7 +49,6 @@ export default function routes() {
             <PlanRoute />
           </RequireAuth>
         }
-        loader={authLoader}
       />
       <Route
         path={ACCOUNT_ROUTES.USAGE}

jsapp/js/components/drawer.es6

@@ -13,11 +13,10 @@ import mixins from '../mixins';
 import LibrarySidebar from 'js/components/library/librarySidebar';
 import HelpBubble from 'js/components/support/helpBubble';
 import {COMMON_QUERIES, MODAL_TYPES} from '../constants';
-import {ROUTES} from 'js/router/routerConstants';
+import {ROUTES, PROJECTS_ROUTES} from 'js/router/routerConstants';
 import SidebarFormsList from '../lists/sidebarForms';
 import envStore from 'js/envStore';
 import {router, routerIsActive, withRouter} from '../router/legacy';
-import {PROJECTS_ROUTES} from 'js/projects/routes';
 
 const AccountSidebar = lazy(() => import('js/account/accountSidebar'));
 

jsapp/js/projects/projectViews/viewSwitcher.tsx

@@ -4,7 +4,7 @@ import {observer} from 'mobx-react-lite';
 import classNames from 'classnames';
 import Icon from 'js/components/common/icon';
 import KoboDropdown from 'js/components/common/koboDropdown';
-import {PROJECTS_ROUTES} from 'js/projects/routes';
+import {PROJECTS_ROUTES} from 'jsapp/js/router/routerConstants';
 import projectViewsStore from './projectViewsStore';
 import styles from './viewSwitcher.module.scss';
 import {HOME_VIEW} from './constants';

jsapp/js/projects/routes.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Navigate, Route} from 'react-router-dom';
 import RequireAuth from 'js/router/requireAuth';
-import {ROUTES} from 'js/router/routerConstants';
+import {ROUTES, PROJECTS_ROUTES} from 'js/router/routerConstants';
 
 const MyProjectsRoute = React.lazy(
   () => import(/* webpackPrefetch: true */ './myProjectsRoute')
@@ -10,11 +10,6 @@ const CustomViewRoute = React.lazy(
   () => import(/* webpackPrefetch: true */ './customViewRoute')
 );
 
-export const PROJECTS_ROUTES: {readonly [key: string]: string} = {
-  MY_PROJECTS: ROUTES.PROJECTS_ROOT + '/home',
-  CUSTOM_VIEW: ROUTES.PROJECTS_ROOT + '/:viewUid',
-};
-
 export default function routes() {
   return (
     <>

jsapp/js/router/requireAuth.tsx

@@ -1,18 +1,26 @@
-import React, {ReactElement, Suspense, useState} from 'react';
+import React, {ReactElement, Suspense, useEffect, useState} from 'react';
 import {RouteObject} from 'react-router-dom';
 import sessionStore from 'js/stores/session';
-import AccessDenied from './accessDenied';
+import LoadingSpinner from '../components/common/loadingSpinner';
+import {redirectToLogin} from './routerUtils';
 
 interface Props {
   children: RouteObject[] | undefined | ReactElement;
+  redirect?: boolean;
 }
 
-/** https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f */
-export default function RequireAuth({children}: Props) {
+export default function RequireAuth({children, redirect = true}: Props) {
   const [session] = useState(() => sessionStore);
-  return session.isLoggedIn ? (
+
+  useEffect(() => {
+    if (redirect && !session.isLoggedIn) {
+      redirectToLogin();
+    }
+  }, [session.isLoggedIn, redirect]);
+
+  return redirect && session.isLoggedIn ? (
     <Suspense fallback={null}>{children}</Suspense>
   ) : (
-    <AccessDenied />
+    <LoadingSpinner />
   );
-};
+}

jsapp/js/router/router.tsx

@@ -6,9 +6,9 @@ import {
   createRoutesFromElements,
 } from 'react-router-dom';
 import App from 'js/app';
-import {ROUTES} from './routerConstants';
+import {ROUTES, PROJECTS_ROUTES} from './routerConstants';
 import accountRoutes from 'js/account/routes';
-import projectsRoutes, {PROJECTS_ROUTES} from 'js/projects/routes';
+import projectsRoutes from 'js/projects/routes';
 import RequireAuth from './requireAuth';
 import {FormPage, LibraryAssetEditor} from 'js/components/formEditors';
 import MyLibraryRoute from 'js/components/library/myLibraryRoute';

jsapp/js/router/routerConstants.ts

@@ -47,3 +47,8 @@ export const ROUTES = Object.freeze({
   FORM_REST_HOOK: '/forms/:uid/settings/rest/:hookUid',
   FORM_RESET: '/forms/:uid/reset',
 });
+
+export const PROJECTS_ROUTES: {readonly [key: string]: string} = {
+  MY_PROJECTS: ROUTES.PROJECTS_ROOT + '/home',
+  CUSTOM_VIEW: ROUTES.PROJECTS_ROOT + '/:viewUid',
+};

jsapp/js/router/routerUtils.ts

@@ -8,10 +8,9 @@
  * of defined ROUTES.
  */
 
-import {ROUTES, PATHS} from 'js/router/routerConstants';
-import {PROJECTS_ROUTES} from 'js/projects/routes';
+import {ROUTES, PATHS, PROJECTS_ROUTES} from 'js/router/routerConstants';
 import session from '../stores/session';
-import {redirectDocument} from 'react-router';
+// import {redirectDocument} from 'react-router';
 import {when} from 'mobx';
 
 /**
@@ -42,13 +41,16 @@ export function getCurrentPath(): string {
  * Redirects to `getLoginUrl()` if a page that requires authentication
  * is naviagated to
  */
-export const authLoader = async () => {
-  await when(() => session.isAuthStateKnown);
-  if (!session.isLoggedIn) {
-    return redirectDocument(getLoginUrl());
-  }
-  return null;
-};
+// This function uses `redirectDocument` which requires a react-router version
+// of 6.19.1 or greater but upgrading is causing a AwaitRenderStatus error when
+// we run `npm run build`
+// export const authLoader = async () => {
+//   await when(() => session.isAuthStateKnown);
+//   if (!session.isLoggedIn) {
+//     return redirectDocument(getLoginUrl());
+//   }
+//   return null;
+// };
 
 /*
  * A list of functions that match routes defined in constants

package.json

@@ -57,7 +57,7 @@
     "react-infinite-scroller": "^1.2.6",
     "react-mixin": "^5.0.0",
     "react-modal": "^3.15.1",
-    "react-router-dom": "~6.21",
+    "react-router-dom": "~6.14.2",
     "react-select": "^5.3.0",
     "react-table": "^6.8.1",
     "react-tagsinput": "^3.19.0",