Implement user collection loading and card addition functionality

src/components/Collection.tsx

@@ -1,12 +1,58 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
-import { Search, Plus } from 'lucide-react';
+import { Search, Plus, Loader2, Trash2, CheckCircle, XCircle } from 'lucide-react';
 import { Card } from '../types';
-import { searchCards } from '../services/api';
+import { searchCards, getUserCollection, addCardToCollection, getCardsByIds } from '../services/api';
+import { useAuth } from '../contexts/AuthContext';
+import MagicCard from './MagicCard';
 
 export default function Collection() {
+  const { user } = useAuth();
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<Card[]>([]);
   const [collection, setCollection] = useState<{ card: Card; quantity: number }[]>([]);
+  const [isLoadingCollection, setIsLoadingCollection] = useState(true);
+  const [isAddingCard, setIsAddingCard] = useState<string | null>(null);
+  const [snackbar, setSnackbar] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
+
+  // Load user's collection from Supabase on mount
+  useEffect(() => {
+    const loadCollection = async () => {
+      if (!user) {
+        setIsLoadingCollection(false);
+        return;
+      }
+
+      try {
+        setIsLoadingCollection(true);
+        // Get collection from Supabase (returns Map<card_id, quantity>)
+        const collectionMap = await getUserCollection(user.id);
+
+        if (collectionMap.size === 0) {
+          setCollection([]);
+          return;
+        }
+
+        // Get the actual card data from Scryfall for all cards in collection
+        const cardIds = Array.from(collectionMap.keys());
+        const cards = await getCardsByIds(cardIds);
+
+        // Combine card data with quantities
+        const collectionWithCards = cards.map(card => ({
+          card,
+          quantity: collectionMap.get(card.id) || 0,
+        }));
+
+        setCollection(collectionWithCards);
+      } catch (error) {
+        console.error('Error loading collection:', error);
+        setSnackbar({ message: 'Failed to load collection', type: 'error' });
+      } finally {
+        setIsLoadingCollection(false);
+      }
+    };
+
+    loadCollection();
+  }, [user]);
 
   const handleSearch = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -17,10 +63,23 @@ export default function Collection() {
       setSearchResults(cards);
     } catch (error) {
       console.error('Failed to search cards:', error);
+      setSnackbar({ message: 'Failed to search cards', type: 'error' });
     }
   };
 
-  const addToCollection = (card: Card) => {
+  const addToCollection = async (card: Card) => {
+    if (!user) {
+      setSnackbar({ message: 'Please log in to add cards to your collection', type: 'error' });
+      return;
+    }
+
+    try {
+      setIsAddingCard(card.id);
+
+      // Add card to Supabase
+      await addCardToCollection(user.id, card.id, 1);
+
+      // Update local state
       setCollection(prev => {
         const existing = prev.find(c => c.card.id === card.id);
         if (existing) {
@@ -32,6 +91,15 @@ export default function Collection() {
         }
         return [...prev, { card, quantity: 1 }];
       });
+
+      setSnackbar({ message: 'Card added to collection!', type: 'success' });
+    } catch (error) {
+      console.error('Error adding card to collection:', error);
+      setSnackbar({ message: 'Failed to add card to collection', type: 'error' });
+    } finally {
+      setIsAddingCard(null);
+      setTimeout(() => setSnackbar(null), 3000);
+    }
   };
 
   return (
@@ -65,57 +133,113 @@ export default function Collection() {
           <div className="mb-8">
             <h2 className="text-xl font-semibold mb-4">Search Results</h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-              {searchResults.map(card => (
+              {searchResults.map(card => {
-                <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden">
+                const inCollection = collection.find(c => c.card.id === card.id);
-                  {card.image_uris?.normal && (
+
-                    <img
+                return (
-                      src={card.image_uris.normal}
+                  <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
-                      alt={card.name}
+                    <MagicCard card={card} />
-                      className="w-full h-auto"
-                    />
-                  )}
                     <div className="p-4">
                       <h3 className="font-bold mb-2">{card.name}</h3>
+                      {inCollection && (
+                        <div className="text-sm text-green-400 mb-2 flex items-center gap-1">
+                          <CheckCircle size={16} />
+                          In collection (x{inCollection.quantity})
+                        </div>
+                      )}
+                      {card.prices?.usd && (
+                        <div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
+                      )}
                       <button
                         onClick={() => addToCollection(card)}
-                      className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2"
+                        disabled={isAddingCard === card.id}
+                        className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
                       >
+                        {isAddingCard === card.id ? (
+                          <>
+                            <Loader2 className="animate-spin" size={20} />
+                            Adding...
+                          </>
+                        ) : (
+                          <>
                             <Plus size={20} />
                             Add to Collection
+                          </>
+                        )}
                       </button>
                     </div>
                   </div>
-              ))}
+                );
+              })}
             </div>
           </div>
         )}
 
         {/* Collection */}
         <div>
-          <h2 className="text-xl font-semibold mb-4">My Cards</h2>
+          <h2 className="text-xl font-semibold mb-4">
+            My Cards ({collection.length} unique cards, {collection.reduce((acc, c) => acc + c.quantity, 0)} total)
+          </h2>
+
+          {isLoadingCollection ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="animate-spin text-blue-500" size={48} />
+            </div>
+          ) : collection.length === 0 ? (
+            <div className="text-center py-12 text-gray-400">
+              <p className="text-lg mb-2">Your collection is empty</p>
+              <p className="text-sm">Search for cards above to add them to your collection</p>
+            </div>
+          ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
               {collection.map(({ card, quantity }) => (
-              <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden">
+                <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
-                {card.image_uris?.normal && (
+                  <MagicCard card={card} />
-                  <img
-                    src={card.image_uris.normal}
-                    alt={card.name}
-                    className="w-full h-auto"
-                  />
-                )}
                   <div className="p-4">
                     <div className="flex justify-between items-center mb-2">
                       <h3 className="font-bold">{card.name}</h3>
-                    <span className="text-sm bg-blue-600 px-2 py-1 rounded">
+                      <span className="text-sm bg-blue-600 px-2 py-1 rounded font-semibold">
                         x{quantity}
                       </span>
                     </div>
+                    {card.prices?.usd && (
+                      <div className="text-sm text-gray-400">
+                        ${card.prices.usd} each
+                        <span className="text-xs ml-2">
+                          (${(parseFloat(card.prices.usd) * quantity).toFixed(2)} total)
+                        </span>
+                      </div>
+                    )}
                   </div>
                 </div>
               ))}
             </div>
+          )}
         </div>
       </div>
+
+      {/* Snackbar */}
+      {snackbar && (
+        <div
+          className={`fixed bottom-4 right-4 p-4 rounded-lg shadow-lg transition-all duration-300 ${
+            snackbar.type === 'success' ? 'bg-green-500' : 'bg-red-500'
+          } text-white`}
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex items-center">
+              {snackbar.type === 'success' ? (
+                <CheckCircle className="mr-2" size={20} />
+              ) : (
+                <XCircle className="mr-2" size={20} />
+              )}
+              <span>{snackbar.message}</span>
+            </div>
+            <button onClick={() => setSnackbar(null)} className="ml-4 text-gray-200 hover:text-white focus:outline-none">
+              <Trash2 size={16} />
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }