66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import { Container } from 'react-bootstrap'
|
|
import { useParams } from 'react-router-dom'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { getUserProfile } from '../api/client'
|
|
|
|
export default function Profile() {
|
|
const { id } = useParams()
|
|
const { t } = useTranslation()
|
|
const [profile, setProfile] = useState(null)
|
|
const [error, setError] = useState('')
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
let active = true
|
|
setLoading(true)
|
|
setError('')
|
|
|
|
getUserProfile(id)
|
|
.then((data) => {
|
|
if (!active) return
|
|
setProfile(data)
|
|
})
|
|
.catch((err) => {
|
|
if (!active) return
|
|
setError(err.message)
|
|
})
|
|
.finally(() => {
|
|
if (active) setLoading(false)
|
|
})
|
|
|
|
return () => {
|
|
active = false
|
|
}
|
|
}, [id])
|
|
|
|
return (
|
|
<Container fluid className="py-5 bb-portal-shell">
|
|
<div className="bb-portal-card">
|
|
<div className="bb-portal-card-title">{t('profile.title')}</div>
|
|
{loading && <p className="bb-muted">{t('profile.loading')}</p>}
|
|
{error && <p className="text-danger">{error}</p>}
|
|
{profile && (
|
|
<div className="bb-profile">
|
|
<div className="bb-profile-avatar">
|
|
{profile.avatar_url ? (
|
|
<img src={profile.avatar_url} alt="" />
|
|
) : (
|
|
<i className="bi bi-person" aria-hidden="true" />
|
|
)}
|
|
</div>
|
|
<div className="bb-profile-meta">
|
|
<div className="bb-profile-name">{profile.name}</div>
|
|
{profile.created_at && (
|
|
<div className="bb-muted">
|
|
{t('profile.registered')} {profile.created_at.slice(0, 10)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Container>
|
|
)
|
|
}
|