56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { Container } from 'react-bootstrap'
|
||
|
||
import { useUser } from '../hooks/api'
|
||
import { userCategories } from '../assets/userCategories'
|
||
import { BackHeader, CategoryPreview, Poetry, Points, SignOut, StarRating } from '../components'
|
||
import { gotError, gotResponse } from '../hooks/useFetch'
|
||
|
||
import styles from '../styles/UserPage.module.css'
|
||
|
||
function UserPage() {
|
||
const user = useUser()
|
||
|
||
return (
|
||
<Container className={styles.sixteenXnine}>
|
||
<BackHeader text={
|
||
gotResponse(user) ? (
|
||
gotError(user) ? (
|
||
user.error
|
||
) : (
|
||
`${user.data.nickname}, с нами с ${user.data.regDate}`
|
||
)
|
||
) : (
|
||
'Загрузка...'
|
||
)
|
||
}>
|
||
<SignOut />
|
||
</BackHeader>
|
||
|
||
<div className='mb-4'>
|
||
<Points points={
|
||
gotResponse(user) ? (
|
||
gotError(user) ? -1 : user.data?.points
|
||
) : (
|
||
'Загрузка...'
|
||
)
|
||
} />
|
||
|
||
<h5 className={styles.userRating}>
|
||
Ваша оценка:
|
||
<StarRating userId={user.data?.id || 1} />
|
||
</h5>
|
||
</div>
|
||
|
||
{userCategories.map(cat => (
|
||
<CategoryPreview key={cat} category={cat} />
|
||
))}
|
||
|
||
<div className='mb-3'>
|
||
<Poetry />
|
||
</div>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export default UserPage
|