From c86d0d8b15a8c947daedb0a741cd73ed475c239c Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Fri, 19 Jan 2024 17:14:22 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8D=20Fixing=20CV=20search=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ComicDetail/AcquisitionPanel.tsx | 33 ----- src/client/components/Dashboard/Dashboard.tsx | 6 +- .../components/Dashboard/VolumeGroups.tsx | 28 +++-- src/client/components/Search/Search.tsx | 113 ++++++++++-------- src/client/components/shared/Navbar2.tsx | 8 ++ src/client/index.tsx | 2 + 6 files changed, 92 insertions(+), 98 deletions(-) diff --git a/src/client/components/ComicDetail/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx index 5e2ff97..86baf2b 100644 --- a/src/client/components/ComicDetail/AcquisitionPanel.tsx +++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx @@ -134,7 +134,6 @@ export const AcquisitionPanel = ( ); setAirDCPPSearchInstance(currentInstance); setAirDCPPSearchInfo(searchInfo); - console.log("Asdas", airDCPPSearchInfo); if (currentInstance.result_count === 0) { // ...nothing was received, show an informative message to the user console.log("No more search results."); @@ -231,38 +230,6 @@ export const AcquisitionPanel = ( search(manualQuery, airDCPPSocketInstance); }; - // download via AirDC++ - const downloadDCPPResult = useCallback( - (searchInstanceId, resultId, name, size, type) => { - // dispatch( - // downloadAirDCPPItem( - // searchInstanceId, - // resultId, - // props.comicObjectId, - // name, - // size, - // type, - // airDCPPConfiguration.airDCPPState.socket, - // { - // username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`, - // password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`, - // }, - // ), - // ); - // this is to update the download count badge on the downloads tab - // dispatch( - // getBundlesForComic( - // props.comicObjectId, - // airDCPPConfiguration.airDCPPState.socket, - // { - // username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`, - // password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`, - // }, - // ), - // ); - }, - [], - ); return ( <>
diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx index 9974aae..47a736c 100644 --- a/src/client/components/Dashboard/Dashboard.tsx +++ b/src/client/components/Dashboard/Dashboard.tsx @@ -170,11 +170,13 @@ export const Dashboard = (): ReactElement => {
-
+
{/* ComicInfo.xml presence */} {!isNil(comicInfo) && !isEmpty(comicInfo) && ( - +
+ +
)} {/* ComicVine metadata presence */} {isComicVineMetadataAvailable && ( diff --git a/src/client/components/Dashboard/VolumeGroups.tsx b/src/client/components/Dashboard/VolumeGroups.tsx index 944526b..3f1f637 100644 --- a/src/client/components/Dashboard/VolumeGroups.tsx +++ b/src/client/components/Dashboard/VolumeGroups.tsx @@ -41,25 +41,27 @@ export const VolumeGroups = (props): ReactElement => { imageUrl={data.volumes.image.small_url} hasDetails > -
-
+
+
- {ellipsize(data.volumes.name, 18)} + {ellipsize(data.volumes.name, 48)}
-
- - Issues - - {data.volumes.count_of_issues} - + + + + -
+ + + {data.volumes.count_of_issues} issues + +
-
-
-
+
+
+
); })} diff --git a/src/client/components/Search/Search.tsx b/src/client/components/Search/Search.tsx index 6001ff9..d474bbf 100644 --- a/src/client/components/Search/Search.tsx +++ b/src/client/components/Search/Search.tsx @@ -1,8 +1,7 @@ -import React, { useCallback, ReactElement } from "react"; +import React, { useCallback, ReactElement, useState } from "react"; import { isNil, isEmpty } from "lodash"; import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings"; import { importToDB } from "../../actions/fileops.actions"; -import { useSelector, useDispatch } from "react-redux"; import { comicinfoAPICall } from "../../actions/comicinfo.actions"; import { search } from "../../services/api/SearchApi"; import { Form, Field } from "react-final-form"; @@ -10,6 +9,9 @@ import Card from "../shared/Carda"; import ellipsize from "ellipsize"; import { convert } from "html-to-text"; import dayjs from "dayjs"; +import { useQuery, useQueryClient } from "@tanstack/react-query"; +import { COMICVINE_SERVICE_URI } from "../../constants/endpoints"; +import axios from "axios"; interface ISearchProps {} @@ -17,38 +19,47 @@ export const Search = ({}: ISearchProps): ReactElement => { const formData = { search: "", }; - const dispatch = useDispatch(); - const getCVSearchResults = useCallback( - (searchQuery) => { - dispatch( - comicinfoAPICall({ - callURIAction: "search", - callMethod: "GET", - callParams: { - api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69", - query: searchQuery.search, - format: "json", - limit: "10", - offset: "0", - field_list: - "id,name,deck,api_detail_url,image,description,volume,cover_date", - resources: "issue", - }, - }), - ); - }, - [dispatch], - ); + const queryClient = useQueryClient(); + const [searchQuery, setSearchQuery] = useState(""); + const getCVSearchResults = (searchQuery) => { + console.log(searchQuery); + setSearchQuery(searchQuery.search); + // queryClient.invalidateQueries({ queryKey: ["comicvineSearchResults"] }); + }; + const { + data: comicVineSearchResults, + isLoading, + isSuccess, + } = useQuery({ + queryFn: async () => + await axios({ + url: `${COMICVINE_SERVICE_URI}/search`, + method: "GET", + params: { + api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69", + query: searchQuery, + format: "json", + limit: "10", + offset: "0", + field_list: + "id,name,deck,api_detail_url,image,description,volume,cover_date", + resources: "issue", + }, + }), + queryKey: ["comicvineSearchResults", searchQuery], + enabled: !isNil(searchQuery), + }); + console.log(comicVineSearchResults); const addToLibrary = useCallback( (sourceName: string, comicData) => - dispatch(importToDB(sourceName, { comicvine: comicData })), + importToDB(sourceName, { comicvine: comicData }), [], ); - const comicVineSearchResults = useSelector( - (state: RootState) => state.comicInfo.searchResults, - ); + // const comicVineSearchResults = useSelector( + // (state: RootState) => state.comicInfo.searchResults, + // ); const createDescriptionMarkup = (html) => { return { __html: html }; }; @@ -87,29 +98,26 @@ export const Search = ({}: ISearchProps): ReactElement => { )} /> - {!isNil(comicVineSearchResults.results) && - !isEmpty(comicVineSearchResults.results) ? ( -
- {comicVineSearchResults.results.map((result) => { - return ( -
-
-
+ {!isNil(comicVineSearchResults?.data.results) && + !isEmpty(comicVineSearchResults?.data.results) ? ( +
+ {comicVineSearchResults.data.results.map((result) => { + return isSuccess ? ( +
+
+
-
- {!isEmpty(result.name) ? ( - result.name +
+ {!isEmpty(result.volume.name) ? ( + result.volume.name ) : ( No Name )} @@ -140,21 +148,26 @@ export const Search = ({}: ISearchProps): ReactElement => { {ellipsize( convert(result.description, { baseElements: { - selectors: ["p"], + selectors: ["p", "div"], }, }), 320, )}

- +
+ +
+ ) : ( +
Loading
); })}
diff --git a/src/client/components/shared/Navbar2.tsx b/src/client/components/shared/Navbar2.tsx index 95ad9db..c509a90 100644 --- a/src/client/components/shared/Navbar2.tsx +++ b/src/client/components/shared/Navbar2.tsx @@ -68,6 +68,14 @@ export const Navbar2 = (): ReactElement => { Downloads +
  • + + Comicvine Search + +
    • diff --git a/src/client/index.tsx b/src/client/index.tsx index fdc4617..ef91bb3 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -11,6 +11,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import Import from "./components/Import/Import"; import Dashboard from "./components/Dashboard/Dashboard"; +import Search from "./components/Search/Search"; import TabulatedContentContainer from "./components/Library/TabulatedContentContainer"; import { ComicDetailContainer } from "./components/ComicDetail/ComicDetailContainer"; @@ -33,6 +34,7 @@ const router = createBrowserRouter([ element: , }, { path: "import", element: }, + { path: "search", element: }, ], }, ]);