Localize /[locale]/prayers page: use locale-aware labels, sample data, and timestamps; ensure /en/prayers renders in English.
This commit is contained in:
andupetcu
@@ -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,54 +62,104 @@ export default function PrayersPage() {
|
||||
})
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const categories = [
|
||||
{ value: 'personal', label: 'Personal', color: 'primary' },
|
||||
{ value: 'family', label: 'Familie', color: 'secondary' },
|
||||
{ value: 'health', label: 'Sănătate', color: 'error' },
|
||||
{ value: 'work', label: 'Muncă', color: 'warning' },
|
||||
{ value: 'ministry', label: 'Serviciu', color: 'success' },
|
||||
{ value: 'world', label: 'Lume', color: 'info' },
|
||||
]
|
||||
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' },
|
||||
{ value: 'work', label: 'Muncă', color: 'warning' },
|
||||
{ value: 'ministry', label: 'Serviciu', color: 'success' },
|
||||
{ value: 'world', label: 'Lume', color: 'info' },
|
||||
]
|
||||
|
||||
// Sample data - in real app this would come from API
|
||||
useEffect(() => {
|
||||
// Simulate loading prayers
|
||||
setTimeout(() => {
|
||||
setPrayers([
|
||||
{
|
||||
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.',
|
||||
category: 'health',
|
||||
author: 'Maria P.',
|
||||
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
|
||||
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.',
|
||||
category: 'work',
|
||||
author: 'Alexandru M.',
|
||||
timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
|
||||
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ă.',
|
||||
category: 'family',
|
||||
author: 'Anonim',
|
||||
timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // 1 day ago
|
||||
prayerCount: 41,
|
||||
isPrayedFor: false,
|
||||
},
|
||||
])
|
||||
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.',
|
||||
category: 'health',
|
||||
author: 'Maria P.',
|
||||
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.',
|
||||
category: 'work',
|
||||
author: 'Alexandru M.',
|
||||
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ă.',
|
||||
category: 'family',
|
||||
author: 'Anonim',
|
||||
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">
|
||||
• {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
|
||||
{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,28 +456,28 @@ 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>
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user