🎠 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/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;
  }