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>

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 dayjs from "dayjs";
import { isUndefined } from "lodash";
import Card from "../Carda";
export const ComicVineDetails = (props): ReactElement => {
const { data, updatedAt } = props;
return (
<div className="content comic-detail comicvine-metadata">
<dl>
<dt>ComicVine Metadata</dt>
<dd className="is-size-7">
Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
</dd>
<dd>
<h6>{data.name}</h6>
</dd>
{data.issue_number && (
<dd className="mb-2">
<div className="tags has-addons">
<span className="tag is-light">Issue Number</span>
<span className="tag is-warning">{data.issue_number}</span>
<div className="column is-two-thirds">
<div className="comic-detail comicvine-metadata">
<dl>
<dt>ComicVine Metadata</dt>
<dd className="is-size-7">
Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
</dd>
<dd>
<div className="columns mt-2">
<div className="column is-2">
<Card
imageUrl={data.volumeInformation.image.thumb_url}
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>
</dd>
)}
<dd>
<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>
</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;
console.log(props);
return (
<div className="content comic-detail raw-file-details">
<dl>
<dt>Raw File Details</dt>
<dd className="is-size-7">
{rawFileDetails.containedIn +
"/" +
rawFileDetails.name +
rawFileDetails.extension}
</dd>
<dd>
<div className="field is-grouped mt-2">
<div className="control">
<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="comic-detail raw-file-details">
<dl>
<dt>Raw File Details</dt>
<dd className="is-size-7">
{rawFileDetails.containedIn +
"/" +
rawFileDetails.name +
rawFileDetails.extension}
</dd>
<dd>
<div className="field is-grouped mt-2">
<div className="control">
<div className="tags has-addons">
<span className="tag">Number</span>
<span className="tag is-primary is-light">
{inferredMetadata.issue.number}
<span className="tag">Size</span>
<span className="tag is-info is-light">
{prettyBytes(rawFileDetails.fileSize)}
</span>
</div>
</div>
) : null}
</div>
</dd>
</dl>
</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>
</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 ComicVineDetails from "../ComicVineDetails";
export const VolumeInformation = (props): ReactElement => {
const { data } = props;
@@ -8,44 +9,13 @@ export const VolumeInformation = (props): ReactElement => {
return (
<div key={1}>
<div className="columns">
<div className="column is-narrow">
<figure className="card-image">
<img
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 className="columns is-multiline">
<ComicVineDetails
data={data.sourcedMetadata.comicvine}
updatedAt={data.updatedAt}
/>
<div
className="column is-three-quarters"
className="column is-8"
dangerouslySetInnerHTML={createDescriptionMarkup(
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" },
];
// 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);
});