From 45be01a140faee5c8463729c45e08b25aec5824c Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Tue, 17 May 2022 08:56:12 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=95=B7=20Gnarly=20tab=20switch=20bug=20re?= =?UTF-8?q?gressed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/assets/scss/App.scss | 35 +++-- src/client/components/ComicDetail.tsx | 95 +------------ .../components/ComicDetail/RawFileDetails.tsx | 1 - .../components/ComicDetail/TabControls.tsx | 133 ++++++++++++++++-- .../ComicDetail/Tabs/ComicInfoXML.tsx | 1 - .../components/Dashboard/RecentlyImported.tsx | 26 ++-- 6 files changed, 161 insertions(+), 130 deletions(-) diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 6f80d3f..2ec0ae9 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -9,7 +9,7 @@ $border-color: red; $volume-color: #fdecd1; $issue-color: #f2f1f9; $size-8: 0.9rem; -$size-9: 0.7em; +$size-9: 0.7rem; $flexSize: 4em; $boxSpacing: 1em; $colorText: #404646; @@ -22,6 +22,21 @@ $colorText: #404646; font-size: $size-9; } +.small-tag { + align-items: center; + background-color: #ddc096; + border-radius: 4px; + color: #4a4a4a; + display: inline-flex; + font-size: $size-9; + height: 1.5em; + justify-content: center; + line-height: 1.5; + padding-left: 0.55em; + padding-right: 0.55em; + white-space: nowrap; +} + // global style overrides pre { @@ -245,22 +260,12 @@ pre { .card-content { align-self: top; flex: 1; - padding-left: 1em; - padding-top: 0.5em; + padding-left: 0.7em; + padding-top: 0.4em; padding-bottom: 0em; - .name { - font-size: 0.85em; - } - ul { - li.status { - margin-top: 10px; - } - } - } - .is-divider { - margin-top: 1.5rem; - margin-bottom: 1rem; + } + } } diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 80623ca..7761ac7 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -9,11 +9,7 @@ import { useDispatch, useSelector } from "react-redux"; import { useParams } from "react-router-dom"; import Card from "./Carda"; import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel"; -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 { RawFileDetails } from "./ComicDetail/RawFileDetails"; import TabControls from "./ComicDetail/TabControls"; @@ -178,86 +174,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { }); } - // Tab content and header details - const tabGroup = [ - { - id: 1, - name: "Volume Information", - icon: , - content: isComicBookMetadataAvailable ? ( - - ) : null, - shouldShow: isComicBookMetadataAvailable, - }, - { - id: 2, - name: "ComicInfo.xml", - icon: , - content: ( -
-
- {!isNil(comicBookDetailData.sourcedMetadata) && - !isNil(comicBookDetailData.sourcedMetadata.comicInfo) && ( - - )} -
-
- ), - shouldShow: - !isUndefined(comicBookDetailData.sourcedMetadata) && - !isEmpty(comicBookDetailData.sourcedMetadata.comicInfo), - }, - { - id: 3, - icon: , - name: "Archive Operations", - content: , - shouldShow: areRawFileDetailsAvailable, - }, - { - id: 4, - icon: , - name: "Acquisition", - content: ( - - ), - shouldShow: true, - }, - { - id: 5, - icon: null, - name: - !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? ( - Downloads - ) : ( - "Downloads" - ), - content: !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && ( - - ), - shouldShow: true, - }, - ]; - // filtered Tabs - const filteredTabs = tabGroup.filter((tab) => tab.shouldShow); - const filteredTabIds = tabGroup - .map((tab) => { - if (tab.shouldShow) { - return tab.id; - } - }) - .filter((tab) => !isNil(tab)); - // Determine which cover image to use: // 1. from the locally imported or // 2. from the CV-scraped version @@ -339,14 +255,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { - { - - } + {} { const { rawFileDetails, inferredMetadata } = props.data; - console.log(props); return ( <>
diff --git a/src/client/components/ComicDetail/TabControls.tsx b/src/client/components/ComicDetail/TabControls.tsx index 2caff46..55657f1 100644 --- a/src/client/components/ComicDetail/TabControls.tsx +++ b/src/client/components/ComicDetail/TabControls.tsx @@ -1,14 +1,129 @@ import React, { ReactElement, useEffect, useState } from "react"; -import { isEmpty, isNil } from "lodash"; +import { isEmpty, isNil, isUndefined } from "lodash"; +import { useSelector } from "react-redux"; +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"; export const TabControls = (props): ReactElement => { - const { comicBookDetailData, filteredTabIds, filteredTabs } = props; - const [active, setActive] = useState(filteredTabIds[0]); - console.log(filteredTabIds); - useEffect(() => { - setActive(filteredTabIds[0]); - }, [filteredTabIds]); - return ( + const comicBookDetailData = useSelector( + (state: RootState) => state.comicInfo.comicBookDetail, + ); + + const libraryServiceCallInProgress = useSelector( + (state: RootState) => state.fileOps.IMSCallInProgress, + ); + const { comicObjectId } = props; + + // check for the availability of CV metadata + const isComicBookMetadataAvailable = + comicBookDetailData.sourcedMetadata && + !isUndefined(comicBookDetailData.sourcedMetadata.comicvine) && + !isUndefined( + comicBookDetailData.sourcedMetadata.comicvine.volumeInformation, + ) && + !isEmpty(comicBookDetailData.sourcedMetadata); + + // check for the availability of rawFileDetails + const areRawFileDetailsAvailable = + !isUndefined(comicBookDetailData.rawFileDetails) && + !isEmpty(comicBookDetailData.rawFileDetails.cover); + + // 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, + }, + }); + } + // Tab content and header details + const tabGroup = [ + { + id: 1, + name: "Volume Information", + icon: , + content: isComicBookMetadataAvailable ? ( + + ) : null, + shouldShow: isComicBookMetadataAvailable, + }, + { + id: 2, + name: "ComicInfo.xml", + icon: , + content: ( +
+
+ {!isNil(comicBookDetailData.sourcedMetadata) && + !isNil(comicBookDetailData.sourcedMetadata.comicInfo) && ( + + )} +
+
+ ), + shouldShow: + !isUndefined(comicBookDetailData.sourcedMetadata) && + !isEmpty(comicBookDetailData.sourcedMetadata.comicInfo), + }, + { + id: 3, + icon: , + name: "Archive Operations", + content: , + shouldShow: areRawFileDetailsAvailable, + }, + { + id: 4, + icon: , + name: "Acquisition", + content: ( + + ), + shouldShow: true, + }, + { + id: 5, + icon: null, + name: + !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? ( + Downloads + ) : ( + "Downloads" + ), + content: !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && ( + + ), + shouldShow: true, + }, + ]; + // filtered Tabs + const filteredTabs = tabGroup.filter((tab) => tab.shouldShow); + + const [active, setActive] = useState(filteredTabs[0].id); + + return !libraryServiceCallInProgress ? ( <>
    @@ -42,6 +157,8 @@ export const TabControls = (props): ReactElement => { return active === id ? content : null; })} + ) : ( + <>ANNA ); }; diff --git a/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx b/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx index fbd25f5..9aa0f07 100644 --- a/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx +++ b/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx @@ -2,7 +2,6 @@ import React, { ReactElement } from "react"; export const ComicInfoXML = (data): ReactElement => { const { json } = data; - console.log(data); return (
    diff --git a/src/client/components/Dashboard/RecentlyImported.tsx b/src/client/components/Dashboard/RecentlyImported.tsx index 3db92e5..9ea1768 100644 --- a/src/client/components/Dashboard/RecentlyImported.tsx +++ b/src/client/components/Dashboard/RecentlyImported.tsx @@ -110,18 +110,20 @@ export const RecentlyImported = ({
    {/* original reference */} - -
    -
    Downloaded from:
    -
    -
    -
    Bapacha naav
    -
    -     + {!isUndefined(sourcedMetadata.comicvine.image) ? ( + +
    +
    + {ellipsize(sourcedMetadata.comicvine.volumeInformation.name, 22)} +
    +
    {sourcedMetadata.comicvine.id}
    +
    +     + ) : null} ); },