🔧 Moved metadata panels to its own component
This commit is contained in:
Rishi Ghan
@@ -81,7 +81,7 @@ export const WantedComicsList = ({
|
|||||||
<div className="content is-flex is-flex-direction-row">
|
<div className="content is-flex is-flex-direction-row">
|
||||||
{/* comicVine metadata presence */}
|
{/* comicVine metadata presence */}
|
||||||
{isComicBookMetadataAvailable && (
|
{isComicBookMetadataAvailable && (
|
||||||
<span className="icon custom-icon is-small">
|
<span className="icon custom-icon">
|
||||||
<img src="/img/cvlogo.svg" />
|
<img src="/img/cvlogo.svg" />
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -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;
|
|
||||||
@@ -1,22 +1,13 @@
|
|||||||
import React, {
|
import React, { useMemo, ReactElement, useCallback } from "react";
|
||||||
useState,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
ReactElement,
|
|
||||||
useCallback,
|
|
||||||
} from "react";
|
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import T2Table from "../shared/T2Table";
|
import T2Table from "../shared/T2Table";
|
||||||
import { isEmpty, isNil, isUndefined } from "lodash";
|
import { isEmpty, isNil, isUndefined } from "lodash";
|
||||||
import RawFileDetails from "./RawFileDetails";
|
|
||||||
import ComicVineDetails from "./ComicVineDetails";
|
|
||||||
import MetadataPanel from "../shared/MetadataPanel";
|
import MetadataPanel from "../shared/MetadataPanel";
|
||||||
import SearchBar from "./SearchBar";
|
import SearchBar from "./SearchBar";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { searchIssue } from "../../actions/fileops.actions";
|
import { searchIssue } from "../../actions/fileops.actions";
|
||||||
import ellipsize from "ellipsize";
|
import ellipsize from "ellipsize";
|
||||||
import { determineCoverFile } from "../../shared/utils/metadata.utils";
|
|
||||||
|
|
||||||
interface IComicBookLibraryProps {
|
interface IComicBookLibraryProps {
|
||||||
data: {
|
data: {
|
||||||
@@ -86,59 +77,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
|
|||||||
minWidth: 400,
|
minWidth: 400,
|
||||||
accessor: "_source",
|
accessor: "_source",
|
||||||
Cell: ({ value }) => {
|
Cell: ({ value }) => {
|
||||||
const {
|
return <MetadataPanel data={value} />;
|
||||||
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>
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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,
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
@@ -1,12 +1,10 @@
|
|||||||
import React, { ReactElement, useEffect, useMemo } from "react";
|
import React, { ReactElement, useEffect, useMemo } from "react";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { searchIssue } from "../../actions/fileops.actions";
|
import { searchIssue } from "../../actions/fileops.actions";
|
||||||
import Card from "../Carda";
|
|
||||||
import SearchBar from "../Library/SearchBar";
|
import SearchBar from "../Library/SearchBar";
|
||||||
import T2Table from "../shared/T2Table";
|
import T2Table from "../shared/T2Table";
|
||||||
import ellipsize from "ellipsize";
|
|
||||||
import { isEmpty, isUndefined } from "lodash";
|
import { isEmpty, isUndefined } from "lodash";
|
||||||
import { convert } from "html-to-text";
|
import MetadataPanel from "../shared/MetadataPanel";
|
||||||
|
|
||||||
export const WantedComics = (props): ReactElement => {
|
export const WantedComics = (props): ReactElement => {
|
||||||
const wantedComics = useSelector(
|
const wantedComics = useSelector(
|
||||||
@@ -38,108 +36,8 @@ export const WantedComics = (props): ReactElement => {
|
|||||||
Header: "Details",
|
Header: "Details",
|
||||||
id: "comicDetails",
|
id: "comicDetails",
|
||||||
minWidth: 350,
|
minWidth: 350,
|
||||||
accessor: (row) => {
|
accessor: "_source",
|
||||||
return row._source.sourcedMetadata.comicvine.volumeInformation ? (
|
Cell: ({ value }) => <MetadataPanel data={value} />,
|
||||||
<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;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@@ -194,11 +92,11 @@ export const WantedComics = (props): ReactElement => {
|
|||||||
rowData={wantedComics.hits.hits}
|
rowData={wantedComics.hits.hits}
|
||||||
totalPages={wantedComics.hits.total.value}
|
totalPages={wantedComics.hits.total.value}
|
||||||
columns={columnData}
|
columns={columnData}
|
||||||
// paginationHandlers={{
|
// paginationHandlers={{
|
||||||
// nextPage: goToNextPage,
|
// nextPage: goToNextPage,
|
||||||
// previousPage: goToPreviousPage,
|
// previousPage: goToPreviousPage,
|
||||||
// }}
|
// }}
|
||||||
// rowClickHandler={navigateToComicDetail}
|
// rowClickHandler={navigateToComicDetail}
|
||||||
/>
|
/>
|
||||||
{/* pagination controls */}
|
{/* pagination controls */}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,19 +1,170 @@
|
|||||||
import React, { ReactElement } from "react";
|
import React, { ReactElement } from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import ellipsize from "ellipsize";
|
import ellipsize from "ellipsize";
|
||||||
import convert from "html-to-text";
|
|
||||||
import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
|
|
||||||
import prettyBytes from "pretty-bytes";
|
import prettyBytes from "pretty-bytes";
|
||||||
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
|
|
||||||
import { Card } from "../Carda";
|
import { Card } from "../Carda";
|
||||||
|
import { convert } from "html-to-text";
|
||||||
|
import { determineCoverFile } from "../../shared/utils/metadata.utils";
|
||||||
|
import { find, isUndefined } from "lodash";
|
||||||
|
|
||||||
interface IMetadatPanelProps {
|
interface IMetadatPanelProps {
|
||||||
value: any;
|
value: any;
|
||||||
children: any;
|
children: any;
|
||||||
}
|
}
|
||||||
export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
|
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 (
|
return (
|
||||||
<div className="columns">
|
<div className="columns">
|
||||||
<div className="column">
|
<div className="column">
|
||||||
@@ -23,13 +174,13 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
|
|||||||
<div className="columns mt-2">
|
<div className="columns mt-2">
|
||||||
<div className="column is-3">
|
<div className="column is-3">
|
||||||
<Card
|
<Card
|
||||||
imageUrl={"asd"}
|
imageUrl={url}
|
||||||
orientation={"vertical"}
|
orientation={"vertical"}
|
||||||
hasDetails={false}
|
hasDetails={false}
|
||||||
// cardContainerStyle={{ maxWidth: 200 }}
|
// cardContainerStyle={{ maxWidth: 200 }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="column">{props.children}</div>
|
<div className="column">{metadataPanel.content()}</div>
|
||||||
</div>
|
</div>
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|||||||
@@ -13,19 +13,24 @@ export const determineCoverFile = (data) => {
|
|||||||
*/
|
*/
|
||||||
const coverFile = {
|
const coverFile = {
|
||||||
rawFile: {
|
rawFile: {
|
||||||
|
objectReference: "rawFileDetails",
|
||||||
priority: 1,
|
priority: 1,
|
||||||
url: "",
|
url: "",
|
||||||
issueName: "",
|
issueName: "",
|
||||||
},
|
},
|
||||||
comicvine: {
|
comicvine: {
|
||||||
|
objectReference: "comicvine",
|
||||||
priority: 2,
|
priority: 2,
|
||||||
url: "",
|
url: "",
|
||||||
issueName: "",
|
issueName: "",
|
||||||
|
publisher: "",
|
||||||
},
|
},
|
||||||
locg: {
|
locg: {
|
||||||
|
objectReference: "locg",
|
||||||
priority: 3,
|
priority: 3,
|
||||||
url: "",
|
url: "",
|
||||||
issueName: "",
|
issueName: "",
|
||||||
|
publisher: "",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
if (
|
if (
|
||||||
@@ -34,6 +39,7 @@ export const determineCoverFile = (data) => {
|
|||||||
) {
|
) {
|
||||||
coverFile.comicvine.url = data.comicvine.image.small_url;
|
coverFile.comicvine.url = data.comicvine.image.small_url;
|
||||||
coverFile.comicvine.issueName = data.comicvine.name;
|
coverFile.comicvine.issueName = data.comicvine.name;
|
||||||
|
coverFile.comicvine.publisher = data.comicvine.volumeInformation.publisher;
|
||||||
}
|
}
|
||||||
if (!isEmpty(data.rawFileDetails.cover)) {
|
if (!isEmpty(data.rawFileDetails.cover)) {
|
||||||
const encodedFilePath = encodeURI(
|
const encodedFilePath = encodeURI(
|
||||||
@@ -45,6 +51,7 @@ export const determineCoverFile = (data) => {
|
|||||||
if (!isUndefined(data.locg)) {
|
if (!isUndefined(data.locg)) {
|
||||||
coverFile.locg.url = data.locg.cover;
|
coverFile.locg.url = data.locg.cover;
|
||||||
coverFile.locg.issueName = data.locg.name;
|
coverFile.locg.issueName = data.locg.name;
|
||||||
|
coverFile.locg.publisher = data.locg.publisher;
|
||||||
}
|
}
|
||||||
|
|
||||||
const result = filter(coverFile, (item) => item.url !== "");
|
const result = filter(coverFile, (item) => item.url !== "");
|
||||||
|
|||||||
Reference in New Issue
Block a user