From 8fe49f7034d8d85014f5fde772151ea17a4b5247 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Tue, 9 Apr 2024 17:38:14 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8D=20Improvements=20to=20CV=20search?= =?UTF-8?q?=20results?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/components/Search/Search.tsx | 173 ++++++++++++++---- .../SystemSettings/SystemSettingsForm.tsx | 8 +- .../components/VolumeDetail/VolumeDetail.tsx | 44 ++++- src/client/components/Volumes/Volumes.tsx | 8 +- 4 files changed, 179 insertions(+), 54 deletions(-) diff --git a/src/client/components/Search/Search.tsx b/src/client/components/Search/Search.tsx index ecc386d..5d3fb6d 100644 --- a/src/client/components/Search/Search.tsx +++ b/src/client/components/Search/Search.tsx @@ -7,7 +7,7 @@ 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 { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { COMICVINE_SERVICE_URI, LIBRARY_SERVICE_BASE_URI, @@ -23,32 +23,31 @@ export const Search = ({}: ISearchProps): ReactElement => { const queryClient = useQueryClient(); const [searchQuery, setSearchQuery] = useState(""); const [comicVineMetadata, setComicVineMetadata] = useState({}); - const getCVSearchResults = (searchQuery) => { - setSearchQuery(searchQuery.search); - }; const { + mutate, data: comicVineSearchResults, - isLoading, + isPending, isSuccess, - } = useQuery({ - queryFn: async () => - await axios({ + } = useMutation({ + mutationFn: async (data: { search: string; resource: string }) => { + const { search, resource } = data; + console.log(data); + return await axios({ url: `${COMICVINE_SERVICE_URI}/search`, method: "GET", params: { api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69", - query: searchQuery, + query: search, format: "json", limit: "10", offset: "0", field_list: - "id,name,deck,api_detail_url,image,description,volume,cover_date", - resources: "issue", + "id,name,deck,api_detail_url,image,description,volume,cover_date,count_of_issues", + resources: resource, }, - }), - queryKey: ["comicvineSearchResults", searchQuery], - enabled: !isNil(searchQuery), + }); + }, }); // add to library @@ -107,7 +106,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
{ Search
+ {/* resource type selection: volume, issue etc. */} +
+ + {({ input: volumesInput, meta }) => ( +
+
+ + +
+
+ )} + + + + {({ input: issuesInput, meta }) => ( +
+
+ + +
+
+ )} + +
)} /> - {isLoading && <>Loading kaka...} - {!isNil(comicVineSearchResults?.data.results) && - !isEmpty(comicVineSearchResults?.data.results) ? ( + {isPending && <>Loading results...} + {!isEmpty(comicVineSearchResults?.data?.results) ? (
{comicVineSearchResults.data.results.map((result) => { - return isSuccess ? ( + return result.resource_type === "issue" ? (
-
+
{ hasDetails={false} />
-
+
{!isEmpty(result.volume.name) ? ( result.volume.name @@ -167,22 +209,14 @@ export const Search = ({}: ISearchProps): ReactElement => { No Name )}
-
-
-
- Cover date - - {dayjs(result.cover_date).format("MMM D, YYYY")} - -
-
+ {result.cover_date && ( +

+ Cover date + {dayjs(result.cover_date).format("MMM D, YYYY")} +

+ )} -
-
- {result.id} -
-
-
+

{result.id}

{result.api_detail_url} @@ -210,7 +244,72 @@ export const Search = ({}: ISearchProps): ReactElement => {
) : ( -
Loading
+ result.resource_type === "volume" && ( +
+
+
+ +
+
+
+ {!isEmpty(result.name) ? ( + result.name + ) : ( + No Name + )} +
+
+
+
+ + Number of issues + + + {result.count_of_issues} + +
+
+ +
+
+ + {result.id} + +
+
+
+ + + {result.api_detail_url} + +

+ {ellipsize( + convert(result.description, { + baseElements: { + selectors: ["p", "div"], + }, + }), + 320, + )} +

+
+ +
+
+
+
+ ) ); })}
diff --git a/src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx b/src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx index 68e41aa..8395ba7 100644 --- a/src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx +++ b/src/client/components/Settings/SystemSettings/SystemSettingsForm.tsx @@ -48,13 +48,11 @@ export const SystemSettingsForm = (): ReactElement => { diff --git a/src/client/components/VolumeDetail/VolumeDetail.tsx b/src/client/components/VolumeDetail/VolumeDetail.tsx index 583859e..e5c7fd6 100644 --- a/src/client/components/VolumeDetail/VolumeDetail.tsx +++ b/src/client/components/VolumeDetail/VolumeDetail.tsx @@ -61,7 +61,7 @@ const VolumeDetails = (props): ReactElement => { }), queryKey: ["comicObject"], }); - console.log(comicObject); + // get issues for a series const { data: issuesForSeries, @@ -108,7 +108,6 @@ const VolumeDetails = (props): ReactElement => { status, } = useGetStoryArcs(); - console.log("jihya", issuesForSeries); const IssuesInVolume = () => ( <> {!isUndefined(issuesForSeries) ? ( @@ -146,13 +145,42 @@ const VolumeDetails = (props): ReactElement => { const Issues = () => ( <> - as -
    +
    +
    + You can add a single issue or the whole volume, and it will be added + to the list of `Wanted` items. +
    +
    +
    {isSuccess && issuesForSeries?.data.map((issue) => { - return
  • {JSON.stringify(issue, null, 2)}
    • ; + return ( +
    +
    +
    + +
    +
    +

    {issue.name}

    +

    + {convert(issue.description, { + baseElements: { + selectors: ["p"], + }, + })} +

    +
    +
    +
    + ); })} -
+
); @@ -265,9 +293,9 @@ const VolumeDetails = (props): ReactElement => { />
-
+
{/* Title */} - + {sourcedMetadata.comicvine.volumeInformation.name} {/* Comicvine Id */} diff --git a/src/client/components/Volumes/Volumes.tsx b/src/client/components/Volumes/Volumes.tsx index a80682b..c4021fb 100644 --- a/src/client/components/Volumes/Volumes.tsx +++ b/src/client/components/Volumes/Volumes.tsx @@ -58,10 +58,10 @@ export const Volumes = (props): ReactElement => { hasDetails={false} /> -
- +
+
{sourcedMetadata.comicvine.volumeInformation.name} - +

{ellipsize( convert( @@ -72,7 +72,7 @@ export const Volumes = (props): ReactElement => { }, }, ), - 120, + 180, )}