🎠 Weekly Pull list carousel first draft

package.json

@@ -66,6 +66,7 @@
     "react-responsive-carousel": "^3.2.21",
     "react-select": "^5.2.1",
     "react-select-async-paginate": "^0.6.1",
+    "react-slick": "^0.28.1",
     "react-sliding-pane": "^7.0.0",
     "react-stickynode": "^4.0.0",
     "react-table": "^7.7.0",
@@ -73,6 +74,7 @@
     "react-window-dynamic-list": "^2.3.5",
     "redux-socket.io-middleware": "^1.0.4",
     "sharp": "^0.28.1",
+    "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.3.2",
     "styled-components": "^5.3.3",
     "threetwo-ui-typings": "^1.0.13",

src/client/actions/comicinfo.actions.tsx

@@ -15,6 +15,8 @@ import {
   CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS,
   CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS,
   CV_WEEKLY_PULLLIST_FETCHED,
+  LIBRARY_STATISTICS_CALL_IN_PROGRESS,
+  LIBRARY_STATISTICS_FETCHED,
 } from "../constants/action-types";
 import {
   COMICVINE_SERVICE_URI,
@@ -42,12 +44,13 @@ export const getWeeklyPullList = (options) => async (dispatch) => {
       method: "get",
       params: {
         startDate: "2022-2-9",
-        endDate: "2022-2-16",
+        pageSize: "15",
+        currentPage: "1",
       },
     }).then((response) => {
       dispatch({
         type: CV_WEEKLY_PULLLIST_FETCHED,
-        data: response.data.results,
+        data: response.data.result,
       });
     });
   } catch (error) {
@@ -144,6 +147,21 @@ export const analyzeLibrary = (issues) => async (dispatch) => {
   });
 };
 
+export const getLibraryStatistics = () => async dispatch => {
+  dispatch({
+    type: LIBRARY_STATISTICS_CALL_IN_PROGRESS,
+  });
+  const result = await axios({
+    url: `${LIBRARY_SERVICE_BASE_URI}/libraryStatistics`,
+    method: "GET",
+  });
+
+  dispatch({
+    type: LIBRARY_STATISTICS_FETCHED,
+    data: result.data,
+  });
+};
+
 export const getComicBookDetailById =
   (comicBookObjectId: string) => async (dispatch) => {
     dispatch({

src/client/assets/scss/App.scss

@@ -51,6 +51,13 @@ pre {
     // padding: 1.5rem 2rem;
   }
 }
+// slick slider overrides
+.slick-slider {
+  margin-left: -10px;
+  .slick-list {
+    padding: 0 0px 15px 10px;
+  }
+}
 .recent-comics-container {
   display: -webkit-box; /* Not needed if autoprefixing */
   display: -ms-flexbox; /* Not needed if autoprefixing */
@@ -69,7 +76,7 @@ pre {
 }
 .volumes-container {
   .stack {
-    max-width: 200px;
+    display: inline-block;
     border-radius: 0.3rem;
     box-shadow:
     /* The top layer shadow */ 0 -1px 1px rgba(0, 0, 0, 0.15),
@@ -140,7 +147,7 @@ pre {
 }
 
 .generic-card {
-  max-width: 200px;
+  display: inline-block;
   background-color: #fff;
   border-bottom-left-radius: 0.3rem;
   border-bottom-right-radius: 0.3rem;

src/client/components/Carda.tsx

@@ -11,6 +11,7 @@ interface ICardProps {
   borderColorClass?: string;
   backgroundColor?: string;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  cardContainerStyle?: PropTypes.object;
 }
 
 const renderCard = (props): ReactElement => {
@@ -20,7 +21,7 @@ const renderCard = (props): ReactElement => {
     case "vertical":
       return (
         <div onClick={props.onClick}>
-          <div className="generic-card">
+          <div className="generic-card" style={props.cardContainerStyle}>
             <div
               className={
                 !isNil(props.borderColorClass)

src/client/components/Dashboard/Dashboard.tsx

@@ -5,6 +5,7 @@ import { RecentlyImported } from "./RecentlyImported";
 import { VolumeGroups } from "./VolumeGroups";
 import { PullList } from "./PullList";
 import { getComicBooks } from "../../actions/fileops.actions";
+import { getLibraryStatistics } from "../../actions/comicinfo.actions";
 import { isEmpty, isNil, isUndefined } from "lodash";
 
 export const Dashboard = (): ReactElement => {
@@ -19,6 +20,7 @@ export const Dashboard = (): ReactElement => {
         },
       }),
     );
+    dispatch(getLibraryStatistics());
   }, [dispatch]);
   const recentComics = useSelector(
     (state: RootState) => state.fileOps.recentComics,
@@ -26,6 +28,10 @@ export const Dashboard = (): ReactElement => {
   const volumeGroups = useSelector(
     (state: RootState) => state.fileOps.comicVolumeGroups,
   );
+
+  const libraryStatistics = useSelector(
+    (state: RootState) => state.comicInfo.libraryStatistics,
+  );
   return (
     <div className="container">
       <section className="section">
@@ -38,15 +44,23 @@ export const Dashboard = (): ReactElement => {
 
             {/* stats */}
             <div>
+              <h4 className="title is-4">Statistics</h4>
               <div className="box stats-palette p-3 column is-one-quarter">
                 <dl>
                   <dd className="is-size-4">
-                    <span className="has-text-weight-bold">113123</span> files
+                    <span className="has-text-weight-bold">
+                      {libraryStatistics.totalDocuments}
+                    </span>{" "}
+                    files
                   </dd>
+                  {!isUndefined(libraryStatistics.statistics) && (
                     <dd className="is-size-6">
-                    <span className="has-text-weight-bold">140</span> tagged
+                      <span className="has-text-weight-bold">
-                    with ComicVine
+                        {libraryStatistics.statistics[0].issues.length}
+                      </span>{" "}
+                      tagged with ComicVine
                     </dd>
+                  )}
                   <dd className="is-size-6">
                     <span className="has-text-weight-bold">1304</span> with
                     custom metadata
@@ -57,13 +71,40 @@ export const Dashboard = (): ReactElement => {
               <div className="box stats-palette p-3 column ml-5">
                 <dl>
                   <dd className="is-size-6">
-                    <span className="has-text-weight-bold">1320</span> Issues
+                    <span className="has-text-weight-bold"></span> Issues
                   </dd>
                   <dd className="is-size-6">
                     <span className="has-text-weight-bold">304</span> Volumes
                   </dd>
                 </dl>
               </div>
+
+              {/* file types */}
+              <div className="box stats-palette p-3 column ml-5">
+                <dl>
+                  {!isUndefined(libraryStatistics.statistics) && (
+                    <dd className="is-size-6">
+                      <span className="has-text-weight-bold">
+                        {
+                          libraryStatistics.statistics[0]
+                            .publisherWithMostComicsInLibrary[0]._id
+                        }
+                      </span>
+                      {" has the most issues "}(
+                      <span className="has-text-weight-bold">
+                        {
+                          libraryStatistics.statistics[0]
+                            .publisherWithMostComicsInLibrary[0].count
+                        }
+                      </span>
+                      )
+                    </dd>
+                  )}
+                  <dd className="is-size-6">
+                    <span className="has-text-weight-bold">304</span> Volumes
+                  </dd>
+                </dl>
+              </div>
             </div>
             <RecentlyImported comicBookCovers={recentComics} />
             {!isNil(volumeGroups) ? <VolumeGroups /> : null}

src/client/components/Dashboard/PullList.tsx

@@ -1,9 +1,13 @@
 import { isNil, map } from "lodash";
-import React, { ReactElement, useEffect } from "react";
+import React, { createRef, 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";
+import ellipsize from "ellipsize";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 
 type PullListProps = {
   issues: any;
@@ -16,58 +20,106 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   }, []);
 
   const pullList = useSelector((state: RootState) => state.comicInfo.pullList);
+  let sliderRef = createRef();
+  const settings = {
+    dots: false,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 5,
+    slidesToScroll: 5,
+    initialSlide: 0,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 3,
+          infinite: false,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+          initialSlide: 0,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
 
-  const breakpointColumnsObj = {
+  const next = () => {
-    default: 5,
+    sliderRef.slickNext();
-    1100: 4,
+  };
-    700: 2,
+  const previous = () => {
-    600: 2,
+    sliderRef.slickPrev();
   };
   return (
     <>
       <div className="content">
         <h4 className="title is-4">Discover</h4>
         <p className="subtitle is-7">
-          Pull List aggregated for the week from ComicVine
+          Pull List aggregated for the week from League Of Comic Geeks
         </p>
+        <div className="field is-grouped">
           {/* select week */}
+          <div className="control">
             <div className="select is-small">
               <select>
                 <option>Select Week</option>
                 <option>With options</option>
               </select>
             </div>
+          </div>
           {/* See all pull list issues */}
+          <div className="control">
             <button className="button is-small">View all issues</button>
           </div>
-      <Masonry
+          <div className="field has-addons">
-        breakpointCols={breakpointColumnsObj}
+            <div className="control">
-        className="recent-comics-container"
+              <button className="button is-rounded is-small" onClick={previous}>
-        columnClassName="recent-comics-column"
+              <i className="fa-solid fa-caret-left"></i>
-      >
+              </button>
+            </div>
+            <div className="control">
+              <button className="button is-rounded is-small" onClick={next}>
+              <i className="fa-solid fa-caret-right"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Slider {...settings} ref={(c) => (sliderRef = c)}>
         {!isNil(pullList) &&
           pullList &&
           map(pullList, (issue) => {
             return (
               <Card
-                key={issue.id}
                 orientation={"vertical"}
-                imageUrl={issue.image.small_url}
+                imageUrl={issue.cover}
                 hasDetails
-                title={issue.name}
+                title={ellipsize(issue.name, 18)}
+                cardContainerStyle={{
+                  marginRight: 22,
+                  boxShadow: "-2px 4px 15px -6px rgba(0,0,0,0.57)",
+                }}
               >
                 <div className="content">
                   <div className="control">
-                    <span className="tags has-addons">
+                    <span className="tag">{issue.publisher}</span>
-                      <span className="tag is-primary is-light">Date</span>
-                      <span className="tag">{issue.store_date}</span>
-                    </span>
                   </div>
                 </div>
               </Card>
             );
           })}
-      </Masonry>
+      </Slider>
     </>
   );
 };

src/client/constants/action-types.ts

@@ -76,6 +76,12 @@ export const IMG_ANALYSIS_DATA_FETCH_SUCCESS =
   "IMG_ANALYSIS_DATA_FETCH_SUCCESS";
 export const IMG_ANALYSIS_DATA_FETCH_ERROR = "IMG_ANALYSIS_DATA_FETCH_ERROR";
 
+// library statistics
+export const LIBRARY_STATISTICS_CALL_IN_PROGRESS =
+  "LIBRARY_STATISTICS_CALL_IN_PROGRESS";
+export const LIBRARY_STATISTICS_FETCHED = "LIBRARY_STATISTICS_FETCHED";
+export const LIBRARY_STATISTICS_FETCH_ERROR = "LIBRARY_STATISTICS_FETCH_ERROR";
+
 // fileops cleanup
 export const FILEOPS_STATE_RESET = "FILEOPS_STATE_RESET";
 

src/client/reducers/comicinfo.reducer.js

@@ -11,10 +11,13 @@ import {
   CV_ISSUES_FOR_VOLUME_IN_LIBRARY_SUCCESS,
   CV_WEEKLY_PULLLIST_FETCHED,
   CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS,
+  LIBRARY_STATISTICS_CALL_IN_PROGRESS,
+  LIBRARY_STATISTICS_FETCHED,
 } from "../constants/action-types";
 
 const initialState = {
   pullList: [],
+  libraryStatistics: [],
   searchResults: [],
   searchQuery: {},
   inProgress: false,
@@ -114,6 +117,18 @@ function comicinfoReducer(state = initialState, action) {
         pullList: [...action.data],
       };
     }
+    case LIBRARY_STATISTICS_CALL_IN_PROGRESS:
+      return {
+        inProgress: true,
+        ...state,
+      };
+    case LIBRARY_STATISTICS_FETCHED:
+      console.log(action);
+      return {
+        ...state,
+        inProgress: false,
+        libraryStatistics: action.data,
+      };
     default:
       return state;
   }

yarn.lock

@@ -5009,6 +5009,11 @@ enhanced-resolve@^5.8.3:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ=
+
 enquirer@^2.3.5:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
@@ -8168,6 +8173,13 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
+  dependencies:
+    string-convert "^0.2.0"
+
 json3@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
@@ -11097,6 +11109,17 @@ react-select@^5.2.1:
     prop-types "^15.6.0"
     react-transition-group "^4.3.0"
 
+react-slick@^0.28.1:
+  version "0.28.1"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.28.1.tgz#12c18d991b59432df9c3757ba540a227b3fb85b9"
+  integrity sha512-JwRQXoWGJRbUTE7eZI1rGIHaXX/4YuwX6gn7ulfvUZ4vFDVQAA25HcsHSYaUiRCduTr6rskyIuyPMpuG6bbluw==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react-sliding-pane@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/react-sliding-pane/-/react-sliding-pane-7.1.0.tgz#6f44bfd367a9e8affdfd52a601e64ece53af5cb8"
@@ -11546,6 +11569,11 @@ requizzle@^0.2.3:
   dependencies:
     lodash "^4.17.14"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -12071,6 +12099,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
+
 slugify@^1.6.5:
   version "1.6.5"
   resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.5.tgz#c8f5c072bf2135b80703589b39a3d41451fbe8c8"
@@ -12433,6 +12466,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"