Updated react router to v7

frontend/config/chunks.ts

@@ -3,7 +3,7 @@ import { dependencies } from "../package.json";
 
 const vendors = [
   "react",
-  "react-router-dom",
+  "react-router",
   "react-dom",
   "@tanstack/react-query",
   "axios",

frontend/package.json

@@ -25,7 +25,7 @@
     "braces": "^3.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.23.1",
+    "react-router": "^7.1.1",
     "socket.io-client": "^4.7.5"
   },
   "devDependencies": {

frontend/src/App/Navbar.tsx

@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { matchPath, NavLink, RouteObject, useLocation } from "react-router-dom";
+import { matchPath, NavLink, RouteObject, useLocation } from "react-router";
 import {
   Anchor,
   AppShell,

frontend/src/App/index.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useEffect, useState } from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router";
 import { AppShell } from "@mantine/core";
 import { useWindowEvent } from "@mantine/hooks";
 import { showNotification } from "@mantine/notifications";

frontend/src/Router/Redirector.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { LoadingOverlay } from "@mantine/core";
 import { useSystemSettings } from "@/apis/hooks";
 

frontend/src/Router/index.tsx

@@ -5,7 +5,7 @@ import {
   useContext,
   useMemo,
 } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router";
 import {
   faClock,
   faCogs,
@@ -324,7 +324,10 @@ export const Router: FunctionComponent = () => {
 
   // TODO: Move this outside the function component scope
   const router = useMemo(
-    () => createBrowserRouter(routes, { basename: Environment.baseUrl }),
+    () =>
+      createBrowserRouter(routes, {
+        basename: Environment.baseUrl,
+      }),
     [routes],
   );
 

frontend/src/Router/type.d.ts

@@ -1,4 +1,4 @@
-import { RouteObject } from "react-router-dom";
+import { RouteObject } from "react-router";
 import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
 declare namespace Route {

frontend/src/components/Search.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import {
   ComboboxItem,
   em,

frontend/src/pages/Blacklist/Movies/table.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Anchor, Text } from "@mantine/core";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { ColumnDef } from "@tanstack/react-table";

frontend/src/pages/Blacklist/Series/table.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Anchor, Text } from "@mantine/core";
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { ColumnDef } from "@tanstack/react-table";

frontend/src/pages/Episodes/index.tsx

@@ -5,7 +5,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Navigate, useParams } from "react-router-dom";
+import { Navigate, useParams } from "react-router";
 import { Container, Group, Stack } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import { useDocumentTitle } from "@mantine/hooks";

frontend/src/pages/History/Movies/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Anchor, Badge, Text } from "@mantine/core";
 import {
   faFileExcel,

frontend/src/pages/History/Series/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Anchor, Badge, Text } from "@mantine/core";
 import {
   faFileExcel,

frontend/src/pages/Movies/Details/index.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useCallback, useRef } from "react";
-import { Navigate, useParams } from "react-router-dom";
+import { Navigate, useParams } from "react-router";
 import { Container, Group, Menu, Stack } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import { useDocumentTitle } from "@mantine/hooks";

frontend/src/pages/Movies/index.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Anchor, Badge, Container } from "@mantine/core";
 import { useDocumentTitle } from "@mantine/hooks";
 import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";

frontend/src/pages/Series/index.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Anchor, Container, Group, Progress } from "@mantine/core";
 import { useDocumentTitle } from "@mantine/hooks";
 import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons";

frontend/src/pages/Wanted/Movies/index.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Anchor, Badge, Group } from "@mantine/core";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

frontend/src/pages/Wanted/Series/index.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useMemo } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Anchor, Badge, Group } from "@mantine/core";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

frontend/src/pages/views/ItemView.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { faList } from "@fortawesome/free-solid-svg-icons";
 import { ColumnDef } from "@tanstack/react-table";
 import { UsePaginationQueryResult } from "@/apis/queries/hooks";

frontend/src/pages/views/MassEditor.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Box, Container, useCombobox } from "@mantine/core";
 import { faCheck, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { UseMutationResult } from "@tanstack/react-query";

frontend/src/tests/index.tsx

@@ -4,11 +4,7 @@ import {
   ReactElement,
   StrictMode,
 } from "react";
-import {
-  createBrowserRouter,
-  RouteObject,
-  RouterProvider,
-} from "react-router-dom";
+import { createBrowserRouter, RouteObject, RouterProvider } from "react-router";
 import { render, RenderOptions } from "@testing-library/react";
 import { AllProviders } from "@/providers";
 

frontend/src/utilities/hooks.ts

@@ -6,7 +6,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { SliderProps } from "@mantine/core";
 import { SelectorOption, SelectorProps } from "@/components";
 

frontend/src/utilities/routers.ts

@@ -1,7 +1,7 @@
 // A workaround of built-in hooks in React-Router v6
 // https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743
 
-import { unstable_usePrompt as useUnstablePrompt } from "react-router-dom";
+import { unstable_usePrompt as useUnstablePrompt } from "react-router";
 
 // TODO: Replace with Mantine's confirmation modal
 export function usePrompt(when: boolean, message: string) {