From 1974e8d857e4b9cc739a5eaebf8fb30fb76d53eb Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Fri, 3 Dec 2021 23:39:08 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactoring=20ComicDetail=20and?= =?UTF-8?q?=20re-organizing=20folder=20structure?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/components/ComicDetail.tsx | 183 +----------------- .../{ => ComicDetail}/AcquisitionPanel.tsx | 4 +- .../ComicDetail/ComicVineDetails.tsx | 74 +++++++ .../{ => ComicDetail}/DownloadsPanel.tsx | 4 +- .../components/ComicDetail/RawFileDetails.tsx | 52 +++++ .../ComicDetail/Tabs/VolumeInformation.tsx | 58 ++++++ 6 files changed, 197 insertions(+), 178 deletions(-) rename src/client/components/{ => ComicDetail}/AcquisitionPanel.tsx (98%) create mode 100644 src/client/components/ComicDetail/ComicVineDetails.tsx rename src/client/components/{ => ComicDetail}/DownloadsPanel.tsx (97%) create mode 100644 src/client/components/ComicDetail/RawFileDetails.tsx create mode 100644 src/client/components/ComicDetail/Tabs/VolumeInformation.tsx diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index a478d50..9835712 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -5,12 +5,15 @@ import React, { ReactElement, useContext, } from "react"; -import PropTypes from "prop-types"; + import { useParams } from "react-router-dom"; import Card from "./Carda"; import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel"; -import AcquisitionPanel from "./AcquisitionPanel"; -import DownloadsPanel from "./DownloadsPanel"; +import { VolumeInformation } from "./ComicDetail/Tabs/VolumeInformation"; +import { ComicVineDetails } from "./ComicDetail/ComicVineDetails"; +import { RawFileDetails } from "./ComicDetail/RawFileDetails"; +import AcquisitionPanel from "./ComicDetail/AcquisitionPanel"; +import DownloadsPanel from "./ComicDetail/DownloadsPanel"; import SlidingPane from "react-sliding-pane"; import Select, { components } from "react-select"; @@ -24,8 +27,7 @@ import { getComicBookDetailById, extractComicArchive, } from "../actions/comicinfo.actions"; -import { detectIssueTypes } from "../shared/utils/tradepaperback.utils"; -import dayjs from "dayjs"; + const prettyBytes = require("pretty-bytes"); import { DnD } from "./DnD"; import { useDispatch, useSelector } from "react-redux"; @@ -158,9 +160,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { }, [dispatch, comicBookDetailData]); const [active, setActive] = useState(1); - const createDescriptionMarkup = (html) => { - return { __html: html }; - }; + const isComicBookMetadataAvailable = comicBookDetailData.sourcedMetadata && !isUndefined(comicBookDetailData.sourcedMetadata.comicvine) && @@ -173,59 +173,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { name: "Volume Information", icon: , content: isComicBookMetadataAvailable ? ( -
-
-
-
- -
-
-
-
-
- Is a part of{" "} - - { - comicBookDetailData.sourcedMetadata.comicvine - .volumeInformation.name - } - -
-
- Published by - - {" "} - { - comicBookDetailData.sourcedMetadata.comicvine - .volumeInformation.publisher.name - } - -
-
- Total issues in this volume: - { - comicBookDetailData.sourcedMetadata.comicvine - .volumeInformation.count_of_issues - } -
-
-
-
-
-
-
-
+ ) : null, }, { @@ -339,118 +287,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { ); }; - const RawFileDetails = (props) => ( -
-
-
Raw File Details
-
- {props.data.containedIn + - "/" + - props.data.name + - props.data.extension} -
-
-
-
-
- Size - - {prettyBytes(props.data.fileSize)} - -
-
-
-
- Extension - - {props.data.extension} - -
-
-
-
-
-
- ); - - const ComicVineDetails = (props) => ( -
-
-
ComicVine Metadata
-
- Last scraped on{" "} - {dayjs(props.updatedAt).format("MMM D YYYY [at] h:mm a")} -
-
-
{props.data.name}
-
-
{props.data.number}
-
-
- {!isUndefined( - detectIssueTypes( - comicBookDetailData.sourcedMetadata.comicvine.volumeInformation - .description, - ), - ) ? ( -
-
- Detected Type - - { - detectIssueTypes( - comicBookDetailData.sourcedMetadata.comicvine - .volumeInformation.description, - ).displayName - } - -
-
- ) : ( -
-
- Type - - {props.data.resource_type} - -
-
- )} -
-
- ComicVine Issue ID - {props.data.id} -
-
-
-
-
-
- ); - - ComicVineDetails.propTypes = { - updatedAt: PropTypes.string, - data: PropTypes.shape({ - name: PropTypes.string, - number: PropTypes.string, - resource_type: PropTypes.string, - id: PropTypes.number, - }), - }; - - RawFileDetails.propTypes = { - data: PropTypes.shape({ - containedIn: PropTypes.string, - name: PropTypes.string, - fileSize: PropTypes.number, - path: PropTypes.string, - extension: PropTypes.string, - cover: PropTypes.shape({ - filePath: PropTypes.string, - }), - }), - }; - // Determine which cover image to use: // 1. from the locally imported or // 2. from the CV-scraped version @@ -506,7 +342,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { break; } }; - return (
diff --git a/src/client/components/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx similarity index 98% rename from src/client/components/AcquisitionPanel.tsx rename to src/client/components/ComicDetail/AcquisitionPanel.tsx index 4a95a88..8ff55fb 100644 --- a/src/client/components/AcquisitionPanel.tsx +++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx @@ -9,12 +9,12 @@ import { search, downloadAirDCPPItem, getBundlesForComic, -} from "../actions/airdcpp.actions"; +} from "../../actions/airdcpp.actions"; import { useDispatch, useSelector } from "react-redux"; import { RootState, SearchInstance } from "threetwo-ui-typings"; import ellipsize from "ellipsize"; import { isEmpty, isNil, map } from "lodash"; -import { AirDCPPSocketContext } from "../context/AirDCPPSocket"; +import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; interface IAcquisitionPanelProps { comicBookMetadata: any; } diff --git a/src/client/components/ComicDetail/ComicVineDetails.tsx b/src/client/components/ComicDetail/ComicVineDetails.tsx new file mode 100644 index 0000000..c5461df --- /dev/null +++ b/src/client/components/ComicDetail/ComicVineDetails.tsx @@ -0,0 +1,74 @@ +import React, { ReactElement } from "react"; +import PropTypes from "prop-types"; +import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils"; +import dayjs from "dayjs"; +import { isUndefined } from "lodash"; + +export const ComicVineDetails = (props): ReactElement => { + const { data, updatedAt } = props; + return ( +
+
+
ComicVine Metadata
+
+ Last scraped on {dayjs(updatedAt).format("MMM D YYYY [at] h:mm a")} +
+
+
{data.name}
+
+ {data.issue_number && ( +
+
+ Issue Number + {data.issue_number} +
+
+ )} +
+
+ {!isUndefined( + detectIssueTypes(data.volumeInformation.description), + ) ? ( +
+
+ Detected Type + + { + detectIssueTypes(data.volumeInformation.description) + .displayName + } + +
+
+ ) : ( +
+
+ Type + {data.resource_type} +
+
+ )} +
+
+ ComicVine Issue ID + {data.id} +
+
+
+
+
+
+ ); +}; + +export default ComicVineDetails; + +ComicVineDetails.propTypes = { + updatedAt: PropTypes.string, + data: PropTypes.shape({ + name: PropTypes.string, + number: PropTypes.string, + resource_type: PropTypes.string, + id: PropTypes.number, + }), +}; diff --git a/src/client/components/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx similarity index 97% rename from src/client/components/DownloadsPanel.tsx rename to src/client/components/ComicDetail/DownloadsPanel.tsx index aa06022..e0979de 100644 --- a/src/client/components/DownloadsPanel.tsx +++ b/src/client/components/ComicDetail/DownloadsPanel.tsx @@ -2,14 +2,14 @@ import React, { useEffect, useContext, ReactElement } from "react"; import { getDownloadProgress, getBundlesForComic, -} from "../actions/airdcpp.actions"; +} from "../../actions/airdcpp.actions"; import { useDispatch, useSelector } from "react-redux"; import { RootState } from "threetwo-ui-typings"; import { isEmpty, isNil, map } from "lodash"; import prettyBytes from "pretty-bytes"; import dayjs from "dayjs"; import ellipsize from "ellipsize"; -import { AirDCPPSocketContext } from "../context/AirDCPPSocket"; +import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; interface IDownloadsPanelProps { data: any; diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx new file mode 100644 index 0000000..4586a8b --- /dev/null +++ b/src/client/components/ComicDetail/RawFileDetails.tsx @@ -0,0 +1,52 @@ +import React, { ReactElement } from "react"; +import PropTypes from "prop-types"; +import prettyBytes from "pretty-bytes"; + +export const RawFileDetails = (props): ReactElement => { + const { data } = props; + return ( +
+
+
Raw File Details
+
+ {data.containedIn + "/" + data.name + data.extension} +
+
+
+
+
+ Size + + {prettyBytes(data.fileSize)} + +
+
+
+
+ Extension + + {data.extension} + +
+
+
+
+
+
+ ); +}; + +export default RawFileDetails; + +RawFileDetails.propTypes = { + data: PropTypes.shape({ + containedIn: PropTypes.string, + name: PropTypes.string, + fileSize: PropTypes.number, + path: PropTypes.string, + extension: PropTypes.string, + cover: PropTypes.shape({ + filePath: PropTypes.string, + }), + }), +}; diff --git a/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx b/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx new file mode 100644 index 0000000..d3290e4 --- /dev/null +++ b/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx @@ -0,0 +1,58 @@ +import React, { ReactElement } from "react"; + +export const VolumeInformation = (props): ReactElement => { + const { data } = props; + const createDescriptionMarkup = (html) => { + return { __html: html }; + }; + + return ( +
+
+
+
+ +
+
+
+
+
+ Is a part of{" "} + + {data.sourcedMetadata.comicvine.volumeInformation.name} + +
+
+ Published by + + {" "} + { + data.sourcedMetadata.comicvine.volumeInformation.publisher + .name + } + +
+
+ Total issues in this volume: + {data.sourcedMetadata.comicvine.volumeInformation.count_of_issues} +
+
+
+
+
+
+
+
+ ); +}; + +export default VolumeInformation;