From f0505d742802180da6c958d7b8139a0dcf14ee3d Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Sun, 22 May 2022 01:55:51 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=96=BC=20Added=20a=20League=20of=20Comic?= =?UTF-8?q?=20Geeks=20logo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + src/client/assets/img/cvlogo.svg | 6 +- src/client/assets/img/locglogo.svg | 7 + src/client/components/App.tsx | 4 +- .../ComicDetail/AcquisitionPanel.tsx | 1 - .../{ => ComicDetail}/ComicDetail.tsx | 161 +++++++----------- .../ComicDetail/ComicDetailContainer.tsx | 26 +++ .../components/Dashboard/WantedComicsList.tsx | 118 +++++++------ 8 files changed, 166 insertions(+), 158 deletions(-) create mode 100644 src/client/assets/img/locglogo.svg rename src/client/components/{ => ComicDetail}/ComicDetail.tsx (62%) create mode 100644 src/client/components/ComicDetail/ComicDetailContainer.tsx diff --git a/.gitignore b/.gitignore index dc6f12c..9255dfe 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,4 @@ yarn-error.log environment.list .env src/client/assets/img/missing-file.pxd +*.pxd diff --git a/src/client/assets/img/cvlogo.svg b/src/client/assets/img/cvlogo.svg index 10de919..55423b9 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 new file mode 100644 index 0000000..8461007 --- /dev/null +++ b/src/client/assets/img/locglogo.svg @@ -0,0 +1,7 @@ + + + + LCG + + + diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx index 79ce1ba..4fa62d1 100644 --- a/src/client/components/App.tsx +++ b/src/client/components/App.tsx @@ -3,7 +3,7 @@ import { useSelector } from "react-redux"; import Dashboard from "./Dashboard/Dashboard"; import Import from "./Import"; -import { ComicDetail } from "./ComicDetail"; +import { ComicDetailContainer } from "./ComicDetail/ComicDetailContainer"; import LibraryContainer from "./Library/LibraryContainer"; import LibraryGrid from "./Library/LibraryGrid"; import Search from "./Search"; @@ -85,7 +85,7 @@ export const App = (): ReactElement => { } /> } + element={} />
diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx similarity index 62% rename from src/client/components/ComicDetail.tsx rename to src/client/components/ComicDetail/ComicDetail.tsx index 08050db..7060654 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail/ComicDetail.tsx @@ -7,25 +7,23 @@ import React, { } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useParams } from "react-router-dom"; -import Card from "./Carda"; -import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel"; +import Card from "../Carda"; +import { ComicVineMatchPanel } from "./ComicVineMatchPanel"; -import { RawFileDetails } from "./ComicDetail/RawFileDetails"; +import { RawFileDetails } from "./RawFileDetails"; -import TabControls from "./ComicDetail/TabControls"; -import { EditMetadataPanel } from "./ComicDetail/EditMetadataPanel"; -import { Menu } from "./ComicDetail/ActionMenu/Menu"; -import { ArchiveOperations } from "./ComicDetail/Tabs/ArchiveOperations"; -import { ComicInfoXML } from "./ComicDetail/Tabs/ComicInfoXML"; -import AcquisitionPanel from "./ComicDetail/AcquisitionPanel"; -import DownloadsPanel from "./ComicDetail/DownloadsPanel"; -import { VolumeInformation } from "./ComicDetail/Tabs/VolumeInformation"; +import TabControls from "./TabControls"; +import { EditMetadataPanel } from "./EditMetadataPanel"; +import { Menu } from "./ActionMenu/Menu"; +import { ArchiveOperations } from "./Tabs/ArchiveOperations"; +import { ComicInfoXML } from "./Tabs/ComicInfoXML"; +import AcquisitionPanel from "./AcquisitionPanel"; +import DownloadsPanel from "./DownloadsPanel"; +import { VolumeInformation } from "./Tabs/VolumeInformation"; import { isEmpty, isUndefined, isNil } from "lodash"; import { RootState } from "threetwo-ui-typings"; -import { getComicBookDetailById } from "../actions/comicinfo.actions"; - import "react-sliding-pane/dist/react-sliding-pane.css"; import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"; import Loader from "react-loader-spinner"; @@ -33,13 +31,11 @@ import SlidingPane from "react-sliding-pane"; import Modal from "react-modal"; import ComicViewer from "react-comic-viewer"; -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"; -import { extractComicArchive } from "../actions/fileops.actions"; +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"; type ComicDetailProps = {}; /** @@ -52,9 +48,8 @@ type ComicDetailProps = {}; * ) */ -export const ComicDetail = ({}: ComicDetailProps): ReactElement => { +export const ComicDetail = (data: ComicDetailProps): ReactElement => { const [page, setPage] = useState(1); - const [visible, setVisible] = useState(false); const [slidingPanelContentId, setSlidingPanelContentId] = useState(""); const [modalIsOpen, setIsOpen] = useState(false); @@ -68,9 +63,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { const comicVineAPICallProgress = useSelector( (state: RootState) => state.comicInfo.inProgress, ); - const comicBookDetailData = useSelector( - (state: RootState) => state.comicInfo.comicBookDetail, - ); + const extractedComicBook = useSelector( (state: RootState) => state.fileOps.extractedComicBookArchive, ); @@ -94,7 +87,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { }, []); useEffect(() => { - dispatch(getComicBookDetailById(comicObjectId)); dispatch(getSettings()); }, [page, dispatch]); @@ -109,6 +101,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { } }, [userSettings]); + // destructure props + console.log(ADCPPSocket) + // sliding panel init const contentForSlidingPanel = { CVMatches: { @@ -146,38 +141,35 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { content: () => , }, }; + const { + data: { + _id, + rawFileDetails, + inferredMetadata, + sourcedMetadata: { comicvine, locg, comicInfo }, + }, + } = data; // check for the availability of CV metadata const isComicBookMetadataAvailable = - comicBookDetailData.sourcedMetadata && - !isUndefined(comicBookDetailData.sourcedMetadata.comicvine) && - !isUndefined( - comicBookDetailData.sourcedMetadata.comicvine.volumeInformation, - ) && - !isEmpty(comicBookDetailData.sourcedMetadata); + !isUndefined(comicvine) && !isUndefined(comicvine.volumeInformation); // check for the availability of rawFileDetails const areRawFileDetailsAvailable = - !isUndefined(comicBookDetailData.rawFileDetails) && - !isEmpty(comicBookDetailData.rawFileDetails.cover); + !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover); + + const { issueName, url } = determineCoverFile({ + rawFileDetails, + comicvine, + locg, + }); // query for airdc++ - const airDCPPQuery = {}; - if (isComicBookMetadataAvailable) { - Object.assign(airDCPPQuery, { - issue: { - name: comicBookDetailData.sourcedMetadata.comicvine.volumeInformation - .name, - }, - }); - } else if (areRawFileDetailsAvailable) { - Object.assign(airDCPPQuery, { - issue: { - name: comicBookDetailData.inferredMetadata.issue.name, - number: comicBookDetailData.inferredMetadata.issue.number, - }, - }); - } + const airDCPPQuery = { + issue: { + name: issueName, + }, + }; // Tab content and header details const tabGroup = [ @@ -186,7 +178,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { name: "Volume Information", icon: , content: isComicBookMetadataAvailable ? ( - + ) : null, shouldShow: isComicBookMetadataAvailable, }, @@ -197,24 +189,17 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { content: (
- {!isNil(comicBookDetailData.sourcedMetadata) && - !isNil(comicBookDetailData.sourcedMetadata.comicInfo) && ( - - )} + {!isNil(comicInfo) && }
), - shouldShow: - !isUndefined(comicBookDetailData.sourcedMetadata) && - !isEmpty(comicBookDetailData.sourcedMetadata.comicInfo), + shouldShow: !isEmpty(comicInfo), }, { id: 3, icon: , name: "Archive Operations", - content: , + content: , shouldShow: areRawFileDetailsAvailable, }, { @@ -222,26 +207,21 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { icon: , name: "Acquisition", content: ( - + ), shouldShow: true, }, { id: 5, icon: null, - name: - !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? ( - Downloads - ) : ( - "Downloads" - ), - content: !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && ( + name: !isEmpty(data.data) ? ( + Downloads + ) : ( + "Downloads" + ), + content: !isNil(data.data) && !isEmpty(data.data) && ( @@ -255,29 +235,17 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { // Determine which cover image to use: // 1. from the locally imported or // 2. from the CV-scraped version - let imagePath = ""; - let comicBookTitle = ""; - if (areRawFileDetailsAvailable) { - const encodedFilePath = encodeURI( - `${LIBRARY_SERVICE_HOST}/${comicBookDetailData.rawFileDetails.cover.filePath}`, - ); - imagePath = escapePoundSymbol(encodedFilePath); - comicBookTitle = comicBookDetailData.rawFileDetails.name; - } else if (isComicBookMetadataAvailable) { - imagePath = comicBookDetailData.sourcedMetadata.comicvine.image.small_url; - comicBookTitle = comicBookDetailData.sourcedMetadata.comicvine.name; - } return (
- {!isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && ( + {!isNil(data) && !isEmpty(data) && ( <> -

{comicBookTitle}

+

{issueName}

{ {/* action dropdown */}
{/* raw file details */}
- {!isUndefined(comicBookDetailData.rawFileDetails) && - !isEmpty(comicBookDetailData.rawFileDetails.cover) && ( + {!isUndefined(rawFileDetails) && + !isEmpty(rawFileDetails.cover) && ( <> {/* Read comic button */}