⬆️(frontend) upgrade to react-router v7

https://github.com/remix-run/react-router/releases/tag/react-router%407.0.1
https://github.com/remix-run/react-router/releases/tag/react-router%407.0.0

src/frontend/jest/setup.ts

@@ -8,6 +8,13 @@ import { FactoryConfig } from 'utils/test/factories/factories';
 global.Request = Request as any;
 global.Response = Response as any;
 
+// https://github.com/remix-run/react-router/issues/12363#issuecomment-2496226528
+if (!globalThis.TextEncoder || !globalThis.TextDecoder) {
+  const { TextDecoder, TextEncoder } = require('node:util');
+  globalThis.TextEncoder = TextEncoder;
+  globalThis.TextDecoder = TextDecoder;
+}
+
 /*
  * A little trick to prevent so package to be reset when using `jest.resetModules()`.
  * https://github.com/facebook/jest/issues/8987#issuecomment-584898030

src/frontend/js/api/lms/joanie.ts

@@ -1,4 +1,4 @@
-import { matchPath, PathMatch } from 'react-router-dom';
+import { matchPath, PathMatch } from 'react-router';
 import JoanieApi from 'api/joanie';
 import { LMSBackend } from 'types/commonDataProps';
 import { APIBackend, APILms } from 'types/api';

src/frontend/js/components/CourseGlimpse/CourseLink.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { FunctionComponent, ReactElement } from 'react';
 
 interface CourseLinkProps {

src/frontend/js/components/CourseGlimpse/index.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { CommonDataProps } from 'types/commonDataProps';
 import { RichieContextFactory } from 'utils/test/factories/richie';
 import { CourseStateTextEnum } from 'types';

src/frontend/js/components/CourseGlimpse/utils.ts

@@ -1,5 +1,5 @@
 import { IntlShape } from 'react-intl';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { Course as RichieCourse, isRichieCourse } from 'types/Course';
 import {
   CourseListItem as JoanieCourse,

src/frontend/js/components/ProtectedRoute/index.spec.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
-import { Link, RouteObject } from 'react-router-dom';
+import { Link, RouteObject } from 'react-router';
 import { render } from 'utils/test/render';
 import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
 import ProtectedRoute from '.';

src/frontend/js/components/ProtectedRoute/index.tsx

@@ -1,4 +1,4 @@
-import { Navigate, Outlet } from 'react-router-dom';
+import { Navigate, Outlet } from 'react-router';
 
 interface ProtectedRouteProps {
   isAllowed: boolean;

src/frontend/js/components/SaleTunnel/SaleTunnelSuccess/index.tsx

@@ -1,6 +1,6 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { SuccessIcon } from 'components/SuccessIcon';
 import { getDashboardBasename } from 'widgets/Dashboard/hooks/useDashboardRouter/getDashboardBasename';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';

src/frontend/js/components/SignContractButton/index.omniscientOrders.spec.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { render, screen, within } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import userEvent from '@testing-library/user-event';
 import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';

src/frontend/js/components/SignContractButton/index.spec.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import userEvent from '@testing-library/user-event';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { faker } from '@faker-js/faker';

src/frontend/js/components/SignContractButton/index.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@openfun/cunningham-react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 import { useState } from 'react';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { LearnerContractFrame } from 'components/ContractFrame';
 import {
   Contract,

src/frontend/js/components/Tabs/index.tsx

@@ -9,7 +9,7 @@ import {
   cloneElement,
   useState,
 } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { noop } from 'utils';
 
 interface TabProps extends PropsWithChildren {

src/frontend/js/hooks/useDefaultOrganizationId/index.tsx

@@ -1,4 +1,4 @@
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import { useOrganizations } from 'hooks/useOrganizations';
 import { CourseProductRelation, Organization } from 'types/Joanie';
 

src/frontend/js/hooks/useLearnerCoursesSearch/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { Enrollment, CredentialOrder, OrderState, ProductType } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';
 import { useOrdersEnrollments } from 'pages/DashboardCourses/useOrdersEnrollments';

src/frontend/js/hooks/useTeacherCoursesSearch/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import { useCourseProductUnion } from 'hooks/useCourseProductUnion';
 import { CourseListItem, CourseProductRelationLight, ProductType } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';

src/frontend/js/pages/DashboardAddressesManagement/DashboardEditAddressLoader.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import Banner, { BannerType } from 'components/Banner';
 import { Spinner } from 'components/Spinner';
 import { useAddress } from 'hooks/useAddresses';

src/frontend/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCard.spec.tsx

@@ -1,7 +1,7 @@
 import { getByText, queryByText, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
-import { Outlet, generatePath } from 'react-router-dom';
+import { Outlet, generatePath } from 'react-router';
 import {
   UserFactory,
   RichieContextFactory as mockRichieContextFactory,
@@ -267,7 +267,7 @@ describe('<DahsboardEditCreditCard/>', () => {
     );
 
     // Redirected to the list route.
-    screen.getByText('Credit cards');
+    await screen.findByText('Credit cards');
     const creditCardsContainers = await screen.findAllByTestId(/dashboard-credit-card__/);
     expect(creditCardsContainers.length).toEqual(6);
 
@@ -333,7 +333,7 @@ describe('<DahsboardEditCreditCard/>', () => {
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
 
     // Redirected to the list route.
-    screen.getByText('Credit cards');
+    await screen.findByText('Credit cards');
 
     await waitFor(() => {
       // Assert that other credit cards appear in the list.

src/frontend/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCardLoader.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { useDashboardNavigate } from 'widgets/Dashboard/hooks/useDashboardRouter';
 import { useCreditCard } from 'hooks/useCreditCards';
 import { Spinner } from 'components/Spinner';

src/frontend/js/pages/DashboardOrderLayout/index.tsx

@@ -1,4 +1,4 @@
-import { generatePath, Outlet, useParams } from 'react-router-dom';
+import { generatePath, Outlet, useParams } from 'react-router';
 import { useIntl } from 'react-intl';
 import { useMemo } from 'react';
 import { getDashboardRouteLabel } from 'widgets/Dashboard/utils/dashboardRoutes';

src/frontend/js/pages/TeacherDashboardContractsLayout/TeacherDashboardContracts/index.tsx

@@ -2,7 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { DataGrid, usePagination } from '@openfun/cunningham-react';
 import { useEffect, useMemo } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import { ContractHelper, ContractStatePoV } from 'utils/ContractHelper';
 import { useOrganizationContracts } from 'hooks/useContracts';
 import Banner, { BannerType } from 'components/Banner';

src/frontend/js/pages/TeacherDashboardContractsLayout/hooks/useTeacherContractFilters/index.spec.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
 import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor, act } from '@testing-library/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';

src/frontend/js/pages/TeacherDashboardContractsLayout/hooks/useTeacherContractFilters/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import useDefaultOrganizationId from 'hooks/useDefaultOrganizationId';
 import { ContractResourceQuery, ContractState } from 'types/Joanie';
 

src/frontend/js/pages/TeacherDashboardCourseLearnersLayout/hooks/useCourseLearnersFilters/index.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import useDefaultOrganizationId from 'hooks/useDefaultOrganizationId';
 import {
   CourseListItem,

src/frontend/js/pages/TeacherDashboardCourseLearnersLayout/index.tsx

@@ -1,6 +1,6 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
 
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router';
 import { SortModel, usePagination } from '@openfun/cunningham-react';
 import { useEffect, useMemo, useState } from 'react';
 import { TeacherDashboardCourseSidebar } from 'widgets/Dashboard/components/TeacherDashboardCourseSidebar';

src/frontend/js/pages/TeacherDashboardCourseLoader/CourseRunList/index.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { CunninghamProvider } from '@openfun/cunningham-react';
 import { capitalize } from 'lodash-es';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { CourseRunFactory } from 'utils/test/factories/joanie';
 import CourseRunList from '.';
 

src/frontend/js/pages/TeacherDashboardCourseLoader/CourseRunList/utils.spec.tsx

@@ -1,7 +1,7 @@
 import { IntlProvider, createIntl } from 'react-intl';
 import { render, screen } from '@testing-library/react';
 import { capitalize } from 'lodash-es';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { CourseRunFactory } from 'utils/test/factories/joanie';
 import { buildCourseRunData, messages } from './utils';
 

src/frontend/js/pages/TeacherDashboardCourseLoader/index.tsx

@@ -1,5 +1,5 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { capitalize } from 'lodash-es';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';

src/frontend/js/pages/TeacherDashboardOrganizationCourseLoader/index.tsx

@@ -1,5 +1,5 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { Spinner } from 'components/Spinner';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
 import { TeacherDashboardOrganizationSidebar } from 'widgets/Dashboard/components/TeacherDashboardOrganizationSidebar';

src/frontend/js/pages/TeacherDashboardTraining/TeacherDashboardTrainingLoader.tsx

@@ -1,5 +1,5 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
 import { TeacherDashboardCourseSidebar } from 'widgets/Dashboard/components/TeacherDashboardCourseSidebar';

src/frontend/js/pages/TeacherDashboardTraining/index.spec.tsx

@@ -1,4 +1,4 @@
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';

src/frontend/js/utils/test/LocationDisplay.tsx

@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 const LocationDisplay = () => {
   const location = useLocation();

src/frontend/js/utils/test/render.tsx

@@ -27,7 +27,7 @@ type RenderFunction = (
  * the same contexts.
  *
  * The provided {@param element} is to be wrapped in :
- * - react router (react-router-dom)
+ * - react router (react-router)
  * - react i18n context (react-intl)
  * - query context (react-query)
  *

src/frontend/js/utils/test/wrappers/RouterWrapper.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { RouteObject, RouterProvider, createMemoryRouter } from 'react-router-dom';
+import { RouteObject, RouterProvider, createMemoryRouter } from 'react-router';
 import { Maybe } from 'types/utils';
 
 export interface RouterWrapperProps extends PropsWithChildren {

src/frontend/js/widgets/Dashboard/components/DashboardBreadcrumbs/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, Outlet, RouteObject, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, Outlet, RouteObject, RouterProvider } from 'react-router';
 import { defineMessages } from 'react-intl';
 import { DashboardBreadcrumbsProvider } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';
 import { useBreadcrumbsPlaceholders } from 'hooks/useBreadcrumbsPlaceholders';

src/frontend/js/widgets/Dashboard/components/DashboardBreadcrumbs/index.tsx

@@ -1,5 +1,5 @@
 import { useContext, useMemo } from 'react';
-import { useMatches } from 'react-router-dom';
+import { useMatches } from 'react-router';
 import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
 import { IntlHelper } from 'utils/IntlHelper';
 import { DashboardBreadcrumbsContext } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';

src/frontend/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { faker } from '@faker-js/faker';
 import { TargetCourseFactory } from 'utils/test/factories/joanie';
 import { StorybookHelper } from 'utils/StorybookHelper';

src/frontend/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx

@@ -1,5 +1,5 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { CredentialOrder, OrderState } from 'types/Joanie';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CoursesHelper } from 'utils/CoursesHelper';

src/frontend/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderReadonly.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { CredentialOrder, OrderState, Product, TargetCourse } from 'types/Joanie';
 import {
   CredentialOrderFactory,

src/frontend/js/widgets/Dashboard/components/DashboardLayout/index.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import c from 'classnames';
 import { LearnerDashboardSidebar } from 'widgets/Dashboard/components/LearnerDashboardSidebar';
 import { DashboardBreadcrumbs } from 'widgets/Dashboard/components/DashboardBreadcrumbs';

src/frontend/js/widgets/Dashboard/components/DashboardLayoutRoute/index.tsx

@@ -1,4 +1,4 @@
-import { Outlet, useMatches } from 'react-router-dom';
+import { Outlet, useMatches } from 'react-router';
 import { DashboardRouteHandle } from 'widgets/Dashboard/hooks/useDashboardRouter';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
 import { DashboardBreadcrumbsProvider } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';

src/frontend/js/widgets/Dashboard/components/DashboardOrderLoader/index.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useMemo } from 'react';
 import { useOmniscientOrder } from 'hooks/useOrders';

src/frontend/js/widgets/Dashboard/components/DashboardSidebar/components/ContractNavLink/index.tsx

@@ -1,4 +1,4 @@
-import { createSearchParams } from 'react-router-dom';
+import { createSearchParams } from 'react-router';
 import { useMemo } from 'react';
 import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';

src/frontend/js/widgets/Dashboard/components/DashboardSidebar/components/MenuNavLink/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router';
 import Badge from 'components/Badge';
 import { MenuLink } from '../..';
 import { isMenuLinkActive } from '../../utils';

src/frontend/js/widgets/Dashboard/components/DashboardSidebar/components/NavigationSelect.tsx

@@ -1,7 +1,7 @@
 import { Select, SelectHandle } from '@openfun/cunningham-react';
 import { useMemo, useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom';
+import { matchPath, useLocation, useNavigate } from 'react-router';
 import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 
 const messages = defineMessages({

src/frontend/js/widgets/Dashboard/components/DashboardSidebar/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { UserFactory } from 'utils/test/factories/richie';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import MenuNavLink from './components/MenuNavLink';

src/frontend/js/widgets/Dashboard/components/DashboardSidebar/utils.ts

@@ -1,4 +1,4 @@
-import { Location, matchPath, resolvePath } from 'react-router-dom';
+import { Location, matchPath, resolvePath } from 'react-router';
 
 export const isMenuLinkActive = (to: string, location: Location) => {
   const path = resolvePath(to).pathname;

src/frontend/js/widgets/Dashboard/components/DashboardTest/index.tsx

@@ -1,4 +1,4 @@
-import { createMemoryRouter } from 'react-router-dom';
+import { createMemoryRouter } from 'react-router';
 import Dashboard from 'widgets/Dashboard';
 import { getDashboardRoutes } from 'widgets/Dashboard/utils/dashboardRoutes';
 

src/frontend/js/widgets/Dashboard/components/LearnerDashboardSidebar/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router';
 import { UserFactory } from 'utils/test/factories/richie';
 import { LearnerDashboardSidebar } from 'widgets/Dashboard/components/LearnerDashboardSidebar';
 import { StorybookHelper } from 'utils/StorybookHelper';

src/frontend/js/widgets/Dashboard/components/LearnerDashboardSidebar/index.tsx

@@ -1,6 +1,6 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { useMemo } from 'react';
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';
 import { getDashboardRouteLabel } from 'widgets/Dashboard/utils/dashboardRoutes';
 import {
   DashboardSidebar,

src/frontend/js/widgets/Dashboard/components/NavigateWithParams/index.spec.tsx

@@ -1,5 +1,5 @@
 import { screen } from '@testing-library/react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import LocationDisplay from 'utils/test/LocationDisplay';
 import { render } from 'utils/test/render';

src/frontend/js/widgets/Dashboard/components/NavigateWithParams/index.tsx

@@ -1,4 +1,4 @@
-import { generatePath, Navigate, NavigateProps, useParams } from 'react-router-dom';
+import { generatePath, Navigate, NavigateProps, useParams } from 'react-router';
 
 interface NavigateWithParamsProps extends NavigateProps {
   to: string;