Merge branch 'main' into airdcpp-regression

Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>

package.json

@@ -53,18 +53,19 @@
     "pretty-bytes": "^5.6.0",
     "prop-types": "^15.8.1",
     "qs": "^6.10.5",
-    "react": "^19.0.0",
+    "react": "^18.3.1",
     "react-collapsible": "^2.9.0",
     "react-comic-viewer": "^0.4.0",
     "react-day-picker": "^8.10.0",
-    "react-dom": "^19.0.0",
+    "react-dom": "^18.2.0",
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.4",
     "react-i18next": "^14.1.0",
     "react-loader-spinner": "^4.0.0",
     "react-modal": "^3.15.1",
-    "react-router": "^7.1.5",
+    "react-router": "^6.9.0",
+    "react-router-dom": "^6.9.0",
     "react-select": "^5.8.0",
     "react-select-async-paginate": "^0.7.2",
     "react-sliding-pane": "^7.1.0",
@@ -73,7 +74,7 @@
     "socket.io-client": "^4.3.2",
     "styled-components": "^6.1.0",
     "threetwo-ui-typings": "^1.0.14",
-    "vite": "^5.4.12",
+    "vite": "^5.2.14",
     "vite-plugin-html": "^3.2.0",
     "websocket": "^1.0.34",
     "zustand": "^4.4.6"
@@ -97,8 +98,8 @@
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.34",
-    "@types/react": "^19.0.0",
+    "@types/react": "^18.0.28",
-    "@types/react-dom": "^19.0.0",
+    "@types/react-dom": "^18.0.11",
     "@types/react-redux": "^7.1.25",
     "autoprefixer": "^10.4.16",
     "body-parser": "^1.19.0",

src/client/components/App.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { Outlet } from "react-router";
+import { Outlet } from "react-router-dom";
 import { Navbar2 } from "./shared/Navbar2";
 import { ToastContainer } from "react-toastify";
 import "../assets/scss/App.scss";

src/client/components/ComicDetail/ComicDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useState, ReactElement, useCallback } from "react";
-import { useParams } from "react-router";
+import { useParams } from "react-router-dom";
 import Card from "../shared/Carda";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
 

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { useParams } from "react-router";
+import { useParams } from "react-router-dom";
 import { ComicDetail } from "../ComicDetail/ComicDetail";
 import { useQuery } from "@tanstack/react-query";
 import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -13,7 +13,7 @@ import {
 } from "../../constants/endpoints";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
-import { useParams } from "react-router";
+import { useParams } from "react-router-dom";
 
 interface IDownloadsPanelProps {
   key: number;

src/client/components/Dashboard/PullList.tsx

@@ -4,7 +4,7 @@ import Card from "../shared/Carda";
 import Header from "../shared/Header";
 import { importToDB } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
-import { Link } from "react-router";
+import { Link } from "react-router-dom";
 
 import axios from "axios";
 import rateLimiter from "axios-rate-limit";

src/client/components/Dashboard/RecentlyImported.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 import Card from "../shared/Carda";
-import { Link } from "react-router";
+import { Link } from "react-router-dom";
 import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";

src/client/components/Dashboard/VolumeGroups.tsx

@@ -1,7 +1,7 @@
 import { map, unionBy } from "lodash";
 import React, { ReactElement } from "react";
 import ellipsize from "ellipsize";
-import { Link, useNavigate } from "react-router";
+import { Link, useNavigate } from "react-router-dom";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
 

src/client/components/Dashboard/WantedComicsList.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 import Card from "../shared/Carda";
-import { Link, useNavigate } from "react-router";
+import { Link, useNavigate } from "react-router-dom";
 import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";

src/client/components/Library/Library.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, ReactElement, useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { useNavigate } from "react-router";
+import { useNavigate } from "react-router-dom";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 import T2Table from "../shared/T2Table";

src/client/components/Library/LibraryGrid.tsx

@@ -14,7 +14,7 @@ import { isNil, isEmpty, isUndefined } from "lodash";
 import Masonry from "react-masonry-css";
 import Card from "../shared/Carda";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
-import { Link } from "react-router";
+import { Link } from "react-router-dom";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 
 interface ILibraryGridProps {}

src/client/components/Library/SearchBar.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import { Form, Field } from "react-final-form";
-import { Link } from "react-router";
+import { Link } from "react-router-dom";
 
 export const SearchBar = (props): ReactElement => {
   const { searchHandler } = props;

src/client/components/Volumes/Volumes.tsx

@@ -4,7 +4,7 @@ import Card from "../shared/Carda";
 import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
 import { convert } from "html-to-text";
-import { Link } from "react-router";
+import { Link } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { SEARCH_SERVICE_BASE_URI } from "../../constants/endpoints";

src/client/components/shared/Header.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { Link } from "react-router";
+import { Link } from "react-router-dom";
 
 type IHeaderProps = {
   headerContent: string;

src/client/components/shared/Navbar2.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useState } from "react";
-import { Link } from "react-router";
+import { Link } from "react-router-dom";
 import { useDarkMode } from "../../hooks/useDarkMode";
 
 export const Navbar2 = (): ReactElement => {

src/client/index.tsx

@@ -1,8 +1,12 @@
+import React from "react";
+import { render } from "react-dom";
 import { createRoot } from "react-dom/client";
 import App from "./components/App";
-import { createBrowserRouter, RouterProvider } from "react-router";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Settings from "./components/Settings/Settings";
 import { ErrorPage } from "./components/shared/ErrorPage";
+const rootEl = document.getElementById("root");
+const root = createRoot(rootEl);
 import i18n from "./shared/utils/i18n.util";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Import from "./components/Import/Import";
@@ -16,48 +20,34 @@ import WantedComics from "./components/WantedComics/WantedComics";
 
 const queryClient = new QueryClient();
 
-const router = createBrowserRouter(
+const router = createBrowserRouter([
-  [
-    {
-      path: "/",
-      element: <App />, 
-      errorElement: <ErrorPage />, 
-      children: [
-        { path: "/", element: <Dashboard /> },
-        { path: "dashboard", element: <Dashboard /> },
-        { path: "settings", element: <Settings /> },
-        { path: "library", element: <TabulatedContentContainer category="library" /> },
-        { path: "comic/details/:comicObjectId", element: <ComicDetailContainer /> },
-        { path: "import", element: <Import path={"./comics"} /> },
-        { path: "search", element: <Search /> },
-        { path: "volume/details/:comicObjectId", element: <VolumeDetails /> },
-        { path: "volumes", element: <Volumes /> },
-        { path: "wanted", element: <WantedComics /> },
-      ],
-    },
-  ],
   {
-    future: {
+    path: "/",
-      v7_relativeSplatPath: true,
+    element: <App />,
-      v7_fetcherPersist: true,
+    errorElement: <ErrorPage />,
-      v7_normalizeFormMethod: true,
+    children: [
-      v7_partialHydration: true,
+      { path: "/", element: <Dashboard /> },
-      v7_skipActionErrorRevalidation: true,
+      { path: "dashboard", element: <Dashboard /> },
-    },
+      { path: "settings", element: <Settings /> },
-  }
+      {
-);
+        path: "library",
+        element: <TabulatedContentContainer category="library" />,
+      },
+      {
+        path: "comic/details/:comicObjectId",
+        element: <ComicDetailContainer />,
+      },
+      { path: "import", element: <Import path={"./comics"} /> },
+      { path: "search", element: <Search /> },
+      { path: "volume/details/:comicObjectId", element: <VolumeDetails /> },
+      { path: "volumes", element: <Volumes /> },
+      { path: "wanted", element: <WantedComics /> },
+    ],
+  },
+]);
 
-const rootElement = document.getElementById("root");
+root.render(
-if (rootElement) {
+  <QueryClientProvider client={queryClient}>
-  const root = createRoot(rootElement);
+    <RouterProvider router={router} />
-  root.render(
+  </QueryClientProvider>,
-    <QueryClientProvider client={queryClient}>
+);
-      <RouterProvider
-        router={router}
-        future={{ v7_startTransition: true }}
-      />
-    </QueryClientProvider>
-  );
-} else {
-  console.error("Root element not found");
-}