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

2
src/client/components/Dashboard/WantedComicsList.tsx
View File

@@ -81,7 +81,7 @@ export const WantedComicsList = ({
<div className="content is-flex is-flex-direction-row">
{/* comicVine metadata presence */}
{isComicBookMetadataAvailable && (
<span className="icon custom-icon is-small">
<span className="icon custom-icon">
<img src="/img/cvlogo.svg" />
</span>
)}

76
src/client/components/Library/ComicVineDetails.tsx
View File

@@ -1,76 +0,0 @@
import React, { ReactElement } from "react";
import PropTypes from "prop-types";
import ellipsize from "ellipsize";
import Card from "../Carda";
import convert from "html-to-text";
export const ComicVineDetails = (comicVineData): ReactElement => {
const { data } = comicVineData;
return (
<div className="columns">
<div className="column">
<div className="comic-detail issue-metadata">
<dl>
<dd>
<div className="columns mt-2">
<div className="column is-3">
<Card
imageUrl={data.comicvine.image.small_url}
orientation={"vertical"}
hasDetails={false}
// cardContainerStyle={{ maxWidth: 200 }}
/>
</div>
<div className="column">
<dl>
<dt>
<h6 className="name has-text-weight-medium mb-1">
{ellipsize(data.name, 18)}
</h6>
</dt>
<dd>
<h6>{data.comicvine.name && data.comicvine.name}</h6>
<span className="is-size-7">
Is a part of{" "}
<span className="has-text-weight-semibold">
{data.comicvine.volumeInformation.name}
</span>
</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">
{data.comicvine.volumeInformation.start_year}
</span>
<span className="tag is-success is-light">
{data.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">
{data.comicvine.id}
</span>
</div>
</div>
</div>
</dd>
</dl>
</div>
</div>
</dd>
</dl>
</div>
</div>
</div>
);
};
export default ComicVineDetails;

65
src/client/components/Library/Library.tsx
View File

@@ -1,22 +1,13 @@
import React, {
useState,
useEffect,
useMemo,
ReactElement,
useCallback,
} from "react";
import React, { useMemo, ReactElement, useCallback } from "react";
import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom";
import T2Table from "../shared/T2Table";
import { isEmpty, isNil, isUndefined } from "lodash";
import RawFileDetails from "./RawFileDetails";
import ComicVineDetails from "./ComicVineDetails";
import MetadataPanel from "../shared/MetadataPanel";
import SearchBar from "./SearchBar";
import { useDispatch } from "react-redux";
import { searchIssue } from "../../actions/fileops.actions";
import ellipsize from "ellipsize";
import { determineCoverFile } from "../../shared/utils/metadata.utils";
interface IComicBookLibraryProps {
data: {
@@ -86,59 +77,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
minWidth: 400,
accessor: "_source",
Cell: ({ value }) => {
const {
rawFileDetails,
sourcedMetadata: { comicvine, locg },
} = value;
const { issueName, url } = determineCoverFile({
comicvine,
locg,
rawFileDetails,
});
return (
<MetadataPanel props={value}>
<div></div>
{/* <dl>
<dt>
<h6 className="name has-text-weight-medium mb-1">
{rawFileDetails.name}
</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> */}
</MetadataPanel>
);
return <MetadataPanel data={value} />;
},
},
{

92
src/client/components/Library/RawFileDetails.tsx
View File

@@ -1,92 +0,0 @@
import React, { ReactElement } from "react";
import PropTypes from "prop-types";
import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
import prettyBytes from "pretty-bytes";
import ellipsize from "ellipsize";
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
import { Card } from "../Carda";
// raw file details
export const RawFileDetails = (rawFileData): ReactElement => {
const { rawFileDetails, inferredMetadata } = rawFileData.data;
const encodedFilePath = encodeURI(
`${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`,
);
const filePath = escapePoundSymbol(encodedFilePath);
return (
<div className="columns">
<div className="column">
<div className="comic-detail issue-metadata">
<dl>
<dd>
<div className="columns mt-2">
<div className="column is-3">
<Card
imageUrl={filePath}
orientation={"vertical"}
hasDetails={false}
// cardContainerStyle={{ maxWidth: 200 }}
/>
</div>
<div className="column">
<dl>
<dt>
<h6 className="name has-text-weight-medium mb-1">
{rawFileDetails.name}
</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>
</div>
</div>
</dd>
</dl>
</div>
</div>
</div>
);
};
export default RawFileDetails;
RawFileDetails.propTypes = {
data: PropTypes.shape({
cover: PropTypes.shape({
filePath: PropTypes.string,
}),
name: PropTypes.string,
path: PropTypes.string,
fileSize: PropTypes.number,
extension: PropTypes.string,
}),
};

118
src/client/components/WantedComics/WantedComics.tsx
View File

@@ -1,12 +1,10 @@
import React, { ReactElement, useEffect, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import { searchIssue } from "../../actions/fileops.actions";
import Card from "../Carda";
import SearchBar from "../Library/SearchBar";
import T2Table from "../shared/T2Table";
import ellipsize from "ellipsize";
import { isEmpty, isUndefined } from "lodash";
import { convert } from "html-to-text";
import MetadataPanel from "../shared/MetadataPanel";
export const WantedComics = (props): ReactElement => {
const wantedComics = useSelector(
@@ -38,108 +36,8 @@ export const WantedComics = (props): ReactElement => {
Header: "Details",
id: "comicDetails",
minWidth: 350,
accessor: (row) => {
return row._source.sourcedMetadata.comicvine.volumeInformation ? (
<div className="columns">
<div className="column">
<div className="comic-detail issue-metadata">
<dl>
<dd>
<div className="columns mt-2">
<div className="column is-3">
{!isUndefined(
row._source.sourcedMetadata.comicvine.image,
) && (
<Card
imageUrl={
row._source.sourcedMetadata.comicvine.image
.thumb_url
}
orientation={"vertical"}
hasDetails={false}
// cardContainerStyle={{ maxWidth: 200 }}
/>
)}
</div>
<div className="column">
<dl>
<dd>
{row._source.sourcedMetadata.comicvine.name
? row._source.sourcedMetadata.comicvine.name
: "No Name"}
</dd>
<dd>
<h6 className="name has-text-weight-medium mb-1">
{
row._source.sourcedMetadata.comicvine
.volumeInformation.name
}
</h6>
</dd>
<dd className="is-size-7">
published by{" "}
<span className="has-text-weight-semibold">
{
row._source.sourcedMetadata.comicvine
.volumeInformation.publisher.name
}
</span>
</dd>
<dd className="is-size-7">
<span>
{ellipsize(
convert(
row._source.sourcedMetadata.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">
{
row._source.sourcedMetadata
.comicvine.volumeInformation.id
}
</span>
</span>
</div>
<div className="control">
<span className="tags has-addons">
<span className="tag">
ComicVine Id
</span>
<span className="tag is-success is-light">
{
row._source.sourcedMetadata
.comicvine.id
}
</span>
</span>
</div>
</div>
</dd>
</dl>
</div>
</div>
</dd>
</dl>
</div>
</div>
</div>
) : null;
},
accessor: "_source",
Cell: ({ value }) => <MetadataPanel data={value} />,
},
],
},
@@ -194,11 +92,11 @@ export const WantedComics = (props): ReactElement => {
rowData={wantedComics.hits.hits}
totalPages={wantedComics.hits.total.value}
columns={columnData}
// paginationHandlers={{
// nextPage: goToNextPage,
// previousPage: goToPreviousPage,
// }}
// rowClickHandler={navigateToComicDetail}
// paginationHandlers={{
// nextPage: goToNextPage,
// previousPage: goToPreviousPage,
// }}
// rowClickHandler={navigateToComicDetail}
/>
{/* pagination controls */}
</div>

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>

7
src/client/shared/utils/metadata.utils.ts
View File

@@ -13,19 +13,24 @@ export const determineCoverFile = (data) => {
*/
const coverFile = {
rawFile: {
objectReference: "rawFileDetails",
priority: 1,
url: "",
issueName: "",
},
comicvine: {
objectReference: "comicvine",
priority: 2,
url: "",
issueName: "",
publisher: "",
},
locg: {
objectReference: "locg",
priority: 3,
url: "",
issueName: "",
publisher: "",
},
};
if (
@@ -34,6 +39,7 @@ export const determineCoverFile = (data) => {
) {
coverFile.comicvine.url = data.comicvine.image.small_url;
coverFile.comicvine.issueName = data.comicvine.name;
coverFile.comicvine.publisher = data.comicvine.volumeInformation.publisher;
}
if (!isEmpty(data.rawFileDetails.cover)) {
const encodedFilePath = encodeURI(
@@ -45,6 +51,7 @@ export const determineCoverFile = (data) => {
if (!isUndefined(data.locg)) {
coverFile.locg.url = data.locg.cover;
coverFile.locg.issueName = data.locg.name;
coverFile.locg.publisher = data.locg.publisher;
}
const result = filter(coverFile, (item) => item.url !== "");