feat: add user favorite Bible version preference system
- Add favoriteBibleVersion field to User schema in Prisma - Create API endpoint (/api/user/favorite-version) to get/set favorite version - GET: retrieve user's favorite Bible version - POST: save/update user's favorite Bible version - Enhance Bible reader functionality - Automatically load user's favorite version on mount (logged-in users) - Add star button (⭐) next to version selector to set current version as default - Display success message when favorite version is saved - Fall back to default version if no favorite is set - Add Bible Preferences section to Settings page - Display user's current favorite Bible version in dropdown - Allow users to view and change favorite version - Load all Bible versions (removed 200 limit) to ensure favorite is found - Show confirmation message when version is selected - Add loading state while fetching versions - Fix renderValue in Select component to properly display version names - Add comprehensive debug logging for troubleshooting 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useTranslations, useLocale } from 'next-intl'
|
||||
import { useAuth } from '@/hooks/use-auth'
|
||||
import { ProtectedRoute } from '@/components/auth/protected-route'
|
||||
@@ -19,7 +19,8 @@ import {
|
||||
CardContent,
|
||||
Divider,
|
||||
Alert,
|
||||
Button
|
||||
Button,
|
||||
CircularProgress
|
||||
} from '@mui/material'
|
||||
import {
|
||||
Settings as SettingsIcon,
|
||||
@@ -28,7 +29,8 @@ import {
|
||||
Language,
|
||||
Notifications,
|
||||
Security,
|
||||
Save
|
||||
Save,
|
||||
MenuBook
|
||||
} from '@mui/icons-material'
|
||||
|
||||
export default function SettingsPage() {
|
||||
@@ -43,6 +45,48 @@ export default function SettingsPage() {
|
||||
language: locale
|
||||
})
|
||||
const [message, setMessage] = useState('')
|
||||
const [bibleVersions, setBibleVersions] = useState<any[]>([])
|
||||
const [favoriteBibleVersion, setFavoriteBibleVersion] = useState<string | null>(null)
|
||||
const [loadingVersions, setLoadingVersions] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const loadBiblePreferences = async () => {
|
||||
try {
|
||||
// Load available versions (no limit to ensure we get all versions including the favorite)
|
||||
const versionsRes = await fetch('/api/bible/versions?all=true')
|
||||
const versionsData = await versionsRes.json()
|
||||
if (versionsData.success) {
|
||||
console.log('[Settings] Loaded versions:', versionsData.versions.length)
|
||||
setBibleVersions(versionsData.versions)
|
||||
}
|
||||
|
||||
// Load user's favorite version
|
||||
const token = localStorage.getItem('authToken')
|
||||
if (token) {
|
||||
const favoriteRes = await fetch('/api/user/favorite-version', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
})
|
||||
const favoriteData = await favoriteRes.json()
|
||||
console.log('[Settings] Favorite version data:', favoriteData)
|
||||
if (favoriteData.success && favoriteData.favoriteBibleVersion) {
|
||||
console.log('[Settings] Setting favorite version:', favoriteData.favoriteBibleVersion)
|
||||
console.log('[Settings] Type of favorite version:', typeof favoriteData.favoriteBibleVersion)
|
||||
setFavoriteBibleVersion(favoriteData.favoriteBibleVersion)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading Bible preferences:', error)
|
||||
} finally {
|
||||
setLoadingVersions(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (user) {
|
||||
loadBiblePreferences()
|
||||
} else {
|
||||
setLoadingVersions(false)
|
||||
}
|
||||
}, [user])
|
||||
|
||||
const handleSettingChange = (setting: string, value: any) => {
|
||||
setSettings(prev => ({
|
||||
@@ -51,6 +95,33 @@ export default function SettingsPage() {
|
||||
}))
|
||||
}
|
||||
|
||||
const handleFavoriteVersionChange = async (versionId: string) => {
|
||||
const token = localStorage.getItem('authToken')
|
||||
if (!token) return
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/user/favorite-version', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({ versionId })
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setFavoriteBibleVersion(versionId)
|
||||
setMessage('Favorite Bible version updated successfully')
|
||||
} else {
|
||||
setMessage('Failed to update favorite version')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating favorite version:', error)
|
||||
setMessage('Failed to update favorite version')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// TODO: Implement settings update API
|
||||
@@ -176,6 +247,69 @@ export default function SettingsPage() {
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Bible Preferences */}
|
||||
<Box sx={{ flex: '1 1 100%' }}>
|
||||
<Card variant="outlined">
|
||||
<CardContent>
|
||||
<Box display="flex" alignItems="center" mb={3}>
|
||||
<MenuBook sx={{ mr: 1, color: 'primary.main' }} />
|
||||
<Typography variant="h6">
|
||||
Bible Preferences
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
Select your preferred Bible version. This will be loaded automatically when you open the Bible reader.
|
||||
</Typography>
|
||||
|
||||
{loadingVersions ? (
|
||||
<Box display="flex" justifyContent="center" py={2}>
|
||||
<CircularProgress size={24} />
|
||||
</Box>
|
||||
) : (
|
||||
<Box>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Favorite Bible Version</InputLabel>
|
||||
<Select
|
||||
value={favoriteBibleVersion || ''}
|
||||
label="Favorite Bible Version"
|
||||
onChange={(e) => handleFavoriteVersionChange(e.target.value)}
|
||||
renderValue={(selected) => {
|
||||
if (!selected) {
|
||||
return <em>None selected</em>
|
||||
}
|
||||
console.log('[Settings] renderValue - selected:', selected)
|
||||
console.log('[Settings] renderValue - bibleVersions:', bibleVersions.length)
|
||||
const version = bibleVersions.find(v => v.id === selected)
|
||||
console.log('[Settings] renderValue - found version:', version)
|
||||
if (version) {
|
||||
return `${version.name} - ${version.abbreviation} (${version.language.toUpperCase()})`
|
||||
}
|
||||
return selected
|
||||
}}
|
||||
disabled={bibleVersions.length === 0}
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None selected</em>
|
||||
</MenuItem>
|
||||
{bibleVersions.map((version) => (
|
||||
<MenuItem key={version.id} value={version.id}>
|
||||
{version.name} - {version.abbreviation} ({version.language.toUpperCase()})
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
{favoriteBibleVersion && (
|
||||
<Typography variant="caption" color="success.main" sx={{ mt: 1, display: 'block' }}>
|
||||
✓ This version will be loaded when you open the Bible reader
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Security Settings */}
|
||||
<Box sx={{ flex: '1 1 100%' }}>
|
||||
<Card variant="outlined">
|
||||
|
||||
Reference in New Issue
Block a user