From d50a5ada02ee8cbc1e7054f72e8cfb084c84d48e Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Tue, 24 May 2022 14:03:07 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Moved=20metadata=20panels=20to?= =?UTF-8?q?=20its=20own=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Dashboard/WantedComicsList.tsx | 2 +- .../components/Library/ComicVineDetails.tsx | 76 -------- src/client/components/Library/Library.tsx | 65 +------ .../components/Library/RawFileDetails.tsx | 92 ---------- .../components/WantedComics/WantedComics.tsx | 118 +------------ .../components/shared/MetadataPanel.tsx | 163 +++++++++++++++++- src/client/shared/utils/metadata.utils.ts | 7 + 7 files changed, 175 insertions(+), 348 deletions(-) delete mode 100644 src/client/components/Library/ComicVineDetails.tsx delete mode 100644 src/client/components/Library/RawFileDetails.tsx diff --git a/src/client/components/Dashboard/WantedComicsList.tsx b/src/client/components/Dashboard/WantedComicsList.tsx index 8e9e31e..5105c9b 100644 --- a/src/client/components/Dashboard/WantedComicsList.tsx +++ b/src/client/components/Dashboard/WantedComicsList.tsx @@ -81,7 +81,7 @@ export const WantedComicsList = ({
{/* comicVine metadata presence */} {isComicBookMetadataAvailable && ( - + )} diff --git a/src/client/components/Library/ComicVineDetails.tsx b/src/client/components/Library/ComicVineDetails.tsx deleted file mode 100644 index 01b953c..0000000 --- a/src/client/components/Library/ComicVineDetails.tsx +++ /dev/null @@ -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 ( -
-
-
-
-
-
-
- -
-
-
-
-
- {ellipsize(data.name, 18)} -
-
-
-
{data.comicvine.name && data.comicvine.name}
- - Is a part of{" "} - - {data.comicvine.volumeInformation.name} - - -
- -
-
-
- - - {data.comicvine.volumeInformation.start_year} - - - {data.comicvine.volumeInformation.count_of_issues} - - -
-
-
- - ComicVine ID - - - {data.comicvine.id} - -
-
-
-
-
-
-
-
-
-
-
-
- ); -}; - -export default ComicVineDetails; diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx index 701e461..d620f39 100644 --- a/src/client/components/Library/Library.tsx +++ b/src/client/components/Library/Library.tsx @@ -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 ( - -
- {/*
-
-
- {rawFileDetails.name} -
-
-
- Is a part of{" "} - - {inferredMetadata.issue.name} - -
- -
-
-
- - - {rawFileDetails.extension} - - - {prettyBytes(rawFileDetails.fileSize)} - - -
-
- {inferredMetadata.issue.number && ( -
- Issue # - - {inferredMetadata.issue.number} - -
- )} -
-
-
-
*/} - - ); + return ; }, }, { diff --git a/src/client/components/Library/RawFileDetails.tsx b/src/client/components/Library/RawFileDetails.tsx deleted file mode 100644 index cd11e22..0000000 --- a/src/client/components/Library/RawFileDetails.tsx +++ /dev/null @@ -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 ( -
-
-
-
-
-
-
- -
-
-
-
-
- {rawFileDetails.name} -
-
-
- Is a part of{" "} - - {inferredMetadata.issue.name} - -
- -
-
-
- - - {rawFileDetails.extension} - - - {prettyBytes(rawFileDetails.fileSize)} - - -
-
- {inferredMetadata.issue.number && ( -
- Issue # - - {inferredMetadata.issue.number} - -
- )} -
-
-
-
-
-
-
-
-
-
-
- ); -}; - -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, - }), -}; diff --git a/src/client/components/WantedComics/WantedComics.tsx b/src/client/components/WantedComics/WantedComics.tsx index a74c4fa..ff60b11 100644 --- a/src/client/components/WantedComics/WantedComics.tsx +++ b/src/client/components/WantedComics/WantedComics.tsx @@ -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 ? ( -
-
-
-
-
-
-
- {!isUndefined( - row._source.sourcedMetadata.comicvine.image, - ) && ( - - )} -
-
-
-
- {row._source.sourcedMetadata.comicvine.name - ? row._source.sourcedMetadata.comicvine.name - : "No Name"} -
-
-
- { - row._source.sourcedMetadata.comicvine - .volumeInformation.name - } -
-
-
- published by{" "} - - { - row._source.sourcedMetadata.comicvine - .volumeInformation.publisher.name - } - -
- -
- - {ellipsize( - convert( - row._source.sourcedMetadata.comicvine - .description, - { - baseElements: { - selectors: ["p"], - }, - }, - ), - 120, - )} - -
- -
-
-
- - - { - row._source.sourcedMetadata - .comicvine.volumeInformation.id - } - - -
-
- - - ComicVine Id - - - { - row._source.sourcedMetadata - .comicvine.id - } - - -
-
-
-
-
-
-
-
-
-
-
- ) : null; - }, + accessor: "_source", + Cell: ({ 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 */}
diff --git a/src/client/components/shared/MetadataPanel.tsx b/src/client/components/shared/MetadataPanel.tsx index 99074ff..f7b1092 100644 --- a/src/client/components/shared/MetadataPanel.tsx +++ b/src/client/components/shared/MetadataPanel.tsx @@ -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: () => ( +
+
+
{issueName}
+
+
+ Is a part of{" "} + + {inferredMetadata.issue.name} + +
+ +
+
+
+ + + {rawFileDetails.extension} + + + {prettyBytes(rawFileDetails.fileSize)} + + +
+
+ {inferredMetadata.issue.number && ( +
+ Issue # + + {inferredMetadata.issue.number} + +
+ )} +
+
+
+
+ ), + }, + + { + name: "comicvine", + content: () => + !isUndefined(comicvine) && + !isUndefined(comicvine.volumeInformation) && ( +
+
+
+ {ellipsize(issueName, 18)} +
+
+
+ + Is a part of{" "} + + {comicvine.volumeInformation.name} + + +
+ +
+ + {ellipsize( + convert(comicvine.description, { + baseElements: { + selectors: ["p"], + }, + }), + 120, + )} + +
+ +
+
+
+ + + {comicvine.volumeInformation.start_year} + + + {comicvine.volumeInformation.count_of_issues} + + +
+
+
+ + ComicVine ID + + {comicvine.id} +
+
+
+
+
+ ), + }, + { + name: "locg", + content: () => ( +
+
+
+ {ellipsize(issueName, 28)} +
+
+
+ {ellipsize(locg.description, 120)} +
+ +
+
+
+ + + {locg.price} + + {locg.pulls} + +
+
+
+ rating + {locg.rating} +
+
+
+
+
+ ), + }, + ]; + + // Find the panel to display + const metadataPanel = find(metadataContentPanel, { + name: objectReference, + }); - console.log(props) return (
@@ -23,13 +174,13 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
-
{props.children}
+
{metadataPanel.content()}
diff --git a/src/client/shared/utils/metadata.utils.ts b/src/client/shared/utils/metadata.utils.ts index ac20be9..b550b51 100644 --- a/src/client/shared/utils/metadata.utils.ts +++ b/src/client/shared/utils/metadata.utils.ts @@ -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 !== "");