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}
|
formatBookName={formatBookName}
|
||||||
user={user}
|
user={user}
|
||||||
onFavoriteChange={handleFavoriteChange}
|
onFavoriteChange={handleFavoriteChange}
|
||||||
|
version={versionId}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user