hh

Author: gottasellemall69

components.json

@@ -114,6 +114,40 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
 
   const getFullImagePath = useCallback( ( cardId ) => `/images/yugiohImages/${ String( cardId ) }.jpg`, [] );
 
+  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 primaryImageSrc = remoteImageSrc || localImageSrc || FALLBACK_IMAGE;
+      const secondaryImageSrc = primaryImageSrc === remoteImageSrc ? localImageSrc : remoteImageSrc;
+
+      return {
+        primaryImageSrc,
+        secondaryImageSrc: secondaryImageSrc && secondaryImageSrc !== primaryImageSrc ? secondaryImageSrc : null,
+      };
+    },
+    [ getFullImagePath ],
+  );
+
+  const handleCardImageError = useCallback( ( event ) => {
+    const image = event.currentTarget;
+    const nextSrc = image.dataset.nextSrc;
+    const fallbackSrc = image.dataset.fallbackSrc;
+
+    if ( nextSrc ) {
+      image.src = nextSrc;
+      image.dataset.nextSrc = "";
+      return;
+    }
+
+    if ( fallbackSrc ) {
+      image.src = fallbackSrc;
+      image.dataset.fallbackSrc = "";
+      image.onerror = null;
+    }
+  }, [] );
 
   const getFolderLabels = useCallback(
     ( card ) => ( Array.isArray( card?.folderIds ) ? card.folderIds : [] )
@@ -217,8 +251,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
           { memoizedAggregatedData.map( ( card ) => {
             if ( !card ) return null;
 
-            const cardIdImage = card.cardId ? getFullImagePath( card.cardId ) : null;
-            const imageSrc = cardIdImage || card.remoteImageUrl || FALLBACK_IMAGE;
+            const { primaryImageSrc, secondaryImageSrc } = getCardImageSources( card );
             const cardId = String( card._id ?? "" );
             const isSelected = isSelectionEnabled && selectedCardIds.has( cardId );
             const isFlipped = Boolean( flippedCards[ card._id ] );
@@ -345,9 +378,12 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard, sortConfig, han
                       <div className="relative flex aspect-[260/360] h-full max-h-[31rem] w-full items-center justify-center overflow-hidden rounded-[6px] border border-white/10 bg-black/40 transition duration-300 group-hover:border-indigo-400/60 dark:border-white/20 dark:bg-gray-900/60">
                         <img
                           className="mx-auto h-full w-full object-top object-cover"
-                          src={ imageSrc }
+                          src={ primaryImageSrc }
                           alt={ `Card Image - ${ card.productName }` }
                           loading="lazy"
+                          data-next-src={ secondaryImageSrc || "" }
+                          data-fallback-src={ FALLBACK_IMAGE }
+                          onError={ handleCardImageError }
                         />
                         <div
                           aria-hidden="true"

components/Yugioh/GridView.js

@@ -1,5 +1,15 @@
 const path = require("path");
+const ignoredAssetWatchPattern = /[\\/]public[\\/]images[\\/]yugiohImages(?:Cropped)?[\\/]/;
 
+const mergeWebpackIgnoredPaths = ( ignored ) => {
+  if ( !ignored ) {
+    return [ ignoredAssetWatchPattern ];
+  }
+
+  return Array.isArray( ignored )
+    ? [ ...ignored, ignoredAssetWatchPattern ]
+    : [ ignored, ignoredAssetWatchPattern ];
+};
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -8,6 +18,17 @@ const nextConfig = {
     root: path.join(__dirname),
   },
 
+  webpack: ( config, { dev } ) => {
+    if ( dev ) {
+      config.watchOptions = {
+        ...( config.watchOptions || {} ),
+        ignored: mergeWebpackIgnoredPaths( config.watchOptions?.ignored ),
+      };
+    }
+
+    return config;
+  },
+
   async headers() {
     return [
       {
@@ -43,4 +64,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = nextConfig;

next.config.js

@@ -3,9 +3,11 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "dev": "next dev --webpack",
+        "dev": "next dev --turbopack",
         "dev:turbo": "next dev --turbopack",
-        "build": "next build --webpack",
+        "dev:webpack": "next dev --webpack",
+        "build": "next build --turbopack",
+        "build:webpack": "next build --webpack",
         "start": "next start",
         "lint": "next lint",
         "refresh:sports-cache": "node scripts/refresh-sports-cache.js"

package.json

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import Head from "next/head";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
@@ -54,12 +54,27 @@ const ALL_FOLDERS_ID = "all";
 const UNCATEGORIZED_FOLDER_ID = "uncategorized";
 
 const getCardFolderIds = ( card ) => (
-  Array.isArray( card?.folderIds ) ? card.folderIds.map( ( folderId ) => String( folderId ) ) : []
+  Array.isArray( card?.folderIds )
+    ? card.folderIds
+      .map( ( folderId ) => String( folderId ?? "" ).trim() )
+      .filter( Boolean )
+    : []
 );
 
 const normalizeFolder = ( folder ) => ( {
   ...folder,
   _id: String( folder?._id ?? "" ),
+  name: String( folder?.name ?? "" ).trim(),
+} );
+
+const normalizeCollectionCard = ( card ) => ( {
+  ...card,
+  _id: String( card?._id ?? "" ),
+  cardId: card?.cardId === null || card?.cardId === undefined ? null : String( card.cardId ).trim(),
+  remoteImageUrl: typeof card?.remoteImageUrl === "string" && card.remoteImageUrl.trim()
+    ? card.remoteImageUrl.trim()
+    : null,
+  folderIds: getCardFolderIds( card ),
 } );
 
 const MyCollection = ( { initialAuthState = false } ) => {
@@ -103,7 +118,7 @@ const MyCollection = ( { initialAuthState = false } ) => {
     }
 
     const data = await response.json();
-    return Array.isArray( data ) ? data : [];
+    return Array.isArray( data ) ? data.map( normalizeCollectionCard ).filter( ( card ) => card._id ) : [];
   }, [] );
 
   const fetchFolders = useCallback( async () => {
@@ -119,7 +134,7 @@ const MyCollection = ( { initialAuthState = false } ) => {
     }
 
     const data = await response.json();
-    return Array.isArray( data ) ? data.map( normalizeFolder ).filter( ( folder ) => folder._id ) : [];
+    return Array.isArray( data ) ? data.map( normalizeFolder ).filter( ( folder ) => folder._id && folder.name ) : [];
   }, [] );
 
   useEffect( () => {

pages/yugioh/my-collection.js

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "es2025",
     "lib": [
       "dom",
       "dom.iterable",
@@ -11,28 +11,26 @@
         "./*"
       ]
     },
-    "allowJs": false,
+    "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "noEmit": true,
     "incremental": true,
-    "module": "esnext",
+    "module": "nodenext",
     "esModuleInterop": true,
-    "moduleResolution": "bundler",
+    "moduleResolution": "nodenext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
     "forceConsistentCasingInFileNames": true
   },
   "include": [
     "next-env.d.ts",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    "**/*.js"
   ],
   "exclude": [
-    "node_modules",
-    ".next/cache"
+    "node_modules"
   ]
-}
+}