fix(deps): update dependency react-router-dom to v7

package.json

@@ -87,7 +87,7 @@
     "react-papaparse": "^4.0.2",
     "react-qr-reader": "^3.0.0-beta-1",
     "react-redux": "^8.1.1",
-    "react-router-dom": "^6.14.1",
+    "react-router": "^7.6.2",
     "react-select": "^5.7.3",
     "react-simple-keyboard": "^3.6.27",
     "react-sortable-hoc": "^2.0.0",

src/commons/ReactRouterPrompt.tsx

@@ -8,7 +8,7 @@
  * See: https://github.com/remix-run/react-router/issues/8139#issuecomment-1382428200
  */
 import React from 'react';
-import { useBeforeUnload, useBlocker } from 'react-router-dom';
+import { useBeforeUnload, useBlocker } from 'react-router';
 
 // You can abstract `useBlocker` to use the browser's `window.confirm` dialog to
 // determine whether or not the user should navigate within the current origin.

src/commons/application/Application.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import Messages, {
   MessageType,
   MessageTypeNames,

src/commons/application/ApplicationWrapper.tsx

@@ -3,8 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { RouterProvider } from 'react-router';
-import { createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from 'react-router';
 import { getAcademyRoutes } from 'src/pages/academy/academyRoutes';
 
 import { getFullAcademyRouterConfig, playgroundOnlyRouterConfig } from '../../routes/routerConfig';
@@ -38,9 +37,7 @@ const ApplicationWrapper: React.FC = () => {
       ? playgroundOnlyRouterConfig
       : getFullAcademyRouterConfig({ name, isLoggedIn, courseId, academyRoutes });
 
-    const r = createBrowserRouter(routerConfig, {
-      future: { v7_relativeSplatPath: true }
-    });
+    const r = createBrowserRouter(routerConfig);
     dispatch(updateReactRouter(r));
 
     return r;

src/commons/application/actions/CommonsActions.ts

@@ -1,4 +1,4 @@
-import { Router } from '@remix-run/router';
+import { Router } from 'src/commons/application/types/CommonsTypes';
 import { createActions } from 'src/commons/redux/utils';
 
 const CommonsActions = createActions('commons', {

src/commons/application/types/CommonsTypes.ts

@@ -1,3 +1,4 @@
-import { Router } from '@remix-run/router';
+import type { createBrowserRouter } from "react-router";
 
+export type Router = ReturnType<typeof createBrowserRouter>;
 export type RouterState = Router | null;

src/commons/assessment/Assessment.tsx

@@ -22,8 +22,7 @@ import classNames from 'classnames';
 import { sortBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { Navigate, useLoaderData, useParams } from 'react-router';
-import { NavLink } from 'react-router-dom';
+import { Navigate, NavLink, useLoaderData, useParams } from 'react-router';
 import { numberRegExp } from 'src/features/academy/AcademyTypes';
 import classes from 'src/styles/Academy.module.scss';
 

src/commons/dropdown/DropdownSettings.tsx

@@ -10,7 +10,7 @@ import {
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { EditorBinding, WorkspaceSettingsContext } from '../WorkspaceSettingsContext';
 import LocaleSelector from './LocaleSelector';

src/commons/editingOverviewCard/EditingOverviewCard.tsx

@@ -16,7 +16,7 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import { ItemRenderer, Select } from '@blueprintjs/select';
 import React, { useState } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import Textarea from 'react-textarea-autosize';
 
 import defaultCoverImage from '../../assets/default_cover_image.jpg';

src/commons/navigationBar/NavigationBar.tsx

@@ -16,7 +16,7 @@ import { IconName, IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React, { useMemo, useState } from 'react';
 import { Translation } from 'react-i18next';
-import { Location, NavLink, Route, Routes, useLocation } from 'react-router-dom';
+import { Location, NavLink, Route, Routes, useLocation } from 'react-router';
 import { i18nDefaultLangKeys } from 'src/i18n/i18next';
 import classes from 'src/styles/NavigationBar.module.scss';
 

src/commons/navigationBar/__tests__/NavigationBar.tsx

@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 import { shallowRender } from 'src/commons/utils/TestUtils';
 

src/commons/profile/ProfileCard.tsx

@@ -1,7 +1,7 @@
 import { Callout, ProgressBar } from '@blueprintjs/core';
 import { IconName } from '@blueprintjs/icons';
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import { AssessmentOverview, AssessmentType } from '../assessment/AssessmentTypes';
 import { assessmentTypeLink } from '../utils/ParamParseHelper';

src/commons/sideContent/content/remoteExecution/SideContentRemoteExecution.tsx

@@ -10,7 +10,7 @@ import {
 import classNames from 'classnames';
 import React, { SetStateAction, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 import BrickSvg from 'src/assets/BrickSvg';
 import PortSvg from 'src/assets/PortSvg';
 import { deleteDevice } from 'src/commons/sagas/RequestsSaga';

src/features/sicp/parser/ParseJson.tsx

@@ -1,7 +1,7 @@
 import { Blockquote, Code, H1, H2, H4, Icon, OL, Pre, UL } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Constants from 'src/commons/utils/Constants';
 import SicpExercise from 'src/pages/sicp/subcomponents/SicpExercise';
 import SicpLatex from 'src/pages/sicp/subcomponents/SicpLatex';

src/features/sicp/parser/__tests__/ParseJson.tsx

@@ -1,5 +1,5 @@
 import lzString from 'lz-string';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { renderTreeJson } from 'src/commons/utils/TestUtils';
 import { CodeSnippetProps } from 'src/pages/sicp/subcomponents/CodeSnippet';
 

src/pages/academy/Academy.tsx

@@ -41,7 +41,8 @@ const CourseSelectingAcademy: React.FC = () => {
   React.useEffect(() => {
     // Regex to handle case where routeCourseIdStr is not a number
     if (!routeCourseIdStr?.match(numberRegExp)) {
-      return navigate('/');
+      navigate('/');
+      return;
     }
 
     if (routeCourseId !== undefined && !Number.isNaN(routeCourseId) && courseId !== routeCourseId) {

src/pages/academy/grading/subcomponents/GradingActions.tsx

@@ -2,7 +2,7 @@ import { Button, Icon, Position, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { ProgressStatus, ProgressStatuses } from 'src/commons/assessment/AssessmentTypes';
 import GradingFlex from 'src/commons/grading/GradingFlex';

src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { ProgressStatuses } from 'src/commons/assessment/AssessmentTypes';
 import GradingFlex from 'src/commons/grading/GradingFlex';
 import GradingText from 'src/commons/grading/GradingText';

src/pages/academy/teamFormation/subcomponents/TeamFormationActions.tsx

@@ -3,7 +3,7 @@ import { IconNames } from '@blueprintjs/icons';
 import { Flex, Icon } from '@tremor/react';
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 import { useSession } from 'src/commons/utils/Hooks';

src/pages/academy/teamFormation/subcomponents/TeamFormationForm.tsx

@@ -3,8 +3,7 @@ import '@tremor/react/dist/esm/tremor.css';
 import { Button } from '@blueprintjs/core';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router';
-import { Form, useParams } from 'react-router-dom';
+import { Form, useNavigate, useParams } from 'react-router';
 import Select, { ActionMeta, MultiValue } from 'react-select';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { User } from 'src/commons/application/types/SessionTypes';

src/pages/academy/teamFormation/subcomponents/TeamFormationImport.tsx

@@ -4,8 +4,7 @@ import { Button } from '@blueprintjs/core';
 import { useState } from 'react';
 import { FileUploader } from 'react-drag-drop-files';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router';
-import { Form } from 'react-router-dom';
+import { Form, useNavigate } from 'react-router';
 import Select from 'react-select';
 import SessionActions from 'src/commons/application/actions/SessionActions';
 import { AssessmentOverview } from 'src/commons/assessment/AssessmentTypes';

src/pages/githubCallback/__tests__/GitHubCallback.tsx

@@ -1,8 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { MockedFunction } from 'jest-mock';
 import { act } from 'react';
-import { Route, Routes } from 'react-router';
-import { StaticRouter } from 'react-router-dom/server';
+import { Route, Routes, StaticRouter } from 'react-router';
 
 import Constants from '../../../commons/utils/Constants';
 import { exchangeAccessCode } from '../../../features/github/GitHubUtils';

src/pages/playground/__tests__/Playground.tsx

@@ -1,5 +1,4 @@
 import { Dispatch, Store } from '@reduxjs/toolkit';
-import { Router } from '@remix-run/router';
 import { render } from '@testing-library/react';
 import { FSModule } from 'browserfs/dist/node/core/FS';
 import { Chapter } from 'js-slang/dist/types';
@@ -11,6 +10,7 @@ import {
   defaultPlayground,
   OverallState
 } from 'src/commons/application/ApplicationTypes';
+import { Router } from 'src/commons/application/types/CommonsTypes';
 import { EditorBinding, WorkspaceSettingsContext } from 'src/commons/WorkspaceSettingsContext';
 import { createStore } from 'src/pages/createStore';
 

src/pages/sicp/Sicp.tsx

@@ -4,8 +4,7 @@ import { Button, Classes, NonIdealState, Spinner } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React, { useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useLocation, useNavigate, useParams } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useNavigate, useParams } from 'react-router';
 import Constants from 'src/commons/utils/Constants';
 import { useSession } from 'src/commons/utils/Hooks';
 import { setLocalStorage } from 'src/commons/utils/LocalStorageHelper';

src/pages/stories/Stories.tsx

@@ -2,7 +2,7 @@ import { Button, InputGroup, NonIdealState } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { StoriesRole } from 'src/commons/application/ApplicationTypes';
 import ContentDisplay from 'src/commons/ContentDisplay';
 import GradingFlex from 'src/commons/grading/GradingFlex';

src/pages/stories/StoryActions.tsx

@@ -1,7 +1,7 @@
 import { Button, Position, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import GradingFlex from 'src/commons/grading/GradingFlex';
 
 type Props = {

yarn.lock

@@ -2945,13 +2945,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.23.0":
-  version: 1.23.0
-  resolution: "@remix-run/router@npm:1.23.0"
-  checksum: 10c0/eaef5cb46a1e413f7d1019a75990808307e08e53a39d4cf69c339432ddc03143d725decef3d6b9b5071b898da07f72a4a57c4e73f787005fcf10162973d8d7d7
-  languageName: node
-  linkType: hard
-
 "@rollup/plugin-babel@npm:^5.2.0":
   version: 5.3.1
   resolution: "@rollup/plugin-babel@npm:5.3.1"
@@ -6052,6 +6045,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "cookie@npm:1.0.2"
+  checksum: 10c0/fd25fe79e8fbcfcaf6aa61cd081c55d144eeeba755206c058682257cb38c4bd6795c6620de3f064c740695bb65b7949ebb1db7a95e4636efb8357a335ad3f54b
+  languageName: node
+  linkType: hard
+
 "copy-to-clipboard@npm:^3.3.1":
   version: 3.3.3
   resolution: "copy-to-clipboard@npm:3.3.3"
@@ -7923,7 +7923,7 @@ __metadata:
     react-papaparse: "npm:^4.0.2"
     react-qr-reader: "npm:^3.0.0-beta-1"
     react-redux: "npm:^8.1.1"
-    react-router-dom: "npm:^6.14.1"
+    react-router: "npm:^7.6.2"
     react-select: "npm:^5.7.3"
     react-simple-keyboard: "npm:^3.6.27"
     react-sortable-hoc: "npm:^2.0.0"
@@ -12308,27 +12308,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.14.1":
-  version: 6.30.1
-  resolution: "react-router-dom@npm:6.30.1"
+"react-router@npm:^7.6.2":
+  version: 7.6.2
+  resolution: "react-router@npm:7.6.2"
   dependencies:
-    "@remix-run/router": "npm:1.23.0"
-    react-router: "npm:6.30.1"
+    cookie: "npm:^1.0.1"
+    set-cookie-parser: "npm:^2.6.0"
   peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: 10c0/e9e1297236b0faa864424ad7d51c392fc6e118595d4dad4cd542fd217c479a81601a81c6266d5801f04f9e154de02d3b094fc22ccb544e755c2eb448fab4ec6b
-  languageName: node
-  linkType: hard
-
-"react-router@npm:6.30.1":
-  version: 6.30.1
-  resolution: "react-router@npm:6.30.1"
-  dependencies:
-    "@remix-run/router": "npm:1.23.0"
-  peerDependencies:
-    react: ">=16.8"
-  checksum: 10c0/0414326f2d8e0c107fb4603cf4066dacba6a1f6f025c6e273f003e177b2f18888aca3de06d9b5522908f0e41de93be1754c37e82aa97b3a269c4742c08e82539
+    react: ">=18"
+    react-dom: ">=18"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: 10c0/c8ef65f2a378f38e3cba900d67fa2b80a41c1c3925102875ee07c12faa01ea40991cb3fbefaf3ff6914e724c755732e3d7dec2b1bdef09e0fddd00fccc85a06a
   languageName: node
   linkType: hard
 
@@ -13383,6 +13375,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-cookie-parser@npm:^2.6.0":
+  version: 2.7.1
+  resolution: "set-cookie-parser@npm:2.7.1"
+  checksum: 10c0/060c198c4c92547ac15988256f445eae523f57f2ceefeccf52d30d75dedf6bff22b9c26f756bd44e8e560d44ff4ab2130b178bd2e52ef5571bf7be3bd7632d9a
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"