From 111658436fc493f2ec6d1266bbeccb44c6f1d152 Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Sun, 27 Jul 2025 12:34:41 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8D=20Add=20Debug=20Logging=20for=20Co?=
 =?UTF-8?q?llection=20Ownership=20Issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added debug logging to investigate why ownership indicators aren't showing:
- Log current user in collections page
- Log collections data with userRole and creator info
- Log API response data to see what backend returns
- Enhanced error handling in fetchCollections

This will help identify if the issue is:
- Frontend auth context not working properly
- API not returning correct userRole values
- Collections state not updating correctly
- Permission indicator not receiving proper props

Debug logs will show in browser console when testing Bob's login.
---
 pages/collections.js | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/pages/collections.js b/pages/collections.js
index 32aebbd..1334371 100644
--- a/pages/collections.js
+++ b/pages/collections.js
@@ -40,33 +40,52 @@ export default function Collections() {
     }
   }, [user]);
 
+  // Debug logging
+  useEffect(() => {
+    console.log('🔍 Debug - Current user:', user);
+    console.log('🔍 Debug - Collections:', collections.map(c => ({
+      name: c.name,
+      userRole: c.userRole,
+      creator: c.creator
+    })));
+  }, [user, collections]);
+
   const fetchCollections = async () => {
     try {
       const response = await fetch('/api/collections');
+      
       if (response.ok) {
         const data = await response.json();
-        // Fetch thumbnail cards for each collection
+        console.log('🔍 Debug - API response:', data.map(c => ({
+          name: c.name,
+          userRole: c.userRole,
+          creator: c.creator
+        })));
+        
+        // Fetch thumbnails for each collection
         const collectionsWithThumbnails = await Promise.all(
           data.map(async (collection) => {
             try {
               const identifier = collection.slug || collection.id;
               const thumbnailResponse = await fetch(`/api/collections/${identifier}/thumbnails`);
-              const thumbnails = thumbnailResponse.ok ? await thumbnailResponse.json() : [];
-              return { ...collection, thumbnails };
+              if (thumbnailResponse.ok) {
+                const thumbnailData = await thumbnailResponse.json();
+                return { ...collection, thumbnails: thumbnailData.thumbnails };
+              }
+              return { ...collection, thumbnails: [] };
             } catch (error) {
-              console.error(`Error fetching thumbnails for collection ${collection.slug || collection.id}:`, error);
+              console.error(`Error fetching thumbnails for collection ${collection.id}:`, error);
               return { ...collection, thumbnails: [] };
             }
           })
         );
+        
         setCollections(collectionsWithThumbnails);
       } else {
         console.error('Failed to fetch collections');
-        setCollections([]); // Empty array on error
       }
     } catch (error) {
       console.error('Error fetching collections:', error);
-      setCollections([]); // Empty array on error
     } finally {
       setLoading(false);
     }