🔧 Added caching to pull list call to CV

src/client/components/App.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useState } from "react";
 import { useSelector } from "react-redux";
 import { hot } from "react-hot-loader";
-import Dashboard from "./Dashboard";
+import Dashboard from "./Dashboard/Dashboard";
 
 import Import from "./Import";
 import { ComicDetail } from "./ComicDetail";

src/client/components/Dashboard/Dashboard.tsx

@@ -3,7 +3,8 @@ import { useDispatch, useSelector } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
 import { VolumeGroups } from "./VolumeGroups";
-import { getComicBooks } from "../actions/fileops.actions";
+import { PullList } from "./PullList";
+import { getComicBooks } from "../../actions/fileops.actions";
 import { isEmpty, isNil, isUndefined } from "lodash";
 
 export const Dashboard = (): ReactElement => {
@@ -32,6 +33,9 @@ export const Dashboard = (): ReactElement => {
 
         {!isEmpty(recentComics) && !isEmpty(recentComics.docs) ? (
           <>
+            {/* Pull List */}
+            <PullList issues={recentComics} />
+
             {/* stats */}
             <div>
               <div className="box stats-palette p-3 column is-one-quarter">

src/client/components/Dashboard/PullList.tsx

@@ -0,0 +1,75 @@
+import { isNil, map } from "lodash";
+import React, { ReactElement, useEffect } from "react";
+import Card from "../Carda";
+import Masonry from "react-masonry-css";
+import { useDispatch, useSelector } from "react-redux";
+import { getWeeklyPullList } from "../../actions/comicinfo.actions";
+
+type PullListProps = {
+  issues: any;
+};
+
+export const PullList = ({ issues }: PullListProps): ReactElement => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getWeeklyPullList(issues));
+  }, []);
+
+  const pullList = useSelector((state: RootState) => state.comicInfo.pullList);
+
+  const breakpointColumnsObj = {
+    default: 5,
+    1100: 4,
+    700: 2,
+    600: 2,
+  };
+  return (
+    <>
+      <div className="content">
+        <h4 className="title is-4">Discover</h4>
+        <p className="subtitle is-7">
+          Pull List aggregated for the week from ComicVine
+        </p>
+        {/* select week */}
+        <div className="select is-small">
+          <select>
+            <option>Select Week</option>
+            <option>With options</option>
+          </select>
+        </div>
+        {/* See all pull list issues */}
+        <button className="button is-small">View all issues</button>
+      </div>
+      <Masonry
+        breakpointCols={breakpointColumnsObj}
+        className="recent-comics-container"
+        columnClassName="recent-comics-column"
+      >
+        {!isNil(pullList) &&
+          pullList &&
+          map(pullList, (issue) => {
+            return (
+              <Card
+                key={issue.id}
+                orientation={"vertical"}
+                imageUrl={issue.image.small_url}
+                hasDetails
+                title={issue.name}
+              >
+                <div className="content">
+                  <div className="control">
+                    <span className="tags has-addons">
+                      <span className="tag is-primary is-light">Date</span>
+                      <span className="tag">{issue.store_date}</span>
+                    </span>
+                  </div>
+                </div>
+              </Card>
+            );
+          })}
+      </Masonry>
+    </>
+  );
+};
+
+export default PullList;

src/client/components/Dashboard/RecentlyImported.tsx

@@ -1,12 +1,12 @@
 import React, { ReactElement } from "react";
-import Card from "./Carda";
+import Card from "../Carda";
 import { Link } from "react-router-dom";
 import ellipsize from "ellipsize";
-import { escapePoundSymbol } from "../shared/utils/formatting.utils";
+import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
 import { isNil, isUndefined, map } from "lodash";
-import { detectIssueTypes } from "../shared/utils/tradepaperback.utils";
+import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
-import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
+import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 
 type RecentlyImportedProps = {
   comicBookCovers: any;
@@ -67,7 +67,7 @@ export const RecentlyImported = ({
                   )}
                   {/* Raw file presence  */}
                   {isNil(rawFileDetails) && (
-                    <span className="icon custom-icon is-small has-text-danger">
+                    <span className="icon custom-icon is-small has-text-danger mr-2">
                       <img src="/img/missing-file.svg" />
                     </span>
                   )}

src/client/components/Dashboard/VolumeGroups.tsx

@@ -3,7 +3,7 @@ import React, { ReactElement, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import ellipsize from "ellipsize";
 import { Link } from "react-router-dom";
-import { fetchVolumeGroups } from "../actions/fileops.actions";
+import { fetchVolumeGroups } from "../../actions/fileops.actions";
 import Masonry from "react-masonry-css";
 
 export const VolumeGroups = (): ReactElement => {
@@ -20,7 +20,6 @@ export const VolumeGroups = (): ReactElement => {
   const volumeGroups = useSelector(
     (state: RootState) => state.fileOps.comicVolumeGroups,
   );
-  console.log(volumeGroups);
   return (
     <section className="volumes-container mt-4">
       <div className="content">

src/client/components/Dashboard/ZeroState.tsx

@@ -1,18 +1,18 @@
 import * as React from "react";
 
 interface ZeroStateProps {
-    header: string;
+  header: string;
   message: string;
 }
 const ZeroState: React.FunctionComponent<ZeroStateProps> = (props) => {
   return (
     <article className="message is-info">
       <div className="message-body">
-       <p>{ props.header }</p>
-        { props.message }
+        <p>{props.header}</p>
+        {props.message}
       </div>
     </article>
   );
 };
 
-export default ZeroState;
+export default ZeroState;