🔧 Added caching to pull list call to CV

package.json

@@ -31,6 +31,7 @@
     "@types/socket.io-client": "^3.0.0",
     "airdcpp-apisocket": "^2.4.4",
     "array-sort-by": "^1.2.1",
+    "axios-cache-interceptor": "^0.8.8",
     "babel-polyfill": "^6.26.0",
     "better-docs": "^2.3.2",
     "calibre-opds": "^1.0.7",

src/client/actions/comicinfo.actions.tsx

@@ -2,7 +2,6 @@ import axios from "axios";
 import rateLimiter from "axios-rate-limit";
 
 import qs from "qs";
-import { IExtractionOptions } from "threetwo-ui-typings";
 import {
   CV_SEARCH_SUCCESS,
   CV_API_CALL_IN_PROGRESS,
@@ -14,18 +13,48 @@ import {
   IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED,
   CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED,
   CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS,
+  CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS,
+  CV_WEEKLY_PULLLIST_FETCHED,
 } from "../constants/action-types";
 import {
   COMICVINE_SERVICE_URI,
   LIBRARY_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 
+import { setupCache } from "axios-cache-interceptor";
+
+// same object, but with updated typings.
+const axiosWithCache = setupCache(axios);
+
 const http = rateLimiter(axios.create(), {
   maxRequests: 1,
   perMilliseconds: 1000,
   maxRPS: 1,
 });
 
+export const getWeeklyPullList = (options) => async (dispatch) => {
+  try {
+    dispatch({
+      type: CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS,
+    });
+    axiosWithCache({
+      url: `${COMICVINE_SERVICE_URI}/getWeeklyPullList`,
+      method: "get",
+      params: {
+        startDate: "2022-2-9",
+        endDate: "2022-2-16",
+      },
+    }).then((response) => {
+      dispatch({
+        type: CV_WEEKLY_PULLLIST_FETCHED,
+        data: response.data.results,
+      });
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
 export const comicinfoAPICall = (options) => async (dispatch) => {
   try {
     dispatch({
@@ -65,27 +94,28 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
     });
   }
 };
-export const getIssuesForSeries = (comicObjectID: any) => async (dispatch) => {
+export const getIssuesForSeries =
-  dispatch({
+  (comicObjectID: string) => async (dispatch) => {
-    type: CV_ISSUES_METADATA_CALL_IN_PROGRESS,
+    dispatch({
-  });
+      type: CV_ISSUES_METADATA_CALL_IN_PROGRESS,
-  dispatch({
+    });
-    type: CV_CLEANUP,
+    dispatch({
-  });
+      type: CV_CLEANUP,
+    });
 
-  const issues = await axios({
+    const issues = await axios({
-    url: `${COMICVINE_SERVICE_URI}/getIssuesForSeries`,
+      url: `${COMICVINE_SERVICE_URI}/getIssuesForSeries`,
-    method: "POST",
+      method: "POST",
-    params: {
+      params: {
-      comicObjectID,
+        comicObjectID,
-    },
+      },
-  });
+    });
 
-  dispatch({
+    dispatch({
-    type: CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS,
+      type: CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS,
-    issues: issues.data,
+      issues: issues.data,
-  });
+    });
-};
+  };
 
 export const analyzeLibrary = (issues) => async (dispatch) => {
   dispatch({
@@ -107,7 +137,7 @@ export const analyzeLibrary = (issues) => async (dispatch) => {
       queryObjects,
     },
   });
-  console.log(foo);
+
   dispatch({
     type: CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED,
     matches: foo.data,

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>
+        <p>{props.header}</p>
-        { props.message }
+        {props.message}
       </div>
     </article>
   );
 };
 
-export default ZeroState;
+export default ZeroState;

src/client/constants/action-types.ts

@@ -25,6 +25,12 @@ export const IMS_CV_METADATA_IMPORT_FAILED = "IMS_CV_METADATA_IMPORT_FAILED";
 export const IMS_RECENT_COMICS_FETCHED = "IMS_RECENT_COMICS_FETCHED";
 export const IMS_DATA_FETCH_ERROR = "IMS_DATA_FETCH_ERROR";
 
+// Weekly pull list
+export const CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS =
+  "CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS";
+export const CV_WEEKLY_PULLLIST_FETCHED = "CV_WEEKLY_PULLLIST_FETCHED";
+export const CV_WEEKLY_PULLLIST_ERROR = "CV_WEEKLY_PULLLIST_ERROR";
+
 // Single or multiple comic book mongo objects
 export const IMS_COMIC_BOOK_DB_OBJECT_FETCHED =
   "IMS_COMIC_BOOK_DB_OBJECT_FETCHED";

src/client/reducers/comicinfo.reducer.js

@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash";
+import { isEmpty, pull } from "lodash";
 import {
   CV_API_CALL_IN_PROGRESS,
   CV_SEARCH_SUCCESS,
@@ -9,9 +9,12 @@ import {
   CV_ISSUES_METADATA_CALL_IN_PROGRESS,
   CV_ISSUES_MATCHES_IN_LIBRARY_FETCHED,
   CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS,
+  CV_WEEKLY_PULLLIST_FETCHED,
+  CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS,
 } from "../constants/action-types";
 
 const initialState = {
+  pullList: [],
   searchResults: [],
   searchQuery: {},
   inProgress: false,
@@ -97,6 +100,20 @@ function comicinfoReducer(state = initialState, action) {
         ...state,
         issuesForVolume: updatedState,
       };
+
+    case CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS:
+      return {
+        inProgress: true,
+        ...state,
+      };
+    case CV_WEEKLY_PULLLIST_FETCHED: {
+      console.log(action.data);
+      return {
+        ...state,
+        inProgress: false,
+        pullList: [...action.data],
+      };
+    }
     default:
       return state;
   }

src/client/reducers/fileops.reducer.ts

@@ -89,7 +89,6 @@ function fileOpsReducer(state = initialState, action) {
       };
     }
     case IMS_COMIC_BOOK_GROUPS_FETCHED: {
-      console.log(action)
       return {
         ...state,
         comicVolumeGroups: action.data,

yarn.lock

@@ -2766,6 +2766,15 @@ axe-core@^4.3.5:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.5.tgz#78d6911ba317a8262bfee292aeafcc1e04b49cc5"
   integrity sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==
 
+axios-cache-interceptor@^0.8.8:
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/axios-cache-interceptor/-/axios-cache-interceptor-0.8.8.tgz#533b617b05a2c9f1602183631651ecbf62cad581"
+  integrity sha512-1F9Yt2V193dmVTYZn5BqGIi9xe++TTq/2CmAluXaHFVrZ9w/Vf2fp5BEH9q57tOe5l0GCE5+0dvjeGgBzzCBEw==
+  dependencies:
+    cache-parser "1.2.0"
+    fast-defer "^1.1.3"
+    object-code "^1.0.1"
+
 axios-rate-limit@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/axios-rate-limit/-/axios-rate-limit-1.3.0.tgz#03241d24c231c47432dab6e8234cfde819253c2e"
@@ -3459,6 +3468,11 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+cache-parser@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/cache-parser/-/cache-parser-1.2.0.tgz#42cad5decefb079232b87baf8489cc78925e6d68"
+  integrity sha512-ExJkjMrEu+tG95DBSgk9UZwhKzTSTpvNu5dawNkGpubj3AUBih92gN5NJbGSbqHo6ZDR8nJ0jxT7t3t4FkofGQ==
+
 cacheable-request@^2.1.1:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-2.1.4.tgz#0d808801b6342ad33c91df9d0b44dc09b91e5c3d"
@@ -5643,6 +5657,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-defer@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fast-defer/-/fast-defer-1.1.3.tgz#6f558e10c2fb796daa283978726283e6918594c0"
+  integrity sha512-nQejwC+FxKmCnRVzuQssIHsDWPNm6WAEogd5GXOCe9gBMtSoaZtxcuYaEQnz5H0+sDJvPJbllNitBepMqiL/6g==
+
 fast-diff@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
@@ -9580,6 +9599,11 @@ object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
+object-code@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-code/-/object-code-1.0.1.tgz#57a6243fde3b47f0093fd71d5883e3335a297706"
+  integrity sha512-zt/mZJvjm3nyMH9BMcrV/NYgPrqKwno0sx2bdqD4juT2EWa7wxDPn5nQnYMIsfz4pIIDh6gupQ5bMJ+tTy1Kqw==
+
 object-copy@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"