Fix logout icon and add real-time favorites refresh for books and chapters - LogOut icon replaces square, all favoriting now triggers instant menu refresh

This commit is contained in:
Ryderjj89
2025-09-14 12:04:54 -04:00
parent d99bc4571c
commit 6bc24c25c9
3 changed files with 22 additions and 4 deletions

View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Routes, Route, useNavigate, useParams, useLocation } from 'react-router-dom'; import { Routes, Route, useNavigate, useParams, useLocation } from 'react-router-dom';
import { Book, ChevronRight, Moon, Sun } from 'lucide-react'; import { Book, ChevronRight, Moon, Sun, LogOut } from 'lucide-react';
import BookSelector from './components/BookSelector'; import BookSelector from './components/BookSelector';
import ChapterSelector from './components/ChapterSelector'; import ChapterSelector from './components/ChapterSelector';
import BibleReader from './components/BibleReader'; import BibleReader from './components/BibleReader';
@@ -220,12 +220,18 @@ function App() {
navigate(`/book/${urlName}`); navigate(`/book/${urlName}`);
}; };
const handleFavoriteChange = () => {
// This will trigger a re-render of the FavoritesMenu
setUser((prev: any) => ({ ...prev }));
};
return ( return (
<BookSelector <BookSelector
books={books} books={books}
onBookSelect={handleBookSelect} onBookSelect={handleBookSelect}
formatBookName={formatBookName} formatBookName={formatBookName}
user={user} user={user}
onFavoriteChange={handleFavoriteChange}
/> />
); );
}; };
@@ -243,6 +249,11 @@ function App() {
navigate('/'); navigate('/');
}; };
const handleFavoriteChange = () => {
// This will trigger a re-render of the FavoritesMenu
setUser((prev: any) => ({ ...prev }));
};
if (!bookName || !actualBookName || !books.includes(actualBookName)) { if (!bookName || !actualBookName || !books.includes(actualBookName)) {
return <div>Book not found</div>; return <div>Book not found</div>;
} }
@@ -254,6 +265,7 @@ function App() {
onBack={handleBack} onBack={handleBack}
formatBookName={formatBookName} formatBookName={formatBookName}
user={user} user={user}
onFavoriteChange={handleFavoriteChange}
/> />
); );
}; };
@@ -389,7 +401,7 @@ function App() {
className="text-sm px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" className="text-sm px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
> >
<span className="hidden sm:inline">Logout</span> <span className="hidden sm:inline">Logout</span>
<span className="sm:hidden"></span> <LogOut className="sm:hidden h-4 w-4" />
</button> </button>
</div> </div>
) : ( ) : (

View File

@@ -6,9 +6,10 @@ interface BookSelectorProps {
onBookSelect: (book: string) => void; onBookSelect: (book: string) => void;
formatBookName: (bookName: string) => string; formatBookName: (bookName: string) => string;
user?: any; user?: any;
onFavoriteChange?: () => void;
} }
const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName, user }) => { const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName, user, onFavoriteChange }) => {
const [favorites, setFavorites] = useState<Set<string>>(new Set()); const [favorites, setFavorites] = useState<Set<string>>(new Set());
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -85,6 +86,7 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
return newFavorites; return newFavorites;
}); });
console.log('Removed book favorite:', book); console.log('Removed book favorite:', book);
onFavoriteChange?.(); // Notify parent to refresh favorites menu
} }
} }
} }
@@ -104,6 +106,7 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
if (response.ok) { if (response.ok) {
setFavorites(prev => new Set(prev).add(book)); setFavorites(prev => new Set(prev).add(book));
console.log('Added book favorite:', book); console.log('Added book favorite:', book);
onFavoriteChange?.(); // Notify parent to refresh favorites menu
} else { } else {
console.error('Failed to add favorite:', response.status, response.statusText); console.error('Failed to add favorite:', response.status, response.statusText);
} }

View File

@@ -8,9 +8,10 @@ interface ChapterSelectorProps {
onBack: () => void; onBack: () => void;
formatBookName: (bookName: string) => string; formatBookName: (bookName: string) => string;
user?: any; user?: any;
onFavoriteChange?: () => void;
} }
const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack, formatBookName, user }) => { const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack, formatBookName, user, onFavoriteChange }) => {
const [chapters, setChapters] = useState<string[]>([]); const [chapters, setChapters] = useState<string[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [favorites, setFavorites] = useState<Set<string>>(new Set()); const [favorites, setFavorites] = useState<Set<string>>(new Set());
@@ -79,6 +80,7 @@ const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect
newFavorites.delete(chapter); newFavorites.delete(chapter);
return newFavorites; return newFavorites;
}); });
onFavoriteChange?.(); // Notify parent to refresh favorites menu
} }
} }
} else { } else {
@@ -97,6 +99,7 @@ const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect
if (response.ok) { if (response.ok) {
setFavorites(prev => new Set(prev).add(chapter)); setFavorites(prev => new Set(prev).add(chapter));
onFavoriteChange?.(); // Notify parent to refresh favorites menu
} }
} }
} catch (error) { } catch (error) {