From 3173cbf87383f3ab79ab5f09677c423922034b14 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Thu, 19 May 2022 22:57:26 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fix=20for=20https://github.com/r?= =?UTF-8?q?ishighan/threetwo/issues/10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/fileops.actions.tsx | 2 +- src/client/assets/scss/App.scss | 2 +- .../ComicDetail/AcquisitionPanel.tsx | 2 +- .../components/ComicDetail/DownloadsPanel.tsx | 1 - src/client/components/Dashboard/PullList.tsx | 28 ++++++- .../components/Dashboard/RecentlyImported.tsx | 75 +++++++++---------- src/client/components/PullList/PullList.tsx | 2 +- src/client/components/Search.tsx | 2 +- src/client/shared/utils/metadata.utils.ts | 60 +++++++++++++++ 9 files changed, 128 insertions(+), 46 deletions(-) create mode 100644 src/client/shared/utils/metadata.utils.ts diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 93249d1..f3adfe5 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -142,7 +142,7 @@ export const importToDB = (payload?: any) => (dispatch) => { score: "0", }, }, - sourcedMetadata: { comicvine: payload || null }, + sourcedMetadata: payload || null, acquisition: { wanted: true }, }; dispatch({ diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 2ec0ae9..888ef78 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -24,7 +24,7 @@ $colorText: #404646; .small-tag { align-items: center; - background-color: #ddc096; + background-color: #fff6de; border-radius: 4px; color: #4a4a4a; display: inline-flex; diff --git a/src/client/components/ComicDetail/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx index b5bf975..d5e8b81 100644 --- a/src/client/components/ComicDetail/AcquisitionPanel.tsx +++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx @@ -110,7 +110,7 @@ export const AcquisitionPanel = ( }), ); }, - [dispatch], + [], ); return ( diff --git a/src/client/components/ComicDetail/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx index 1b5b192..cdd6ec2 100644 --- a/src/client/components/ComicDetail/DownloadsPanel.tsx +++ b/src/client/components/ComicDetail/DownloadsPanel.tsx @@ -26,7 +26,6 @@ export const DownloadsPanel = ( return state.airdcpp.bundles; }); - console.log(bundles); // AirDCPP Socket initialization const userSettings = useSelector((state: RootState) => state.settings.data); const { ADCPPSocket } = useContext(AirDCPPSocketContext); diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx index 0176da4..80f3a79 100644 --- a/src/client/components/Dashboard/PullList.tsx +++ b/src/client/components/Dashboard/PullList.tsx @@ -1,9 +1,10 @@ import { isNil, map } from "lodash"; -import React, { createRef, ReactElement, useEffect } from "react"; +import React, { createRef, ReactElement, useCallback, 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 { importToDB } from "../../actions/fileops.actions"; import ellipsize from "ellipsize"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; @@ -19,12 +20,27 @@ export const PullList = ({ issues }: PullListProps): ReactElement => { useEffect(() => { dispatch( getWeeklyPullList({ - startDate: "2022-5-17", + startDate: "2022-5-1", pageSize: "15", currentPage: "1", }), ); }, []); + const addToLibrary = useCallback( + (locgMetadata) => dispatch(importToDB({ locg: locgMetadata })), + [], + ); + /* + const foo = { + coverFile: {}, // pointer to which cover file to use + rawFileDetails: {}, // #1 + sourcedMetadata: { + comicInfo: {}, + comicvine: {}, // #2 + locg: {}, // #2 + }, + }; + */ const pullList = useSelector((state: RootState) => state.comicInfo.pullList); let sliderRef = createRef(); @@ -125,6 +141,14 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
{issue.publisher}
+
+ +
); diff --git a/src/client/components/Dashboard/RecentlyImported.tsx b/src/client/components/Dashboard/RecentlyImported.tsx index 9ea1768..3c3a862 100644 --- a/src/client/components/Dashboard/RecentlyImported.tsx +++ b/src/client/components/Dashboard/RecentlyImported.tsx @@ -7,6 +7,7 @@ import { isEmpty, isNil, isUndefined, map } from "lodash"; import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils"; import Masonry from "react-masonry-css"; import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints"; +import { determineCoverFile } from "../../shared/utils/metadata.utils"; type RecentlyImportedProps = { comicBookCovers: any; @@ -37,27 +38,29 @@ export const RecentlyImported = ({ > {map( comicBookCovers.docs, - ({ _id, rawFileDetails, sourcedMetadata }) => { + ({ + _id, + rawFileDetails, + sourcedMetadata: { comicvine, comicInfo, locg }, + }) => { + const consolidatedComicMetadata = { + rawFileDetails, + comicvine, + comicInfo, + locg, + }; + + const { issueName, url } = determineCoverFile( + consolidatedComicMetadata, + ); + const isComicBookMetadataAvailable = - sourcedMetadata && - !isUndefined(sourcedMetadata.comicvine) && - !isUndefined(sourcedMetadata.comicvine.volumeInformation) && - !isEmpty(sourcedMetadata); - let imagePath = ""; - let comicName = ""; - if (!isEmpty(rawFileDetails.cover)) { - const encodedFilePath = encodeURI( - `${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`, - ); - imagePath = escapePoundSymbol(encodedFilePath); - comicName = rawFileDetails.name; - } else if (!isEmpty(sourcedMetadata.comicvine)) { - imagePath = sourcedMetadata.comicvine.image.small_url; - comicName = sourcedMetadata.comicvine.name; - } + !isUndefined(comicvine) && + !isUndefined(comicvine.volumeInformation); + const titleElement = ( - {ellipsize(comicName, 20)} + {ellipsize(issueName, 20)} ); return ( @@ -65,9 +68,9 @@ export const RecentlyImported = ({
{isComicBookMetadataAvailable && ( @@ -82,27 +85,23 @@ export const RecentlyImported = ({ )} {/* ComicInfo.xml presence */} - {!isNil(sourcedMetadata.comicInfo) && - !isEmpty(sourcedMetadata.comicInfo) && ( - - {"ComicInfo.xml - - )} + {!isNil(comicInfo) && !isEmpty(comicInfo) && ( + + {"ComicInfo.xml + + )} {/* Issue type */} {isComicBookMetadataAvailable && !isNil( - detectIssueTypes( - sourcedMetadata.comicvine.volumeInformation.description, - ), + detectIssueTypes(comicvine.volumeInformation.description), ) ? ( { detectIssueTypes( - sourcedMetadata.comicvine.volumeInformation - .description, + comicvine.volumeInformation.description, ).displayName } @@ -110,17 +109,17 @@ export const RecentlyImported = ({
{/* original reference */} - {!isUndefined(sourcedMetadata.comicvine.image) ? ( + {!isUndefined(comicvine.image) ? (
+
{ellipsize(comicvine.volumeInformation.name, 22)}
- {ellipsize(sourcedMetadata.comicvine.volumeInformation.name, 22)} + {comicvine.id}
-
{sourcedMetadata.comicvine.id}
 ) : null} diff --git a/src/client/components/PullList/PullList.tsx b/src/client/components/PullList/PullList.tsx index 173be1a..2b63b69 100644 --- a/src/client/components/PullList/PullList.tsx +++ b/src/client/components/PullList/PullList.tsx @@ -14,7 +14,7 @@ export const PullList = (): ReactElement => { useEffect(() => { dispatch( getWeeklyPullList({ - startDate: "2022-4-12", + startDate: "2022-5-15", pageSize: "100", currentPage: "1", }), diff --git a/src/client/components/Search.tsx b/src/client/components/Search.tsx index 51a5de6..f464646 100644 --- a/src/client/components/Search.tsx +++ b/src/client/components/Search.tsx @@ -37,7 +37,7 @@ export const Search = ({}: ISearchProps): ReactElement => { ); const addToLibrary = useCallback( - (comicData) => dispatch(importToDB(comicData)), + (comicData) => dispatch(importToDB({ comicvine: comicData })), [], ); diff --git a/src/client/shared/utils/metadata.utils.ts b/src/client/shared/utils/metadata.utils.ts new file mode 100644 index 0000000..92009fd --- /dev/null +++ b/src/client/shared/utils/metadata.utils.ts @@ -0,0 +1,60 @@ +import { filter, isEmpty, isUndefined, min, minBy } from "lodash"; +import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints"; +import { escapePoundSymbol } from "./formatting.utils"; + +export const determineCoverFile = (data) => { + /* For a payload like this: + const foo = { + rawFileDetails: {}, // #1 + comicInfo: {}, + comicvine: {}, // #2 + locg: {}, // #3 + }; + */ + const coverFile = { + rawFile: { + priority: 1, + url: "", + issueName: "", + }, + comicvine: { + priority: 2, + url: "", + issueName: "", + }, + locg: { + priority: 3, + url: "", + issueName: "", + }, + }; + if ( + !isUndefined(data.comicvine) && + !isUndefined(data.comicvine.volumeInformation) + ) { + coverFile.comicvine.url = data.comicvine.image.small_url; + coverFile.comicvine.issueName = data.comicvine.name; + } + if (!isEmpty(data.rawFileDetails.cover)) { + const encodedFilePath = encodeURI( + `${LIBRARY_SERVICE_HOST}/${data.rawFileDetails.cover.filePath}`, + ); + coverFile.rawFile.url = escapePoundSymbol(encodedFilePath); + coverFile.rawFile.issueName = data.rawFileDetails.name; + } + if (!isUndefined(data.locg)) { + coverFile.locg.url = data.locg.cover; + coverFile.locg.issueName = data.locg.name; + } + + const result = filter(coverFile, (item) => item.url !== ""); + + if (result.length > 1) { + const highestPriorityCoverFile = minBy(result, (item) => item.priority); + if (!isUndefined(highestPriorityCoverFile)) { + return highestPriorityCoverFile; + } + } else { + return result[0]; + } +};