🏗 WIP scaffold for Volumes tabulated view

src/client/components/App.tsx

@@ -11,6 +11,7 @@ import Settings from "./Settings";
 import VolumeDetail from "./VolumeDetail/VolumeDetail";
 import PullList from "./PullList/PullList";
 import WantedComics from "./WantedComics/WantedComics";
+import Volumes from "./Volumes/Volumes";
 
 import { Routes, Route } from "react-router-dom";
 import Navbar from "./Navbar";
@@ -93,6 +94,7 @@ export const App = (): ReactElement => {
           <Route path="/settings" element={<Settings />} />
           <Route path="/pull-list/all" element={<PullList />} />
           <Route path="/wanted/all" element={<WantedComics />} />
+          <Route path="/volumes/all" element={<Volumes />} />
         </Routes>
       </div>
     </AirDCPPSocketContext.Provider>

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 } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Masonry from "react-masonry-css";
 
 export const VolumeGroups = (props): ReactElement => {
@@ -13,10 +13,22 @@ export const VolumeGroups = (props): ReactElement => {
   };
   // Till mongo gives us back the deduplicated results with the ObjectId
   const deduplicatedGroups = unionBy(props.volumeGroups, "volumes.id");
+  const navigate = useNavigate();
+  const navigateToVolumes = (row) => {
+    navigate(`/volumes/all`);
+  };
+
   return (
     <section className="volumes-container mt-4">
       <div className="content">
-        <p className="title is-4">Volumes</p>
+        <span className="icon-text mb-1" onClick={navigateToVolumes}>
+          <span>
+            <span className="title is-4">Volumes</span>
+          </span>
+          <span className="icon mt-1">
+            <i className="fa-solid fa-circle-chevron-right"></i>
+          </span>
+        </span>
         <p className="subtitle is-7">Based on ComicVine Volume information</p>
       </div>
       <Masonry

src/client/components/Volumes/Volumes.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement, useEffect, useMemo } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { searchIssue } from "../../actions/fileops.actions";
+import Card from "../Carda";
+import SearchBar from "../Library/SearchBar";
+import T2Table from "../shared/T2Table";
+import ellipsize from "ellipsize";
+import { isUndefined } from "lodash";
+import { convert } from "html-to-text";
+
+export const Volumes = (props): ReactElement => {
+  return <div>as</div>;
+};
+
+export default Volumes;

src/client/components/WantedComics/WantedComics.tsx

@@ -1,4 +1,3 @@
-import { isUndefined } from "lodash";
 import React, { ReactElement, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
@@ -6,6 +5,7 @@ import Card from "../Carda";
 import SearchBar from "../Library/SearchBar";
 import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
+import { isEmpty, isUndefined } from "lodash";
 import { convert } from "html-to-text";
 
 export const WantedComics = (props): ReactElement => {
@@ -49,8 +49,9 @@ export const WantedComics = (props): ReactElement => {
                         <dd>
                           <div className="columns mt-2">
                             <div className="column is-3">
-                              {row._source.sourcedMetadata.comicvine.image
-                                .thumb_url && (
+                              {!isEmpty(
+                                row._source.sourcedMetadata.comicvine,
+                              ) && (
                                 <Card
                                   imageUrl={
                                     row._source.sourcedMetadata.comicvine.image