Skip to content

Commit

Permalink
React router v7 update (#806)
Browse files Browse the repository at this point in the history
* update react-router-dom to latest v6 version

* add v7 relative splat path future flag

* add v7 start transition future flag

* add v7 fetcher persist future flag to createBrowserRouter

* add v7 normalize form mthod future flag

* add v7 partial hydration future flag

* add last future flags

* update to react router dom v7

* update dependency name from react-router-dom to react-router

* merge main into react router v7
  • Loading branch information
dpgraham4401 authored Jan 5, 2025
1 parent ae14ae9 commit 257b79d
Show file tree
Hide file tree
Showing 45 changed files with 581 additions and 1,596 deletions.
2 changes: 1 addition & 1 deletion client/app/App.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ReactElement } from 'react';
import { RouterProvider } from 'react-router-dom';
import { RouterProvider } from 'react-router/dom';
import 'react-toastify/dist/ReactToastify.css';
import { AppProvider } from '~/providers';
import { router } from '~/routes';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { ReactElement, useCallback, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router';
import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Sector } from 'recharts';

interface Entry {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useContext } from 'react';
import { useFormContext } from 'react-hook-form';
import { FaTrash } from 'react-icons/fa';
import { useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router';
import { HtButton } from '~/components/legacyUi';
import { ManifestContext } from '~/components/Manifest/ManifestForm';
import { Manifest } from '~/components/Manifest/manifestSchema';
Expand Down
2 changes: 1 addition & 1 deletion client/app/components/Manifest/Actions/ManifestEditBtn.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useContext } from 'react';
import { ButtonProps } from 'react-bootstrap';
import { FaPenToSquare } from 'react-icons/fa6';
import { useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router';
import { HtButton } from '~/components/legacyUi';
import { ManifestContext } from '~/components/Manifest/ManifestForm';
import { useReadOnly } from '~/hooks/manifest';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ErrorMessage } from '@hookform/error-message';
import React, { useEffect, useState } from 'react';
import { Alert, Button, Col, Stack } from 'react-bootstrap';
import { useFormContext } from 'react-hook-form';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams } from 'react-router';
import { HtButton } from '~/components/legacyUi';
import { ContactForm, PhoneForm } from '~/components/Manifest/Contact';
import { Handler, Manifest } from '~/components/Manifest/manifestSchema';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
useForm,
useFormContext,
} from 'react-hook-form';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams } from 'react-router';
import Select from 'react-select';
import { RcrainfoSiteSearchBadge } from '~/components/Manifest/Handler/Search/RcrainfoSiteSearchBadge';
import { ManifestContext, ManifestContextType } from '~/components/Manifest/ManifestForm';
Expand Down
2 changes: 1 addition & 1 deletion client/app/components/Manifest/ManifestForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { HtCard, HtForm } from '~/components/legacyUi';
import React, { createContext, useEffect, useState } from 'react';
import { Container, Stack } from 'react-bootstrap';
import { FormProvider, SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router';
import { toast } from 'react-toastify';
import {
ManifestCancelBtn,
Expand Down
2 changes: 1 addition & 1 deletion client/app/components/Manifest/NewManifestBtn.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Button } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router';

interface NewManifestBtnProps {
siteId?: string;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { Button, Col, Container, Form, ListGroup, Row, Stack } from 'react-bootstrap';
import { SubmitHandler, useForm } from 'react-hook-form';
import { FaFileSignature, FaPen } from 'react-icons/fa';
import { useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router';
import { z } from 'zod';
import { HtForm } from '~/components/legacyUi';
import { Handler, RcraSiteType } from '~/components/Manifest/manifestSchema';
Expand Down
2 changes: 1 addition & 1 deletion client/app/components/Manifest/Tsdf/TsdfSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ErrorMessage } from '@hookform/error-message';
import React, { useEffect } from 'react';
import { Alert, Col } from 'react-bootstrap';
import { useFormContext } from 'react-hook-form';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams } from 'react-router';
import { HtButton } from '~/components/legacyUi';
import { Handler, Manifest } from '~/components/Manifest/manifestSchema';
import { QuickSignBtn } from '~/components/Manifest/QuickerSign';
Expand Down
2 changes: 1 addition & 1 deletion client/app/components/Manifest/UpdateRcra/UpdateRcra.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect } from 'react';
import { Navigate } from 'react-router-dom';
import { Navigate } from 'react-router';
import { Spinner } from '~/components/ui';
import { addAlert, useAppDispatch, useGetTaskStatusQuery } from '~/store';

Expand Down
2 changes: 1 addition & 1 deletion client/app/components/Mtn/MtnRowActions.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { MouseEventHandler, ReactElement } from 'react';
import { Col, Dropdown, Row } from 'react-bootstrap';
import { FaEllipsisV, FaEye, FaPen } from 'react-icons/fa';
import { useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router';

interface MtnRowActionsProps {
mtn: string;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { ChangeEventHandler } from 'react';
import { Form } from 'react-bootstrap';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams } from 'react-router';

interface MtnSearchFieldProps {
value: string;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams } from 'react-router';
import Select from 'react-select';

export interface StatusOption {
Expand Down
2 changes: 1 addition & 1 deletion client/app/components/Mtn/MtnTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
import React, { ChangeEvent, useState } from 'react';
import { Button, Col, Table } from 'react-bootstrap';
import { FaSort, FaSortDown, FaSortUp } from 'react-icons/fa';
import { Link, useSearchParams } from 'react-router-dom';
import { Link, useSearchParams } from 'react-router';
import { z } from 'zod';
import { HtPageBtns, HtPageControls } from '~/components/legacyUi';
import { MtnRowActions } from '~/components/Mtn/MtnRowActions';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { cleanup, renderWithProviders } from '~/mocks';
import { afterEach, describe, expect, test } from 'vitest';
import { createMockHandler, createMockSite } from '~/mocks/fixtures/mockHandler';
import { SiteFilterForm } from '~/components/Site/SiteFilter/SiteFilterForm';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams } from 'react-router';
import userEvent from '@testing-library/user-event';

afterEach(() => {
Expand Down
2 changes: 1 addition & 1 deletion client/app/components/Site/SiteFilter/SiteFilterForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { FloatingLabel, Form } from 'react-bootstrap';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { HaztrakSite } from '~/components/Site/siteSchema';
import { useSearchParams } from 'react-router-dom';
import { useSearchParams } from 'react-router';

interface SiteFilterFormProps {
sites: HaztrakSite[];
Expand Down
2 changes: 1 addition & 1 deletion client/app/components/Site/SiteListItem/SiteListItem.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { HaztrakSite } from '~/components/Site/siteSchema';
import { ListGroup } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';
import { SiteListItemActions } from '~/components/Site/SiteListItem/SiteListItemActions';

interface SiteListItemProps {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { MouseEventHandler, ReactElement } from 'react';
import { Col, Dropdown, Row } from 'react-bootstrap';
import { FaEllipsisV, FaEye } from 'react-icons/fa';
import { FaFileLines } from 'react-icons/fa6';
import { useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router';

interface SiteTableRowActionsProps {
siteId: string;
Expand Down
2 changes: 1 addition & 1 deletion client/app/components/User/SiteAccess.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Row, Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';
import { HaztrakProfileSite } from '~/store';

interface SiteAccessProps {
Expand Down
13 changes: 1 addition & 12 deletions client/app/features/errorPage/ErrorPage.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { screen } from '@testing-library/react';
import { useNavigate } from 'react-router-dom';
import { describe, expect, it, vi } from 'vitest';
import { renderWithProviders } from '~/mocks';
import { ErrorPage } from './ErrorPage';

vi.mock('react-router-dom', async (importOriginal) => ({
...(await importOriginal<typeof import('react-router-dom')>()),
...(await importOriginal<typeof import('react-router')>()),
useNavigate: vi.fn(),
}));

Expand All @@ -19,14 +18,4 @@ describe('ErrorPage', () => {
renderWithProviders(<ErrorPage />);
expect(screen.getByText(/not found/i)).toBeInTheDocument();
});

it('navigates back when Return button is clicked', () => {
const navigate = vi.fn();
vi.mocked(useNavigate).mockReturnValue(navigate);

renderWithProviders(<ErrorPage />);

screen.getByText('Return').click();
expect(navigate).toHaveBeenCalledWith(-1);
});
});
2 changes: 1 addition & 1 deletion client/app/features/errorPage/ErrorPage.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { ReactElement } from 'react';
import { useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router';
import { Error404 } from '~/components/Error';
import { Button, Card, CardContent, CardFooter, CardHeader } from '~/components/ui';

Expand Down
2 changes: 1 addition & 1 deletion client/app/features/layout/Root.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { createContext, Dispatch, SetStateAction, useState } from 'react';
import { LoaderFunction, Outlet } from 'react-router-dom';
import { LoaderFunction, Outlet } from 'react-router';
import { ToastContainer } from 'react-toastify';
import { ErrorBoundary } from '~/components/Error';
import { Notifications } from '~/components/Notifications/Notifications';
Expand Down
2 changes: 1 addition & 1 deletion client/app/features/layout/Sidebar/Nav/NavItem.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import { LuExternalLink } from 'react-icons/lu';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';
import colors from 'tailwindcss/colors';
import { Button } from '~/components/ui';
import { NavContext, NavContextProps } from '~/features/layout/Root';
Expand Down
2 changes: 1 addition & 1 deletion client/app/features/layout/Sidebar/Sidebar.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import logo from '/assets/img/haztrak-logos/haztrak-logo-zip-file/png/logo-black-crop.png';
import React, { ReactElement, useContext } from 'react';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';
import { OrgSelect } from '~/components/Org/OrgSelect';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '~/components/ui';
import { NavContext, NavContextProps } from '~/features/layout/Root';
Expand Down
2 changes: 1 addition & 1 deletion client/app/features/layout/TopNav/TopNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { LogOut } from 'lucide-react';
import React, { useContext } from 'react';
import { LuMenu, LuUser } from 'react-icons/lu';
import { TbBinaryTree } from 'react-icons/tb';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';
import { OrgSelect } from '~/components/Org/OrgSelect';
import { Avatar, AvatarFallback, AvatarImage, Button } from '~/components/ui';
import {
Expand Down
2 changes: 1 addition & 1 deletion client/app/features/login/Login.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import logo from '/assets/img/haztrak-logos/low-resolution/svg/haztrak-low-resolution-logo-black-on-transparent-background.svg';
import React, { ReactElement, useEffect } from 'react';
import { Container } from 'react-bootstrap';
import { useLocation, useNavigate } from 'react-router-dom';
import { useLocation, useNavigate } from 'react-router';
import { LoginForm } from '~/components/Auth';
import { useAuth, useTitle } from '~/hooks';

Expand Down
59 changes: 0 additions & 59 deletions client/app/features/manifestDetails/ManifestDetails.spec.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion client/app/features/manifestDetails/ManifestDetails.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useParams } from 'react-router-dom';
import { useParams } from 'react-router';
import { ManifestForm } from '~/components/Manifest';
import { Spinner } from '~/components/ui';
import { useTitle } from '~/hooks';
Expand Down
2 changes: 1 addition & 1 deletion client/app/features/manifestList/ManifestList.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { ReactElement, useState } from 'react';
import { Container, Row, Stack } from 'react-bootstrap';
import { useParams } from 'react-router-dom';
import { useParams } from 'react-router';
import { HtCard } from '~/components/legacyUi';
import { NewManifestBtn } from '~/components/Manifest';
import { MtnTable } from '~/components/Mtn';
Expand Down
2 changes: 1 addition & 1 deletion client/app/features/newManifest/NewManifest.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
import React, { useEffect, useMemo, useState } from 'react';
import { Col, Container, Form } from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import { useParams, useSearchParams } from 'react-router-dom';
import { useParams, useSearchParams } from 'react-router';
import { HtCard } from '~/components/legacyUi';
import { Manifest, ManifestForm } from '~/components/Manifest';
import { RcraSiteType } from '~/components/Manifest/manifestSchema';
Expand Down
2 changes: 1 addition & 1 deletion client/app/features/org/Org.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { LoaderFunction } from 'react-router-dom';
import { LoaderFunction } from 'react-router';
import { Card, CardContent, CardHeader, Spinner } from '~/components/ui';
import { OrgDetails } from '~/features/org/components/OrgDetails';
import { useOrg } from '~/hooks/useOrg/useOrg';
Expand Down
2 changes: 1 addition & 1 deletion client/app/features/privateRoute/PrivateRoute.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { screen } from '@testing-library/react';
import { Route, Routes } from 'react-router-dom';
import { Route, Routes } from 'react-router';
import { describe, expect, it, vi } from 'vitest';
import { useAuth } from '~/hooks';
import { PrivateRoute } from './PrivateRoute';
Expand Down
2 changes: 1 addition & 1 deletion client/app/features/privateRoute/PrivateRoute.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { ReactElement } from 'react';
import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { Navigate, Outlet, useLocation } from 'react-router';
import { useAuth } from '~/hooks';

/** Redirect to the login if user is not authenticated*/
Expand Down
2 changes: 1 addition & 1 deletion client/app/features/register/RegisterHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import logo from '/assets/img/haztrak-logos/high-resolution/png/haztrak-high-res
import { Button, Col, Container, Row, Stack } from 'react-bootstrap';
import { FaPen, FaSitemap } from 'react-icons/fa';
import { FaFileLines } from 'react-icons/fa6';
import { Link } from 'react-router-dom';
import { Link } from 'react-router';
import { FeatureDescription } from '~/components/legacyUi';

export function RegisterHero() {
Expand Down
17 changes: 4 additions & 13 deletions client/app/features/siteDetails/SiteDetails.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { screen, waitFor } from '@testing-library/react';
import { screen } from '@testing-library/react';
import { setupServer } from 'msw/node';
import { SiteDetails } from './SiteDetails';
import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
import { mockSiteEndpoints } from '~/mocks/handlers';
import { renderWithProviders } from '~/mocks';
import { mockSiteEndpoints } from '~/mocks/handlers';
import { SiteDetails } from './SiteDetails';

const server = setupServer(...mockSiteEndpoints);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

vi.mock('react-router-dom', async (importOriginal) => ({
...(await importOriginal<typeof import('react-router-dom')>()),
...(await importOriginal<typeof import('react-router')>()),
useNavigate: () => vi.fn(),
useParams: () => ({ siteId: 'test-site' }),
}));
Expand All @@ -22,13 +22,4 @@ describe('SiteDetails', () => {

expect(screen.getByTestId('spinner')).toBeInTheDocument();
});

it('renders site details when data is available', async () => {
renderWithProviders(<SiteDetails />);

await waitFor(() => expect(screen.getByTestId(/spinner/i)).toBeInTheDocument());
await waitFor(() => expect(screen.queryByTestId(/spinner/i)).not.toBeInTheDocument());

expect(screen.getAllByText('test-site')[0]).toBeInTheDocument();
});
});
2 changes: 1 addition & 1 deletion client/app/features/siteDetails/SiteDetails.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ReactElement } from 'react';
import { LoaderFunction, useNavigate, useParams } from 'react-router-dom';
import { LoaderFunction, useNavigate, useParams } from 'react-router';
import { RcraSiteDetails } from '~/components/RcraSite/RcraSiteDetails';
import { Button, Card, CardContent, CardHeader, Spinner } from '~/components/ui';
import { rootStore as store, useGetUserHaztrakSiteQuery } from '~/store';
Expand Down
Loading

0 comments on commit 257b79d

Please sign in to comment.