From a3f076add38d13f547e2bde1d54281a5648ff54a Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 7 Apr 2022 16:12:34 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=BC=20Building=20out=20the=20tabulated?=
 =?UTF-8?q?=20Wanted=20Comics=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/Library/Library.tsx     |   2 +-
 .../components/Library/LibraryContainer.tsx   |   2 +-
 .../components/WantedComics/WantedComics.tsx  | 193 +++++++++++++++++-
 3 files changed, 192 insertions(+), 5 deletions(-)

diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index 16a8985..f7324ea 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -8,7 +8,7 @@ import React, {
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 import T2Table from "../shared/T2Table";
-import { isEmpty, isNil, isNull, isUndefined } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import RawFileDetails from "./RawFileDetails";
 import ComicVineDetails from "./ComicVineDetails";
 import SearchBar from "./SearchBar";
diff --git a/src/client/components/Library/LibraryContainer.tsx b/src/client/components/Library/LibraryContainer.tsx
index f85ec1d..48c8edd 100644
--- a/src/client/components/Library/LibraryContainer.tsx
+++ b/src/client/components/Library/LibraryContainer.tsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import { Library } from "./Library";
 
-const LibraryContainer = () => {
+const LibraryContainer = (): ReactElement => {
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(
diff --git a/src/client/components/WantedComics/WantedComics.tsx b/src/client/components/WantedComics/WantedComics.tsx
index 1577ba3..42f69c7 100644
--- a/src/client/components/WantedComics/WantedComics.tsx
+++ b/src/client/components/WantedComics/WantedComics.tsx
@@ -1,8 +1,17 @@
-import React, { ReactElement, useEffect } from "react";
-import { useDispatch } from "react-redux";
+import { isUndefined } from "lodash";
+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 { convert } from "html-to-text";
 
 export const WantedComics = (props): ReactElement => {
+  const wantedComics = useSelector(
+    (state: RootState) => state.fileOps.librarySearchResults,
+  );
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(
@@ -20,7 +29,185 @@ export const WantedComics = (props): ReactElement => {
       ),
     );
   }, []);
-  return <>Ads</>;
+  console.log(wantedComics);
+  const columnData = useMemo(
+    () => [
+      {
+        Header: "Comic Information",
+        columns: [
+          {
+            Header: "Details",
+            id: "comicDetails",
+            minWidth: 350,
+            accessor: (row) => {
+              console.log(row);
+              return (
+                <div className="columns">
+                  <div className="column">
+                    <div className="comic-detail issue-metadata">
+                      <dl>
+                        <dd>
+                          <div className="columns mt-2">
+                            <div className="column is-3">
+                              {row._source.sourcedMetadata.comicvine.image
+                                .thumb_url && (
+                                <Card
+                                  imageUrl={
+                                    row._source.sourcedMetadata.comicvine.image
+                                      .thumb_url
+                                  }
+                                  orientation={"vertical"}
+                                  hasDetails={false}
+                                  // cardContainerStyle={{ maxWidth: 200 }}
+                                />
+                              )}
+                            </div>
+                            <div className="column">
+                              <dl>
+                                <dd>
+                                  {row._source.sourcedMetadata.comicvine.name
+                                    ? row._source.sourcedMetadata.comicvine.name
+                                    : "No Name"}
+                                </dd>
+                                <dd>
+                                  <h6 className="name has-text-weight-medium mb-1">
+                                    {
+                                      row._source.sourcedMetadata.comicvine
+                                        .volumeInformation.name
+                                    }
+                                  </h6>
+                                </dd>
+                                <dd className="is-size-7">
+                                  published by{" "}
+                                  <span className="has-text-weight-semibold">
+                                    {
+                                      row._source.sourcedMetadata.comicvine
+                                        .volumeInformation.publisher.name
+                                    }
+                                  </span>
+                                </dd>
+
+                                <dd className="is-size-7">
+                                  <span>
+                                    {ellipsize(
+                                      convert(
+                                        row._source.sourcedMetadata.comicvine
+                                          .description,
+                                        {
+                                          baseElements: {
+                                            selectors: ["p"],
+                                          },
+                                        },
+                                      ),
+                                      120,
+                                    )}
+                                  </span>
+                                </dd>
+
+                                <dd className="is-size-7 mt-2">
+                                  <div className="field is-grouped is-grouped-multiline">
+                                    <div className="control">
+                                      <span className="tags">
+                                        <span className="tag is-success is-light has-text-weight-semibold">
+                                          {
+                                            row._source.sourcedMetadata
+                                              .comicvine.volumeInformation.id
+                                          }
+                                        </span>
+                                      </span>
+                                    </div>
+                                    <div className="control">
+                                      <span className="tags has-addons">
+                                        <span className="tag">
+                                          ComicVine Id
+                                        </span>
+                                        <span className="tag is-success is-light">
+                                          {
+                                            row._source.sourcedMetadata
+                                              .comicvine.id
+                                          }
+                                        </span>
+                                      </span>
+                                    </div>
+                                  </div>
+                                </dd>
+                              </dl>
+                            </div>
+                          </div>
+                        </dd>
+                      </dl>
+                    </div>
+                  </div>
+                </div>
+              );
+            },
+          },
+        ],
+      },
+      {
+        Header: "Download Status",
+        columns: [
+          {
+            Header: "Files",
+            accessor: "_source.acquisition.directconnect",
+            align: "right",
+            Cell: (props) => {
+              return (
+                <div
+                  style={{
+                    display: "flex",
+                    // flexDirection: "column",
+                    justifyContent: "center",
+                  }}
+                >
+                  {props.cell.value.length > 0 ? (
+                    <span className="tag is-warning">
+                      {props.cell.value.length}
+                    </span>
+                  ) : null}
+                </div>
+              );
+            },
+          },
+          {
+            Header: "Type",
+            id: "Air",
+          },
+          {
+            Header: "Type",
+            id: "dcc",
+          },
+        ],
+      },
+    ],
+    [],
+  );
+  return (
+    <section className="container">
+      <div className="section">
+        <h1 className="title">Wanted Comics</h1>
+        {/* Search bar */}
+        <SearchBar />
+        {!isUndefined(wantedComics) && (
+          <div>
+            <div className="library">
+              <T2Table
+                rowData={wantedComics.hits.hits}
+                totalPages={wantedComics.hits.total.value}
+                columns={columnData}
+                // paginationHandlers={{
+                //   nextPage: goToNextPage,
+                //   previousPage: goToPreviousPage,
+                // }}
+                // rowClickHandler={navigateToComicDetail}
+              />
+              {/* pagination controls */}
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
 };
 
 export default WantedComics;