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:
@@ -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>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user