hh

Author: gottasellemall69

components/Navigation/Breadcrumb.js

@@ -62,7 +62,7 @@ const Breadcrumb = () => {
     } else if ( query.source === 'collection' ) {
       crumbs.push( {
         label: 'My Collection',
-        href: '/yugioh/my-collection'
+        href: '/yugioh/'
       } );
     }
 

components/Navigation/SideNav.js

@@ -1,12 +1,12 @@
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useMemo, useState } from "react";
 import { useRouter } from "next/router";
 
 export default function SideNav() {
   const [ isAuthenticated, setIsAuthenticated ] = useState( false );
   const router = useRouter();
 
-  useEffect( () => {
+  useMemo( () => {
     const checkAuth = async () => {
       try {
         const res = await fetch( "/api/auth/validate", {
@@ -71,7 +71,7 @@ export default function SideNav() {
         </li>
 
         <li className="navButton mb-2 rounded">
-          <Link href="/yugioh/my-collection">
+          <Link href="/yugioh/">
             <span className="rounded block w-full text-left p-2 text-white bg-clip-padding border border-zinc-600 font-semibold backdrop-opacity-90 backdrop-blur-md hover:bg-zinc-400 bg-gradient-to-tr to-neutral-400 from-purple-800 hover:text-white">
               My Collection
             </span>

components/Yugioh/Card.js

@@ -20,6 +20,8 @@ const Card = ( { cardData } ) => {
             card: cardData.id,
             letter: letter,
             set_name: setName, // only set name passed
+            source: setName
+
           },
         } }
       >

components/Yugioh/CardFilter.js

@@ -40,6 +40,15 @@ const CardFilter = ( {
         "Moderately Played Unlimited", "Heavily Played Unlimited",
         "Damaged Unlimited"
       ]
+    },
+    {
+      id: 'printing',
+      label: 'Printing',
+      values: [
+        "1st Edition",
+        "Unlimited",
+        "Limited"
+      ]
     }
   ];
 

components/Yugioh/GridView.js

@@ -12,7 +12,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
   const [ editValues, setEditValues ] = useState( {} );
   const [ notification, setNotification ] = useState( { show: false, message: '' } );
   const [ flippedCards, setFlippedCards ] = useState( {} );
-  const [ sortField, setSortField ] = useState( 'setName' );
+  const [ sortField, setSortField ] = useState( '' );
   const [ sortDirection, setSortDirection ] = useState( 'asc' );
 
 
@@ -113,6 +113,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
           onChange={ ( e ) => setSortField( e.target.value ) }
           className="px-2 py-1 rounded bg-white text-black font-semibold text-start"
         >
+          <option disabled></option>
           <option value="productName">Card Name</option>
           <option value="setName">Set Name</option>
           <option value="number">Card Number</option>
@@ -123,6 +124,7 @@ const GridView = ( { aggregatedData, onDeleteCard, onUpdateCard } ) => {
         </select>
 
         <button
+          type="button"
           onClick={ () => setSortDirection( prev => prev === 'asc' ? 'desc' : 'asc' ) }
           className="px-2 py-1 rounded bg-white text-black font-semibold text-center"
         >

components/Yugioh/YugiohCardDataTable.js

@@ -216,7 +216,7 @@ const YugiohCardDataTable = ( { matchedCardData, setMatchedCardData } ) => {
     }, [ selectedKeys, matchedCardData, setMatchedCardData, itemUniqueIds ] );
 
     const handleGoToCollectionPage = useCallback( () => {
-        router.push( '/yugioh/my-collection' );
+        router.push( '/yugioh/' );
     }, [ router ] );
 
     // Format helper for prices

pages/login.js

@@ -29,7 +29,7 @@ export default function LoginPage() {
       const data = await response.json();
 
       if ( response.ok ) {
-        router.push( "/yugioh/my-collection" );
+        router.push( "/yugioh/" );
       } else {
         setError( data.error || "Login failed. Please try again." );
       }

pages/yugioh/my-collection.js pages/yugioh/index.jspages/yugioh/my-collection.js renamed to pages/yugioh/index.js

@@ -25,14 +25,13 @@ const MyCollection = () => {
   const [ isSidebarOpen, setIsSidebarOpen ] = useState( false );
   const [ viewMode, setViewMode ] = useState( 'grid' );
   const [ isAuthenticated, setIsAuthenticated ] = useState( false );
-  const [ token, setToken ] = useState( null );
   const [ isUpdatingPrices, setIsUpdatingPrices ] = useState( false );
   const [ searchTerm, setSearchTerm ] = useState( "" );
   const [ isLoading, setIsLoading ] = useState( false );
   const [ initialData, setInitialData ] = useState( [] );
   const [ aggregatedData, setAggregatedData ] = useState( [] );
-  const [ filters, setFilters ] = useState( { rarity: [], condition: [] } );
-  const [ sortConfig, setSortConfig ] = useState( { key: "number", direction: "ascending" } );
+  const [ filters, setFilters ] = useState( { rarity: [], condition: [], printing: [] } );
+  const [ sortConfig, setSortConfig ] = useState( { key: 'number', direction: "ascending" } );
   const [ isFilterMenuOpen, setIsFilterMenuOpen ] = useState( false );
   const [ currentPage, setCurrentPage ] = useState( 1 );
   const [ itemsPerPage ] = useState( 20 );
@@ -42,7 +41,7 @@ const MyCollection = () => {
 
   // Effect to check authentication
   // Effect to check authentication
-  useEffect( () => {
+  useMemo( () => {
     const validateAuth = async () => {
       try {
         const response = await fetch( "/api/auth/validate", {
@@ -66,11 +65,12 @@ const MyCollection = () => {
 
   const applyFilters = useCallback(
     data => {
-      if ( !filters.rarity.length && !filters.condition.length ) return data;
+      if ( !filters.rarity.length && !filters.condition.length && !filters.printing.length ) return data;
       return data.filter( card => {
         return (
           ( !filters.rarity.length || filters.rarity.includes( card.rarity ) ) &&
-          ( !filters.condition.length || filters.condition.includes( card.condition ) )
+          ( !filters.condition.length || filters.condition.includes( card.condition ) ) &&
+          ( !filters.printing.length || filters.printing.includes( card.printing ) )
         );
       } );
     },
@@ -346,9 +346,9 @@ const MyCollection = () => {
                 ) }
               </div>
               {/* Collection Stats */ }
-              <div className="w-3/4 sm:max-w-[55%] mx-auto p-4 mt-8">
-                <div className="glass p-4 rounded-lg">
-                  <h3 className="text-sm font-semibold text-white/80 mb-3">Collection Value</h3>
+              <div className="sm:w-1/3 p-4 mt-8">
+                <div className="text-shadow font-semibold glass p-4 rounded-lg">
+                  <h3 className="text-lg text-white/80 mb-3">Collection Value</h3>
                   <div className="space-y-2">
                     <div className="flex justify-between">
                       <span className="text-sm">Total Cards:</span>
@@ -390,7 +390,7 @@ const MyCollection = () => {
                   setIsModalOpen={ setIsFilterMenuOpen }
                 />
                 {/* View Toggle */ }
-                <div className="glass flex border border-white/20 rounded-lg overflow-ellipsis w-fit">
+                <div className="glass font-semibold text-shadow flex border border-white/20 rounded-lg overflow-ellipsis w-fit">
                   <div className='float-left w-1/2'>
                     <button
                       onClick={ () => setViewMode( 'grid' ) }

pages/yugioh/sets/[letter]/[setName].js

@@ -13,13 +13,13 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 
 const CardsInSetPage = () => {
   const [ cards, setCards ] = useState( [] );
-  const [ selectedCard, setSelectedCard ] = useState( null );
+  const [ selectedCard, setSelectedCard ] = useState( [] );
   const [ modalVisible, setModalVisible ] = useState( false );
   const [ bulkModalVisible, setBulkModalVisible ] = useState( false );
   const [ isAuthenticated, setIsAuthenticated ] = useState( false );
 
-  const [ searchTerm, setSearchTerm ] = useState( "" );
-  const [ sortBy, setSortBy ] = useState( "name-asc" );
+  const [ searchTerm, setSearchTerm ] = useState( null );
+  const [ sortBy, setSortBy ] = useState( "asc" );
   const [ viewMode, setViewMode ] = useState( "grid" );
 
   // ✅ lifted persistent selection
@@ -111,8 +111,8 @@ const CardsInSetPage = () => {
           ( c.archetype && c.archetype.toLowerCase().includes( term ) )
       );
     }
-    if ( sortBy === "name-asc" ) data.sort( ( a, b ) => a.name.localeCompare( b.name ) );
-    if ( sortBy === "name-desc" ) data.sort( ( a, b ) => b.name.localeCompare( a.name ) );
+    if ( sortBy === "asc" ) data.sort( ( a, b ) => a.name.localeCompare( b.name ) );
+    if ( sortBy === "desc" ) data.sort( ( a, b ) => b.name.localeCompare( a.name ) );
     return data;
   }, [ cards, searchTerm, sortBy ] );
 
@@ -222,8 +222,8 @@ const CardsInSetPage = () => {
           onChange={ ( e ) => setSortBy( e.target.value ) }
           className="px-2 py-1 rounded border"
         >
-          <option value="name-asc">Name (A-Z)</option>
-          <option value="name-desc">Name (Z-A)</option>
+          <option value="asc">Name (A-Z)</option>
+          <option value="desc">Name (Z-A)</option>
         </select>
         <button
           onClick={ () => setViewMode( ( v ) => ( v === "grid" ? "table" : "grid" ) ) }