🤺 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