build: update react-router-dom to 7.0.1 (#2576)

* build: update react-router-dom to 7.0.1

* fix: rename react-router-dom to react-router

* build: replace react-router-dom 6 with react-router 7

* test: work around ReferenceError: TextEncoder is not defined

See remix-run/react-router#12363

* fix: suppress false positive linter error on globalThis

package.json

@@ -42,7 +42,7 @@
     "react-hook-form": "^7.53.2",
     "react-i18next": "^15.1.3",
     "react-redux": "^8.1.3",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
     "scrollama": "^3.2.0",
     "slate-history": "^0.110.3",
     "slate-hyperscript": "^0.100.0",

src/account/accountProfileUtils.js

@@ -17,7 +17,7 @@
 
 import { useEffect, useState } from 'react';
 import { jwtDecode } from 'jwt-decode';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import { getToken } from 'terraso-client-shared/account/auth';
 import { useSelector } from 'terrasoApi/store';
 

src/account/components/AccountLogin.test.js

@@ -17,15 +17,15 @@
 
 import { render, screen } from 'tests/utils';
 import React from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 import * as accountService from 'terraso-client-shared/account/accountService';
 
 import AccountLogin from 'account/components/AccountLogin';
 
 jest.mock('terraso-client-shared/account/accountService');
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useSearchParams: jest.fn(),
   useNavigate: jest.fn(),
 }));

src/account/components/AccountProfile.js

@@ -19,7 +19,7 @@ import React, { useCallback, useEffect } from 'react';
 import _ from 'lodash/fp';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import {
   fetchProfile,
   savePreference,

src/account/components/AccountProfile.test.js

@@ -19,15 +19,15 @@ import { act, fireEvent, render, screen, within } from 'tests/utils';
 import React from 'react';
 import { when } from 'jest-when';
 import _ from 'lodash/fp';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 
 import AccountProfile from 'account/components/AccountProfile';
 
 jest.mock('terraso-client-shared/terrasoApi/api');
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useParams: jest.fn(),
   useNavigate: jest.fn(),
   useSearchParams: jest.fn(),

src/account/components/OptionalAuth.test.js

@@ -16,14 +16,14 @@
  */
 
 import { render, screen } from 'tests/utils';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 import OptionalAuth from './OptionalAuth';
 import OptionalAuthBottomMessage from './OptionalAuthBottomMessage';
 import OptionalAuthTopMessage from './OptionalAuthTopMessage';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useLocation: jest.fn(),
 }));
 

src/account/components/OptionalAuthBottomMessage.js

@@ -19,7 +19,7 @@ import React from 'react';
 import _ from 'lodash/fp';
 import { Trans, withTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Box, Typography } from '@mui/material';
 
 import RouterLink from 'common/components/RouterLink';

src/account/components/OptionalAuthTopMessage.js

@@ -19,7 +19,7 @@ import React from 'react';
 import _ from 'lodash/fp';
 import { Trans, withTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Typography } from '@mui/material';
 
 import RouterLink from 'common/components/RouterLink';

src/account/components/RequireAuth.js

@@ -17,7 +17,7 @@
 
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { Navigate, useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router';
 import { fetchUser } from 'terraso-client-shared/account/accountSlice';
 import { useFetchData } from 'terraso-client-shared/store/utils';
 

src/account/components/RequireAuth.test.js

@@ -23,7 +23,7 @@ import {
   useNavigate,
   useParams,
   useSearchParams,
-} from 'react-router-dom';
+} from 'react-router';
 import { getToken, getUserEmail } from 'terraso-client-shared/account/auth';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 
@@ -38,8 +38,8 @@ jest.mock('terraso-client-shared/account/auth', () => ({
   getToken: jest.fn(),
 }));
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useParams: jest.fn(),
   useLocation: jest.fn(),
   useNavigate: jest.fn(),

src/account/components/Unsubscribe.js

@@ -19,7 +19,7 @@ import { useCallback, useEffect } from 'react';
 import _ from 'lodash/fp';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 import { unsubscribeFromNotifications } from 'terraso-client-shared/account/accountSlice';
 import { addMessage } from 'terraso-client-shared/notifications/notificationsSlice';
 import { useFetchData } from 'terraso-client-shared/store/utils';

src/account/components/Unsubscribe.test.js

@@ -17,15 +17,15 @@
 
 import { render, screen, within } from 'tests/utils';
 import React from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 
 import Unsubscribe from 'account/components/Unsubscribe';
 
 jest.mock('terraso-client-shared/terrasoApi/api');
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: jest.fn(),
   useSearchParams: jest.fn(),
 }));

src/app.test.js

@@ -17,10 +17,10 @@
 
 import { render, screen } from 'tests/utils';
 import App from 'App';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useLocation: jest.fn(),
 }));
 

src/common/components/CardActionRouterLink.js

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Button, CardActions } from '@mui/material';
 
 const CardActionRouterLink = ({ label, to, state }) => {

src/common/components/ConditionalLink.js

@@ -15,7 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 const ConditionalLink = ({ children, to, condition }) => {
   if (!!condition && to) {

src/common/components/RouterButton.js

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Button } from '@mui/material';
 
 const RouterButton = React.forwardRef((props, ref) => {

src/common/components/RouterLink.js

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Link as ReactRouterLink } from 'react-router-dom';
+import { Link as ReactRouterLink } from 'react-router';
 import { Link } from '@mui/material';
 
 const RouterLink = React.forwardRef((props, ref) => {

src/group/components/GroupForm.js

@@ -19,7 +19,7 @@ import React, { useCallback, useEffect } from 'react';
 import _ from 'lodash/fp';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { useFetchData } from 'terraso-client-shared/store/utils';
 import * as yup from 'yup';
 import {

src/group/components/GroupForm.test.js

@@ -17,15 +17,15 @@
 
 import { act, fireEvent, render, screen, within } from 'tests/utils';
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 
 import GroupForm from 'group/components/GroupForm';
 
 jest.mock('terraso-client-shared/terrasoApi/api');
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useParams: jest.fn(),
   useNavigate: jest.fn(),
 }));

src/group/components/GroupList.js

@@ -19,7 +19,7 @@ import React, { useMemo } from 'react';
 import _ from 'lodash/fp';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { Link as RouterLink, useSearchParams } from 'react-router-dom';
+import { Link as RouterLink, useSearchParams } from 'react-router';
 import { useFetchData } from 'terraso-client-shared/store/utils';
 import { useDispatch } from 'terrasoApi/store';
 import { Button, Card, Link, Stack, Typography } from '@mui/material';

src/group/components/GroupList.test.js

@@ -17,7 +17,7 @@
 
 import { act, fireEvent, render, screen, within } from 'tests/utils';
 import React from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import * as terrasoApi from 'terraso-client-shared/terrasoApi/api';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
@@ -30,8 +30,8 @@ jest.mock('terraso-client-shared/terrasoApi/api');
 
 jest.mock('@mui/material/useMediaQuery');
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useSearchParams: jest.fn(),
 }));
 

src/group/components/GroupSharedDataUpload.js

@@ -19,7 +19,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { usePermissionRedirect } from 'permissions';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 
 import { CollaborationContextProvider } from 'collaboration/collaborationContext';
 import { useDocumentTitle } from 'common/document';