From 635e70ba81de38d861f3d2c1337b4434c3a90fc2 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Tue, 15 Feb 2022 15:31:29 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A0=20Weekly=20Pull=20list=20carousel?= =?UTF-8?q?=20first=20draft?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/client/actions/comicinfo.actions.tsx | 22 +++- src/client/assets/scss/App.scss | 13 ++- src/client/components/Carda.tsx | 3 +- src/client/components/Dashboard/Dashboard.tsx | 53 ++++++++- src/client/components/Dashboard/PullList.tsx | 108 +++++++++++++----- src/client/constants/action-types.ts | 6 + src/client/reducers/comicinfo.reducer.js | 15 +++ yarn.lock | 38 ++++++ 9 files changed, 220 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 73e5cd2..2e59be9 100644 --- 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", diff --git a/src/client/actions/comicinfo.actions.tsx b/src/client/actions/comicinfo.actions.tsx index c56935c..20846bc 100644 --- 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({ diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 45bdfed..5260606 100644 --- 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; diff --git a/src/client/components/Carda.tsx b/src/client/components/Carda.tsx index b9c05e9..898aec8 100644 --- 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) => void; + cardContainerStyle?: PropTypes.object; } const renderCard = (props): ReactElement => { @@ -20,7 +21,7 @@ const renderCard = (props): ReactElement => { case "vertical": return (
-
+
{ @@ -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 (
@@ -38,15 +44,23 @@ export const Dashboard = (): ReactElement => { {/* stats */}
+

Statistics

- 113123 files -
-
- 140 tagged - with ComicVine + + {libraryStatistics.totalDocuments} + {" "} + files
+ {!isUndefined(libraryStatistics.statistics) && ( +
+ + {libraryStatistics.statistics[0].issues.length} + {" "} + tagged with ComicVine +
+ )}
1304 with custom metadata @@ -57,13 +71,40 @@ export const Dashboard = (): ReactElement => {
- 1320 Issues + Issues
304 Volumes
+ + {/* file types */} +
+
+ {!isUndefined(libraryStatistics.statistics) && ( +
+ + { + libraryStatistics.statistics[0] + .publisherWithMostComicsInLibrary[0]._id + } + + {" has the most issues "}( + + { + libraryStatistics.statistics[0] + .publisherWithMostComicsInLibrary[0].count + } + + ) +
+ )} +
+ 304 Volumes +
+
+
{!isNil(volumeGroups) ? : null} diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx index 9ca1e46..3480252 100644 --- 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 ( <>

Discover

- Pull List aggregated for the week from ComicVine + Pull List aggregated for the week from League Of Comic Geeks

- {/* select week */} -
- +
+ {/* select week */} +
+
+ +
+
+ {/* See all pull list issues */} +
+ +
+
+
+ +
+
+ +
+
- {/* See all pull list issues */} -
- + (sliderRef = c)}> {!isNil(pullList) && pullList && map(pullList, (issue) => { return (
- - Date - {issue.store_date} - + {issue.publisher}
); })} - + ); }; diff --git a/src/client/constants/action-types.ts b/src/client/constants/action-types.ts index 380aa8d..be8d735 100644 --- 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"; diff --git a/src/client/reducers/comicinfo.reducer.js b/src/client/reducers/comicinfo.reducer.js index 4c739a2..71dc21f 100644 --- 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; } diff --git a/yarn.lock b/yarn.lock index 4553a6a..fd6809d 100644 --- 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"