From 2c8e339e3bd307a6679e0872d2a1d7bbc4f1c786 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Sun, 20 Mar 2022 02:31:25 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=F0=9F=8F=BD=20Refactoring=20UX=20o?= =?UTF-8?q?n=20Library=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/client/assets/scss/App.scss | 31 +++--- src/client/components/Import.tsx | 2 +- src/client/components/Library/Library.tsx | 97 +++++++------------ .../components/Library/LibraryContainer.tsx | 2 +- .../components/Library/RawFileDetails.tsx | 39 +++++--- src/client/constants/action-types.ts | 1 + src/client/reducers/fileops.reducer.ts | 7 ++ yarn.lock | 8 +- 9 files changed, 93 insertions(+), 96 deletions(-) diff --git a/package.json b/package.json index 72e09c3..c6d4443 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "slick-carousel": "^1.8.1", "socket.io-client": "^4.3.2", "styled-components": "^5.3.3", - "threetwo-ui-typings": "^1.0.13", + "threetwo-ui-typings": "^1.0.14", "voca": "^1.4.0", "websocket": "^1.0.34", "ws": "^7.5.3", diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 5e7f81b..39d990d 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -187,23 +187,24 @@ pre { } } .card-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - column-gap: 0.5em; - row-gap: 1.2em; + // display: grid; + // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + // column-gap: 0.5em; + // row-gap: 1.2em; .card { margin: 0 0 15px 0; + .partial-rounded-card-image { img { - border-top-left-radius: 0.3rem; - border-top-right-radius: 0.3rem; + border-top-left-radius: 0.4rem; + border-top-right-radius: 0.4rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } .rounded-card-image { - border-radius: 0.3rem; + border-radius: 0.4rem; } .is-horizontal { @@ -225,24 +226,20 @@ pre { } } .card-content { - align-self: center; + align-self: top; flex: 1; padding-left: 1em; - padding-top: 0; - padding-bottom: 0; - font-size: 0.8em; + padding-top: 0.5em; + padding-bottom: 0em; + .name { + font-size: 0.85em; + } ul { li.status { margin-top: 10px; } } - .truncate { - width: 400px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } } .is-divider { margin-top: 1.5rem; diff --git a/src/client/components/Import.tsx b/src/client/components/Import.tsx index 1a28cb2..a037620 100644 --- a/src/client/components/Import.tsx +++ b/src/client/components/Import.tsx @@ -119,7 +119,7 @@ export const Import = (props: IProps): ReactElement => { className="button is-warning is-light" onClick={toggleImport} > - {isImportQueuePaused ? pauseIconText : playIconText} + {!isImportQueuePaused ? pauseIconText : playIconText} diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx index acb18db..46732bb 100644 --- a/src/client/components/Library/Library.tsx +++ b/src/client/components/Library/Library.tsx @@ -8,12 +8,13 @@ import React, { import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; import { useTable, usePagination } from "react-table"; -import { isEmpty, isNil, isUndefined } from "lodash"; +import { flatten, isEmpty, isNil, isUndefined, map } from "lodash"; import RawFileDetails from "./RawFileDetails"; import ComicVineDetails from "./ComicVineDetails"; import SearchBar from "./SearchBar"; import { useDispatch } from "react-redux"; import { searchIssue } from "../../actions/fileops.actions"; +import ellipsize from "ellipsize"; interface IComicBookLibraryProps { data: { @@ -37,9 +38,35 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { const ImportStatus = ({ value }) => { return value ? ( - Imported +
+
+ + Series + {ellipsize(value.series[0], 25)} + +
+
+
+
+ + Pages + {value.pagecount[0]} + +
+ +
+ + Issue + {!isNil(value.number) && ( + {parseInt(value.number[0], 10)} + )} + +
+
+
+
) : ( - "Not Imported" + No ComicInfo.xml ); }; @@ -59,11 +86,14 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { id: "fileDetails", accessor: (row) => !isEmpty(row._source.rawFileDetails) - ? row._source.rawFileDetails + ? { + rawFileDetails: row._source.rawFileDetails, + inferredMetadata: row._source.inferredMetadata, + } : row._source.sourcedMetadata, Cell: ({ value }) => { // If no CV info available, use raw file metadata - if (!isNil(value.cover)) { + if (!isNil(value.rawFileDetails.cover)) { return ; } // If CV metadata available, show it @@ -75,7 +105,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { }, { Header: "Import Status", - accessor: "_source.importStatus.isImported", + accessor: "_source.sourcedMetadata.comicInfo", Cell: ImportStatus, }, ], @@ -83,23 +113,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { { Header: "Additional Metadata", columns: [ - { - Header: "Issue #", - accessor: "_source.inferredMetadata.issue", - Cell(props) { - return ( - !isUndefined(props.cell.value) && ( -
-
- Inferred - {props.cell.value.number} -
-
- ) - ); - }, - }, - { Header: "Publisher", accessor: @@ -110,44 +123,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { ); }, }, - - { - Header: "Type", - accessor: "_source.sourcedMetadata.comicvine", - Cell(props) { - return ( - !isEmpty(props.cell.value) && ( - - {props.cell.value.resource_type} - - ) - ); - }, - }, - - { - Header: "Volume", - accessor: "_source.sourcedMetadata.comicvine.volumeInformation", - Cell(props) { - return ( - !isNil(props.cell.value) &&
{props.cell.value.name}
- ); - }, - }, - - { - Header: "Match Score", - accessor: "_source.sourcedMetadata.comicvine.score", - Cell(props) { - return ( - !isNil(props.cell.value) && ( - - {parseInt(props.cell.value, 10)} - - ) - ); - }, - }, ], }, ], diff --git a/src/client/components/Library/LibraryContainer.tsx b/src/client/components/Library/LibraryContainer.tsx index b790ebd..bc21846 100644 --- a/src/client/components/Library/LibraryContainer.tsx +++ b/src/client/components/Library/LibraryContainer.tsx @@ -29,7 +29,7 @@ const LibraryContainer = () => { return !isEmpty(searchResults) ? ( ) : ( - "asdasd" + "No data found." ); }; diff --git a/src/client/components/Library/RawFileDetails.tsx b/src/client/components/Library/RawFileDetails.tsx index 3e871e9..9b231c1 100644 --- a/src/client/components/Library/RawFileDetails.tsx +++ b/src/client/components/Library/RawFileDetails.tsx @@ -7,9 +7,9 @@ import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints"; // raw file details export const RawFileDetails = (rawFileData): ReactElement => { - const { data } = rawFileData; + const { rawFileDetails, inferredMetadata } = rawFileData.data; const encodedFilePath = encodeURI( - `${LIBRARY_SERVICE_HOST}/${data.cover.filePath}`, + `${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`, ); const filePath = escapePoundSymbol(encodedFilePath); return ( @@ -23,17 +23,34 @@ export const RawFileDetails = (rawFileData): ReactElement => {
  • - {ellipsize(data.name, 28)} + {ellipsize(rawFileDetails.name, 49)} +
    • + +
  • +
    +
    + Series:{" "} + + {inferredMetadata.issue.name} + +
    +
  • -
    -
    - - {data.extension} - - - {prettyBytes(data.fileSize)} - +
    +
    +
    + + {inferredMetadata.issue.number} + + + + {rawFileDetails.extension} + + + {prettyBytes(rawFileDetails.fileSize)} + +
    • diff --git a/src/client/constants/action-types.ts b/src/client/constants/action-types.ts index 50146e4..a500a2f 100644 --- a/src/client/constants/action-types.ts +++ b/src/client/constants/action-types.ts @@ -14,6 +14,7 @@ export const IMS_RAW_IMPORT_FAILED = "IMS_RAW_IMPORT_FAILED"; export const LS_IMPORT_CALL_IN_PROGRESS = "LS_IMPORT_CALL_IN_PROGRESS"; // Library import bull mq queue control export const LS_TOGGLE_IMPORT_QUEUE = "LS_TOGGLE_IMPORT_QUEUE"; +export const LS_QUEUE_DRAINED = "LS_QUEUE_DRAINED"; // ComicVine Metadata export const IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS = diff --git a/src/client/reducers/fileops.reducer.ts b/src/client/reducers/fileops.reducer.ts index c12973b..22ae9d5 100644 --- a/src/client/reducers/fileops.reducer.ts +++ b/src/client/reducers/fileops.reducer.ts @@ -15,6 +15,7 @@ import { IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS, LS_IMPORT, LS_COVER_EXTRACTED, + LS_QUEUE_DRAINED, LS_COMIC_ADDED, IMG_ANALYSIS_CALL_IN_PROGRESS, IMG_ANALYSIS_DATA_FETCH_SUCCESS, @@ -147,6 +148,12 @@ function fileOpsReducer(state = initialState, action) { librarySearchResultCount: state.librarySearchResultCount + 1, }; } + case LS_QUEUE_DRAINED: { + console.log("drained", action); + return { + ...state, + }; + } case LS_COMIC_ADDED: { console.log("ADDED na anna", action); return { diff --git a/yarn.lock b/yarn.lock index 0c9b01a..85d09eb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12789,10 +12789,10 @@ text-table@^0.2.0, text-table@~0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= -threetwo-ui-typings@^1.0.13: - version "1.0.13" - resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.13.tgz#9437a8c08a6984ebd1dcdf308e06e404dee11c81" - integrity sha512-AQiY8/hbp+TobBoehNTEoNco97AoiKYQjAANSFDR3pSD5jFn5qjLlKntvqdNF9Fg5tcS0ReYe0AjsvKshKpixQ== +threetwo-ui-typings@^1.0.14: + version "1.0.14" + resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.14.tgz#39cb8115cd311af2569504a6d32f401827de5c0a" + integrity sha512-nfOi2T9Pr35Bry7Y9q0r6ZnuLdGqfJY45Xu0lDGJl/oA8RLBS19FZtxsVQzYnm5jfm0tO2Q6t/JY7JnU8a9olw== dependencies: typescript "^4.3.2"