From 103cc7fa91c4c8d58c11d16f63d8558098101837 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Thu, 3 Mar 2022 14:57:22 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=99=8B=F0=9F=8F=BD=E2=80=8D=E2=99=82?= =?UTF-8?q?=EF=B8=8F=20Wanted=20comics=20section=20on=20dashboard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/fileops.actions.tsx | 67 +++++++------ src/client/components/ComicDetail.tsx | 1 - src/client/components/Dashboard/Dashboard.tsx | 31 ++++++- .../components/Dashboard/VolumeGroups.tsx | 59 +++++------- .../components/Dashboard/WantedComicsList.tsx | 93 +++++++++++++++++++ src/client/constants/action-types.ts | 3 + src/client/reducers/fileops.reducer.ts | 9 ++ 7 files changed, 193 insertions(+), 70 deletions(-) create mode 100644 src/client/components/Dashboard/WantedComicsList.tsx diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 0743932..fac33ec 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -12,6 +12,7 @@ import { IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS, IMS_COMIC_BOOK_GROUPS_CALL_FAILED, IMS_RECENT_COMICS_FETCHED, + IMS_WANTED_COMICS_FETCHED, CV_API_CALL_IN_PROGRESS, CV_SEARCH_SUCCESS, CV_CLEANUP, @@ -83,21 +84,33 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => { }; export const getComicBooks = (options) => async (dispatch) => { - const { paginationOptions } = options; - return axios - .request({ - url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`, - method: "POST", - data: { - paginationOptions, - }, - }) - .then((response) => { + const { paginationOptions, predicate, comicStatus } = options; + + const response = await axios.request({ + url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`, + method: "POST", + data: { + paginationOptions, + predicate, + }, + }); + + switch (comicStatus) { + case "recent": dispatch({ type: IMS_RECENT_COMICS_FETCHED, data: response.data, }); - }); + break; + case "wanted": + dispatch({ + type: IMS_WANTED_COMICS_FETCHED, + data: response.data.docs, + }); + break; + default: + console.log("Unrecognized comic status."); + } }; export const importToDB = (payload?: any) => (dispatch) => { @@ -111,6 +124,7 @@ export const importToDB = (payload?: any) => (dispatch) => { }, }, sourcedMetadata: { comicvine: payload || null }, + acquisition: { wanted: true }, }; dispatch({ type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS, @@ -136,37 +150,30 @@ export const importToDB = (payload?: any) => (dispatch) => { }); } }; -export const fetchVolumeGroups = () => (dispatch) => { +export const fetchVolumeGroups = () => async (dispatch) => { try { dispatch({ type: IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS, }); - axios - .request({ - url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookGroups`, - method: "GET", - }) - .then((data) => { - dispatch({ - type: IMS_COMIC_BOOK_GROUPS_FETCHED, - data: data.data, - }); - }); - } catch (error) { - dispatch({ - type: IMS_COMIC_BOOK_GROUPS_CALL_FAILED, - error, + const response = await axios.request({ + url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookGroups`, + method: "GET", }); + + dispatch({ + type: IMS_COMIC_BOOK_GROUPS_FETCHED, + data: response.data, + }); + } catch (error) { + console.log(error); } }; export const fetchComicVineMatches = - (searchPayload, issueSearchQuery, seriesSearchQuery?) => (dispatch) => { + (searchPayload, issueSearchQuery, seriesSearchQuery?) => async (dispatch) => { try { dispatch({ type: CV_API_CALL_IN_PROGRESS, }); - console.log(issueSearchQuery); - console.log(seriesSearchQuery); axios .request({ url: `${COMICVINE_SERVICE_URI}/volumeBasedSearch`, diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 48aba9d..0be9c2b 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -4,7 +4,6 @@ import { useParams } from "react-router-dom"; import Card from "./Carda"; import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel"; import { VolumeInformation } from "./ComicDetail/Tabs/VolumeInformation"; -import { ComicVineDetails } from "./ComicDetail/ComicVineDetails"; import { RawFileDetails } from "./ComicDetail/RawFileDetails"; import { ArchiveOperations } from "./ComicDetail/Tabs/ArchiveOperations"; import AcquisitionPanel from "./ComicDetail/AcquisitionPanel"; diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx index 898a7f6..5c1c830 100644 --- a/src/client/components/Dashboard/Dashboard.tsx +++ b/src/client/components/Dashboard/Dashboard.tsx @@ -2,16 +2,21 @@ import React, { ReactElement, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import ZeroState from "./ZeroState"; import { RecentlyImported } from "./RecentlyImported"; +import { WantedComicsList } from "./WantedComicsList"; import { VolumeGroups } from "./VolumeGroups"; import { PullList } from "./PullList"; -import { getComicBooks } from "../../actions/fileops.actions"; +import { + fetchVolumeGroups, + getComicBooks, +} from "../../actions/fileops.actions"; import { getLibraryStatistics } from "../../actions/comicinfo.actions"; -import { isEmpty, isNil, isUndefined, map } from "lodash"; +import { isEmpty, isUndefined, map } from "lodash"; import prettyBytes from "pretty-bytes"; export const Dashboard = (): ReactElement => { const dispatch = useDispatch(); useEffect(() => { + dispatch(fetchVolumeGroups()); dispatch( getComicBooks({ paginationOptions: { @@ -19,13 +24,30 @@ export const Dashboard = (): ReactElement => { limit: 5, sort: { updatedAt: "-1" }, }, + predicate: { "acquisition.wanted": false }, + comicStatus: "recent", + }), + ); + dispatch( + getComicBooks({ + paginationOptions: { + page: 0, + limit: 5, + sort: { updatedAt: "-1" }, + }, + predicate: { "acquisition.wanted": true }, + comicStatus: "wanted", }), ); dispatch(getLibraryStatistics()); - }, [dispatch]); + }, []); + const recentComics = useSelector( (state: RootState) => state.fileOps.recentComics, ); + const wantedComics = useSelector( + (state: RootState) => state.fileOps.wantedComics, + ); const volumeGroups = useSelector( (state: RootState) => state.fileOps.comicVolumeGroups, ); @@ -153,8 +175,9 @@ export const Dashboard = (): ReactElement => { + - {!isNil(volumeGroups) ? : null} + ) : ( { +export const VolumeGroups = (props): ReactElement => { const breakpointColumnsObj = { default: 5, 1100: 4, 700: 2, 500: 1, }; - const dispatch = useDispatch(); - useEffect(() => { - dispatch(fetchVolumeGroups()); - }, [dispatch]); - const volumeGroups = useSelector( - (state: RootState) => state.fileOps.comicVolumeGroups, - ); return (
@@ -31,32 +22,30 @@ export const VolumeGroups = (): ReactElement => { className="volumes-grid" columnClassName="volumes-grid-column" > - {!isNil(volumeGroups) && - volumeGroups && - map(volumeGroups, (group) => { - if (!isNil(group._id)) { - return ( -
- -
-
- - {ellipsize(group.data[0].name, 18)} - -
-
- - Issues - - {group.data[0].count_of_issues} - + {map(props.volumeGroups, (data) => { + return map(data.data, (group) => { + return ( +
+ +
+
+ + {ellipsize(group.volume.name, 18)} + +
+
+ + Issues + + {group.volume.count_of_issues} -
+
- ); - } - })} +
+ ); + }); + })}
); diff --git a/src/client/components/Dashboard/WantedComicsList.tsx b/src/client/components/Dashboard/WantedComicsList.tsx new file mode 100644 index 0000000..5ecc1ec --- /dev/null +++ b/src/client/components/Dashboard/WantedComicsList.tsx @@ -0,0 +1,93 @@ +import React, { ReactElement } from "react"; +import Card from "../Carda"; +import { Link } from "react-router-dom"; +import ellipsize from "ellipsize"; +import { isEmpty, isNil, isUndefined, map } from "lodash"; +import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils"; +import Masonry from "react-masonry-css"; + +type WantedComicsListProps = { + comics: any; +}; + +export const WantedComicsList = ({ + comics, +}: WantedComicsListProps): ReactElement => { + const breakpointColumnsObj = { + default: 5, + 1100: 4, + 700: 2, + 600: 2, + }; + + return ( + <> +
+

Wanted Comics

+

+ Comics marked as wanted from various sources. +

+
+ + {map(comics, ({ _id, rawFileDetails, sourcedMetadata }) => { + const isComicBookMetadataAvailable = + sourcedMetadata && + !isUndefined(sourcedMetadata.comicvine) && + !isUndefined(sourcedMetadata.comicvine.volumeInformation) && + !isEmpty(sourcedMetadata); + let imagePath = ""; + let comicName = ""; + if (isComicBookMetadataAvailable) { + imagePath = sourcedMetadata.comicvine.image.small_url; + comicName = sourcedMetadata.comicvine.name; + } + const titleElement = ( + {ellipsize(comicName, 20)} + ); + return ( + No Name} + > +
+ {isComicBookMetadataAvailable && ( + + + + )} + {/* Raw file presence */} + {isEmpty(rawFileDetails.cover) && ( + + + + )} + {/* Issue type */} + {isComicBookMetadataAvailable && + !isNil( + detectIssueTypes( + sourcedMetadata.comicvine.volumeInformation.description, + ), + ) ? ( + + { + detectIssueTypes( + sourcedMetadata.comicvine.volumeInformation.description, + ).displayName + } + + ) : null} +
+ + ); + })} + + + ); +}; diff --git a/src/client/constants/action-types.ts b/src/client/constants/action-types.ts index be8d735..51cd229 100644 --- a/src/client/constants/action-types.ts +++ b/src/client/constants/action-types.ts @@ -41,6 +41,9 @@ export const IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS = export const IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED = "IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED"; +// wanted comics from CV, LoCG and other sources +export const IMS_WANTED_COMICS_FETCHED = "IMS_WANTED_COMICS_FETCHED"; + // volume groups export const IMS_COMIC_BOOK_GROUPS_FETCHED = "IMS_COMIC_BOOK_GROUPS_FETCHED"; export const IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS = diff --git a/src/client/reducers/fileops.reducer.ts b/src/client/reducers/fileops.reducer.ts index f44ebff..ce6e75d 100644 --- a/src/client/reducers/fileops.reducer.ts +++ b/src/client/reducers/fileops.reducer.ts @@ -5,6 +5,7 @@ import { IMS_RAW_IMPORT_SUCCESSFUL, IMS_RAW_IMPORT_FAILED, IMS_RECENT_COMICS_FETCHED, + IMS_WANTED_COMICS_FETCHED, IMS_CV_METADATA_IMPORT_SUCCESSFUL, IMS_CV_METADATA_IMPORT_FAILED, IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS, @@ -32,6 +33,8 @@ const initialState = { comicVineMetadataImportError: {}, rawImportError: {}, extractedComicBookArchive: [], + recentComics: [], + wantedComics: [], }; function fileOpsReducer(state = initialState, action) { @@ -65,6 +68,12 @@ function fileOpsReducer(state = initialState, action) { ...state, recentComics: action.data, }; + case IMS_WANTED_COMICS_FETCHED: + console.log(action.data); + return { + ...state, + wantedComics: action.data, + }; case IMS_CV_METADATA_IMPORT_SUCCESSFUL: return { ...state,