From 9b8f66c8b2d0a166b467c215077e80b04550c54d Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Mon, 28 Feb 2022 22:05:52 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Reworked=20metadata=20UX?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/components/ComicDetail.tsx | 7 - .../ComicDetail/ComicVineDetails.tsx | 143 ++++++++++++------ .../components/ComicDetail/RawFileDetails.tsx | 106 +++++++------ .../ComicDetail/Tabs/VolumeInformation.tsx | 44 +----- .../shared/utils/tradepaperback.utils.ts | 9 -- 5 files changed, 157 insertions(+), 152 deletions(-) diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 2132a62..42c535b 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -286,13 +286,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { /> )} - {/* comic vine scraped metadata */} - {isComicBookMetadataAvailable && ( - - )} diff --git a/src/client/components/ComicDetail/ComicVineDetails.tsx b/src/client/components/ComicDetail/ComicVineDetails.tsx index a86bc6d..27985c2 100644 --- a/src/client/components/ComicDetail/ComicVineDetails.tsx +++ b/src/client/components/ComicDetail/ComicVineDetails.tsx @@ -3,60 +3,105 @@ import PropTypes from "prop-types"; import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils"; import dayjs from "dayjs"; import { isUndefined } from "lodash"; - +import Card from "../Carda"; export const ComicVineDetails = (props): ReactElement => { const { data, updatedAt } = props; return ( -
-
-
ComicVine Metadata
-
- Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")} -
-
-
{data.name}
-
- {data.issue_number && ( -
-
- Issue Number - {data.issue_number} +
+
+
+
ComicVine Metadata
+
+ Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")} +
+ +
+
+
+ +
+
+
+
+
{data.name}
+
+
+ Is a part of{" "} + + {data.volumeInformation.name} + +
+ +
+ Published by + + {" "} + {data.volumeInformation.publisher.name} + +
+
+ Total issues in this volume: + {data.volumeInformation.count_of_issues} +
+ +
+
+ {data.issue_number && ( +
+
+ Issue Number + + {data.issue_number} + +
+
+ )} + {!isUndefined( + detectIssueTypes(data.volumeInformation.description), + ) ? ( +
+
+ Detected Type + + { + detectIssueTypes( + data.volumeInformation.description, + ).displayName + } + +
+
+ ) : data.resource_type ? ( +
+
+ Type + + {data.resource_type} + +
+
+ ) : null} +
+
+ + ComicVine Issue ID + + {data.id} +
+
+
+
+
+
- )} -
-
- {!isUndefined( - detectIssueTypes(data.volumeInformation.description), - ) ? ( -
-
- Detected Type - - { - detectIssueTypes(data.volumeInformation.description) - .displayName - } - -
-
- ) : data.resource_type ? ( -
-
- Type - {data.resource_type} -
-
- ) : null} -
-
- ComicVine Issue ID - {data.id} -
-
-
-
-
+
+
); }; diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx index db48844..c601f1f 100644 --- a/src/client/components/ComicDetail/RawFileDetails.tsx +++ b/src/client/components/ComicDetail/RawFileDetails.tsx @@ -7,61 +7,67 @@ export const RawFileDetails = (props): ReactElement => { const { rawFileDetails, inferredMetadata } = props.data; console.log(props); return ( -
-
-
Raw File Details
-
- {rawFileDetails.containedIn + - "/" + - rawFileDetails.name + - rawFileDetails.extension} -
-
-
-
-
- Size - - {prettyBytes(rawFileDetails.fileSize)} - -
-
-
-
- Extension - - {rawFileDetails.extension} - -
-
-
-
- {/* inferred metadata */} -
Inferred Issue Metadata
-
-
-
-
- Name - - {inferredMetadata.issue.name} - -
-
- {!isUndefined(inferredMetadata.issue.number) ? ( + <> +
+
+
Raw File Details
+
+ {rawFileDetails.containedIn + + "/" + + rawFileDetails.name + + rawFileDetails.extension} +
+
+
- Number - - {inferredMetadata.issue.number} + Size + + {prettyBytes(rawFileDetails.fileSize)}
- ) : null} -
-
-
-
+
+
+ Extension + + {rawFileDetails.extension} + +
+
+
+
+
+
+
+
+ {/* inferred metadata */} +
Inferred Issue Metadata
+
+
+
+
+ Name + + {inferredMetadata.issue.name} + +
+
+ {!isUndefined(inferredMetadata.issue.number) ? ( +
+
+ Number + + {inferredMetadata.issue.number} + +
+
+ ) : null} +
+
+
+
+ ); }; diff --git a/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx b/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx index d3290e4..ce38efe 100644 --- a/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx +++ b/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx @@ -1,4 +1,5 @@ import React, { ReactElement } from "react"; +import ComicVineDetails from "../ComicVineDetails"; export const VolumeInformation = (props): ReactElement => { const { data } = props; @@ -8,44 +9,13 @@ export const VolumeInformation = (props): ReactElement => { return (
-
-
-
- -
-
-
-
-
- Is a part of{" "} - - {data.sourcedMetadata.comicvine.volumeInformation.name} - -
-
- Published by - - {" "} - { - data.sourcedMetadata.comicvine.volumeInformation.publisher - .name - } - -
-
- Total issues in this volume: - {data.sourcedMetadata.comicvine.volumeInformation.count_of_issues} -
-
-
-
-
+
+
{ { regex: [/mini\Wseries/gim], displayName: "Mini-Series" }, ]; - // const issueNames = await axios.request({ - // url: "http://localhost:3000/api/import/scrapeIssueNamesFromDOM", - // method: "POST", - // data: { - // html: deck, - // }, - // }); - // console.log(deck); - // console.log("DOM", issueNames); const matches = map(issueTypeMatchers, (matcher) => { return getIssueTypeDisplayName(deck, matcher.regex, matcher.displayName); });