🔧 Refactored Wanted component

Included # of issues in a wanted volume
This commit is contained in:
2024-04-16 22:40:48 -05:00
parent 1de01e7dbd
commit 5f2500552c
2 changed files with 53 additions and 19 deletions

View File

@@ -61,22 +61,42 @@ export const WantedComicsList = ({
title={issueName ? titleElement : <span>No Name</span>}
>
<div className="pb-1">
{/* Issue type */}
{isComicBookMetadataAvailable &&
!isNil(detectIssueTypes(comicvine.description)) ? (
<div className="my-2">
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
</span>
<div className="flex flex-row gap-2">
{/* Issue type */}
{isComicBookMetadataAvailable &&
!isNil(detectIssueTypes(comicvine.description)) ? (
<div className="my-2">
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
{detectIssueTypes(comicvine.description).displayName}
<span className="text-md text-slate-500 dark:text-slate-900">
{
detectIssueTypes(comicvine.description)
.displayName
}
</span>
</span>
</span>
</div>
) : null}
</div>
) : null}
{/* issues marked as wanted, part of this volume */}
{wanted?.markEntireVolumeWanted ? (
<div className="text-sm">sagla volume pahije</div>
) : (
<div className="my-2">
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--documents-bold-duotone] w-5 h-5"></i>
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
{wanted.issues.length}
</span>
</span>
</div>
)}
</div>
{/* comicVine metadata presence */}
{isComicBookMetadataAvailable && (
<img

View File

@@ -73,7 +73,6 @@ export const Search = ({}: ISearchProps): ReactElement => {
// Add issue metadata
issues.push({ id, api_detail_url, image });
// Get volume metadata from CV
console.log("volume", comicObject.volume.id);
const response = await axios({
url: `${COMICVINE_SERVICE_URI}/getVolumes`,
method: "POST",
@@ -83,17 +82,32 @@ export const Search = ({}: ISearchProps): ReactElement => {
"id,name,deck,api_detail_url,image,description,start_year,count_of_issues,publisher,first_issue,last_issue",
},
});
console.log("boogie", response.data);
// set volume metadata key
volumeInformation = response.data?.results;
break;
case "volume":
volumeInformation = comicObject;
const {
id: volumeId,
api_detail_url: apiUrl,
image: volumeImage,
name,
publisher,
} = comicObject;
volumeInformation = {
id: volumeId,
url: apiUrl,
image: volumeImage,
name,
publisher,
};
break;
default:
console.log("Invalid resource type.");
break;
}
// Add to wanted list
return await axios({
url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
method: "POST",
@@ -101,7 +115,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
importType: "new",
payload: {
importStatus: {
isImported: true,
isImported: false, // wanted, but not acquired yet.
tagged: false,
matchedResult: {
score: "0",
@@ -111,9 +125,9 @@ export const Search = ({}: ISearchProps): ReactElement => {
source,
markEntireVolumeWanted,
issues,
volume: {},
volume: volumeInformation,
},
sourcedMetadata: { comicvine: volumeInformation } || null,
sourcedMetadata: { comicvine: volumeInformation },
},
},
});