hh

Author: gottasellemall69

components/Yugioh/GridView.js

@@ -13,6 +13,21 @@ const formatCurrency = ( value ) => {
   return `$${ numeric.toFixed( 2 ) }`;
 };
 
+const normalizeOptionalString = ( value ) => {
+  if ( value === null || value === undefined ) {
+    return null;
+  }
+
+  const normalized = String( value ).trim();
+  return normalized || null;
+};
+
+const getPrimaryCardImage = ( card ) => (
+  Array.isArray( card?.card_images )
+    ? card.card_images.find( ( image ) => image?.id || image?.image_url || image?.image_url_cropped || image?.image_url_small )
+    : null
+);
+
 const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, handleSortChange, selectedCardIds, onSelectedCardIdsChange, folderNameMap = {} } ) => {
   const [ edit, setEdit ] = useState( {} );
   const [ editValues, setEditValues ] = useState( {} );
@@ -116,10 +131,20 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
 
   const getCardImageSources = useCallback(
     ( card ) => {
-      const localImageSrc = card?.cardId ? getFullImagePath( card.cardId ) : null;
-      const remoteImageSrc = typeof card?.remoteImageUrl === "string" && card.remoteImageUrl.trim()
-        ? card.remoteImageUrl.trim()
-        : null;
+      const primaryCardImage = getPrimaryCardImage( card );
+      const imageId =
+        normalizeOptionalString( primaryCardImage?.id ) ||
+        normalizeOptionalString( card?.cardImageId ) ||
+        normalizeOptionalString( card?.cardId ) ||
+        normalizeOptionalString( card?.cardDetailId ) ||
+        normalizeOptionalString( card?.id );
+      const localImageSrc = imageId ? getFullImagePath( imageId ) : null;
+      const remoteImageSrc =
+        normalizeOptionalString( card?.remoteImageUrl ) ||
+        normalizeOptionalString( card?.image_url ) ||
+        normalizeOptionalString( primaryCardImage?.image_url ) ||
+        normalizeOptionalString( primaryCardImage?.image_url_cropped ) ||
+        normalizeOptionalString( primaryCardImage?.image_url_small );
       const primaryImageSrc = remoteImageSrc || localImageSrc || FALLBACK_IMAGE;
       const secondaryImageSrc = primaryImageSrc === remoteImageSrc ? localImageSrc : remoteImageSrc;
 
@@ -252,6 +277,13 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
             if ( !card ) return null;
 
             const { primaryImageSrc, secondaryImageSrc } = getCardImageSources( card );
+            const primaryCardImage = getPrimaryCardImage( card );
+            const detailCardId =
+              normalizeOptionalString( primaryCardImage?.id ) ||
+              normalizeOptionalString( card?.cardImageId ) ||
+              normalizeOptionalString( card?.cardId ) ||
+              normalizeOptionalString( card?.cardDetailId ) ||
+              normalizeOptionalString( card?.id );
             const cardId = String( card._id ?? "" );
             const isSelected = isSelectionEnabled && selectedCardIds.has( cardId );
             const isFlipped = Boolean( flippedCards[ card._id ] );
@@ -278,7 +310,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
             const cardDetailsQuery = ( () => {
               const query = { source: "collection" };
 
-              if ( card.cardId ) query.card = card.cardId;
+              if ( detailCardId ) query.card = detailCardId;
               if ( computedLetter ) query.letter = computedLetter;
               if ( card.setName ) query.set_name = card.setName;
               if ( card.productName ) query.card_name = card.productName;

components/Yugioh/YugiohCardDataTable.js

@@ -38,6 +38,28 @@ const getUnitPrice = ( value ) => {
 const getTotalPrice = ( item ) =>
     getUnitPrice( item?.data?.marketPrice ) * getQuantity( item?.card?.quantity );
 
+const getOptionalString = ( value ) => {
+    if ( value === null || value === undefined ) {
+        return null;
+    }
+
+    const normalized = String( value ).trim();
+    return normalized || null;
+};
+
+const getCollectionCardId = ( item ) =>
+    getOptionalString( item?.cardImageId ) ||
+    getOptionalString( item?.cardDetailId ) ||
+    getOptionalString( item?.detailParams?.cardId ) ||
+    getOptionalString( item?.card?.cardId ) ||
+    getOptionalString( item?.card?.cardDetailId ) ||
+    getOptionalString( item?.variant?.productID ) ||
+    getOptionalString( item?.resolvedVariant?.productID );
+
+const getCollectionRemoteImageUrl = ( item ) =>
+    getOptionalString( item?.remoteImageUrl ) ||
+    getOptionalString( item?.card?.remoteImageUrl );
+
 const YugiohCardDataTable = ( {
     matchedCardData = [],
     isAuthenticated = false,
@@ -212,16 +234,23 @@ const YugiohCardDataTable = ( {
             selectedKeys.has( itemUniqueIds[ index ] )
         );
 
-        const collectionArray = selectedData.map( ( { card, data } ) => ( {
-            productName: card?.productName,
-            setName: card?.setName,
-            number: card?.number,
-            printing: card?.printing,
-            rarity: card?.rarity,
-            condition: card?.condition,
-            marketPrice: data?.marketPrice,
-            quantity: getQuantity( card?.quantity ),
-        } ) );
+        const collectionArray = selectedData.map( ( item ) => {
+            const { card, data } = item;
+
+            return {
+                cardId: getCollectionCardId( item ),
+                productName: card?.productName,
+                setName: card?.setName,
+                number: card?.number,
+                printing: card?.printing,
+                rarity: card?.rarity,
+                condition: card?.condition,
+                marketPrice: data?.marketPrice,
+                lowPrice: data?.lowPrice,
+                remoteImageUrl: getCollectionRemoteImageUrl( item ),
+                quantity: getQuantity( card?.quantity ),
+            };
+        } );
 
         try {
             const response = await fetch( `/api/Yugioh/cards`, {