From c4f46cc727e4f50ddd8a15c2bb5500fb28b761b0 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Fri, 8 Apr 2022 22:47:57 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=20WIP=20scaffold=20for=20Volumes?=
 =?UTF-8?q?=20tabulated=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/App.tsx                    |  2 ++
 src/client/components/Dashboard/VolumeGroups.tsx | 16 ++++++++++++++--
 src/client/components/Volumes/Volumes.tsx        | 15 +++++++++++++++
 .../components/WantedComics/WantedComics.tsx     |  7 ++++---
 4 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 src/client/components/Volumes/Volumes.tsx

diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx
index eee7949..79ce1ba 100644
--- a/src/client/components/App.tsx
+++ b/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>
diff --git a/src/client/components/Dashboard/VolumeGroups.tsx b/src/client/components/Dashboard/VolumeGroups.tsx
index e78a362..f775412 100644
--- a/src/client/components/Dashboard/VolumeGroups.tsx
+++ b/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
diff --git a/src/client/components/Volumes/Volumes.tsx b/src/client/components/Volumes/Volumes.tsx
new file mode 100644
index 0000000..1de8afb
--- /dev/null
+++ b/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;
diff --git a/src/client/components/WantedComics/WantedComics.tsx b/src/client/components/WantedComics/WantedComics.tsx
index 42f69c7..086e5b4 100644
--- a/src/client/components/WantedComics/WantedComics.tsx
+++ b/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