Localize prayers page via next-intl messages (titles, categories, stats, buttons, dialog, samples); use Intl relative time; scalable for more locales.
This commit is contained in:
andupetcu
@@ -37,7 +37,7 @@ import {
|
||||
MoreVert,
|
||||
} from '@mui/icons-material'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useLocale } from 'next-intl'
|
||||
import { useTranslations, useLocale, useFormatter } from 'next-intl'
|
||||
|
||||
interface PrayerRequest {
|
||||
id: string
|
||||
@@ -53,6 +53,9 @@ interface PrayerRequest {
|
||||
export default function PrayersPage() {
|
||||
const theme = useTheme()
|
||||
const locale = useLocale()
|
||||
const t = useTranslations('pages.prayers')
|
||||
const tc = useTranslations('common')
|
||||
const f = useFormatter()
|
||||
const [prayers, setPrayers] = useState<PrayerRequest[]>([])
|
||||
const [openDialog, setOpenDialog] = useState(false)
|
||||
const [newPrayer, setNewPrayer] = useState({
|
||||
@@ -62,101 +65,51 @@ export default function PrayersPage() {
|
||||
})
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
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' },
|
||||
]
|
||||
const categories = [
|
||||
{ value: 'personal', label: t('categories.personal'), color: 'primary' },
|
||||
{ value: 'family', label: t('categories.family'), color: 'secondary' },
|
||||
{ value: 'health', label: t('categories.health'), color: 'error' },
|
||||
{ value: 'work', label: t('categories.work'), color: 'warning' },
|
||||
{ value: 'ministry', label: t('categories.ministry'), color: 'success' },
|
||||
{ value: 'world', label: t('categories.world'), color: 'info' },
|
||||
]
|
||||
|
||||
// Sample data - in real app this would come from API
|
||||
useEffect(() => {
|
||||
// Simulate loading prayers
|
||||
setTimeout(() => {
|
||||
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,
|
||||
},
|
||||
]
|
||||
)
|
||||
setPrayers([
|
||||
{
|
||||
id: '1',
|
||||
title: t('samples.item1.title'),
|
||||
description: t('samples.item1.description'),
|
||||
category: 'health',
|
||||
author: t('samples.item1.author'),
|
||||
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
|
||||
prayerCount: 23,
|
||||
isPrayedFor: false,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: t('samples.item2.title'),
|
||||
description: t('samples.item2.description'),
|
||||
category: 'work',
|
||||
author: t('samples.item2.author'),
|
||||
timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000),
|
||||
prayerCount: 15,
|
||||
isPrayedFor: true,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: t('samples.item3.title'),
|
||||
description: t('samples.item3.description'),
|
||||
category: 'family',
|
||||
author: t('samples.item3.author'),
|
||||
timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
|
||||
prayerCount: 41,
|
||||
isPrayedFor: false,
|
||||
},
|
||||
])
|
||||
setLoading(false)
|
||||
}, 1000)
|
||||
}, [locale])
|
||||
@@ -213,17 +166,14 @@ export default function PrayersPage() {
|
||||
const formatTimestamp = (timestamp: Date) => {
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - timestamp.getTime()
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60))
|
||||
const minutes = Math.floor(diff / (1000 * 60))
|
||||
const hours = Math.floor(minutes / 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'
|
||||
if (days > 0) return f.relativeTime(-days, 'day')
|
||||
if (hours > 0) return f.relativeTime(-hours, 'hour')
|
||||
if (minutes > 0) return f.relativeTime(-minutes, 'minute')
|
||||
return f.relativeTime(0, 'second')
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -234,12 +184,10 @@ 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' }} />
|
||||
{locale === 'en' ? 'Prayer Wall' : 'Peretele de rugăciuni'}
|
||||
{t('title')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
{locale === 'en'
|
||||
? 'Share prayers and pray together with the community'
|
||||
: 'Partajează rugăciuni și roagă-te împreună cu comunitatea'}
|
||||
{t('subtitle')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@@ -249,7 +197,7 @@ export default function PrayersPage() {
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{locale === 'en' ? 'Categories' : 'Categorii'}
|
||||
{t('categories.title')}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
{categories.map((category) => (
|
||||
@@ -265,22 +213,12 @@ export default function PrayersPage() {
|
||||
</Box>
|
||||
|
||||
<Typography variant="h6" sx={{ mt: 3, mb: 1 }}>
|
||||
{locale === 'en' ? 'Statistics' : 'Statistici'}
|
||||
{t('stats.title')}
|
||||
</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
|
||||
</>
|
||||
)}
|
||||
• {t('stats.activeRequests', { count: prayers.length })}<br />
|
||||
• {t('stats.totalPrayers', { count: prayers.reduce((sum, p) => sum + p.prayerCount, 0) })}<br />
|
||||
• {t('stats.youPrayed', { count: prayers.filter(p => p.isPrayedFor).length })}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -377,23 +315,19 @@ export default function PrayersPage() {
|
||||
onClick={() => handlePrayFor(prayer.id)}
|
||||
disabled={prayer.isPrayedFor}
|
||||
>
|
||||
{prayer.isPrayedFor
|
||||
? locale === 'en' ? 'Prayed' : 'M-am rugat'
|
||||
: locale === 'en' ? 'Pray' : 'Mă rog'}
|
||||
{prayer.isPrayedFor ? t('buttons.prayed') : t('buttons.pray')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={<Share />}
|
||||
>
|
||||
{locale === 'en' ? 'Share' : 'Partajează'}
|
||||
{t('buttons.share')}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{locale === 'en'
|
||||
? `${prayer.prayerCount} ${prayer.prayerCount === 1 ? 'prayer' : 'prayers'}`
|
||||
: `${prayer.prayerCount} ${prayer.prayerCount === 1 ? 'rugăciune' : 'rugăciuni'}`}
|
||||
{t('stats.totalPrayers', { count: prayer.prayerCount })}
|
||||
</Typography>
|
||||
</Box>
|
||||
</CardContent>
|
||||
@@ -424,7 +358,7 @@ export default function PrayersPage() {
|
||||
>
|
||||
<DialogTitle>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
{locale === 'en' ? 'Add a prayer request' : 'Adaugă o cerere de rugăciune'}
|
||||
{t('dialog.title')}
|
||||
<IconButton onClick={() => setOpenDialog(false)} size="small">
|
||||
<Close />
|
||||
</IconButton>
|
||||
@@ -433,7 +367,7 @@ export default function PrayersPage() {
|
||||
<DialogContent>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={locale === 'en' ? 'Title' : 'Titlu'}
|
||||
label={t('dialog.titleLabel')}
|
||||
value={newPrayer.title}
|
||||
onChange={(e) => setNewPrayer({ ...newPrayer, title: e.target.value })}
|
||||
sx={{ mb: 2, mt: 1 }}
|
||||
@@ -441,7 +375,7 @@ export default function PrayersPage() {
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label={locale === 'en' ? 'Category' : 'Categoria'}
|
||||
label={t('dialog.categoryLabel')}
|
||||
select
|
||||
value={newPrayer.category}
|
||||
onChange={(e) => setNewPrayer({ ...newPrayer, category: e.target.value })}
|
||||
@@ -456,24 +390,24 @@ export default function PrayersPage() {
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label={locale === 'en' ? 'Description' : 'Descriere'}
|
||||
label={t('dialog.descriptionLabel')}
|
||||
multiline
|
||||
rows={4}
|
||||
value={newPrayer.description}
|
||||
onChange={(e) => setNewPrayer({ ...newPrayer, description: e.target.value })}
|
||||
placeholder={locale === 'en' ? 'Describe your prayer request...' : 'Descrie cererea ta de rugăciune...'}
|
||||
placeholder={t('dialog.placeholder')}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenDialog(false)}>
|
||||
{locale === 'en' ? 'Cancel' : 'Anulează'}
|
||||
{t('dialog.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmitPrayer}
|
||||
variant="contained"
|
||||
disabled={!newPrayer.title.trim() || !newPrayer.description.trim()}
|
||||
>
|
||||
{locale === 'en' ? 'Add prayer' : 'Adaugă rugăciunea'}
|
||||
{t('dialog.submit')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
@@ -91,9 +91,56 @@
|
||||
},
|
||||
"prayers": {
|
||||
"title": "Prayers",
|
||||
"subtitle": "Share prayers and pray together with the community",
|
||||
"addRequest": "Add prayer request",
|
||||
"anonymous": "Anonymous",
|
||||
"prayFor": "Pray for this"
|
||||
"prayFor": "Pray for this",
|
||||
"categories": {
|
||||
"title": "Categories",
|
||||
"personal": "Personal",
|
||||
"family": "Family",
|
||||
"health": "Health",
|
||||
"work": "Work",
|
||||
"ministry": "Ministry",
|
||||
"world": "World"
|
||||
},
|
||||
"stats": {
|
||||
"title": "Statistics",
|
||||
"activeRequests": "{count} active requests",
|
||||
"totalPrayers": "{count} total prayers",
|
||||
"youPrayed": "{count} requests you prayed for"
|
||||
},
|
||||
"buttons": {
|
||||
"pray": "Pray",
|
||||
"prayed": "Prayed",
|
||||
"share": "Share"
|
||||
},
|
||||
"dialog": {
|
||||
"title": "Add a prayer request",
|
||||
"titleLabel": "Title",
|
||||
"categoryLabel": "Category",
|
||||
"descriptionLabel": "Description",
|
||||
"placeholder": "Describe your prayer request...",
|
||||
"cancel": "Cancel",
|
||||
"submit": "Add prayer"
|
||||
},
|
||||
"samples": {
|
||||
"item1": {
|
||||
"title": "Prayer for healing",
|
||||
"description": "Please pray for my father who is in the hospital. He needs God's healing.",
|
||||
"author": "Maria P."
|
||||
},
|
||||
"item2": {
|
||||
"title": "God's guidance in career",
|
||||
"description": "Seeking God's direction for the next step in my career. Please pray for clarity and peace.",
|
||||
"author": "Alex M."
|
||||
},
|
||||
"item3": {
|
||||
"title": "Unity in our family",
|
||||
"description": "Please pray for restoration of relationships in our family and for mutual forgiveness.",
|
||||
"author": "Anonymous"
|
||||
}
|
||||
}
|
||||
},
|
||||
"search": {
|
||||
"title": "Search",
|
||||
@@ -114,4 +161,4 @@
|
||||
"next": "Next",
|
||||
"previous": "Previous"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -91,9 +91,56 @@
|
||||
},
|
||||
"prayers": {
|
||||
"title": "Rugăciuni",
|
||||
"subtitle": "Partajează rugăciuni și roagă-te împreună cu comunitatea",
|
||||
"addRequest": "Adaugă cerere de rugăciune",
|
||||
"anonymous": "Anonim",
|
||||
"prayFor": "Mă rog pentru aceasta"
|
||||
"prayFor": "Mă rog pentru aceasta",
|
||||
"categories": {
|
||||
"title": "Categorii",
|
||||
"personal": "Personal",
|
||||
"family": "Familie",
|
||||
"health": "Sănătate",
|
||||
"work": "Muncă",
|
||||
"ministry": "Serviciu",
|
||||
"world": "Lume"
|
||||
},
|
||||
"stats": {
|
||||
"title": "Statistici",
|
||||
"activeRequests": "{count} cereri active",
|
||||
"totalPrayers": "{count} rugăciuni totale",
|
||||
"youPrayed": "{count} cereri la care te-ai rugat"
|
||||
},
|
||||
"buttons": {
|
||||
"pray": "Mă rog",
|
||||
"prayed": "M-am rugat",
|
||||
"share": "Partajează"
|
||||
},
|
||||
"dialog": {
|
||||
"title": "Adaugă o cerere de rugăciune",
|
||||
"titleLabel": "Titlu",
|
||||
"categoryLabel": "Categoria",
|
||||
"descriptionLabel": "Descriere",
|
||||
"placeholder": "Descrie cererea ta de rugăciune...",
|
||||
"cancel": "Anulează",
|
||||
"submit": "Adaugă rugăciunea"
|
||||
},
|
||||
"samples": {
|
||||
"item1": {
|
||||
"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.",
|
||||
"author": "Maria P."
|
||||
},
|
||||
"item2": {
|
||||
"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.",
|
||||
"author": "Alexandru M."
|
||||
},
|
||||
"item3": {
|
||||
"title": "Unitatea în familia noastră",
|
||||
"description": "Rugați-vă pentru restaurarea relațiilor în familia noastră și pentru iertarea reciprocă.",
|
||||
"author": "Anonim"
|
||||
}
|
||||
}
|
||||
},
|
||||
"search": {
|
||||
"title": "Căutare",
|
||||
@@ -114,4 +161,4 @@
|
||||
"next": "Următorul",
|
||||
"previous": "Anterior"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user