Upgrade react-router to v6

frontend/src/app/App.tsx

@@ -173,26 +173,28 @@ const App = () => {
                 />
               }
             />
-            <Route
-              path="patients/:pageNumber"
-              element={
-                <ProtectedRoute
-                  requiredPermissions={canViewPeople}
-                  userPermissions={data.whoami.permissions}
-                  element={<ManagePatientsContainer />}
-                />
-              }
-            />
-            <Route
-              path="patients"
-              element={
-                <ProtectedRoute
-                  requiredPermissions={canViewPeople}
-                  userPermissions={data.whoami.permissions}
-                  element={<ManagePatientsContainer />}
-                />
-              }
-            />
+            <Route path="patients">
+              <Route
+                path=":pageNumber"
+                element={
+                  <ProtectedRoute
+                    requiredPermissions={canViewPeople}
+                    userPermissions={data.whoami.permissions}
+                    element={<ManagePatientsContainer />}
+                  />
+                }
+              />
+              <Route
+                path=""
+                element={
+                  <ProtectedRoute
+                    requiredPermissions={canViewPeople}
+                    userPermissions={data.whoami.permissions}
+                    element={<ManagePatientsContainer />}
+                  />
+                }
+              />
+            </Route>
             <Route
               path="patient/:patientId"
               element={

frontend/src/app/Settings/FacilityForm.test.tsx → frontend/src/app/Settings/Facility/FacilityForm.test.tsx

@@ -3,13 +3,13 @@ import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 
-import * as clia from "../utils/clia";
-import * as state from "../utils/state";
-import * as smartyStreets from "../utils/smartyStreets";
+import * as clia from "../../utils/clia";
+import * as state from "../../utils/state";
+import * as smartyStreets from "../../utils/smartyStreets";
 
-import FacilityForm from "./Facility/FacilityForm";
+import FacilityForm from "./FacilityForm";
 
-import "../../i18n";
+import "../../../i18n";
 
 let saveFacility: jest.Mock;
 

frontend/src/app/Settings/Facility/FacilityFormContainer.test.tsx

@@ -6,7 +6,7 @@ import {
 import userEvent from "@testing-library/user-event";
 import { MockedProvider } from "@apollo/client/testing";
 import { Provider } from "react-redux";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
 import configureStore from "redux-mock-store";
 
 import { getAppInsights } from "../../TelemetryService";
@@ -185,13 +185,18 @@ describe("FacilityFormContainer", () => {
       trackEvent: trackEventMock,
     }));
     render(
-      <MemoryRouter>
-        <Provider store={store}>
-          <MockedProvider mocks={mocks}>
-            <FacilityFormContainer facilityId={mockFacility.id} />
-          </MockedProvider>
-        </Provider>
-      </MemoryRouter>
+      <Provider store={store}>
+        <MockedProvider mocks={mocks}>
+          <MemoryRouter initialEntries={[`/facility/${mockFacility.id}`]}>
+            <Routes>
+              <Route
+                path="facility/:facilityId"
+                element={<FacilityFormContainer />}
+              />
+            </Routes>
+          </MemoryRouter>
+        </MockedProvider>
+      </Provider>
     );
   });
 

frontend/src/app/Settings/Facility/FacilityFormContainer.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { gql, useQuery, useMutation } from "@apollo/client";
-import { Navigate } from "react-router-dom";
+import { Navigate, useParams } from "react-router-dom";
 import { useDispatch } from "react-redux";
 
 import { updateFacility } from "../../store";
@@ -158,11 +158,11 @@ export const ADD_FACILITY_MUTATION = gql`
 `;
 
 interface Props {
-  facilityId: string;
   newOrg?: boolean;
 }
 
 const FacilityFormContainer: any = (props: Props) => {
+  const { facilityId } = useParams();
   const { data, loading, error } = useQuery<FacilityData, {}>(
     GET_FACILITY_QUERY,
     {
@@ -199,12 +199,12 @@ const FacilityFormContainer: any = (props: Props) => {
       appInsights.trackEvent({ name: "Save Settings" });
     }
     const provider = facility.orderingProvider;
-    const saveFacilityMutation = props.facilityId
+    const saveFacilityMutation = facilityId
       ? updateFacilityMutation
       : addFacilityMutation;
     const savedFacility = await saveFacilityMutation({
       variables: {
-        facilityId: props.facilityId,
+        facilityId,
         testingFacilityName: facility.name,
         cliaNumber: facility.cliaNumber,
         street: facility.street,
@@ -249,7 +249,7 @@ const FacilityFormContainer: any = (props: Props) => {
 
   const getFacilityData = (): Facility => {
     const facility = data.organization.testingFacility.find(
-      (f) => f.id === props.facilityId
+      (f) => f.id === facilityId
     );
     if (facility) {
       return facility;

frontend/src/app/Settings/Facility/ManageFacilitiesContainer.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, act } from "@testing-library/react";
 import { MockedProvider } from "@apollo/client/testing";
 import { Provider } from "react-redux";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
 import configureStore from "redux-mock-store";
 
 import { GetManagedFacilitiesDocument } from "../../../generated/graphql";
@@ -130,13 +130,18 @@ const mock = [
 describe("ManageFacilitiesContainer", () => {
   beforeEach(() => {
     render(
-      <MemoryRouter>
-        <Provider store={store}>
-          <MockedProvider mocks={mock}>
-            <ManageFacilitiesContainer />
-          </MockedProvider>
-        </Provider>
-      </MemoryRouter>
+      <Provider store={store}>
+        <MockedProvider mocks={mock}>
+          <MemoryRouter initialEntries={["/facilities"]}>
+            <Routes>
+              <Route
+                path="facilities"
+                element={<ManageFacilitiesContainer />}
+              />
+            </Routes>
+          </MemoryRouter>
+        </MockedProvider>
+      </Provider>
     );
   });
 

frontend/src/app/Settings/ManageSelfRegistrationLinksContainer.tsx

@@ -1,5 +1,7 @@
 import { useQuery, gql } from "@apollo/client";
 
+import { getUrl } from "../utils/url";
+
 import { ManageSelfRegistrationLinks } from "./ManageSelfRegistrationLinks";
 
 type Data = {
@@ -55,7 +57,7 @@ export const ManageSelfRegistrationLinksContainer = () => {
 
   return (
     <ManageSelfRegistrationLinks
-      baseUrl={process.env.REACT_APP_BASE_URL || ""}
+      baseUrl={getUrl() || ""}
       organizationSlug={organizationSlug}
       facilitySlugs={facilitySlugs}
       howItWorksPath="/using-simplereport/manage-people-you-test/self-registration"

frontend/src/app/Settings/Settings.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes, useParams } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 
 import { useDocumentTitle } from "../utils/hooks";
 
@@ -11,7 +11,6 @@ import { ManageSelfRegistrationLinksContainer } from "./ManageSelfRegistrationLi
 
 const Settings = () => {
   useDocumentTitle("Settings");
-  const { facilityId } = useParams();
 
   return (
     <main className="prime-home">
@@ -21,12 +20,9 @@ const Settings = () => {
           <Route path="facilities" element={<ManageFacilitiesContainer />} />
           <Route
             path="facility/:facilityId"
-            element={<FacilityFormContainer facilityId={facilityId} />}
-          />
-          <Route
-            path="add-facility/"
-            element={<FacilityFormContainer facilityId={facilityId} />}
+            element={<FacilityFormContainer />}
           />
+          <Route path="add-facility" element={<FacilityFormContainer />} />
           <Route
             path="organization"
             element={<ManageOrganizationContainer />}