257 lines
8.3 KiB
TypeScript
257 lines
8.3 KiB
TypeScript
import React, { useState, useEffect, memo } from 'react';
|
|
import { ArrowLeft, FileText, Star, ChevronRight, Search } from 'lucide-react';
|
|
import { getBook } from '../services/api';
|
|
import { Section } from '../types/favorites';
|
|
import SectionPicker from './SectionPicker';
|
|
|
|
interface ChapterSelectorProps {
|
|
book: string;
|
|
onChapterSelect: (chapter: string) => void;
|
|
onBack: () => void;
|
|
formatBookName: (bookName: string) => string;
|
|
user?: any;
|
|
onFavoriteChange?: () => void;
|
|
version?: string;
|
|
onSearchClick?: () => void;
|
|
favorites?: Set<string>;
|
|
sections?: Section[];
|
|
onSectionChange?: () => void;
|
|
}
|
|
|
|
const ChapterSelector: React.FC<ChapterSelectorProps> = memo(({
|
|
book,
|
|
onChapterSelect,
|
|
onBack,
|
|
formatBookName,
|
|
user,
|
|
onFavoriteChange,
|
|
version = 'esv',
|
|
onSearchClick,
|
|
favorites = new Set(),
|
|
sections = [],
|
|
onSectionChange
|
|
}) => {
|
|
const [chapters, setChapters] = useState<string[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showSectionPicker, setShowSectionPicker] = useState(false);
|
|
const [pendingChapter, setPendingChapter] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
loadChapters();
|
|
}, [book]);
|
|
|
|
const toggleFavorite = async (chapter: string, event: React.MouseEvent, sectionId?: number | null) => {
|
|
event.stopPropagation();
|
|
|
|
if (!user) return;
|
|
|
|
const isFavorited = favorites.has(chapter);
|
|
|
|
try {
|
|
if (isFavorited) {
|
|
// Remove favorite
|
|
const response = await fetch('/api/favorites', {
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
const chapterFavorite = data.favorites.find((fav: any) =>
|
|
fav.book === book && fav.chapter === chapter && !fav.verse_start
|
|
);
|
|
|
|
if (chapterFavorite) {
|
|
await fetch(`/api/favorites/${chapterFavorite.id}`, {
|
|
method: 'DELETE',
|
|
credentials: 'include'
|
|
});
|
|
|
|
console.log('Removed chapter favorite:', chapter);
|
|
onFavoriteChange?.();
|
|
}
|
|
}
|
|
} else {
|
|
// Add favorite - check if we need section picker
|
|
if (sections.length > 0 && sectionId === undefined) {
|
|
const defaultSection = sections.find(s => s.is_default);
|
|
if (defaultSection) {
|
|
await addFavoriteWithSection(chapter, defaultSection.id);
|
|
} else {
|
|
setPendingChapter(chapter);
|
|
setShowSectionPicker(true);
|
|
}
|
|
} else {
|
|
await addFavoriteWithSection(chapter, sectionId ?? null);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to toggle favorite:', error);
|
|
}
|
|
};
|
|
|
|
const addFavoriteWithSection = async (chapter: string, sectionId: number | null) => {
|
|
try {
|
|
const response = await fetch('/api/favorites', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
credentials: 'include',
|
|
body: JSON.stringify({
|
|
book: book,
|
|
chapter: chapter,
|
|
version: version,
|
|
section_id: sectionId
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
console.log('Added chapter favorite:', chapter, 'to section:', sectionId);
|
|
onFavoriteChange?.();
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to add favorite:', error);
|
|
}
|
|
};
|
|
|
|
const handleSectionSelect = async (sectionId: number | null) => {
|
|
if (pendingChapter) {
|
|
await addFavoriteWithSection(pendingChapter, sectionId);
|
|
setPendingChapter(null);
|
|
}
|
|
setShowSectionPicker(false);
|
|
};
|
|
|
|
const loadChapters = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await getBook(book, version);
|
|
|
|
if (response.chapters) {
|
|
const sortedChapters = response.chapters.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
|
|
setChapters(sortedChapters);
|
|
} else {
|
|
console.error('API returned no chapters data');
|
|
setChapters([]);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load chapters:', error);
|
|
setChapters([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<FileText className="mx-auto h-12 w-12 text-blue-600 animate-pulse mb-4" />
|
|
<p className="text-lg text-gray-600 dark:text-gray-400">Loading chapters...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* Search Bar */}
|
|
<div className="flex justify-center mb-4">
|
|
<div className="w-full max-w-md relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Search for verses, words, or phrases..."
|
|
className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
onClick={onSearchClick}
|
|
readOnly
|
|
/>
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Breadcrumb Navigation */}
|
|
<div className="flex items-center justify-center space-x-1 mb-4">
|
|
<button
|
|
onClick={() => window.location.href = `/version/${version}`}
|
|
className="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
<span>Books</span>
|
|
</button>
|
|
<ChevronRight className="h-3 w-3 text-gray-400 dark:text-gray-500" />
|
|
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
{formatBookName(book)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Book Title */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
|
{formatBookName(book)}
|
|
</h1>
|
|
<p className="text-lg text-gray-600 dark:text-gray-400">
|
|
Select a chapter to read
|
|
</p>
|
|
{user && (
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
|
|
Click the star to add chapters to your favorites
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Chapters Grid */}
|
|
<div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-3 max-w-4xl mx-auto">
|
|
{chapters.map((chapter) => (
|
|
<div key={chapter} className="relative">
|
|
<button
|
|
onClick={() => onChapterSelect(chapter)}
|
|
className="group bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 text-center w-full"
|
|
>
|
|
<FileText className="mx-auto h-6 w-6 text-blue-600 dark:text-blue-400 mb-2 group-hover:scale-110 transition-transform" />
|
|
<span className="text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400">
|
|
{chapter}
|
|
</span>
|
|
</button>
|
|
|
|
{user && (
|
|
<button
|
|
onClick={(e) => toggleFavorite(chapter, e)}
|
|
className="absolute top-1 right-1 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
|
title={favorites.has(chapter) ? 'Remove from favorites' : 'Add to favorites'}
|
|
>
|
|
<Star
|
|
className={`h-3 w-3 ${
|
|
favorites.has(chapter)
|
|
? 'text-yellow-500 fill-yellow-500'
|
|
: 'text-gray-400 hover:text-yellow-500'
|
|
} transition-colors`}
|
|
/>
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Chapter Count */}
|
|
<div className="text-center mt-8">
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
{chapters.length} chapters available
|
|
</p>
|
|
</div>
|
|
|
|
{/* Section Picker Modal */}
|
|
{showSectionPicker && (
|
|
<SectionPicker
|
|
sections={sections}
|
|
onSelect={handleSectionSelect}
|
|
onCancel={() => {
|
|
setShowSectionPicker(false);
|
|
setPendingChapter(null);
|
|
}}
|
|
onSectionCreated={onSectionChange}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default ChapterSelector;
|