import pageData from "~/data/reading-tracker.json"; export function ReadingTracker() { const { data, updateData } = useData(pageData); const [searchQuery, setSearchQuery] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); const [isSearching, setIsSearching] = React.useState(false); const [goalType, setGoalType] = React.useState('yearly'); const [newGoal, setNewGoal] = React.useState(''); const [selectedBook, setSelectedBook] = React.useState(null); const [isModalOpen, setIsModalOpen] = React.useState(false); // Initialize data structure const books = data.books || { toRead: [], reading: [], completed: [] }; const goals = data.goals || { yearly: 0, monthly: 0, weekly: 0 }; const achievements = data.achievements || []; const searchBooks = async () => { if (!searchQuery.trim()) return; setIsSearching(true); try { // Search by title and author const titleResponse = await fetch(`https://openlibrary.org/search.json?title=${encodeURIComponent(searchQuery)}&limit=5`); const authorResponse = await fetch(`https://openlibrary.org/search.json?author=${encodeURIComponent(searchQuery)}&limit=5`); const titleData = await titleResponse.json(); const authorData = await authorResponse.json(); // Combine results and remove duplicates const combinedResults = [...(titleData.docs || []), ...(authorData.docs || [])]; const uniqueResults = combinedResults.filter((book, index, self) => index === self.findIndex(b => b.key === book.key) ).slice(0, 10); setSearchResults(uniqueResults); } catch (error) { console.error('Search failed:', error); setSearchResults([]); } setIsSearching(false); }; const addBook = (book, status = 'toRead') => { const bookData = { id: book.key, title: book.title, author: book.author_name ? book.author_name[0] : 'Unknown Author', isbn: book.isbn ? book.isbn[0] : null, cover: book.cover_i ? `https://covers.openlibrary.org/b/id/${book.cover_i}-M.jpg` : null, addedDate: new Date().toISOString(), ...(status === 'completed' && { completedDate: new Date().toISOString() }) }; const updatedBooks = { ...books, [status]: [...books[status], bookData] }; updateData({ ...data, books: updatedBooks }); setSearchResults([]); setSearchQuery(''); }; const moveBook = (bookId, fromStatus, toStatus) => { const book = books[fromStatus].find(b => b.id === bookId); if (!book) return; const updatedBook = { ...book, ...(toStatus === 'completed' && { completedDate: new Date().toISOString() }) }; const updatedBooks = { ...books, [fromStatus]: books[fromStatus].filter(b => b.id !== bookId), [toStatus]: [...books[toStatus], updatedBook] }; updateData({ ...data, books: updatedBooks }); checkAchievements(updatedBooks); }; const removeBook = (bookId, status) => { const updatedBooks = { ...books, [status]: books[status].filter(b => b.id !== bookId) }; updateData({ ...data, books: updatedBooks }); }; const setGoal = () => { if (!newGoal || isNaN(newGoal)) return; const updatedGoals = { ...goals, [goalType]: parseInt(newGoal) }; updateData({ ...data, goals: updatedGoals }); setNewGoal(''); }; const checkAchievements = (updatedBooks) => { const completedThisYear = updatedBooks.completed.filter(book => new Date(book.completedDate).getFullYear() === new Date().getFullYear() ).length; const completedThisMonth = updatedBooks.completed.filter(book => { const completedDate = new Date(book.completedDate); const now = new Date(); return completedDate.getFullYear() === now.getFullYear() && completedDate.getMonth() === now.getMonth(); }).length; const currentWeekStart = new Date(); currentWeekStart.setDate(currentWeekStart.getDate() - currentWeekStart.getDay()); const completedThisWeek = updatedBooks.completed.filter(book => new Date(book.completedDate) >= currentWeekStart ).length; const newAchievements = []; if (goals.yearly > 0 && completedThisYear >= goals.yearly) { newAchievements.push(`🎉 Yearly goal achieved! ${completedThisYear}/${goals.yearly} books`); } if (goals.monthly > 0 && completedThisMonth >= goals.monthly) { newAchievements.push(`📚 Monthly goal achieved! ${completedThisMonth}/${goals.monthly} books`); } if (goals.weekly > 0 && completedThisWeek >= goals.weekly) { newAchievements.push(`⭐ Weekly goal achieved! ${completedThisWeek}/${goals.weekly} books`); } if (newAchievements.length > 0) { updateData({ ...data, books: updatedBooks, achievements: [...achievements, ...newAchievements.map(text => ({ text, date: new Date().toISOString() }))] }); } }; const getProgressStats = () => { const now = new Date(); const yearStart = new Date(now.getFullYear(), 0, 1); const monthStart = new Date(now.getFullYear(), now.getMonth(), 1); const weekStart = new Date(now); weekStart.setDate(weekStart.getDate() - weekStart.getDay()); const yearlyCompleted = books.completed.filter(book => new Date(book.completedDate) >= yearStart ).length; const monthlyCompleted = books.completed.filter(book => new Date(book.completedDate) >= monthStart ).length; const weeklyCompleted = books.completed.filter(book => new Date(book.completedDate) >= weekStart ).length; return { yearlyCompleted, monthlyCompleted, weeklyCompleted }; }; const getChartData = () => { // Get last 12 months of data const monthlyData = []; const now = new Date(); for (let i = 11; i >= 0; i--) { const date = new Date(now.getFullYear(), now.getMonth() - i, 1); const monthName = date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }); const monthStart = new Date(date.getFullYear(), date.getMonth(), 1); const monthEnd = new Date(date.getFullYear(), date.getMonth() + 1, 0); const completedThisMonth = books.completed.filter(book => { const completedDate = new Date(book.completedDate); return completedDate >= monthStart && completedDate <= monthEnd; }).length; monthlyData.push({ month: monthName, completed: completedThisMonth, cumulative: books.completed.filter(book => new Date(book.completedDate) <= monthEnd ).length }); } return monthlyData; }; const stats = getProgressStats(); const chartData = getChartData(); const chartConfig = { completed: { label: "Books Completed", color: "oklch(0.646 0.222 41.116)", }, cumulative: { label: "Cumulative Total", color: "oklch(0.6 0.118 184.704)", }, }; const openBookModal = (book) => { setSelectedBook(book); setIsModalOpen(true); }; const closeBookModal = () => { setSelectedBook(null); setIsModalOpen(false); }; return (

📖 My Reading Tracker

{/* Search Section */} Add New Book

setSearchQuery(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && searchBooks()} className="flex-1" />

{searchResults.length > 0 && (

{searchResults.map((book) => (

{book.cover_i && (

)}

{book.title}

{book.author_name ? book.author_name[0] : 'Unknown Author'}

))}

)} {/* Goals and Progress */}

Reading Goals

setNewGoal(e.target.value)} className="w-full sm:w-24" min="1" max="365" />

{/* Current goal display */}

{goals[goalType] > 0 ? ( Current {goalType} goal: {goals[goalType]} books ) : ( No {goalType} goal set )}

{goals.yearly > 0 && (

Yearly Goal {stats.yearlyCompleted}/{goals.yearly}

)} {goals.monthly > 0 && (

Monthly Goal {stats.monthlyCompleted}/{goals.monthly}

)} {goals.weekly > 0 && (

Weekly Goal {stats.weeklyCompleted}/{goals.weekly}

)}

Recent Achievements {achievements.length === 0 ? (

No achievements yet. Set some goals and start reading!

) : (

{achievements.slice(-5).reverse().map((achievement, index) => (

{achievement.text}

))}

)}

{/* Book Lists */} To Read ({books.toRead.length}) Currently Reading ({books.reading.length}) Completed ({books.completed.length}) {books.toRead.length === 0 ? (

No books in this category yet.

) : (

{books.toRead.map((book) => ( ))}

)} {books.reading.length === 0 ? (

No books in this category yet.

) : (

{books.reading.map((book) => ( ))}

)} {books.completed.length === 0 ? (

No books in this category yet.

) : (

{books.completed.map((book) => ( ))}

)} {/* Reading Progress Chart */} Reading Progress Over Time } /> {books.completed.length === 0 && (

Complete some books to see your reading progress!

)} {/* Book Detail Modal */}

); }