From 7b1dc56dbb0434efc23de3a29c115f97eb924d09 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Sat, 26 Mar 2022 22:28:22 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=BD=20Weekly=20Pull=20List=20dedicated?=
 =?UTF-8?q?=20tablulated=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/comicinfo.actions.tsx     |   6 +-
 src/client/components/App.tsx                |   2 +
 src/client/components/Dashboard/PullList.tsx |  13 ++-
 src/client/components/Library/Library.tsx    |   5 -
 src/client/components/PullList/PullList.tsx  | 117 +++++++++++++++++++
 5 files changed, 131 insertions(+), 12 deletions(-)
 create mode 100644 src/client/components/PullList/PullList.tsx

diff --git a/src/client/actions/comicinfo.actions.tsx b/src/client/actions/comicinfo.actions.tsx
index afb2957..912ff88 100644
--- a/src/client/actions/comicinfo.actions.tsx
+++ b/src/client/actions/comicinfo.actions.tsx
@@ -42,11 +42,7 @@ export const getWeeklyPullList = (options) => async (dispatch) => {
     axiosWithCache({
       url: `${COMICVINE_SERVICE_URI}/getWeeklyPullList`,
       method: "get",
-      params: {
-        startDate: "2022-4-8",
-        pageSize: "15",
-        currentPage: "1",
-      },
+      params: options,
     }).then((response) => {
       dispatch({
         type: CV_WEEKLY_PULLLIST_FETCHED,
diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx
index db6a33a..304f477 100644
--- a/src/client/components/App.tsx
+++ b/src/client/components/App.tsx
@@ -9,6 +9,7 @@ import LibraryGrid from "./Library/LibraryGrid";
 import Search from "./Search";
 import Settings from "./Settings";
 import VolumeDetail from "./VolumeDetail/VolumeDetail";
+import PullList from "./PullList/PullList";
 
 import { Routes, Route } from "react-router-dom";
 import Navbar from "./Navbar";
@@ -89,6 +90,7 @@ export const App = (): ReactElement => {
             element={<VolumeDetail />}
           />
           <Route path="/settings" element={<Settings />} />
+          <Route path="/pull-list/all" element={<PullList />} />
         </Routes>
       </div>
     </AirDCPPSocketContext.Provider>
diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx
index 17f8cf8..99ada80 100644
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/src/client/components/Dashboard/PullList.tsx
@@ -8,6 +8,7 @@ import ellipsize from "ellipsize";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import { Link } from "react-router-dom";
 
 type PullListProps = {
   issues: any;
@@ -16,7 +17,13 @@ type PullListProps = {
 export const PullList = ({ issues }: PullListProps): ReactElement => {
   const dispatch = useDispatch();
   useEffect(() => {
-    dispatch(getWeeklyPullList(issues));
+    dispatch(
+      getWeeklyPullList({
+        startDate: "2022-4-8",
+        pageSize: "15",
+        currentPage: "1",
+      }),
+    );
   }, []);
 
   const pullList = useSelector((state: RootState) => state.comicInfo.pullList);
@@ -80,7 +87,9 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
           </div>
           {/* See all pull list issues */}
           <div className="control">
-            <button className="button is-small">View all issues</button>
+            <Link to={"/pull-list/all/"}>
+              <button className="button is-small">View all issues</button>
+            </Link>
           </div>
           <div className="field has-addons">
             <div className="control">
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index 6f8c29b..0138a98 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -147,10 +147,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
 
   const dispatch = useDispatch();
   const goToNextPage = useCallback((pageIndex, pageSize) => {
-    // incremement pageIndex
-    // nextPage();
-    console.log(pageIndex);
-    console.log("from", pageSize * pageIndex + 1);
     dispatch(
       searchIssue(
         {
@@ -167,7 +163,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
   }, []);
 
   const goToPreviousPage = useCallback((pageIndex, pageSize) => {
-    // previousPage();
     let from = 0;
     if (pageIndex === 2) {
       from = (pageIndex - 1) * pageSize + 2 - 27;
diff --git a/src/client/components/PullList/PullList.tsx b/src/client/components/PullList/PullList.tsx
new file mode 100644
index 0000000..edcf302
--- /dev/null
+++ b/src/client/components/PullList/PullList.tsx
@@ -0,0 +1,117 @@
+import React, { ReactElement, useEffect, useMemo } from "react";
+import T2Table from "../shared/T2Table";
+import { getWeeklyPullList } from "../../actions/comicinfo.actions";
+import { useDispatch, useSelector } from "react-redux";
+import Card from "../Carda";
+import ellipsize from "ellipsize";
+
+export const PullList = (): ReactElement => {
+  const pullListComics = useSelector(
+    (state: RootState) => state.comicInfo.pullList,
+  );
+  console.log(pullListComics);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      getWeeklyPullList({
+        startDate: "2022-4-8",
+        pageSize: "100",
+        currentPage: "1",
+      }),
+    );
+  }, []);
+  const nextPageHandler = () => {};
+  const previousPageHandler = () => {};
+  const columnData = useMemo(
+    () => [
+      {
+        Header: "Comic Information",
+        columns: [
+          {
+            Header: "Details",
+            id: "comicDetails",
+            minWidth: 450,
+            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">
+                              <Card
+                                imageUrl={row.cover}
+                                orientation={"vertical"}
+                                hasDetails={false}
+                                // cardContainerStyle={{ maxWidth: 200 }}
+                              />
+                            </div>
+                            <div className="column">
+                              <dl>
+                                <dt>
+                                  <h6 className="name has-text-weight-medium mb-1">
+                                    {row.name}
+                                  </h6>
+                                </dt>
+                                <dd className="is-size-7">
+                                  published by{" "}
+                                  <span className="has-text-weight-semibold">
+                                    {row.publisher}
+                                  </span>
+                                </dd>
+
+                                <dd className="is-size-7">
+                                  <span>{ellipsize(row.description, 190)}</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.price}
+                                        </span>
+                                        <span className="tag is-success is-light">
+                                          {row.pulls}
+                                        </span>
+                                      </span>
+                                    </div>
+                                  </div>
+                                </dd>
+                              </dl>
+                            </div>
+                          </div>
+                        </dd>
+                      </dl>
+                    </div>
+                  </div>
+                </div>
+              );
+            },
+          },
+        ],
+      },
+    ],
+    [],
+  );
+  return (
+    <section className="container">
+      <div className="section">
+        <h1 className="title">Weekly Pull List</h1>
+        <T2Table
+          rowData={pullListComics}
+          columns={columnData}
+          totalPages={pullListComics.length}
+          paginationHandlers={{
+            nextPage: nextPageHandler,
+            previousPage: previousPageHandler,
+          }}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default PullList;