frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔧 Refactored Wanted component

Browse Source 
Included # of issues in a wanted volume
This commit is contained in:
Rishi Ghan
2024-04-16 22:40:48 -05:00
parent 1de01e7dbd
commit 5f2500552c
2 changed files with 53 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/client/components/Dashboard/WantedComicsList.tsx
View File

@@ -61,22 +61,42 @@ export const WantedComicsList = ({
title={issueName ? titleElement : <span>No Name</span>} title={issueName ? titleElement : <span>No Name</span>}
> >
<div className="pb-1"> <div className="pb-1">
{/* Issue type */} <div className="flex flex-row gap-2">
{isComicBookMetadataAvailable && {/* Issue type */}
!isNil(detectIssueTypes(comicvine.description)) ? ( {isComicBookMetadataAvailable &&
<div className="my-2"> !isNil(detectIssueTypes(comicvine.description)) ? (
<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"> <div className="my-2">
<span className="pr-1 pt-1"> <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">
<i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i> <span className="pr-1 pt-1">
</span> <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"> <span className="text-md text-slate-500 dark:text-slate-900">
{detectIssueTypes(comicvine.description).displayName} {
detectIssueTypes(comicvine.description)
.displayName
}
</span>
</span> </span>
</span> </div>
</div> ) : null}
) : 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 */} {/* comicVine metadata presence */}
{isComicBookMetadataAvailable && ( {isComicBookMetadataAvailable && (
<img <img

26
src/client/components/Search/Search.tsx
View File

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