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,

128
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")}
</dd>
<dd>
<div className="columns mt-2">
<div className="column is-2">
<Card <Card
imageUrl={data.volumeInformation.image.thumb_url} imageUrl={data.volumeInformation.image.thumb_url}
orientation={"vertical"} orientation={"vertical-2"}
hasDetails={false} hasDetails={false}
// cardContainerStyle={{ maxWidth: 200 }} // cardContainerStyle={{ maxWidth: 200 }}
/> />
</div> </div>
<div className="column is-10"> <div className="flex flex-col">
<dl> <div className="flex flex-row">
<dt> <div>
<h6 className="has-text-weight-bold mb-2">{data.name}</h6> {/* Title */}
</dt> <div>
<dd> <div className="text-lg">{data.name}</div>
<div className="text-sm">
Is a part of{" "} Is a part of{" "}
<span className="has-text-info"> <span className="has-text-info">
{data.volumeInformation.name} {data.volumeInformation.name}
</span> </span>
</dd> </div>
</div>
<dd> {/* Comicvine metadata */}
Published by <div className="mt-2">
<span className="has-text-weight-semibold"> <div className="text-md">ComicVine Metadata</div>
{" "} <div className="text-sm">
{data.volumeInformation.publisher.name} Last scraped on{" "}
</span> {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")}
</dd> </div>
<dd> <div className="text-sm">
Total issues in this volume: 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} {data.volumeInformation.count_of_issues}
</dd> </span>
<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> </span>
</div> </div>
<div>
{data.issue_number && (
<div className="">
<span>Issue Number</span>
<span>{data.issue_number}</span>
</div> </div>
)} )}
{!isUndefined( {!isUndefined(
detectIssueTypes(data.volumeInformation.description), detectIssueTypes(data.volumeInformation.description),
) ? ( ) ? (
<div className="control"> <div>
<div className="tags has-addons"> <span>Detected Type</span>
<span className="tag is-light">Detected Type</span> <span>
<span className="tag is-warning">
{ {
detectIssueTypes( detectIssueTypes(data.volumeInformation.description)
data.volumeInformation.description, .displayName
).displayName
} }
</span> </span>
</div> </div>
</div>
) : data.resource_type ? ( ) : data.resource_type ? (
<div className="control"> <div>
<div className="tags has-addons"> <span>Type</span>
<span className="tag is-light">Type</span> <span>{data.resource_type}</span>
<span className="tag is-warning">
{data.resource_type}
</span>
</div>
</div> </div>
) : null} ) : 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>
</div> </div>
</dd> {/* Description */}
</dl> <div className="mt-3 w-3/4">
{!isEmpty(data.description) &&
convert(data.description, {
baseElements: {
selectors: ["p"],
},
})}
</div>
</div>
</div> </div>
</div> </div>
</dd>
</dl>
</div> </div>
</div> </div>
); );

15
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>
); );
}; };