wip fix timeout on faq page

Enterprise-CMCS · Jan 22, 2025 · d57ccf5 · d57ccf5
1 parent fda0fab
commit d57ccf5
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 115 deletions.
diff --git a/react-app/src/components/TimeoutModal/index.tsx b/react-app/src/components/TimeoutModal/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useGetUser } from "@/api";
 import {
   Button,
   Dialog,
@@ -7,14 +7,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components";
+import { useCountdown, useIdle } from "@/hooks";
+import { DialogDescription } from "@radix-ui/react-dialog";
 import { Auth } from "aws-amplify";
-import { useIdle, useCountdown } from "@/hooks";
-import { useGetUser } from "@/api";
 import { intervalToDuration } from "date-fns";
 import pluralize from "pluralize";
-import { DialogDescription } from "@radix-ui/react-dialog";
+import { useEffect, useState } from "react";
 
-const TWENTY_MINS_IN_MILS = 1000 * 60 * 20;
+const TWENTY_MINS_IN_MILS = 1000 * 60 * 1;
 const TEN_MINS_IN_MILS = 60 * 10;
 
 export const TimeoutModal = () => {

diff --git a/react-app/src/main.tsx b/react-app/src/main.tsx
@@ -1,14 +1,13 @@
+import config from "@/config";
+import "@fontsource/open-sans";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { asyncWithLDProvider } from "launchdarkly-react-client-sdk";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router";
-import "@fontsource/open-sans";
 import "./index.css";
 import { queryClient, router } from "./router";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { TimeoutModal } from "@/components";
-import config from "@/config";
-import { asyncWithLDProvider } from "launchdarkly-react-client-sdk";
 
 const ldClientId = config.launchDarkly?.CLIENT_ID;
 if (ldClientId === undefined) {
@@ -30,7 +29,6 @@ const initializeLaunchDarkly = async () => {
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
         <LDProvider>
-          <TimeoutModal />
           <RouterProvider router={router} />
         </LDProvider>
         <ReactQueryDevtools initialIsOpen={false} />

diff --git a/react-app/src/router.test.tsx b/react-app/src/router.test.tsx
@@ -0,0 +1,7 @@
+import { describe, it } from "vitest";
+
+describe("Route timeout modal tests", () => {
+  it("Private route includes <TimeoutModal>", () => {});
+
+  it("Public route does not include <TimeoutModal>", () => {});
+});
diff --git a/react-app/src/router.tsx b/react-app/src/router.tsx
@@ -1,119 +1,138 @@
-import { createBrowserRouter } from "react-router";
-import * as F from "@/features";
 import * as C from "@/components";
+import { TimeoutModal } from "@/components";
+import * as F from "@/features";
 import {
   postSubmissionLoader,
   PostSubmissionWrapper,
 } from "@/features/forms/post-submission/post-submission-forms";
 import { QueryClient } from "@tanstack/react-query";
+import { createBrowserRouter } from "react-router";
 export const queryClient = new QueryClient();
-
 export const FAQ_TAB = "faq-tab";
 
+// These routes are divided into public and private, but this distinction
+// is not used for enforcing authentication. Instead, private routes include
+// a Timeout component that logs out a user after a period of inactivity.
+
+const PrivateWrapper = ({ element: Component }) => {
+  return (
+    <>
+      <TimeoutModal />
+      {Component}
+    </>
+  );
+};
+
+const publicRoutes = [
+  { path: "/", index: true, element: <F.Welcome /> },
+  { path: "/faq", element: <F.Faq /> },
+  { path: "/faq/:id", element: <F.Faq /> },
+  { path: "/webforms", element: <F.WebformsList /> },
+  { path: "/webform/:id/:version", element: <F.Webform /> },
+];
+
+const privateRoutes = [
+  {
+    path: "/dashboard",
+    element: <PrivateWrapper element={<F.Dashboard />} />,
+    loader: F.dashboardLoader(queryClient),
+  },
+  {
+    path: "/details/:authority/:id",
+    element: <F.Details />,
+    loader: F.packageDetailsLoader,
+  },
+  {
+    path: "/new-submission/spa/medicaid/create",
+    element: <PrivateWrapper element={<F.MedicaidForm />} />,
+  },
+  {
+    path: "/new-submission/spa/chip/create",
+    element: <PrivateWrapper element={<F.ChipForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/capitated/amendment/create",
+    element: <PrivateWrapper element={<F.CapitatedWaivers.AmendmentForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/capitated/initial/create",
+    element: <PrivateWrapper element={<F.CapitatedWaivers.InitialForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/capitated/renewal/create",
+    element: <PrivateWrapper element={<F.CapitatedWaivers.Renewal />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/b4/renewal/create",
+    element: <PrivateWrapper element={<F.ContractingWaivers.RenewalForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/b4/initial/create",
+    element: <PrivateWrapper element={<F.ContractingWaivers.InitialForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/b4/amendment/create",
+    element: <PrivateWrapper element={<F.ContractingWaivers.AmendmentForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/app-k",
+    element: <PrivateWrapper element={<F.AppKAmendmentForm />} />,
+  },
+  {
+    path: "/new-submission/waiver/temporary-extensions",
+    element: <PrivateWrapper element={<F.TemporaryExtensionForm />} />,
+  },
+  {
+    path: "/new-submission",
+    element: <PrivateWrapper element={<F.NewSubmissionInitialOptions />} />,
+  },
+  {
+    path: "/new-submission/spa",
+    element: <PrivateWrapper element={<F.SPASubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/waiver",
+    element: <PrivateWrapper element={<F.WaiverSubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/waiver/b",
+    element: <PrivateWrapper element={<F.BWaiverSubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/b4",
+    element: <PrivateWrapper element={<F.B4WaiverSubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/waiver/b/capitated",
+    element: <PrivateWrapper element={<F.BCapWaiverSubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/spa/medicaid",
+    element: <PrivateWrapper element={<F.MedicaidSPASubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/spa/chip",
+    element: <PrivateWrapper element={<F.ChipSPASubmissionOptions />} />,
+  },
+  {
+    path: "/new-submission/spa/medicaid/landing/medicaid-eligibility",
+    element: <PrivateWrapper element={<F.MedicaidEligibilityLandingPage />} />,
+  },
+
+  { path: "/profile", element: <PrivateWrapper element={<F.Profile />} /> },
+  { path: "/guides/abp", element: <PrivateWrapper element={<F.ABPGuide />} /> },
+  {
+    path: "/actions/:type/:authority/:id",
+    element: <PrivateWrapper element={<PostSubmissionWrapper />} />,
+    loader: postSubmissionLoader,
+  },
+];
+
 export const router = createBrowserRouter([
   {
     path: "/",
     element: <C.Layout />,
-    children: [
-      { path: "/", index: true, element: <F.Welcome /> },
-      { path: "/faq", element: <F.Faq /> },
-      { path: "/faq/:id", element: <F.Faq /> },
-      {
-        path: "/dashboard",
-        element: <F.Dashboard />,
-        loader: F.dashboardLoader(queryClient),
-      },
-      {
-        path: "/details/:authority/:id",
-        element: <F.Details />,
-        loader: F.packageDetailsLoader,
-      },
-      {
-        path: "/new-submission/spa/medicaid/create",
-        element: <F.MedicaidForm />,
-      },
-      {
-        path: "/new-submission/spa/chip/create",
-        element: <F.ChipForm />,
-      },
-      {
-        path: "/new-submission/waiver/b/capitated/amendment/create",
-        element: <F.CapitatedWaivers.AmendmentForm />,
-      },
-      {
-        path: "/new-submission/waiver/b/capitated/initial/create",
-        element: <F.CapitatedWaivers.InitialForm />,
-      },
-      {
-        path: "/new-submission/waiver/b/capitated/renewal/create",
-        element: <F.CapitatedWaivers.Renewal />,
-      },
-      {
-        path: "/new-submission/waiver/b/b4/renewal/create",
-        element: <F.ContractingWaivers.RenewalForm />,
-      },
-      {
-        path: "/new-submission/waiver/b/b4/initial/create",
-        element: <F.ContractingWaivers.InitialForm />,
-      },
-      {
-        path: "/new-submission/waiver/b/b4/amendment/create",
-        element: <F.ContractingWaivers.AmendmentForm />,
-      },
-      {
-        path: "/new-submission/waiver/app-k",
-        element: <F.AppKAmendmentForm />,
-      },
-      {
-        path: "/new-submission/waiver/temporary-extensions",
-        element: <F.TemporaryExtensionForm />,
-      },
-      {
-        path: "/new-submission",
-        element: <F.NewSubmissionInitialOptions />,
-      },
-      {
-        path: "/new-submission/spa",
-        element: <F.SPASubmissionOptions />,
-      },
-      {
-        path: "/new-submission/waiver",
-        element: <F.WaiverSubmissionOptions />,
-      },
-      {
-        path: "/new-submission/waiver/b",
-        element: <F.BWaiverSubmissionOptions />,
-      },
-      {
-        path: "/new-submission/waiver/b/b4",
-        element: <F.B4WaiverSubmissionOptions />,
-      },
-      {
-        path: "/new-submission/waiver/b/capitated",
-        element: <F.BCapWaiverSubmissionOptions />,
-      },
-      {
-        path: "/new-submission/spa/medicaid",
-        element: <F.MedicaidSPASubmissionOptions />,
-      },
-      {
-        path: "/new-submission/spa/chip",
-        element: <F.ChipSPASubmissionOptions />,
-      },
-      {
-        path: "/new-submission/spa/medicaid/landing/medicaid-eligibility",
-        element: <F.MedicaidEligibilityLandingPage />,
-      },
-      { path: "/webforms", element: <F.WebformsList /> },
-      { path: "/webform/:id/:version", element: <F.Webform /> },
-      { path: "/profile", element: <F.Profile /> },
-      { path: "/guides/abp", element: <F.ABPGuide /> },
-      {
-        path: "/actions/:type/:authority/:id",
-        element: <PostSubmissionWrapper />,
-        loader: postSubmissionLoader,
-      },
-    ],
+    children: [...privateRoutes, ...publicRoutes],
     loader: F.loader(queryClient),
     HydrateFallback: () => null,
   },