From 9ec5040bd7d2762c291735bb00a4189c9d3debd7 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Tue, 1 Mar 2022 23:01:57 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=9F=20Fixed=20404s=20upon=20page=20ref?= =?UTF-8?q?resh?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/fileops.actions.tsx | 10 +- src/client/components/ComicDetail.tsx | 52 ++-- .../ComicDetail/AcquisitionPanel.tsx | 11 +- src/client/components/Library.tsx | 277 +++++++++--------- src/client/components/Library/SearchBar.tsx | 51 ++-- src/client/components/LibraryGrid.tsx | 12 +- .../components/VolumeDetail/VolumeDetail.tsx | 2 +- src/client/constants/endpoints.ts | 6 + src/client/store/index.ts | 4 +- webpack.config.js | 2 +- 10 files changed, 238 insertions(+), 189 deletions(-) diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 3cc0f93..0743932 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -5,6 +5,7 @@ import { IMAGETRANSFORMATION_SERVICE_BASE_URI, LIBRARY_SERVICE_BASE_URI, LIBRARY_SERVICE_HOST, + SEARCH_SERVICE_BASE_URI, } from "../constants/endpoints"; import { IMS_COMIC_BOOK_GROUPS_FETCHED, @@ -257,7 +258,14 @@ export const extractComicArchive = }); }; -export const searchIssue = (options) => async (dispatch) => {}; +export const searchIssue = (query) => async (dispatch) => { + const foo = await axios({ + url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`, + method: "POST", + data: query, + }); + console.log(foo); +}; export const analyzeImage = (imageFilePath: string | Buffer) => async (dispatch) => { dispatch({ diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 9eb95c5..48aba9d 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -12,7 +12,7 @@ import DownloadsPanel from "./ComicDetail/DownloadsPanel"; import { EditMetadataPanel } from "./ComicDetail/EditMetadataPanel"; import { Menu } from "./ComicDetail/ActionMenu/Menu"; -import { isEmpty, isUndefined, isNil, findIndex } from "lodash"; +import { isEmpty, isUndefined, isNil } from "lodash"; import { RootState } from "threetwo-ui-typings"; import { getComicBookDetailById } from "../actions/comicinfo.actions"; @@ -117,6 +117,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { }, }; + // check for the availability of CV metadata const isComicBookMetadataAvailable = comicBookDetailData.sourcedMetadata && !isUndefined(comicBookDetailData.sourcedMetadata.comicvine) && @@ -125,6 +126,29 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { ) && !isEmpty(comicBookDetailData.sourcedMetadata); + // check for the availability of rawFileDetails + const areRawFileDetailsAvailable = + !isUndefined(comicBookDetailData.rawFileDetails) && + !isEmpty(comicBookDetailData.rawFileDetails.cover); + + // query for airdc++ + const airDCPPQuery = {}; + if (isComicBookMetadataAvailable) { + Object.assign(airDCPPQuery, { + issue: { + name: comicBookDetailData.sourcedMetadata.comicvine.volumeInformation + .name, + }, + }); + } else if (areRawFileDetailsAvailable) { + Object.assign(airDCPPQuery, { + issue: { + name: comicBookDetailData.inferredMetadata.issue.name, + number: comicBookDetailData.inferredMetadata.issue.number, + }, + }); + } + // Tab content and header details const tabGroup = [ { @@ -134,7 +158,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { content: isComicBookMetadataAvailable ? ( ) : null, - include: isComicBookMetadataAvailable, + shouldShow: isComicBookMetadataAvailable, }, { id: 2, @@ -156,8 +180,8 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { ), - include: - !isNil(comicBookDetailData.sourcedMetadata) && + shouldShow: + !isUndefined(comicBookDetailData.sourcedMetadata) && !isEmpty(comicBookDetailData.sourcedMetadata.comicInfo), }, { @@ -165,18 +189,14 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { icon: , name: "Archive Operations", content: , - include: - !isUndefined(comicBookDetailData.rawFileDetails) && - !isEmpty(comicBookDetailData.rawFileDetails.cover), + shouldShow: areRawFileDetailsAvailable, }, { id: 4, icon: , name: "Acquisition", - content: ( - - ), - include: !isNil(comicBookDetailData.rawFileDetails), + content: , + shouldShow: true, }, { id: 5, @@ -194,12 +214,11 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { key={5} /> ), - include: !isNil(comicBookDetailData.rawFileDetails), + shouldShow: true, }, ]; // filtered Tabs - const filteredTabs = tabGroup.filter((tab) => tab.include); - + const filteredTabs = tabGroup.filter((tab) => tab.shouldShow); // Tabs const MetadataTabGroup = () => { @@ -245,10 +264,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { // 2. from the CV-scraped version let imagePath = ""; let comicBookTitle = ""; - if ( - !isUndefined(comicBookDetailData.rawFileDetails) && - !isEmpty(comicBookDetailData.rawFileDetails.cover) - ) { + if (areRawFileDetailsAvailable) { const encodedFilePath = encodeURI( `${LIBRARY_SERVICE_HOST}/${comicBookDetailData.rawFileDetails.cover.filePath}`, ); diff --git a/src/client/components/ComicDetail/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx index 1f868cc..e742eb5 100644 --- a/src/client/components/ComicDetail/AcquisitionPanel.tsx +++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx @@ -16,16 +16,15 @@ import ellipsize from "ellipsize"; import { isEmpty, isNil, map } from "lodash"; import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; interface IAcquisitionPanelProps { - comicBookMetadata: any; + query: any; } export const AcquisitionPanel = ( props: IAcquisitionPanelProps, ): ReactElement => { - const volumeName = - props.comicBookMetadata.sourcedMetadata.comicvine.volumeInformation.name; - const sanitizedVolumeName = volumeName.replace(/[^a-zA-Z0-9 ]/g, " "); - const issueName = props.comicBookMetadata.sourcedMetadata.comicvine.name; + console.log(props); + const issueName = props.query.issue.name; + const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " "); // Selectors for picking state const airDCPPSearchResults = useSelector((state: RootState) => { @@ -51,7 +50,7 @@ export const AcquisitionPanel = ( // AirDC++ search query const dcppSearchQuery = { query: { - pattern: `${sanitizedVolumeName.replace(/#/g, "")}`, + pattern: `${sanitizedIssueName.replace(/#/g, "")}`, extensions: ["cbz", "cbr"], }, hub_urls: map( diff --git a/src/client/components/Library.tsx b/src/client/components/Library.tsx index 4648f25..360b974 100644 --- a/src/client/components/Library.tsx +++ b/src/client/components/Library.tsx @@ -191,151 +191,154 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {

Library

{/* Search bar */} -
-
- - - {headerGroups.map((headerGroup, idx) => ( - - {headerGroup.headers.map((column, idx) => ( - - ))} - - ))} - - - - {page.map((row, idx) => { - prepareRow(row); - return ( - navigateToComicDetail(row.original._id)} - > - {row.cells.map((cell, idx) => { - return ( - - ); - })} + {!isUndefined(data) ? ( +
+
+
- {column.render("Header")} -
- {cell.render("Cell")} -
+ + {headerGroups.map((headerGroup, idx) => ( + + {headerGroup.headers.map((column, idx) => ( + + ))} - ); - })} - -
+ {column.render("Header")} +
+ ))} + - {/* pagination controls */} - +
- + ) : null} ); diff --git a/src/client/components/Library/SearchBar.tsx b/src/client/components/Library/SearchBar.tsx index afc52f7..bc7477e 100644 --- a/src/client/components/Library/SearchBar.tsx +++ b/src/client/components/Library/SearchBar.tsx @@ -1,30 +1,47 @@ -import React, { ReactElement } from "react"; +import React, { ReactElement, useCallback } from "react"; import PropTypes from "prop-types"; import { Form, Field } from "react-final-form"; import { Link } from "react-router-dom"; +import { useDispatch } from "react-redux"; +import { searchIssue } from "../../actions/fileops.actions"; export const SearchBar = (): ReactElement => { - const foo = () => {}; + const dispatch = useDispatch(); + const handleSubmit = useCallback((e) => { + console.log(e); + dispatch( + searchIssue({ + queryObject: { + volumeName: e.search, + }, + }), + ); + }, []); return (
( -
- - - {({ input, meta }) => { - return ( - - ); - }} - -
+ +
+ + + {({ input, meta }) => { + return ( + + ); + }} + + +
+
)} />
diff --git a/src/client/components/LibraryGrid.tsx b/src/client/components/LibraryGrid.tsx index 2a4c9e6..abd34af 100644 --- a/src/client/components/LibraryGrid.tsx +++ b/src/client/components/LibraryGrid.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useMemo, ReactElement } from "react"; import PropTypes from "prop-types"; -import { useHistory } from "react-router"; +import { useNavigate } from "react-router"; import { removeLeadingPeriod, escapePoundSymbol, @@ -10,7 +10,7 @@ import prettyBytes from "pretty-bytes"; import ellipsize from "ellipsize"; import { useDispatch, useSelector } from "react-redux"; import { getComicBooks } from "../actions/fileops.actions"; -import { isNil, isEmpty } from "lodash"; +import { isNil, isEmpty, isUndefined } from "lodash"; import Masonry from "react-masonry-css"; import Card from "./Carda"; import { detectIssueTypes } from "../shared/utils/tradepaperback.utils"; @@ -45,7 +45,7 @@ export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => { {data.map(({ _id, rawFileDetails, sourcedMetadata }) => { let imagePath = ""; let comicName = ""; - if (!isNil(rawFileDetails)) { + if (!isEmpty(rawFileDetails.cover)) { const encodedFilePath = encodeURI( `${LIBRARY_SERVICE_HOST}/${removeLeadingPeriod( rawFileDetails.cover.filePath, @@ -71,7 +71,7 @@ export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => { title={comicName ? titleElement : null} >
- {!isNil(sourcedMetadata.comicvine) && ( + {!isEmpty(sourcedMetadata.comicvine) && ( @@ -81,13 +81,13 @@ export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => { )} - {!isNil(sourcedMetadata.comicvine) && + {!isUndefined(sourcedMetadata.comicvine.volumeInformation) && !isEmpty( detectIssueTypes( sourcedMetadata.comicvine.volumeInformation.description, ), ) ? ( - + { detectIssueTypes( sourcedMetadata.comicvine.volumeInformation diff --git a/src/client/components/VolumeDetail/VolumeDetail.tsx b/src/client/components/VolumeDetail/VolumeDetail.tsx index 0ef4660..75b779f 100644 --- a/src/client/components/VolumeDetail/VolumeDetail.tsx +++ b/src/client/components/VolumeDetail/VolumeDetail.tsx @@ -161,7 +161,7 @@ const VolumeDetails = (props): ReactElement => { if ( !isUndefined(comicBookDetails.sourcedMetadata) && - !isUndefined(comicBookDetails.sourcedMetadata.comicvine) + !isUndefined(comicBookDetails.sourcedMetadata.comicvine.volumeInformation) ) { return (
diff --git a/src/client/constants/endpoints.ts b/src/client/constants/endpoints.ts index bafad19..34aef8c 100644 --- a/src/client/constants/endpoints.ts +++ b/src/client/constants/endpoints.ts @@ -49,6 +49,12 @@ export const LIBRARY_SERVICE_BASE_URI = hostURIBuilder({ port: "3000", apiPath: "/api/library", }); +export const SEARCH_SERVICE_BASE_URI = hostURIBuilder({ + protocol: "http", + host: process.env.UNDERLYING_HOSTNAME || "localhost", + port: "3000", + apiPath: "/api/search", +}); export const SETTINGS_SERVICE_BASE_URI = hostURIBuilder({ protocol: "http", diff --git a/src/client/store/index.ts b/src/client/store/index.ts index d5cee77..d81650d 100644 --- a/src/client/store/index.ts +++ b/src/client/store/index.ts @@ -1,5 +1,5 @@ import { createStore, combineReducers, applyMiddleware } from "redux"; -import { createBrowserHistory } from "history"; +import { createHashHistory } from "history"; import { composeWithDevTools } from "redux-devtools-extension"; import thunk from "redux-thunk"; import { createReduxHistoryContext } from "redux-first-history"; @@ -12,7 +12,7 @@ const socketConnection = io(SOCKET_BASE_URI, { transports: ["websocket"] }); const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({ - history: createBrowserHistory(), + history: createHashHistory(), }); export const store = createStore( diff --git a/webpack.config.js b/webpack.config.js index 4f23c2a..a751a79 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -73,9 +73,9 @@ module.exports = () => { aliasFields: ["browser", "browser.esm"], }, devServer: { + hot: true, port: 3050, open: true, - hot: true, proxy: { "/api/**": { target: "http://localhost:8050",