From 2f2c915da1a48ab10f5e2465cc7591c2bade4434 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sat, 26 Jul 2025 09:57:54 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fix=20Collections=20Not=20Loadin?=
 =?UTF-8?q?g=20in=20Add=20to=20Collections=20Modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 Authentication Issue Resolution:
- Removed incorrect Authorization header from collections API call
- Modal was using 'auth_token' header when API uses development fallback
- Updated to match successful pattern used by collections page

📡 API Call Corrections:
- Collections fetch: Removed Authorization header (uses dev fallback)
- Add to collection: Removed Authorization header (middleware handles auth)
- Fixed response data handling (API returns array directly)
- Added better error handling and logging

🔍 Root Cause Analysis:
- CollectionSelectionModal used localStorage.getItem('auth_token')
- But /api/collections works without auth headers in development
- Other successful pages (collections.js, collection/[id].js) don't send auth headers
- Development middleware provides fallback admin user automatically

✅ Expected Behavior:
- Collections modal should now load user's collections properly
- Batch adding cards to collections should work correctly
- Consistent with authentication pattern used throughout app
- Better error messages for debugging

The 'Add to Collections' modal should now properly display collections! 📚✨
---
 components/CollectionSelectionModal.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/CollectionSelectionModal.js b/components/CollectionSelectionModal.js
index eb7380a..c5691f5 100644
--- a/components/CollectionSelectionModal.js
+++ b/components/CollectionSelectionModal.js
@@ -23,20 +23,19 @@ export default function CollectionSelectionModal({
   const fetchCollections = async () => {
     setLoading(true);
     try {
-      const response = await fetch('/api/collections', {
-        headers: {
-          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
-        }
-      });
+      const response = await fetch('/api/collections');
 
       if (response.ok) {
         const data = await response.json();
-        setCollections(data.collections || []);
+        // The API returns an array directly, not wrapped in collections property
+        setCollections(Array.isArray(data) ? data : data.collections || []);
       } else {
-        console.error('Failed to fetch collections');
+        console.error('Failed to fetch collections:', response.status, response.statusText);
+        setCollections([]);
       }
     } catch (error) {
       console.error('Error fetching collections:', error);
+      setCollections([]);
     } finally {
       setLoading(false);
     }
@@ -94,8 +93,7 @@ export default function CollectionSelectionModal({
           const response = await fetch(`/api/collections/${collectionId}/cards`, {
             method: 'POST',
             headers: {
-              'Content-Type': 'application/json',
-              'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
+              'Content-Type': 'application/json'
             },
             body: JSON.stringify({
               cardId: card.id,