🏗️ Refactored the scored matches

src/client/components/ComicDetail/ComicDetail.tsx

@@ -162,7 +162,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
             scorerConfiguration: {
               searchParams: issueSearchQuery.inferredIssueDetails,
             },
-            rawFileDetails: searchPayload.rawFileDetails,
+            rawFileDetails: searchPayload,
           },
           transformResponse: (r) => {
             const matches = JSON.parse(r);
@@ -181,7 +181,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
           } else {
             matches = response.data.map((match) => match);
           }
-          setComicVineMatches(matches);
+          const scoredMatches = matches.sort((a, b) => b.score - a.score);
+          setComicVineMatches(scoredMatches);
         });
     } catch (err) {
       console.log(err);
@@ -198,7 +199,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     } else if (!isEmpty(comicvine)) {
       issueSearchQuery = refineQuery(comicvine.name);
     }
-    fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery);
+    fetchComicVineMatches(rawFileDetails, issueSearchQuery, seriesSearchQuery);
     setSlidingPanelContentId("CVMatches");
     setVisible(true);
   };

src/client/components/ComicDetail/MatchResult.tsx

@@ -46,8 +46,24 @@ export const MatchResult = (props: MatchResultProps) => {
                   onError={handleBrokenImage}
                 />
               </div>
-              <div className="">
+              <div>
-                {match.name ? <p className="text-md">{match.name}</p> : null}
+                <div className="flex flex-row mb-1 justify-end">
+                  {match.name ? (
+                    <p className="text-md w-full">{match.name}</p>
+                  ) : null}
+
+                  <div className="flex">
+                    {/* score */}
+                    <span className="inline-flex items-center bg-green-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-green-400">
+                      <span className="pr-1 pt-1">
+                        <i className="icon-[solar--course-up-line-duotone] w-4 h-4"></i>
+                      </span>
+                      <span className="text-slate-900 dark:text-slate-900">
+                        {parseInt(match.score, 10)}
+                      </span>
+                    </span>
+                  </div>
+                </div>
                 <span className="flex flex-row gap-2 mb-2">
                   <span className="inline-flex items-center bg-slate-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                     <span className="pr-1 pt-1">
@@ -89,7 +105,7 @@ export const MatchResult = (props: MatchResultProps) => {
                     {match.volumeInformation.results.count_of_issues}
                   </p>
                   <p>
-                    Publisher:
+                    Published by{" "}
                     {match.volumeInformation.results.publisher.name}
                   </p>
                 </div>

src/client/components/Library/Library.tsx

@@ -200,7 +200,17 @@ export const Library = (): ReactElement => {
    **/
   const nextPage = (pageIndex: number, pageSize: number) => {
     if (!isPlaceholderData) {
-      setOffset(pageSize * pageIndex + 1);
+      queryClient.invalidateQueries({ queryKey: ["comics"] });
+      setSearchQuery({
+        query: {},
+        pagination: {
+          size: 15,
+          from: pageSize * pageIndex + 1,
+        },
+        type: "all",
+        trigger: "libraryPage",
+      });
+      // setOffset(pageSize * pageIndex + 1);
     }
   };
 
@@ -218,7 +228,17 @@ export const Library = (): ReactElement => {
     } else {
       from = (pageIndex - 1) * pageSize + 2 - (pageSize + 1);
     }
-    setOffset(from);
+    queryClient.invalidateQueries({ queryKey: ["comics"] });
+    setSearchQuery({
+      query: {},
+      pagination: {
+        size: 15,
+        from,
+      },
+      type: "all",
+      trigger: "libraryPage",
+    });
+    // setOffset(from);
   };
 
   // ImportStatus.propTypes = {