From dc62b25b34b642aa3793edb58a6f09b2872fbc2a Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Sat, 13 Sep 2025 19:05:05 -0400
Subject: [PATCH] Fix book favorites persistence on page refresh and improve
 409 error handling

---
 frontend/src/components/BookSelector.tsx | 33 ++++++++++++++++++------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/BookSelector.tsx b/frontend/src/components/BookSelector.tsx
index 6113ee9e..4cb3962e 100644
--- a/frontend/src/components/BookSelector.tsx
+++ b/frontend/src/components/BookSelector.tsx
@@ -12,13 +12,22 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
   const [favorites, setFavorites] = useState<Set<string>>(new Set());
   const [loading, setLoading] = useState(false);
 
-  // Load favorites when user is available
+  // Load favorites when user is available or when component mounts
   useEffect(() => {
     if (user) {
       loadFavorites();
+    } else {
+      setFavorites(new Set()); // Clear favorites when no user
     }
   }, [user]);
 
+  // Also reload favorites when books change (page refresh)
+  useEffect(() => {
+    if (user && books.length > 0) {
+      loadFavorites();
+    }
+  }, [books, user]);
+
   const loadFavorites = async () => {
     if (!user) return;
     
@@ -36,6 +45,7 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
         
         const bookFavorites = new Set<string>(favoriteBooks);
         setFavorites(bookFavorites);
+        console.log('Loaded book favorites:', favoriteBooks);
       }
     } catch (error) {
       console.error('Failed to load favorites:', error);
@@ -63,16 +73,19 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
           const bookFavorite = data.favorites.find((fav: any) => fav.book === book && !fav.chapter);
           
           if (bookFavorite) {
-            await fetch(`/api/favorites/${bookFavorite.id}`, {
+            const deleteResponse = await fetch(`/api/favorites/${bookFavorite.id}`, {
               method: 'DELETE',
               credentials: 'include'
             });
             
-            setFavorites(prev => {
-              const newFavorites = new Set(prev);
-              newFavorites.delete(book);
-              return newFavorites;
-            });
+            if (deleteResponse.ok) {
+              setFavorites(prev => {
+                const newFavorites = new Set(prev);
+                newFavorites.delete(book);
+                return newFavorites;
+              });
+              console.log('Removed book favorite:', book);
+            }
           }
         }
       } else {
@@ -88,9 +101,13 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
           })
         });
         
-        if (response.ok || response.status === 409) {
+        if (response.ok) {
+          setFavorites(prev => new Set(prev).add(book));
+          console.log('Added book favorite:', book);
+        } else if (response.status === 409) {
           // 409 means it already exists, which is fine - just update the UI
           setFavorites(prev => new Set(prev).add(book));
+          console.log('Book favorite already exists, updated UI:', book);
         } else {
           console.error('Failed to add favorite:', response.status, response.statusText);
         }