90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import { Person } from '@mui/icons-material';
|
|
import {
|
|
Avatar,
|
|
Box,
|
|
Button,
|
|
Card,
|
|
CardActions,
|
|
CardContent,
|
|
Divider,
|
|
Grid,
|
|
IconButton,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import { FC, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { PostAuth } from '../../types/Post';
|
|
import { User } from '../../types/User';
|
|
import convertDate from '../../utils/date';
|
|
import UserEditDialog from '../Dialogs/UserEdit/UserEditDialog';
|
|
import UserImageDialog from '../Dialogs/UserImage/UserImageDialog';
|
|
import Post from '../Post/Post';
|
|
|
|
interface Props {
|
|
user: User;
|
|
posts: PostAuth[];
|
|
canEdit?: boolean;
|
|
}
|
|
|
|
const Profile: FC<Props> = ({ user, posts, canEdit }) => {
|
|
const [editOpen, setEditOpen] = useState(false);
|
|
const [imageOpen, setImageOpen] = useState(false);
|
|
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Grid container sx={{ justifyContent: 'center', marginTop: 0 }} spacing={2}>
|
|
<Grid item>
|
|
<Card>
|
|
<CardContent>
|
|
<Grid container spacing={2}>
|
|
<Grid item sx={{ display: 'flex', flexGrow: 1, justifyContent: 'center' }}>
|
|
<IconButton onClick={() => setImageOpen(true)}>
|
|
<Avatar alt={user.username} src={`${user.image}`} sx={{ width: '100px', height: '100px' }}>
|
|
<Person sx={{ width: '60px', height: '60px' }} />
|
|
</Avatar>
|
|
</IconButton>
|
|
</Grid>
|
|
<Grid item sx={{ display: 'flex', alignItems: 'center' }}>
|
|
<Box sx={{ display: 'grid', gridTemplateColumns: '120px 1fr', columnGap: 1 }}>
|
|
<Typography fontWeight="bold">{t('Username')}:</Typography>
|
|
<Typography>{user.username}</Typography>
|
|
<Typography fontWeight="bold">{t('Email')}:</Typography>
|
|
<Typography>{user.email}</Typography>
|
|
<Typography fontWeight="bold">{t('Member since')}:</Typography>
|
|
<Typography>{convertDate(user.memberSince)}</Typography>
|
|
<Typography fontWeight="bold">{t('Post count')}:</Typography>
|
|
<Typography>{user.postCount}</Typography>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</CardContent>
|
|
<CardActions>
|
|
{canEdit && (
|
|
<>
|
|
<Button size="small" onClick={() => setEditOpen(true)}>
|
|
{t('Edit')}
|
|
</Button>
|
|
<UserEditDialog user={user} open={editOpen} onClose={() => setEditOpen(false)} />
|
|
<UserImageDialog user={user} open={imageOpen} onClose={() => setImageOpen(false)} />
|
|
</>
|
|
)}
|
|
</CardActions>
|
|
</Card>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Divider variant="middle">
|
|
<Typography sx={{ opacity: 0.36 }}>{t('Recent posts')}</Typography>
|
|
</Divider>
|
|
</Grid>
|
|
{posts.map((post) => (
|
|
<Grid key={`post_${post.id}`} item xs={12}>
|
|
<Post post={post} disableActions />
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|