frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔧 Reworked metadata UX

Browse Source
This commit is contained in:
Rishi Ghan
2022-02-28 22:05:52 -08:00
parent 6094c2489c
commit 9b8f66c8b2
5 changed files with 157 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/client/components/ComicDetail.tsx
View File

@@ -286,13 +286,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
/> />
</> </>
)} )}
{/* comic vine scraped metadata */}
{isComicBookMetadataAvailable && (
<ComicVineDetails
data={comicBookDetailData.sourcedMetadata.comicvine}
updatedAt={comicBookDetailData.updatedAt}
/>
)}
</div> </div>
</div> </div>

143
src/client/components/ComicDetail/ComicVineDetails.tsx
View File

@@ -3,60 +3,105 @@ import PropTypes from "prop-types";
import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils"; import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { isUndefined } from "lodash"; import { isUndefined } from "lodash";
import Card from "../Carda";
export const ComicVineDetails = (props): ReactElement => { export const ComicVineDetails = (props): ReactElement => {
const { data, updatedAt } = props; const { data, updatedAt } = props;
return ( return (
<div className="content comic-detail comicvine-metadata"> <div className="column is-two-thirds">
<dl> <div className="comic-detail comicvine-metadata">
<dt>ComicVine Metadata</dt> <dl>
<dd className="is-size-7"> <dt>ComicVine Metadata</dt>
Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")} <dd className="is-size-7">
</dd> Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
<dd> </dd>
<h6>{data.name}</h6>
</dd> <dd>
{data.issue_number && ( <div className="columns mt-2">
<dd className="mb-2"> <div className="column is-2">
<div className="tags has-addons"> <Card
<span className="tag is-light">Issue Number</span> imageUrl={data.volumeInformation.image.thumb_url}
<span className="tag is-warning">{data.issue_number}</span> orientation={"vertical"}
hasDetails={false}
// cardContainerStyle={{ maxWidth: 200 }}
/>
</div>
<div className="column is-10">
<dl>
<dt>
<h6 className="has-text-weight-bold mb-2">{data.name}</h6>
</dt>
<dd>
Is a part of{" "}
<span className="has-text-info">
{data.volumeInformation.name}
</span>
</dd>
<dd>
Published by
<span className="has-text-weight-semibold">
{" "}
{data.volumeInformation.publisher.name}
</span>
</dd>
<dd>
Total issues in this volume:
{data.volumeInformation.count_of_issues}
</dd>
<dd>
<div className="field is-grouped mt-2">
{data.issue_number && (
<div className="control">
<div className="tags has-addons">
<span className="tag is-light">Issue Number</span>
<span className="tag is-warning">
{data.issue_number}
</span>
</div>
</div>
)}
{!isUndefined(
detectIssueTypes(data.volumeInformation.description),
) ? (
<div className="control">
<div className="tags has-addons">
<span className="tag is-light">Detected Type</span>
<span className="tag is-warning">
{
detectIssueTypes(
data.volumeInformation.description,
).displayName
}
</span>
</div>
</div>
) : data.resource_type ? (
<div className="control">
<div className="tags has-addons">
<span className="tag is-light">Type</span>
<span className="tag is-warning">
{data.resource_type}
</span>
</div>
</div>
) : null}
<div className="control">
<div className="tags has-addons">
<span className="tag is-light">
ComicVine Issue ID
</span>
<span className="tag is-success">{data.id}</span>
</div>
</div>
</div>
</dd>
</dl>
</div>
</div> </div>
</dd> </dd>
)} </dl>
<dd> </div>
<div className="field is-grouped is-grouped-multiline">
{!isUndefined(
detectIssueTypes(data.volumeInformation.description),
) ? (
<div className="control">
<div className="tags has-addons">
<span className="tag is-light">Detected Type</span>
<span className="tag is-warning">
{
detectIssueTypes(data.volumeInformation.description)
.displayName
}
</span>
</div>
</div>
) : data.resource_type ? (
<div className="control">
<div className="tags has-addons">
<span className="tag is-light">Type</span>
<span className="tag is-warning">{data.resource_type}</span>
</div>
</div>
) : null}
<div className="control">
<div className="tags has-addons">
<span className="tag is-light">ComicVine Issue ID</span>
<span className="tag is-success">{data.id}</span>
</div>
</div>
</div>
</dd>
</dl>
</div> </div>
); );
}; };

106
src/client/components/ComicDetail/RawFileDetails.tsx
View File

@@ -7,61 +7,67 @@ export const RawFileDetails = (props): ReactElement => {
const { rawFileDetails, inferredMetadata } = props.data; const { rawFileDetails, inferredMetadata } = props.data;
console.log(props); console.log(props);
return ( return (
<div className="content comic-detail raw-file-details"> <>
<dl> <div className="comic-detail raw-file-details">
<dt>Raw File Details</dt> <dl>
<dd className="is-size-7"> <dt>Raw File Details</dt>
{rawFileDetails.containedIn + <dd className="is-size-7">
"/" + {rawFileDetails.containedIn +
rawFileDetails.name + "/" +
rawFileDetails.extension} rawFileDetails.name +
</dd> rawFileDetails.extension}
<dd> </dd>
<div className="field is-grouped mt-2"> <dd>
<div className="control"> <div className="field is-grouped mt-2">
<div className="tags has-addons">
<span className="tag">Size</span>
<span className="tag is-info is-light">
{prettyBytes(rawFileDetails.fileSize)}
</span>
</div>
</div>
<div className="control">
<div className="tags has-addons">
<span className="tag">Extension</span>
<span className="tag is-primary is-light">
{rawFileDetails.extension}
</span>
</div>
</div>
</div>
</dd>
{/* inferred metadata */}
<dt className="mt-3">Inferred Issue Metadata</dt>
<dd>
<div className="field is-grouped mt-2">
<div className="control">
<div className="tags has-addons">
<span className="tag">Name</span>
<span className="tag is-info is-light">
{inferredMetadata.issue.name}
</span>
</div>
</div>
{!isUndefined(inferredMetadata.issue.number) ? (
<div className="control"> <div className="control">
<div className="tags has-addons"> <div className="tags has-addons">
<span className="tag">Number</span> <span className="tag">Size</span>
<span className="tag is-primary is-light"> <span className="tag is-info is-light">
{inferredMetadata.issue.number} {prettyBytes(rawFileDetails.fileSize)}
</span> </span>
</div> </div>
</div> </div>
) : null} <div className="control">
</div> <div className="tags has-addons">
</dd> <span className="tag">Extension</span>
</dl> <span className="tag is-primary is-light">
</div> {rawFileDetails.extension}
</span>
</div>
</div>
</div>
</dd>
</dl>
</div>
<div className="content comic-detail raw-file-details mt-3">
<dl>
{/* inferred metadata */}
<dt>Inferred Issue Metadata</dt>
<dd>
<div className="field is-grouped mt-2">
<div className="control">
<div className="tags has-addons">
<span className="tag">Name</span>
<span className="tag is-info is-light">
{inferredMetadata.issue.name}
</span>
</div>
</div>
{!isUndefined(inferredMetadata.issue.number) ? (
<div className="control">
<div className="tags has-addons">
<span className="tag">Number</span>
<span className="tag is-primary is-light">
{inferredMetadata.issue.number}
</span>
</div>
</div>
) : null}
</div>
</dd>
</dl>
</div>
</>
); );
}; };

44
src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
View File

@@ -1,4 +1,5 @@
import React, { ReactElement } from "react"; import React, { ReactElement } from "react";
import ComicVineDetails from "../ComicVineDetails";
export const VolumeInformation = (props): ReactElement => { export const VolumeInformation = (props): ReactElement => {
const { data } = props; const { data } = props;
@@ -8,44 +9,13 @@ export const VolumeInformation = (props): ReactElement => {
return ( return (
<div key={1}> <div key={1}>
<div className="columns"> <div className="columns is-multiline">
<div className="column is-narrow"> <ComicVineDetails
<figure className="card-image"> data={data.sourcedMetadata.comicvine}
<img updatedAt={data.updatedAt}
src={ />
data.sourcedMetadata.comicvine.volumeInformation.image.thumb_url
}
/>
</figure>
</div>
<div className="column is-4">
<dl>
<dt>
Is a part of{" "}
<span className="has-text-info">
{data.sourcedMetadata.comicvine.volumeInformation.name}
</span>
</dt>
<dd>
Published by
<span className="has-text-weight-semibold">
{" "}
{
data.sourcedMetadata.comicvine.volumeInformation.publisher
.name
}
</span>
</dd>
<dd>
Total issues in this volume:
{data.sourcedMetadata.comicvine.volumeInformation.count_of_issues}
</dd>
</dl>
</div>
</div>
<div className="columns">
<div <div
className="column is-three-quarters" className="column is-8"
dangerouslySetInnerHTML={createDescriptionMarkup( dangerouslySetInnerHTML={createDescriptionMarkup(
data.sourcedMetadata.comicvine.volumeInformation.description, data.sourcedMetadata.comicvine.volumeInformation.description,
)} )}

9
src/client/shared/utils/tradepaperback.utils.ts
View File

@@ -13,15 +13,6 @@ export const detectIssueTypes = (deck: string): any => {
{ regex: [/mini\Wseries/gim], displayName: "Mini-Series" }, { 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) => { const matches = map(issueTypeMatchers, (matcher) => {
return getIssueTypeDisplayName(deck, matcher.regex, matcher.displayName); return getIssueTypeDisplayName(deck, matcher.regex, matcher.displayName);
}); });