From 7aa3db125b50b1840b78ab7f771c25a500018a51 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Thu, 19 Aug 2021 15:38:18 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=81=20Generalizing=20the=20card=20comp?= =?UTF-8?q?onent=20Part=201?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/assets/scss/App.scss | 35 +++-- src/client/components/Carda.tsx | 52 +++++++ src/client/components/ComicDetail.tsx | 159 +++++++++++---------- src/client/components/Dashboard.tsx | 1 + src/client/components/RecentlyImported.tsx | 41 ++++-- 5 files changed, 196 insertions(+), 92 deletions(-) create mode 100644 src/client/components/Carda.tsx diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index b85b2cb..d79faab 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -49,6 +49,19 @@ $border-color: red; overflow: hidden; text-overflow: ellipsis; } + .partial-rounded-card-image { + img { + border-top-left-radius: 0.3rem; + border-top-right-radius: 0.3rem; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } + .rounded-card-image { + img { + border-radius: 0.3rem; + } + } } .card-container { display: grid; @@ -59,7 +72,7 @@ $border-color: red; .card { // max-width: 500px; margin: 0 0 15px 0; - .card-image { + .partial-rounded-card-image { img { border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; @@ -67,6 +80,9 @@ $border-color: red; border-bottom-right-radius: 0; } } + .rounded-card-image { + border-radius: 0.3rem; + } .is-horizontal { flex-direction: row; @@ -126,18 +142,18 @@ $border-color: red; // Search .search { .main-search-bar { - border: 0; - border-bottom: 1px solid #999; - border-radius: 0; - outline: 0; - background: transparent; - box-shadow: none; + border: 0; + border-bottom: 1px solid #999; + border-radius: 0; + outline: 0; + background: transparent; + box-shadow: none; } } // Library .library { table { - tr{ + tr { td { border: 0 none; .card { @@ -147,8 +163,7 @@ $border-color: red; } } } - - } + } tbody { padding: 10px 0 0 0; } diff --git a/src/client/components/Carda.tsx b/src/client/components/Carda.tsx new file mode 100644 index 0000000..800631f --- /dev/null +++ b/src/client/components/Carda.tsx @@ -0,0 +1,52 @@ +import React, { ReactElement } from "react"; +import PropTypes from "prop-types"; +import { isEmpty, isNil } from "lodash"; + +interface ICardProps { + orientation: string; + imageUrl: string; + hasDetails: boolean; + title?: PropTypes.ReactElementLike | null; + children?: PropTypes.ReactNodeLike; +} + +const renderCard = (props): ReactElement => { + switch (props.orientation) { + case "horizontal": + return <>horiztonal; + case "vertical": + return ( +
+
+
+
+
+ Placeholder image +
+
+ {props.hasDetails && ( +
+ {isNil(props.title) ? "No Name" : props.title} + {props.children} +
+ )} +
+
+
+ ); + default: + return <>; + } +}; + +export const Card = (props: ICardProps): ReactElement => { + return renderCard(props); +}; + +export default Card; diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 1e36579..836f126 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -1,13 +1,13 @@ import React, { useState, useEffect, useCallback, ReactElement } from "react"; import { useParams } from "react-router-dom"; -import Card from "./Card"; +import Card from "./Carda"; import MatchResult from "./MatchResult"; import ComicVineSearchForm from "./ComicVineSearchForm"; import { css } from "@emotion/react"; import PuffLoader from "react-spinners/PuffLoader"; import { isEmpty, isUndefined, isNil } from "lodash"; -import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings"; +import { RootState } from "threetwo-ui-typings"; import { fetchComicVineMatches } from "../actions/fileops.actions"; import { getComicBookDetailById } from "../actions/comicinfo.actions"; import { Drawer, Divider } from "antd"; @@ -16,6 +16,10 @@ const prettyBytes = require("pretty-bytes"); import "antd/dist/antd.css"; import { useDispatch, useSelector } from "react-redux"; +import { + removeLeadingPeriod, + escapePoundSymbol, +} from "../shared/utils/formatting.utils"; type ComicDetailProps = {}; /** @@ -60,7 +64,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { setVisible(false); }; - const [active, setActive] = useState(0); + const [active, setActive] = useState(1); const createDescriptionMarkup = (html) => { return { __html: html }; }; @@ -71,7 +75,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { // Tab groups for ComicVine metadata const tabGroup = [ { - id: 0, + id: 1, name: "Volume Information", content: isComicBookMetadataAvailable ? ( <> @@ -130,7 +134,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { ) : null, }, { - id: 1, + id: 2, name: "Other Metadata", content:
bastard
, }, @@ -158,85 +162,96 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { ); }; + const RawFileDetails = (props) => ( +
+
+
Raw File Details
+
{props.data.containedIn}
+
{prettyBytes(props.data.fileSize)}
+
{props.data.path}
+
+ {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}
+
+
+
+
+ Type + + {props.data.resource_type} + +
+
+
+
+ ComicVine Issue ID + {props.data.id} +
+
+
+
+
+
+ ); + + let imagePath = ""; + let comicBookTitle = ""; + if (!isNil(comicBookDetailData.rawFilDetails)) { + const encodedFilePath = encodeURI( + "http://localhost:3000" + + removeLeadingPeriod(comicBookDetailData.rawFilDetails.path), + ); + imagePath = escapePoundSymbol(encodedFilePath); + comicBookTitle = comicBookDetailData.rawFilDetails.name; + } else if ( + !isNil(comicBookDetailData.sourcedMetadata) && + !isNil(comicBookDetailData.sourcedMetadata.comicvine) + ) { + imagePath = comicBookDetailData.sourcedMetadata.comicvine.image.small_url; + comicBookTitle = comicBookDetailData.sourcedMetadata.comicvine.name; + } return (
{!isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && ( <> -

{comicBookDetailData.rawFileDetails.name}

+

{comicBookTitle}

-
-
-
Raw File Details
-
{comicBookDetailData.rawFileDetails.containedIn}
-
- {prettyBytes(comicBookDetailData.rawFileDetails.fileSize)} -
-
{comicBookDetailData.rawFileDetails.path}
-
- - {comicBookDetailData.rawFileDetails.extension} - -
-
-
- {!isNil(comicBookDetailData.sourcedMetadata.comicvine) && ( -
+ {!isNil(comicBookDetailData.rawFileDetails) && ( + <> + -
-
ComicVine Metadata
-
- Last scraped on{" "} - {dayjs(comicBookDetailData.updatedAt).format( - "MMM D YYYY [at] h:mm a", - )} -
-
-
- {comicBookDetailData.sourcedMetadata.comicvine.name} -
-
-
- {comicBookDetailData.sourcedMetadata.comicvine.number} -
-
-
-
-
- Type - - { - comicBookDetailData.sourcedMetadata.comicvine - .resource_type - } - -
-
-
-
- - ComicVine Issue ID - - - { - comicBookDetailData.sourcedMetadata.comicvine - .id - } - -
-
-
-
-
-
+ + )} + {!isNil(comicBookDetailData.sourcedMetadata.comicvine) && ( + )}