From 4b2f905dc5f0685d0867a5ef3ad5f3ec7064b129 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Fri, 29 Dec 2023 22:24:37 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Changes=20to=20ComicDet?= =?UTF-8?q?ail=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ComicDetail/ComicDetail.tsx | 10 +-- .../ComicDetail/ComicDetailContainer.tsx | 6 +- .../components/ComicDetail/DownloadsPanel.tsx | 2 +- .../components/ComicDetail/TabControls.tsx | 2 +- .../ComicDetail/Tabs/ArchiveOperations.tsx | 54 ++++++++---- .../ComicDetail/Tabs/ComicInfoXML.tsx | 87 ++++++++++--------- src/client/components/Library/Library.tsx | 9 +- src/client/components/Library/SearchBar.tsx | 20 +---- src/client/components/shared/T2Table.tsx | 1 - 9 files changed, 96 insertions(+), 95 deletions(-) diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx index e566903..a735f90 100644 --- a/src/client/components/ComicDetail/ComicDetail.tsx +++ b/src/client/components/ComicDetail/ComicDetail.tsx @@ -185,10 +185,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { ), content: ( -
-
- {!isNil(comicInfo) && } -
+
+ {!isNil(comicInfo) && }
), shouldShow: !isEmpty(comicInfo), @@ -199,9 +197,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { ), name: "Archive Operations", - content: <>, - /* - */ + content: , shouldShow: areRawFileDetailsAvailable, }, { diff --git a/src/client/components/ComicDetail/ComicDetailContainer.tsx b/src/client/components/ComicDetail/ComicDetailContainer.tsx index cb579e4..1f4e427 100644 --- a/src/client/components/ComicDetail/ComicDetailContainer.tsx +++ b/src/client/components/ComicDetail/ComicDetailContainer.tsx @@ -14,7 +14,7 @@ export const ComicDetailContainer = (): ReactElement | null => { isLoading, isError, } = useQuery({ - queryKey: [], + queryKey: ["comicBookMetadata"], queryFn: async () => await axios({ url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`, @@ -25,10 +25,6 @@ export const ComicDetailContainer = (): ReactElement | null => { }), }); console.log(comicBookDetailData); - useEffect(() => { - // dispatch(getComicBookDetailById(comicObjectId)); - // dispatch(getSettings()); - }, []); { isError && <>Error; diff --git a/src/client/components/ComicDetail/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx index 17ed8cc..cb3c209 100644 --- a/src/client/components/ComicDetail/DownloadsPanel.tsx +++ b/src/client/components/ComicDetail/DownloadsPanel.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useContext, ReactElement, useState } from "react"; import { RootState } from "threetwo-ui-typings"; -import { isArray, isEmpty, isNil, isUndefined, map } from "lodash"; +import { isEmpty, map } from "lodash"; import prettyBytes from "pretty-bytes"; import dayjs from "dayjs"; import ellipsize from "ellipsize"; diff --git a/src/client/components/ComicDetail/TabControls.tsx b/src/client/components/ComicDetail/TabControls.tsx index 219a155..2eff1a3 100644 --- a/src/client/components/ComicDetail/TabControls.tsx +++ b/src/client/components/ComicDetail/TabControls.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, useEffect, useState } from "react"; -import { isEmpty, isNil } from "lodash"; +import { isNil } from "lodash"; export const TabControls = (props): ReactElement => { // const comicBookDetailData = useSelector( diff --git a/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx b/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx index 3eb94e2..3e56cf0 100644 --- a/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx +++ b/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx @@ -6,6 +6,9 @@ import SlidingPane from "react-sliding-pane"; import { extractComicArchive } from "../../../actions/fileops.actions"; import { analyzeImage } from "../../../actions/fileops.actions"; import { Canvas } from "../../shared/Canvas"; +import { useQuery } from "@tanstack/react-query"; +import axios from "axios"; +import { LIBRARY_SERVICE_BASE_URI } from "../../../constants/endpoints"; export const ArchiveOperations = (props): ReactElement => { const { data } = props; @@ -20,7 +23,28 @@ export const ArchiveOperations = (props): ReactElement => { // return state.fileOps.imageAnalysisResults; // }); - const unpackComicArchive = useCallback(() => { + const unpackComicArchive = () => { + const { data } = useQuery({ + queryFn: async () => + await axios({ + method: "POST", + url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`, + headers: { + "Content-Type": "application/json; charset=utf-8", + }, + data: { + filePath: data.rawFileDetails.filePath, + options: { + type: "full", + purpose: "analysis", + imageResizeOptions: { + baseWidth: 275, + }, + }, + }, + }), + queryKey: [""], + }); // dispatch( // extractComicArchive(data.rawFileDetails.filePath, { // type: "full", @@ -30,7 +54,7 @@ export const ArchiveOperations = (props): ReactElement => { // }, // }), // ); - }, []); + }; // sliding panel config const [visible, setVisible] = useState(false); @@ -92,22 +116,16 @@ export const ArchiveOperations = (props): ReactElement => { ) : null}
{!isEmpty(extractedComicBookArchive) ? ( -
- -
-
- - {extractedComicBookArchive.length} pages - - -
-
- +
+ + {extractedComicBookArchive.length} pages + +
) : null}
diff --git a/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx b/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx index c5165c0..2b3e745 100644 --- a/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx +++ b/src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx @@ -4,52 +4,59 @@ import React, { ReactElement } from "react"; export const ComicInfoXML = (data): ReactElement => { const { json } = data; return ( -
-
-
{json.series[0]}
-
-
-
- - Pages - - {json.publisher[0]} +
+
+
+

{json.series[0]}

+
+
+ published by{" "} + + {json.publisher[0]} + + +
+ + {/* Issue number */} + {!isUndefined(json.number) && ( +
+ + + + + + {parseInt(json.number[0], 10)} -
-
- - Issue # - - {!isUndefined(json.number) && parseInt(json.number[0], 10)} - +
+ )} +
+ {/* Genre */} + + + -
-
- - Pages - - {json.pagecount[0]} - + + + {json.genre[0]} -
- {!isUndefined(json.genre) && ( -
- - Genre - - {json.genre[0]} - - -
- )} - + + + + +
+ {/* Summary */} + {!isUndefined(json.summary) && ( + + {json.summary[0]} + + )}
- {json.notes[0]} -
-
- {!isUndefined(json.summary) && json.summary[0]} + {/* Notes */} + + {json.notes[0]} +
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx index fc21c78..fdd6c7a 100644 --- a/src/client/components/Library/Library.tsx +++ b/src/client/components/Library/Library.tsx @@ -27,7 +27,6 @@ export const Library = (): ReactElement => { const [offset, setOffset] = useState(0); const [searchQuery, setSearchQuery] = useState({ query: {}, - pagination: { size: 25, from: offset, @@ -37,7 +36,10 @@ export const Library = (): ReactElement => { }); const queryClient = useQueryClient(); - // Method to fetch paginated issues + /** + * Method that queries the Elasticsearch index "comics" for issues specified by the query + * @param searchQuery - A searchQuery object that contains the search term, type, and pagination params. + */ const fetchIssues = async (searchQuery) => { const { pagination, query, type } = searchQuery; return await axios({ @@ -50,6 +52,7 @@ export const Library = (): ReactElement => { }, }); }; + const searchIssues = (e) => { queryClient.invalidateQueries({ queryKey: ["comics"] }); setSearchQuery({ @@ -242,7 +245,7 @@ export const Library = (): ReactElement => { {!isUndefined(searchResults?.hits) ? (
-
+
searchIssues(e)} />
{ const { searchHandler } = props; - const handleSubmit = useCallback((e) => { - // searchIssue( - // { - // query: { - // volumeName: e.search, - // }, - // }, - // { - // pagination: { - // size: 25, - // from: 0, - // }, - // type: "volumeName", - // trigger: "libraryPage", - // }, - // ), - }, []); return (