🔼 Upgraded to react-router v6

src/client/components/App.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement, useState } from "react";
 import { useSelector } from "react-redux";
-import { hot } from "react-hot-loader";
 import Dashboard from "./Dashboard/Dashboard";
 
 import Import from "./Import";
@@ -11,14 +10,11 @@ import Search from "./Search";
 import Settings from "./Settings";
 import VolumeDetail from "./VolumeDetail/VolumeDetail";
 
-import { Switch, Route } from "react-router";
+import { Routes, Route } from "react-router-dom";
 import Navbar from "./Navbar";
 import "../assets/scss/App.scss";
 import Notifications from "react-notification-system-redux";
-import { getSettings } from "../actions/settings.actions";
 import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
-import { isEmpty, isUndefined } from "lodash";
-import AirDCPPSocket from "../services/DcppSearchService";
 
 //Optional styling
 const style = {
@@ -66,7 +62,6 @@ const style = {
 
 export const App = (): ReactElement => {
   const notifications = useSelector((state: RootState) => state.notifications);
-
   const [ADCPPSocket, setADCPPSocket] = useState({});
 
   return (
@@ -79,37 +74,25 @@ export const App = (): ReactElement => {
           newOnTop={true}
           allowHTML={true}
         />
-        <Switch>
-          <Route exact path="/">
-            <Dashboard />
-          </Route>
-          <Route path="/import">
-            <Import path={"./comics"} />
-          </Route>
-          <Route path="/library">
-            <Library />
-          </Route>
-          <Route path="/library-grid">
-            <LibraryGrid />
-          </Route>
-          <Route path="/search">
-            <Search />
-          </Route>
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/import" element={<Import path={"./comics"} />} />
+          <Route path="/library" element={<Library />} />
+          <Route path="/library-grid" element={<LibraryGrid />} />
+          <Route path="/search" element={<Search />} />
           <Route
             path={"/comic/details/:comicObjectId"}
-            component={ComicDetail}
+            element={<ComicDetail />}
           />
           <Route
             path={"/volume/details/:comicObjectId"}
-            component={VolumeDetail}
+            element={<VolumeDetail />}
           />
-          <Route path="/settings">
-            <Settings />
-          </Route>
-        </Switch>
+          <Route path="/settings" element={<Settings />} />
+        </Routes>
       </div>
     </AirDCPPSocketContext.Provider>
   );
 };
 
-export default hot(module)(App);
+export default App;

src/client/components/ComicDetail.tsx

@@ -12,7 +12,7 @@ import DownloadsPanel from "./ComicDetail/DownloadsPanel";
 import { EditMetadataPanel } from "./ComicDetail/EditMetadataPanel";
 import { Menu } from "./ComicDetail/ActionMenu/Menu";
 
-import { isEmpty, isUndefined, isNil } from "lodash";
+import { isEmpty, isUndefined, isNil, findIndex } from "lodash";
 import { RootState } from "threetwo-ui-typings";
 
 import { getComicBookDetailById } from "../actions/comicinfo.actions";
@@ -41,8 +41,8 @@ type ComicDetailProps = {};
  */
 
 export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
-  const [active, setActive] = useState(1);
   const [page, setPage] = useState(1);
+  const [active, setActive] = useState(1);
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
 
@@ -165,7 +165,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       icon: <i className="fa-regular fa-file-archive"></i>,
       name: "Archive Operations",
       content: <ArchiveOperations data={comicBookDetailData} key={3} />,
-      include: !isNil(comicBookDetailData.rawFileDetails),
+      include:
+        !isUndefined(comicBookDetailData.rawFileDetails) &&
+        !isEmpty(comicBookDetailData.rawFileDetails.cover),
     },
     {
       id: 4,
@@ -195,10 +197,12 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       include: !isNil(comicBookDetailData.rawFileDetails),
     },
   ];
+  // filtered Tabs
+  const filteredTabs = tabGroup.filter((tab) => tab.include);
+
+
   // Tabs
   const MetadataTabGroup = () => {
-    const filteredTabs = tabGroup.filter((tab) => tab.include);
-    console.log("filter:m", filteredTabs);
     return (
       <>
         <div className="tabs">
@@ -211,7 +215,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               >
                 {/* Downloads tab and count badge */}
                 <a>
-                  {id === 4 &&
+                  {id === 5 &&
                   !isNil(comicBookDetailData) &&
                   !isEmpty(comicBookDetailData) ? (
                     <span className="download-icon-labels">
@@ -241,7 +245,10 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   // 2. from the CV-scraped version
   let imagePath = "";
   let comicBookTitle = "";
-  if (!isNil(comicBookDetailData.rawFileDetails)) {
+  if (
+    !isUndefined(comicBookDetailData.rawFileDetails) &&
+    !isEmpty(comicBookDetailData.rawFileDetails.cover)
+  ) {
     const encodedFilePath = encodeURI(
       `${LIBRARY_SERVICE_HOST}/${comicBookDetailData.rawFileDetails.cover.filePath}`,
     );
@@ -276,16 +283,18 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               </div>
               {/* raw file details */}
               <div className="column is-three-fifths">
-                {!isNil(comicBookDetailData.rawFileDetails) && (
-                  <>
-                    <RawFileDetails
-                      data={{
-                        rawFileDetails: comicBookDetailData.rawFileDetails,
-                        inferredMetadata: comicBookDetailData.inferredMetadata,
-                      }}
-                    />
-                  </>
-                )}
+                {!isUndefined(comicBookDetailData.rawFileDetails) &&
+                  !isEmpty(comicBookDetailData.rawFileDetails.cover) && (
+                    <>
+                      <RawFileDetails
+                        data={{
+                          rawFileDetails: comicBookDetailData.rawFileDetails,
+                          inferredMetadata:
+                            comicBookDetailData.inferredMetadata,
+                        }}
+                      />
+                    </>
+                  )}
               </div>
             </div>
 

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -38,35 +38,35 @@ export const RawFileDetails = (props): ReactElement => {
             </div>
           </dd>
         </dl>
-        </div>
-        <div className="content comic-detail raw-file-details mt-3">
-          <dl>
-            {/* inferred metadata */}
-            <dt>Inferred Issue Metadata</dt>
-            <dd>
-              <div className="field is-grouped mt-2">
+      </div>
+      <div className="content comic-detail raw-file-details mt-3">
+        <dl>
+          {/* inferred metadata */}
+          <dt>Inferred Issue Metadata</dt>
+          <dd>
+            <div className="field is-grouped mt-2">
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag">Name</span>
+                  <span className="tag is-info is-light">
+                    {inferredMetadata.issue.name}
+                  </span>
+                </div>
+              </div>
+              {!isUndefined(inferredMetadata.issue.number) ? (
                 <div className="control">
                   <div className="tags has-addons">
-                    <span className="tag">Name</span>
-                    <span className="tag is-info is-light">
-                      {inferredMetadata.issue.name}
+                    <span className="tag">Number</span>
+                    <span className="tag is-primary is-light">
+                      {inferredMetadata.issue.number}
                     </span>
                   </div>
                 </div>
-                {!isUndefined(inferredMetadata.issue.number) ? (
-                  <div className="control">
-                    <div className="tags has-addons">
-                      <span className="tag">Number</span>
-                      <span className="tag is-primary is-light">
-                        {inferredMetadata.issue.number}
-                      </span>
-                    </div>
-                  </div>
-                ) : null}
-              </div>
-            </dd>
-          </dl>
-        </div>
+              ) : null}
+            </div>
+          </dd>
+        </dl>
+      </div>
     </>
   );
 };

src/client/components/Dashboard/RecentlyImported.tsx

@@ -45,7 +45,7 @@ export const RecentlyImported = ({
               !isEmpty(sourcedMetadata);
             let imagePath = "";
             let comicName = "";
-            if (!isNil(rawFileDetails)) {
+            if (!isEmpty(rawFileDetails.cover)) {
               const encodedFilePath = encodeURI(
                 `${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`,
               );

src/client/components/Library.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo, ReactElement } from "react";
 import PropTypes from "prop-types";
-import { useHistory } from "react-router";
+import { useNavigate } from "react-router-dom";
 import { useTable, usePagination } from "react-table";
 import { useDispatch, useSelector } from "react-redux";
 import { getComicBooks } from "../actions/fileops.actions";
@@ -27,9 +27,9 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
     collapsePageSizeDropdown(!isPageSizeDropdownCollapsed);
 
   // programatically navigate to comic detail
-  const history = useHistory();
+  const navigate = useNavigate();
   const navigateToComicDetail = (id) => {
-    history.push(`/comic/details/${id}`);
+    navigate(`/comic/details/${id}`);
   };
 
   const ImportStatus = ({ value }) => {
@@ -49,7 +49,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
             Header: "File Details",
             id: "fileDetails",
             accessor: (row) =>
-              !isNil(row.rawFileDetails)
+              !isEmpty(row.rawFileDetails.cover)
                 ? row.rawFileDetails
                 : row.sourcedMetadata,
             Cell: ({ value }) => {
@@ -102,7 +102,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
             accessor: "sourcedMetadata.comicvine",
             Cell(props) {
               return (
-                !isNil(props.cell.value) && (
+                !isEmpty(props.cell.value) && (
                   <span className="tag is-info is-light">
                     {props.cell.value.resource_type}
                   </span>
@@ -189,7 +189,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
     <section className="container">
       <div className="section">
         <h1 className="title">Library</h1>
-
+        {/* Search bar */}
         <SearchBar />
         <div>
           <div className="library">