🤺 ComicVine matching in drawer UX fixed

src/client/components/ComicDetail/MatchResult.tsx

@@ -4,6 +4,7 @@ import { convert } from "html-to-text";
 import ellipsize from "ellipsize";
 import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
 import axios from "axios";
+import { useGetComicByIdQuery } from "../../graphql/generated";
 
 interface MatchResultProps {
   matchData: any;
@@ -31,7 +32,7 @@ export const MatchResult = (props: MatchResultProps) => {
       // Invalidate and refetch the comic book metadata
       if (props.queryClient) {
         await props.queryClient.invalidateQueries({
-          queryKey: ["comicBookMetadata", comicObjectId],
+          queryKey: useGetComicByIdQuery.getKey({ id: comicObjectId }),
         });
       }
       

src/client/components/Dashboard/LibraryStatistics.tsx

@@ -19,7 +19,7 @@ interface LibraryStatisticsProps {
  * Returns `null` when `stats` is absent or the statistics array is empty.
  */
 export const LibraryStatistics = ({ stats }: LibraryStatisticsProps): ReactElement | null => {
-  if (!stats) return null;
+  if (!stats || !stats.totalDocuments) return null;
 
   const facet = stats.statistics?.[0];
   if (!facet) return null;

src/client/components/Dashboard/VolumeGroups.tsx

@@ -11,9 +11,11 @@ type VolumeGroupsProps = {
   volumeGroups?: GetVolumeGroupsQuery['getComicBookGroups'];
 };
 
-export const VolumeGroups = (props: VolumeGroupsProps): ReactElement => {
+export const VolumeGroups = (props: VolumeGroupsProps): ReactElement | null => {
   // Till mongo gives us back the deduplicated results with the ObjectId
   const deduplicatedGroups = unionBy(props.volumeGroups, "volumes.id");
+  if (!deduplicatedGroups || deduplicatedGroups.length === 0) return null;
+
   const navigate = useNavigate();
   const navigateToVolumes = (row: any) => {
     navigate(`/volumes/all`);

src/client/components/Dashboard/WantedComicsList.tsx

@@ -15,7 +15,9 @@ type WantedComicsListProps = {
 
 export const WantedComicsList = ({
   comics,
-}: WantedComicsListProps): ReactElement => {
+}: WantedComicsListProps): ReactElement | null => {
+  if (!comics || comics.length === 0) return null;
+
   const navigate = useNavigate();
 
   // embla carousel

yarn.lock

@@ -8575,14 +8575,14 @@ picocolors@^1.1.1:
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
 picomatch@^2.0.4, picomatch@^2.2.2, picomatch@^2.3.1:
-  version "2.3.2"
+  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.2.tgz#5a942915e26b372dc0f0e6753149a16e6b1c5601"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
-  integrity sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 picomatch@^4.0.2, picomatch@^4.0.3:
-  version "4.0.4"
+  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.4.tgz#fd6f5e00a143086e074dffe4c924b8fb293b0589"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz"
-  integrity sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==
+  integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
 
 pify@^2.3.0:
   version "2.3.0"