🎠 Weekly Pull list carousel first draft

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
-                  </dd>
-                  <dd className="is-size-6">
-                    <span className="has-text-weight-bold">140</span> tagged
-                    with ComicVine
+                    <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">
+                        {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 = {
-    default: 5,
-    1100: 4,
-    700: 2,
-    600: 2,
+  const next = () => {
+    sliderRef.slickNext();
+  };
+  const previous = () => {
+    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>
-        {/* select week */}
-        <div className="select is-small">
-          <select>
-            <option>Select Week</option>
-            <option>With options</option>
-          </select>
+        <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>
+          <div className="field has-addons">
+            <div className="control">
+              <button className="button is-rounded is-small" onClick={previous}>
+              <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>
-        {/* 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"
-      >
+      <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 is-primary is-light">Date</span>
-                      <span className="tag">{issue.store_date}</span>
-                    </span>
+                    <span className="tag">{issue.publisher}</span>
                   </div>
                 </div>
               </Card>
             );
           })}
-      </Masonry>
+      </Slider>
     </>
   );
 };