🎠 Weekly Pull list carousel first draft

2022-02-15 15:31:29 -08:00
parent 8ff12e5e02
commit 635e70ba81
9 changed files with 220 additions and 40 deletions
--- a/package.json
+++ b/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",
--- a/src/client/actions/comicinfo.actions.tsx
+++ b/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({
--- a/src/client/assets/scss/App.scss
+++ b/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;
@@ -410,7 +417,7 @@ pre {
 .potential-matches-container {
  .potential-issue-match {
    border-radius: 0.3rem;
-    background-color: beige; 
+    background-color: beige;
    padding: 10px;
    pre {
      padding: 5px;
--- a/src/client/components/Carda.tsx
+++ b/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)
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/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}
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/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>
    </>
  );
 };
--- a/src/client/constants/action-types.ts
+++ b/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";

--- a/src/client/reducers/comicinfo.reducer.js
+++ b/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;
  }
--- a/yarn.lock
+++ b/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"