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

🏗️ Fixed CV-sourced Volume info panel

Browse Source
This commit is contained in:
Rishi Ghan
2024-01-15 01:08:36 -05:00
parent 3ac357e46a
commit a2fe633502
3 changed files with 99 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -295,7 +295,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
{ {
id: 1, id: 1,
name: "Volume Information", name: "Volume Information",
icon: <i className="fa-solid fa-layer-group"></i>, icon: (
<i className="h-5 w-5 icon-[solar--book-2-bold] text-slate-500 dark:text-slate-300"></i>
),
content: isComicBookMetadataAvailable ? ( content: isComicBookMetadataAvailable ? (
<VolumeInformation data={data.data} key={1} /> <VolumeInformation data={data.data} key={1} />
) : null, ) : null,

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

@@ -2,105 +2,105 @@ import React, { ReactElement } from "react";
import PropTypes from "prop-types"; 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 { isEmpty, isUndefined } from "lodash";
import Card from "../shared/Carda"; import Card from "../shared/Carda";
import { convert } from "html-to-text";
export const ComicVineDetails = (props): ReactElement => { export const ComicVineDetails = (props): ReactElement => {
const { data, updatedAt } = props; const { data, updatedAt } = props;
return ( return (
<div className="column is-half"> <div className="text-slate-500 dark:text-gray-400">
<div className="comic-detail comicvine-metadata"> <div className="">
<dl> <div>
<dt>ComicVine Metadata</dt> <div className="flex flex-row gap-4">
<dd className="is-size-7"> <div className="min-w-fit">
Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")} <Card
</dd> imageUrl={data.volumeInformation.image.thumb_url}
orientation={"vertical-2"}
<dd> hasDetails={false}
<div className="columns mt-2"> // cardContainerStyle={{ maxWidth: 200 }}
<div className="column is-2"> />
<Card </div>
imageUrl={data.volumeInformation.image.thumb_url} <div className="flex flex-col">
orientation={"vertical"} <div className="flex flex-row">
hasDetails={false} <div>
// cardContainerStyle={{ maxWidth: 200 }} {/* Title */}
/> <div>
</div> <div className="text-lg">{data.name}</div>
<div className="column is-10"> <div className="text-sm">
<dl> Is a part of{" "}
<dt> <span className="has-text-info">
<h6 className="has-text-weight-bold mb-2">{data.name}</h6> {data.volumeInformation.name}
</dt> </span>
<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> </div>
</dd> </div>
</dl>
{/* Comicvine metadata */}
<div className="mt-2">
<div className="text-md">ComicVine Metadata</div>
<div className="text-sm">
Last scraped on{" "}
{dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
</div>
<div className="text-sm">
ComicVine Issue ID
<span>{data.id}</span>
</div>
</div>
</div>
{/* Publisher details */}
<div className="">
Published by{" "}
<span>{data.volumeInformation.publisher.name}</span>
<div>
Total issues in this volume{" "}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="text-md text-slate-900 dark:text-slate-900">
{data.volumeInformation.count_of_issues}
</span>
</span>
</div>
<div>
{data.issue_number && (
<div className="">
<span>Issue Number</span>
<span>{data.issue_number}</span>
</div>
)}
{!isUndefined(
detectIssueTypes(data.volumeInformation.description),
) ? (
<div>
<span>Detected Type</span>
<span>
{
detectIssueTypes(data.volumeInformation.description)
.displayName
}
</span>
</div>
) : data.resource_type ? (
<div>
<span>Type</span>
<span>{data.resource_type}</span>
</div>
) : null}
</div>
</div>
</div>
{/* Description */}
<div className="mt-3 w-3/4">
{!isEmpty(data.description) &&
convert(data.description, {
baseElements: {
selectors: ["p"],
},
})}
</div> </div>
</div> </div>
</dd> </div>
</dl> </div>
</div> </div>
</div> </div>
); );

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

@@ -1,30 +1,15 @@
import React, { ReactElement } from "react"; import React, { ReactElement } from "react";
import ComicVineDetails from "../ComicVineDetails"; import ComicVineDetails from "../ComicVineDetails";
import { convert } from "html-to-text";
import { isEmpty } from "lodash";
export const VolumeInformation = (props): ReactElement => { export const VolumeInformation = (props): ReactElement => {
const { data } = props; const { data } = props;
const createDescriptionMarkup = (html) => {
return { __html: html };
};
return ( return (
<div key={1}> <div key={1}>
<div className="columns is-multiline"> <ComicVineDetails
<ComicVineDetails data={data.sourcedMetadata.comicvine}
data={data.sourcedMetadata.comicvine} updatedAt={data.updatedAt}
updatedAt={data.updatedAt} />
/>
<div className="column is-8">
{!isEmpty(data.sourcedMetadata.comicvine.description) &&
convert(data.sourcedMetadata.comicvine.description, {
baseElements: {
selectors: ["p"],
},
})}
</div>
</div>
</div> </div>
); );
}; };