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:
@@ -290,6 +290,7 @@ function App() {
|
||||
formatBookName={formatBookName}
|
||||
user={user}
|
||||
onFavoriteChange={handleFavoriteChange}
|
||||
version={versionId}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,9 +7,10 @@ interface BookSelectorProps {
|
||||
formatBookName: (bookName: string) => string;
|
||||
user?: any;
|
||||
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 [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -22,31 +23,31 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
// Also reload favorites when books change (page refresh)
|
||||
// Also reload favorites when books or version change (page refresh/version switch)
|
||||
useEffect(() => {
|
||||
if (user && books.length > 0) {
|
||||
loadFavorites();
|
||||
}
|
||||
}, [books, user]);
|
||||
}, [books, user, version]);
|
||||
|
||||
const loadFavorites = async () => {
|
||||
if (!user) return;
|
||||
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch('/api/favorites', {
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
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);
|
||||
|
||||
|
||||
const bookFavorites = new Set<string>(favoriteBooks);
|
||||
setFavorites(bookFavorites);
|
||||
console.log('Loaded book favorites:', favoriteBooks);
|
||||
console.log('Loaded book favorites for version:', version, favoriteBooks);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load favorites:', error);
|
||||
@@ -99,7 +100,8 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
|
||||
},
|
||||
credentials: 'include',
|
||||
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="text-center">
|
||||
<h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
ESV Bible
|
||||
{version.toUpperCase()} Bible
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
Select a book to begin reading
|
||||
|
||||
Reference in New Issue
Block a user