diff --git a/src/client/actions/airdcpp.actions.tsx b/src/client/actions/airdcpp.actions.tsx index bc19c78..afca6f4 100644 --- a/src/client/actions/airdcpp.actions.tsx +++ b/src/client/actions/airdcpp.actions.tsx @@ -117,6 +117,7 @@ export const downloadAirDCPPItem = instanceId: string, resultId: string, comicObjectId: string, + comicObject: any, ADCPPSocket: any, credentials: any, ): void => @@ -129,6 +130,7 @@ export const downloadAirDCPPItem = true, ); } + console.log(comicObject) let bundleDBImportResult = {}; const downloadResult = await ADCPPSocket.post( `search/${instanceId}/results/${resultId}/download`, @@ -143,7 +145,7 @@ export const downloadAirDCPPItem = dispatch({ type: LS_SINGLE_IMPORT, meta: { remote: true }, - data: { downloadStatus, comicObjectId }, + data: { downloadStatus, comicObjectId, comicObject }, }); } count += 1; @@ -160,7 +162,7 @@ export const downloadAirDCPPItem = (item) => item.id, ); } - + console.log(comicObjectId) if (!isNil(downloadResult)) { bundleDBImportResult = await axios({ method: "POST", diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index f3adfe5..33db13b 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -132,9 +132,12 @@ export const getComicBooks = (options) => async (dispatch) => { * @returns Nothing. * @param payload */ -export const importToDB = (payload?: any) => (dispatch) => { +export const importToDB = (sourceName: string, payload?: any) => (dispatch) => { try { const comicBookMetadata = { + rawFileDetails: { + name: "", + }, importStatus: { isImported: true, tagged: false, @@ -143,7 +146,7 @@ export const importToDB = (payload?: any) => (dispatch) => { }, }, sourcedMetadata: payload || null, - acquisition: { wanted: true }, + acquisition: { source: { wanted: true, name: sourceName } }, }; dispatch({ type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS, @@ -153,7 +156,7 @@ export const importToDB = (payload?: any) => (dispatch) => { url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`, method: "POST", data: comicBookMetadata, - transformResponse: (r: string) => JSON.parse(r), + // transformResponse: (r: string) => JSON.parse(r), }) .then((response) => { const { data } = response; diff --git a/src/client/assets/img/cvlogo.svg b/src/client/assets/img/cvlogo.svg index 55423b9..0cf1d87 100644 --- a/src/client/assets/img/cvlogo.svg +++ b/src/client/assets/img/cvlogo.svg @@ -1,5 +1,5 @@ - + diff --git a/src/client/assets/img/locglogo.svg b/src/client/assets/img/locglogo.svg index 8461007..4c79de3 100644 --- a/src/client/assets/img/locglogo.svg +++ b/src/client/assets/img/locglogo.svg @@ -1,7 +1,7 @@ - LCG - - + LCG + + diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 888ef78..52d76d5 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -245,6 +245,7 @@ pre { flex: 1 1 auto; display: flex; .card-image { + // leaving this here... for posterity img.image { border-top-left-radius: 8px; border-bottom-left-radius: 8px; @@ -255,6 +256,18 @@ pre { object-fit: cover; flex: 1 1 auto; } + img.cropped-image { + width: 70px; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + height: 64px; + object-fit: cover; + object-position: 100% 0; + // flex: 1 1 auto; + + } } } .card-content { diff --git a/src/client/components/Carda.tsx b/src/client/components/Carda.tsx index 461f280..2d975bd 100644 --- a/src/client/components/Carda.tsx +++ b/src/client/components/Carda.tsx @@ -25,7 +25,7 @@ const renderCard = (props): ReactElement => { Placeholder image {props.hasDetails && ( @@ -34,9 +34,6 @@ const renderCard = (props): ReactElement => { - - - ); case "vertical": return ( diff --git a/src/client/components/ComicDetail/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx index 0ba20f2..7454983 100644 --- a/src/client/components/ComicDetail/AcquisitionPanel.tsx +++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx @@ -19,12 +19,15 @@ import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; interface IAcquisitionPanelProps { query: any; comicObjectid: any; + comicObject: any; + userSettings: any; } export const AcquisitionPanel = ( props: IAcquisitionPanelProps, ): ReactElement => { - const issueName = props.query.issue.name; + const issueName = props.query.issue.name || ""; + const { userSettings } = props; const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " "); // Selectors for picking state @@ -41,11 +44,11 @@ export const AcquisitionPanel = ( (state: RootState) => state.airdcpp.searchInstance, ); - const userSettings = useSelector((state: RootState) => state.settings.data); + // const userSettings = useSelector((state: RootState) => state.settings.data); const { ADCPPSocket } = useContext(AirDCPPSocketContext); const dispatch = useDispatch(); const [dcppQuery, setDcppQuery] = useState({}); - + console.log(ADCPPSocket); useEffect(() => { if (!isNil(userSettings.directConnect)) { // AirDC++ search query @@ -89,12 +92,13 @@ export const AcquisitionPanel = ( // download via AirDC++ const downloadDCPPResult = useCallback( - (searchInstanceId, resultId, comicBookObjectId) => { + (searchInstanceId, resultId, comicBookObjectId, comicObject) => { dispatch( downloadAirDCPPItem( searchInstanceId, resultId, comicBookObjectId, + comicObject, ADCPPSocket, { username: `${userSettings.directConnect.client.host.username}`, @@ -293,6 +297,7 @@ export const AcquisitionPanel = ( searchInstance.id, result.id, props.comicObjectid, + props.comicObject, ) } > diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx index 7060654..0f155b5 100644 --- a/src/client/components/ComicDetail/ComicDetail.tsx +++ b/src/client/components/ComicDetail/ComicDetail.tsx @@ -31,9 +31,6 @@ import SlidingPane from "react-sliding-pane"; import Modal from "react-modal"; import ComicViewer from "react-comic-viewer"; -import { getSettings } from "../../actions/settings.actions"; -import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; -import AirDCPPSocket from "../../services/DcppSearchService"; import { extractComicArchive } from "../../actions/fileops.actions"; import { determineCoverFile } from "../../shared/utils/metadata.utils"; @@ -68,8 +65,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { (state: RootState) => state.fileOps.extractedComicBookArchive, ); const { comicObjectId } = useParams<{ comicObjectId: string }>(); - const userSettings = useSelector((state: RootState) => state.settings.data); - const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext); + const dispatch = useDispatch(); const openModal = useCallback((filePath) => { @@ -86,24 +82,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { setIsOpen(false); }, []); - useEffect(() => { - dispatch(getSettings()); - }, [page, dispatch]); - - useEffect(() => { - if (isEmpty(ADCPPSocket) && !isNil(userSettings.directConnect)) { - setADCPPSocket( - new AirDCPPSocket({ - protocol: `${userSettings.directConnect.client.host.protocol}`, - hostname: `${userSettings.directConnect.client.host.hostname}`, - }), - ); - } - }, [userSettings]); - - // destructure props - console.log(ADCPPSocket) - // sliding panel init const contentForSlidingPanel = { CVMatches: { @@ -147,7 +125,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { rawFileDetails, inferredMetadata, sourcedMetadata: { comicvine, locg, comicInfo }, - }, + }, userSettings, } = data; // check for the availability of CV metadata @@ -207,7 +185,13 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { icon: , name: "Acquisition", content: ( - + ), shouldShow: true, }, diff --git a/src/client/components/ComicDetail/ComicDetailContainer.tsx b/src/client/components/ComicDetail/ComicDetailContainer.tsx index bf221d2..43d4215 100644 --- a/src/client/components/ComicDetail/ComicDetailContainer.tsx +++ b/src/client/components/ComicDetail/ComicDetailContainer.tsx @@ -1,13 +1,13 @@ -import { isEmpty, isUndefined } from "lodash"; -import React, { ReactElement, useEffect, useState } from "react"; +import { isEmpty, isNil, isUndefined } from "lodash"; +import React, { ReactElement, useContext, useEffect, useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { useParams } from "react-router-dom"; import { getComicBookDetailById } from "../../actions/comicinfo.actions"; import { ComicDetail } from "../ComicDetail/ComicDetail"; -import { escapePoundSymbol } from "../../shared/utils/formatting.utils"; -import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints"; import { getSettings } from "../../actions/settings.actions"; +import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; +import AirDCPPSocket from "../../services/DcppSearchService"; export const ComicDetailContainer = (): ReactElement | null => { @@ -15,12 +15,28 @@ export const ComicDetailContainer = (): ReactElement | null => { (state: RootState) => state.comicInfo.comicBookDetail, ); const dispatch = useDispatch(); + useEffect(() => { + dispatch(getSettings()); + }, [dispatch]); + const userSettings = useSelector((state: RootState) => state.settings.data); + const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext); + + useEffect(() => { + if (isEmpty(ADCPPSocket) && !isNil(userSettings.directConnect)) { + setADCPPSocket( + new AirDCPPSocket({ + protocol: `${userSettings.directConnect.client.host.protocol}`, + hostname: `${userSettings.directConnect.client.host.hostname}`, + }), + ); + } + }, [userSettings]); const { comicObjectId } = useParams<{ comicObjectId: string }>(); useEffect(() => { dispatch(getComicBookDetailById(comicObjectId)); // dispatch(getSettings()); }, [dispatch]); return !isEmpty(comicBookDetailData) ? ( - + ) : null; }; diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx index bd717db..4a724c7 100644 --- a/src/client/components/Dashboard/Dashboard.tsx +++ b/src/client/components/Dashboard/Dashboard.tsx @@ -24,7 +24,7 @@ export const Dashboard = (): ReactElement => { limit: 5, sort: { updatedAt: "-1" }, }, - predicate: { "acquisition.wanted": false }, + predicate: { "acquisition.source.wanted": false }, comicStatus: "recent", }), ); @@ -35,7 +35,7 @@ export const Dashboard = (): ReactElement => { limit: 5, sort: { updatedAt: "-1" }, }, - predicate: { "acquisition.wanted": true }, + predicate: { "acquisition.source.wanted": true }, comicStatus: "wanted", }), ); diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx index 80f3a79..249ad25 100644 --- a/src/client/components/Dashboard/PullList.tsx +++ b/src/client/components/Dashboard/PullList.tsx @@ -20,14 +20,15 @@ export const PullList = ({ issues }: PullListProps): ReactElement => { useEffect(() => { dispatch( getWeeklyPullList({ - startDate: "2022-5-1", + startDate: "2022-2-11", pageSize: "15", currentPage: "1", }), ); }, []); const addToLibrary = useCallback( - (locgMetadata) => dispatch(importToDB({ locg: locgMetadata })), + (sourceName: string, locgMetadata) => + dispatch(importToDB(sourceName, { locg: locgMetadata })), [], ); /* @@ -144,7 +145,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
diff --git a/src/client/components/Dashboard/RecentlyImported.tsx b/src/client/components/Dashboard/RecentlyImported.tsx index 3c3a862..22934f7 100644 --- a/src/client/components/Dashboard/RecentlyImported.tsx +++ b/src/client/components/Dashboard/RecentlyImported.tsx @@ -7,7 +7,10 @@ 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"; +import { + determineCoverFile, + determineExternalMetadata, +} from "../../shared/utils/metadata.utils"; type RecentlyImportedProps = { comicBookCovers: any; @@ -42,6 +45,9 @@ export const RecentlyImported = ({ _id, rawFileDetails, sourcedMetadata: { comicvine, comicInfo, locg }, + acquisition: { + source: { name }, + }, }) => { const consolidatedComicMetadata = { rawFileDetails, @@ -49,10 +55,14 @@ export const RecentlyImported = ({ comicInfo, locg, }; - const { issueName, url } = determineCoverFile( consolidatedComicMetadata, ); + const { issue, coverURL, icon } = determineExternalMetadata(name, { + comicvine, + comicInfo, + locg, + }); const isComicBookMetadataAvailable = !isUndefined(comicvine) && @@ -73,11 +83,6 @@ export const RecentlyImported = ({ title={issueName ? titleElement : null} >
- {isComicBookMetadataAvailable && ( - - - - )} {/* Raw file presence */} {isNil(rawFileDetails) && ( @@ -108,17 +113,19 @@ export const RecentlyImported = ({ ) : null}
- {/* original reference */} - {!isUndefined(comicvine.image) ? ( - + {/* metadata card */} + {!isNil(name) ? ( +
-
{ellipsize(comicvine.volumeInformation.name, 22)}
- {comicvine.id} + + + +
+
+ + {ellipsize(issue, 15)} +
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx index 7784613..f938611 100644 --- a/src/client/components/Library/Library.tsx +++ b/src/client/components/Library/Library.tsx @@ -91,7 +91,10 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { : row._source.sourcedMetadata, Cell: ({ value }) => { // If no CV info available, use raw file metadata - if (!isUndefined(value.rawFileDetails)) { + if ( + !isUndefined(value.rawFileDetails) && + !isEmpty(value.rawFileDetails.cover) + ) { return ; } // If CV metadata available, show it @@ -134,7 +137,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { }, { Header: "Something", - accessor: "_source.acquisition.wanted", + accessor: "_source.acquisition.source.wanted", Cell: (props) => { return ; }, diff --git a/src/client/components/PullList/PullList.tsx b/src/client/components/PullList/PullList.tsx index 2b63b69..175dc1b 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-5-15", + startDate: "2022-6-1", pageSize: "100", currentPage: "1", }), diff --git a/src/client/components/Search.tsx b/src/client/components/Search.tsx index f464646..2587361 100644 --- a/src/client/components/Search.tsx +++ b/src/client/components/Search.tsx @@ -37,7 +37,8 @@ export const Search = ({}: ISearchProps): ReactElement => { ); const addToLibrary = useCallback( - (comicData) => dispatch(importToDB({ comicvine: comicData })), + (sourceName: string, comicData) => + dispatch(importToDB(sourceName, { comicvine: comicData })), [], ); @@ -108,7 +109,7 @@ export const Search = ({}: ISearchProps): ReactElement => { >

diff --git a/src/client/reducers/comicinfo.reducer.ts b/src/client/reducers/comicinfo.reducer.ts index 75f084f..d2cced6 100644 --- a/src/client/reducers/comicinfo.reducer.ts +++ b/src/client/reducers/comicinfo.reducer.ts @@ -54,7 +54,6 @@ function comicinfoReducer(state = initialState, action) { IMS_inProgress: false, }; case IMS_COMIC_BOOKS_DB_OBJECTS_FETCHED: - console.log(action); return { ...state, comicBooksDetails: action.comicBooks, @@ -110,7 +109,6 @@ function comicinfoReducer(state = initialState, action) { ...state, }; case CV_WEEKLY_PULLLIST_FETCHED: { - console.log(action.data); return { ...state, inProgress: false, @@ -123,7 +121,6 @@ function comicinfoReducer(state = initialState, action) { ...state, }; case LIBRARY_STATISTICS_FETCHED: - console.log(action); return { ...state, inProgress: false, diff --git a/src/client/reducers/fileops.reducer.ts b/src/client/reducers/fileops.reducer.ts index a601488..89f2a91 100644 --- a/src/client/reducers/fileops.reducer.ts +++ b/src/client/reducers/fileops.reducer.ts @@ -77,7 +77,6 @@ function fileOpsReducer(state = initialState, action) { recentComics: action.data, }; case IMS_WANTED_COMICS_FETCHED: - console.log(action.data); return { ...state, wantedComics: action.data, diff --git a/src/client/shared/utils/metadata.utils.ts b/src/client/shared/utils/metadata.utils.ts index 92009fd..ac20be9 100644 --- a/src/client/shared/utils/metadata.utils.ts +++ b/src/client/shared/utils/metadata.utils.ts @@ -58,3 +58,25 @@ export const determineCoverFile = (data) => { return result[0]; } }; + +export const determineExternalMetadata = (metadataSource, source) => { + switch (metadataSource) { + case "comicvine": + return { + coverURL: source.comicvine.image.small_url, + issue: source.comicvine.name, + icon: "cvlogo.svg", + }; + case "locg": + return { + coverURL: source.locg.cover, + issue: source.locg.name, + icon: "locglogo.svg", + }; + case undefined: + return {}; + + default: + break; + } +};