From f10fb23246f98ec2d2fa5a1cb863e7b0b399704b Mon Sep 17 00:00:00 2001 From: Anderson Shindy Oki Date: Tue, 14 Jan 2025 10:29:14 +0900 Subject: [PATCH 1/3] Updated react router to v7 --- frontend/package-lock.json | 73 +++++++++++-------- frontend/package.json | 2 +- frontend/src/App/Navbar.tsx | 2 +- frontend/src/App/index.tsx | 2 +- frontend/src/Router/Redirector.tsx | 2 +- frontend/src/Router/index.tsx | 8 +- frontend/src/Router/type.d.ts | 2 +- frontend/src/components/Search.tsx | 2 +- frontend/src/pages/Blacklist/Movies/table.tsx | 2 +- frontend/src/pages/Blacklist/Series/table.tsx | 2 +- frontend/src/pages/Episodes/index.tsx | 2 +- frontend/src/pages/History/Movies/index.tsx | 2 +- frontend/src/pages/History/Series/index.tsx | 2 +- frontend/src/pages/Movies/Details/index.tsx | 2 +- frontend/src/pages/Movies/index.tsx | 2 +- frontend/src/pages/Series/index.tsx | 2 +- frontend/src/pages/Wanted/Movies/index.tsx | 2 +- frontend/src/pages/Wanted/Series/index.tsx | 2 +- frontend/src/pages/views/ItemView.tsx | 2 +- frontend/src/pages/views/MassEditor.tsx | 2 +- frontend/src/tests/index.tsx | 6 +- frontend/src/utilities/hooks.ts | 2 +- frontend/src/utilities/routers.ts | 2 +- 23 files changed, 70 insertions(+), 57 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f4fbb01b5..55cfe0f4b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -21,7 +21,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": { @@ -2776,14 +2776,6 @@ "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", "dev": true }, - "node_modules/@remix-run/router": { - "version": "1.16.1", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", - "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==", - "engines": { - "node": ">=14.0.0" - } - }, "node_modules/@rollup/plugin-node-resolve": { "version": "15.2.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz", @@ -3370,6 +3362,12 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/d3-array": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", @@ -5279,6 +5277,15 @@ "node": "^14.18.0 || >=16.10.0" } }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/core-js-compat": { "version": "3.36.1", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.36.1.tgz", @@ -9022,33 +9029,27 @@ } }, "node_modules/react-router": { - "version": "6.23.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz", - "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz", + "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==", + "license": "MIT", "dependencies": { - "@remix-run/router": "1.16.1" + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" }, "engines": { - "node": ">=14.0.0" + "node": ">=20.0.0" }, "peerDependencies": { - "react": ">=16.8" - } - }, - "node_modules/react-router-dom": { - "version": "6.23.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz", - "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==", - "dependencies": { - "@remix-run/router": "1.16.1", - "react-router": "6.23.1" - }, - "engines": { - "node": ">=14.0.0" + "react": ">=18", + "react-dom": ">=18" }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } } }, "node_modules/react-smooth": { @@ -9529,6 +9530,12 @@ "randombytes": "^2.1.0" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -10405,6 +10412,12 @@ "node": "*" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 1e4fa0002..cee38c33a 100644 --- a/frontend/package.json +++ b/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": { diff --git a/frontend/src/App/Navbar.tsx b/frontend/src/App/Navbar.tsx index 679a0e3e7..4f8da0f92 100644 --- a/frontend/src/App/Navbar.tsx +++ b/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, diff --git a/frontend/src/App/index.tsx b/frontend/src/App/index.tsx index a8ef9f3fb..00b6741fa 100644 --- a/frontend/src/App/index.tsx +++ b/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"; diff --git a/frontend/src/Router/Redirector.tsx b/frontend/src/Router/Redirector.tsx index 07878c9db..f9b2a00e6 100644 --- a/frontend/src/Router/Redirector.tsx +++ b/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"; diff --git a/frontend/src/Router/index.tsx b/frontend/src/Router/index.tsx index 8ccea87f9..f6b94c140 100644 --- a/frontend/src/Router/index.tsx +++ b/frontend/src/Router/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable camelcase */ import { createContext, FunctionComponent, @@ -5,7 +6,7 @@ import { useContext, useMemo, } from "react"; -import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import { createBrowserRouter, RouterProvider } from "react-router"; import { faClock, faCogs, @@ -324,7 +325,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], ); diff --git a/frontend/src/Router/type.d.ts b/frontend/src/Router/type.d.ts index f1cfdaae7..91b820736 100644 --- a/frontend/src/Router/type.d.ts +++ b/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 { diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx index d1c559be5..adcc3d065 100644 --- a/frontend/src/components/Search.tsx +++ b/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, diff --git a/frontend/src/pages/Blacklist/Movies/table.tsx b/frontend/src/pages/Blacklist/Movies/table.tsx index 00730a850..dd678a14a 100644 --- a/frontend/src/pages/Blacklist/Movies/table.tsx +++ b/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"; diff --git a/frontend/src/pages/Blacklist/Series/table.tsx b/frontend/src/pages/Blacklist/Series/table.tsx index 3d67e637d..ca0656f19 100644 --- a/frontend/src/pages/Blacklist/Series/table.tsx +++ b/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"; diff --git a/frontend/src/pages/Episodes/index.tsx b/frontend/src/pages/Episodes/index.tsx index 017a8a15e..0269f58f7 100644 --- a/frontend/src/pages/Episodes/index.tsx +++ b/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"; diff --git a/frontend/src/pages/History/Movies/index.tsx b/frontend/src/pages/History/Movies/index.tsx index d8aa859d2..ed68854e2 100644 --- a/frontend/src/pages/History/Movies/index.tsx +++ b/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, diff --git a/frontend/src/pages/History/Series/index.tsx b/frontend/src/pages/History/Series/index.tsx index b2e162ecd..dd3cc4743 100644 --- a/frontend/src/pages/History/Series/index.tsx +++ b/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, diff --git a/frontend/src/pages/Movies/Details/index.tsx b/frontend/src/pages/Movies/Details/index.tsx index 9bd56c660..039478700 100644 --- a/frontend/src/pages/Movies/Details/index.tsx +++ b/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"; diff --git a/frontend/src/pages/Movies/index.tsx b/frontend/src/pages/Movies/index.tsx index ef5a1ec0d..8e6eef600 100644 --- a/frontend/src/pages/Movies/index.tsx +++ b/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"; diff --git a/frontend/src/pages/Series/index.tsx b/frontend/src/pages/Series/index.tsx index 6da300c3a..d965c7b99 100644 --- a/frontend/src/pages/Series/index.tsx +++ b/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"; diff --git a/frontend/src/pages/Wanted/Movies/index.tsx b/frontend/src/pages/Wanted/Movies/index.tsx index c05cfb7c3..e3beb04fd 100644 --- a/frontend/src/pages/Wanted/Movies/index.tsx +++ b/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"; diff --git a/frontend/src/pages/Wanted/Series/index.tsx b/frontend/src/pages/Wanted/Series/index.tsx index 0501ecef5..f3b6bddf8 100644 --- a/frontend/src/pages/Wanted/Series/index.tsx +++ b/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"; diff --git a/frontend/src/pages/views/ItemView.tsx b/frontend/src/pages/views/ItemView.tsx index c4ff250ea..2da85d181 100644 --- a/frontend/src/pages/views/ItemView.tsx +++ b/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"; diff --git a/frontend/src/pages/views/MassEditor.tsx b/frontend/src/pages/views/MassEditor.tsx index 48068d1c6..eac9dcb94 100644 --- a/frontend/src/pages/views/MassEditor.tsx +++ b/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"; diff --git a/frontend/src/tests/index.tsx b/frontend/src/tests/index.tsx index 8b4d64c64..bc02e75cf 100644 --- a/frontend/src/tests/index.tsx +++ b/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"; diff --git a/frontend/src/utilities/hooks.ts b/frontend/src/utilities/hooks.ts index 6ae8a2366..9dc8a1236 100644 --- a/frontend/src/utilities/hooks.ts +++ b/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"; diff --git a/frontend/src/utilities/routers.ts b/frontend/src/utilities/routers.ts index f3f82c8cd..8583f999e 100644 --- a/frontend/src/utilities/routers.ts +++ b/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) { From 61b959f303c18d5f3da31db2d265ea42226dcb53 Mon Sep 17 00:00:00 2001 From: Anderson Shindy Oki Date: Tue, 14 Jan 2025 10:31:11 +0900 Subject: [PATCH 2/3] chore: remove experimental --- frontend/src/Router/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/Router/index.tsx b/frontend/src/Router/index.tsx index f6b94c140..6b2b0bb82 100644 --- a/frontend/src/Router/index.tsx +++ b/frontend/src/Router/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable camelcase */ import { createContext, FunctionComponent, From 9f4f7265d68163089a23eca5e6f30f8eb08645c0 Mon Sep 17 00:00:00 2001 From: Anderson Shindy Oki Date: Tue, 14 Jan 2025 10:36:22 +0900 Subject: [PATCH 3/3] fix: build chunk --- frontend/config/chunks.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/config/chunks.ts b/frontend/config/chunks.ts index 6dc7f3772..114a1c2c5 100644 --- a/frontend/config/chunks.ts +++ b/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",