Localize /[locale]/prayers page: use locale-aware labels, sample data, and timestamps; ensure /en/prayers renders in English.

This commit is contained in:
andupetcu
2025-09-20 18:04:07 +03:00
parent 88b251c100
commit ddfc2b673f

View File

@@ -37,6 +37,7 @@ import {
MoreVert,
} from '@mui/icons-material'
import { useState, useEffect } from 'react'
import { useLocale } from 'next-intl'
interface PrayerRequest {
id: string
@@ -51,6 +52,7 @@ interface PrayerRequest {
export default function PrayersPage() {
const theme = useTheme()
const locale = useLocale()
const [prayers, setPrayers] = useState<PrayerRequest[]>([])
const [openDialog, setOpenDialog] = useState(false)
const [newPrayer, setNewPrayer] = useState({
@@ -60,7 +62,16 @@ export default function PrayersPage() {
})
const [loading, setLoading] = useState(true)
const categories = [
const categories = locale === 'en'
? [
{ value: 'personal', label: 'Personal', color: 'primary' },
{ value: 'family', label: 'Family', color: 'secondary' },
{ value: 'health', label: 'Health', color: 'error' },
{ value: 'work', label: 'Work', color: 'warning' },
{ value: 'ministry', label: 'Ministry', color: 'success' },
{ value: 'world', label: 'World', color: 'info' },
]
: [
{ value: 'personal', label: 'Personal', color: 'primary' },
{ value: 'family', label: 'Familie', color: 'secondary' },
{ value: 'health', label: 'Sănătate', color: 'error' },
@@ -73,41 +84,82 @@ export default function PrayersPage() {
useEffect(() => {
// Simulate loading prayers
setTimeout(() => {
setPrayers([
setPrayers(
locale === 'en'
? [
{
id: '1',
title: 'Prayer for healing',
description:
'Please pray for my father who is in the hospital. He needs God\'s healing.',
category: 'health',
author: 'Maria P.',
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
prayerCount: 23,
isPrayedFor: false,
},
{
id: '2',
title: 'God\'s guidance in career',
description:
'Seeking God\'s direction for the next step in my career. Please pray for clarity and peace.',
category: 'work',
author: 'Alex M.',
timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000),
prayerCount: 15,
isPrayedFor: true,
},
{
id: '3',
title: 'Unity in our family',
description:
'Please pray for restoration of relationships in our family and for mutual forgiveness.',
category: 'family',
author: 'Anonymous',
timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
prayerCount: 41,
isPrayedFor: false,
},
]
: [
{
id: '1',
title: 'Rugăciune pentru vindecare',
description: 'Te rog să te rogi pentru tatăl meu care se află în spital. Are nevoie de vindecarea lui Dumnezeu.',
description:
'Te rog să te rogi pentru tatăl meu care se află în spital. Are nevoie de vindecarea lui Dumnezeu.',
category: 'health',
author: 'Maria P.',
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
prayerCount: 23,
isPrayedFor: false,
},
{
id: '2',
title: 'Îndrumarea lui Dumnezeu în carieră',
description: 'Caut direcția lui Dumnezeu pentru următorul pas în cariera mea. Te rog să te rogi pentru claritate și pace.',
description:
'Caut direcția lui Dumnezeu pentru următorul pas în cariera mea. Te rog să te rogi pentru claritate și pace.',
category: 'work',
author: 'Alexandru M.',
timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000),
prayerCount: 15,
isPrayedFor: true,
},
{
id: '3',
title: 'Unitatea în familia noastră',
description: 'Rugați-vă pentru restaurarea relațiilor în familia noastră și pentru iertarea reciprocă.',
description:
'Rugați-vă pentru restaurarea relațiilor în familia noastră și pentru iertarea reciprocă.',
category: 'family',
author: 'Anonim',
timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago
timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
prayerCount: 41,
isPrayedFor: false,
},
])
]
)
setLoading(false)
}, 1000)
}, [])
}, [locale])
const handleSubmitPrayer = async () => {
if (!newPrayer.title.trim() || !newPrayer.description.trim()) return
@@ -117,7 +169,7 @@ export default function PrayersPage() {
title: newPrayer.title,
description: newPrayer.description,
category: newPrayer.category,
author: 'Tu', // In real app, get from auth
author: locale === 'en' ? 'You' : 'Tu', // In real app, get from auth
timestamp: new Date(),
prayerCount: 0,
isPrayedFor: false,
@@ -164,6 +216,11 @@ export default function PrayersPage() {
const hours = Math.floor(diff / (1000 * 60 * 60))
const days = Math.floor(hours / 24)
if (locale === 'en') {
if (days > 0) return `${days} day${days === 1 ? '' : 's'} ago`
if (hours > 0) return `${hours} hour${hours === 1 ? '' : 's'} ago`
return 'A few minutes ago'
}
if (days > 0) return `${days} zile în urmă`
if (hours > 0) return `${hours} ore în urmă`
return 'Acum câteva minute'
@@ -177,10 +234,12 @@ export default function PrayersPage() {
<Box sx={{ mb: 4, textAlign: 'center' }}>
<Typography variant="h3" component="h1" gutterBottom>
<Favorite sx={{ fontSize: 40, mr: 2, verticalAlign: 'middle', color: 'error.main' }} />
Peretele de rugăciuni
{locale === 'en' ? 'Prayer Wall' : 'Peretele de rugăciuni'}
</Typography>
<Typography variant="body1" color="text.secondary">
Partajează rugăciuni și roagă-te împreună cu comunitatea
{locale === 'en'
? 'Share prayers and pray together with the community'
: 'Partajează rugăciuni și roagă-te împreună cu comunitatea'}
</Typography>
</Box>
@@ -190,7 +249,7 @@ export default function PrayersPage() {
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
Categorii
{locale === 'en' ? 'Categories' : 'Categorii'}
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
{categories.map((category) => (
@@ -206,12 +265,22 @@ export default function PrayersPage() {
</Box>
<Typography variant="h6" sx={{ mt: 3, mb: 1 }}>
Statistici
{locale === 'en' ? 'Statistics' : 'Statistici'}
</Typography>
<Typography variant="body2" color="text.secondary">
{locale === 'en' ? (
<>
{prayers.length} active requests<br />
{prayers.reduce((sum, p) => sum + p.prayerCount, 0)} total prayers<br />
{prayers.filter(p => p.isPrayedFor).length} requests you prayed for
</>
) : (
<>
{prayers.length} cereri active<br />
{prayers.reduce((sum, p) => sum + p.prayerCount, 0)} rugăciuni totale<br />
{prayers.filter(p => p.isPrayedFor).length} cereri la care te-ai rugat
</>
)}
</Typography>
</CardContent>
</Card>
@@ -308,19 +377,23 @@ export default function PrayersPage() {
onClick={() => handlePrayFor(prayer.id)}
disabled={prayer.isPrayedFor}
>
{prayer.isPrayedFor ? 'M-am rugat' : 'Mă rog'}
{prayer.isPrayedFor
? locale === 'en' ? 'Prayed' : 'M-am rugat'
: locale === 'en' ? 'Pray' : 'Mă rog'}
</Button>
<Button
variant="outlined"
size="small"
startIcon={<Share />}
>
Partajează
{locale === 'en' ? 'Share' : 'Partajează'}
</Button>
</Box>
<Typography variant="body2" color="text.secondary">
{prayer.prayerCount} {prayer.prayerCount === 1 ? 'rugăciune' : 'rugăciuni'}
{locale === 'en'
? `${prayer.prayerCount} ${prayer.prayerCount === 1 ? 'prayer' : 'prayers'}`
: `${prayer.prayerCount} ${prayer.prayerCount === 1 ? 'rugăciune' : 'rugăciuni'}`}
</Typography>
</Box>
</CardContent>
@@ -351,7 +424,7 @@ export default function PrayersPage() {
>
<DialogTitle>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
Adaugă o cerere de rugăciune
{locale === 'en' ? 'Add a prayer request' : 'Adaugă o cerere de rugăciune'}
<IconButton onClick={() => setOpenDialog(false)} size="small">
<Close />
</IconButton>
@@ -360,7 +433,7 @@ export default function PrayersPage() {
<DialogContent>
<TextField
fullWidth
label="Titlu"
label={locale === 'en' ? 'Title' : 'Titlu'}
value={newPrayer.title}
onChange={(e) => setNewPrayer({ ...newPrayer, title: e.target.value })}
sx={{ mb: 2, mt: 1 }}
@@ -368,7 +441,7 @@ export default function PrayersPage() {
<TextField
fullWidth
label="Categoria"
label={locale === 'en' ? 'Category' : 'Categoria'}
select
value={newPrayer.category}
onChange={(e) => setNewPrayer({ ...newPrayer, category: e.target.value })}
@@ -383,24 +456,24 @@ export default function PrayersPage() {
<TextField
fullWidth
label="Descriere"
label={locale === 'en' ? 'Description' : 'Descriere'}
multiline
rows={4}
value={newPrayer.description}
onChange={(e) => setNewPrayer({ ...newPrayer, description: e.target.value })}
placeholder="Descrie cererea ta de rugăciune..."
placeholder={locale === 'en' ? 'Describe your prayer request...' : 'Descrie cererea ta de rugăciune...'}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenDialog(false)}>
Anulează
{locale === 'en' ? 'Cancel' : 'Anulează'}
</Button>
<Button
onClick={handleSubmitPrayer}
variant="contained"
disabled={!newPrayer.title.trim() || !newPrayer.description.trim()}
>
Adaugă rugăciunea
{locale === 'en' ? 'Add prayer' : 'Adaugă rugăciunea'}
</Button>
</DialogActions>
</Dialog>