🔧 Fix Collections Not Loading in Add to Collections Modal

🐛 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! 📚
This commit is contained in:
Randall Stillwell 2025-07-26 09:57:54 -05:00
parent 9a5561c2c8
commit 2f2c915da1

View file

@ -23,20 +23,19 @@ export default function CollectionSelectionModal({
const fetchCollections = async () => { const fetchCollections = async () => {
setLoading(true); setLoading(true);
try { try {
const response = await fetch('/api/collections', { const response = await fetch('/api/collections');
headers: {
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
}
});
if (response.ok) { if (response.ok) {
const data = await response.json(); 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 { } else {
console.error('Failed to fetch collections'); console.error('Failed to fetch collections:', response.status, response.statusText);
setCollections([]);
} }
} catch (error) { } catch (error) {
console.error('Error fetching collections:', error); console.error('Error fetching collections:', error);
setCollections([]);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@ -94,8 +93,7 @@ export default function CollectionSelectionModal({
const response = await fetch(`/api/collections/${collectionId}/cards`, { const response = await fetch(`/api/collections/${collectionId}/cards`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json'
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
}, },
body: JSON.stringify({ body: JSON.stringify({
cardId: card.id, cardId: card.id,