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

🔧 Moved metadata panels to its own component

Browse Source
This commit is contained in:
Rishi Ghan
2022-05-24 14:03:07 -07:00
parent a156f07598
commit d50a5ada02
7 changed files with 175 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/client/components/shared/MetadataPanel.tsx
View File

@@ -1,19 +1,170 @@
import React, { ReactElement } from "react";
import PropTypes from "prop-types";
import ellipsize from "ellipsize";
import convert from "html-to-text";
import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
import prettyBytes from "pretty-bytes";
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
import { Card } from "../Carda";
import { convert } from "html-to-text";
import { determineCoverFile } from "../../shared/utils/metadata.utils";
import { find, isUndefined } from "lodash";
interface IMetadatPanelProps {
value: any;
children: any;
}
export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
const {
rawFileDetails,
inferredMetadata,
sourcedMetadata: { comicvine, locg },
} = props.data;
const { issueName, url, objectReference } = determineCoverFile({
comicvine,
locg,
rawFileDetails,
});
const metadataContentPanel = [
{
name: "rawFileDetails",
content: () => (
<dl>
<dt>
<h6 className="name has-text-weight-medium mb-1">{issueName}</h6>
</dt>
<dd className="is-size-7">
Is a part of{" "}
<span className="has-text-weight-semibold">
{inferredMetadata.issue.name}
</span>
</dd>
<dd className="is-size-7 mt-2">
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<span className="tags">
<span className="tag is-success is-light has-text-weight-semibold">
{rawFileDetails.extension}
</span>
<span className="tag is-success is-light">
{prettyBytes(rawFileDetails.fileSize)}
</span>
</span>
</div>
<div className="control">
{inferredMetadata.issue.number && (
<div className="tags has-addons">
<span className="tag is-light">Issue #</span>
<span className="tag is-warning">
{inferredMetadata.issue.number}
</span>
</div>
)}
</div>
</div>
</dd>
</dl>
),
},
{
name: "comicvine",
content: () =>
!isUndefined(comicvine) &&
!isUndefined(comicvine.volumeInformation) && (
<dl>
<dt>
<h6 className="name has-text-weight-medium mb-1">
{ellipsize(issueName, 18)}
</h6>
</dt>
<dd>
<span className="is-size-7">
Is a part of{" "}
<span className="has-text-weight-semibold">
{comicvine.volumeInformation.name}
</span>
</span>
</dd>
<dd className="is-size-7">
<span>
{ellipsize(
convert(comicvine.description, {
baseElements: {
selectors: ["p"],
},
}),
120,
)}
</span>
</dd>
<dd className="is-size-7 mt-2">
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<span className="tags">
<span className="tag is-success is-light has-text-weight-semibold">
{comicvine.volumeInformation.start_year}
</span>
<span className="tag is-success is-light">
{comicvine.volumeInformation.count_of_issues}
</span>
</span>
</div>
<div className="control">
<div className="tags has-addons">
<span className="tag is-primary is-light">
ComicVine ID
</span>
<span className="tag is-info is-light">{comicvine.id}</span>
</div>
</div>
</div>
</dd>
</dl>
),
},
{
name: "locg",
content: () => (
<dl>
<dt>
<h6 className="name has-text-weight-medium mb-1">
{ellipsize(issueName, 28)}
</h6>
</dt>
<dd className="is-size-7">
<span>{ellipsize(locg.description, 120)}</span>
</dd>
<dd className="is-size-7 mt-2">
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<span className="tags">
<span className="tag is-success is-light has-text-weight-semibold">
{locg.price}
</span>
<span className="tag is-success is-light">{locg.pulls}</span>
</span>
</div>
<div className="control">
<div className="tags has-addons">
<span className="tag is-primary is-light">rating</span>
<span className="tag is-info is-light">{locg.rating}</span>
</div>
</div>
</div>
</dd>
</dl>
),
},
];
// Find the panel to display
const metadataPanel = find(metadataContentPanel, {
name: objectReference,
});
console.log(props)
return (
<div className="columns">
<div className="column">
@@ -23,13 +174,13 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
<div className="columns mt-2">
<div className="column is-3">
<Card
imageUrl={"asd"}
imageUrl={url}
orientation={"vertical"}
hasDetails={false}
// cardContainerStyle={{ maxWidth: 200 }}
/>
</div>
<div className="column">{props.children}</div>
<div className="column">{metadataPanel.content()}</div>
</div>
</dd>
</dl>