Complete favorites separation by version and dynamic page titles

- BookSelector now filters favorites by version (fav.version === version)
- Book favorites include version in API requests
- Page header shows 'NKJV Bible' or 'ESV Bible' dynamically
- BookSelector receives current version from App.tsx
- Favorites are now strictly version-specific across all levels
- Both book and verse favorites work correctly per translation

Navigation and favorites now respect Bible version context!
This commit is contained in:
Ryderjj89
2025-09-28 15:24:54 -04:00
parent 1b4eeefce7
commit eeb30c24e8
2 changed files with 13 additions and 10 deletions

View File

@@ -290,6 +290,7 @@ function App() {
formatBookName={formatBookName} formatBookName={formatBookName}
user={user} user={user}
onFavoriteChange={handleFavoriteChange} onFavoriteChange={handleFavoriteChange}
version={versionId}
/> />
); );
}; };

View File

@@ -7,9 +7,10 @@ interface BookSelectorProps {
formatBookName: (bookName: string) => string; formatBookName: (bookName: string) => string;
user?: any; user?: any;
onFavoriteChange?: () => void; onFavoriteChange?: () => void;
version?: string;
} }
const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName, user, onFavoriteChange }) => { const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, formatBookName, user, onFavoriteChange, version = 'esv' }) => {
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);
@@ -22,31 +23,31 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
} }
}, [user]); }, [user]);
// Also reload favorites when books change (page refresh) // Also reload favorites when books or version change (page refresh/version switch)
useEffect(() => { useEffect(() => {
if (user && books.length > 0) { if (user && books.length > 0) {
loadFavorites(); loadFavorites();
} }
}, [books, user]); }, [books, user, version]);
const loadFavorites = async () => { const loadFavorites = async () => {
if (!user) return; if (!user) return;
setLoading(true); setLoading(true);
try { try {
const response = await fetch('/api/favorites', { const response = await fetch('/api/favorites', {
credentials: 'include' credentials: 'include'
}); });
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
const favoriteBooks: string[] = data.favorites const favoriteBooks: string[] = data.favorites
.filter((fav: any) => !fav.chapter) // Only book-level favorites .filter((fav: any) => !fav.chapter && fav.version === version) // Only book-level favorites for current version
.map((fav: any) => fav.book); .map((fav: any) => fav.book);
const bookFavorites = new Set<string>(favoriteBooks); const bookFavorites = new Set<string>(favoriteBooks);
setFavorites(bookFavorites); setFavorites(bookFavorites);
console.log('Loaded book favorites:', favoriteBooks); console.log('Loaded book favorites for version:', version, favoriteBooks);
} }
} catch (error) { } catch (error) {
console.error('Failed to load favorites:', error); console.error('Failed to load favorites:', error);
@@ -99,7 +100,8 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
}, },
credentials: 'include', credentials: 'include',
body: JSON.stringify({ body: JSON.stringify({
book: book book: book,
version: version
}) })
}); });
@@ -164,7 +166,7 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
<div className="space-y-12"> <div className="space-y-12">
<div className="text-center"> <div className="text-center">
<h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4"> <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
ESV Bible {version.toUpperCase()} Bible
</h1> </h1>
<p className="text-lg text-gray-600 dark:text-gray-400"> <p className="text-lg text-gray-600 dark:text-gray-400">
Select a book to begin reading Select a book to begin reading