Delete Post

exam/react/src/components/Post/Post.tsx

@@ -1,25 +1,67 @@
-import { Avatar, Card, CardContent, CardHeader, Link as MUILink, Typography } from '@mui/material';
+import { Person } from '@mui/icons-material';
+import {
+  Alert,
+  Avatar,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Link as MUILink,
+  Snackbar,
+  Typography,
+} from '@mui/material';
+import { useMutation } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
-import { FC } from 'react';
+import { FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import Api from '../../api/Api';
 import { PostAuth, PostNonAuth } from '../../types/Post';
 import convertDate from '../../utils/date';
+import handleError from '../../utils/errors';
 
 interface Props {
   post: PostNonAuth | PostAuth;
 }
 
 const Post: FC<Props> = ({ post }) => {
+  const deleteMutation = useMutation({
+    mutationFn: (id: number) => {
+      return Api.deletePost(id);
+    },
+  });
+
+  const [open, setOpen] = useState(false);
+
+  const { t } = useTranslation();
+
   return (
-    <Card sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+    <Card>
       <CardHeader
         avatar={
           'id' in post.user ? (
-            <MUILink component={Link} to="/profile/$id" params={{ id: post.user.id }} underline="none">
-              <Avatar alt={post.user.username} src={`storage/${post.user.image}`} />
-            </MUILink>
+            post.user.id !== Api.getAuthenticatedUser()?.id ? (
+              <MUILink component={Link} to="/profile/$id" params={{ id: post.user.id }}>
+                <Avatar alt={post.user.username} src={`storage/${post.user.image}`}>
+                  <Person />
+                </Avatar>
+              </MUILink>
+            ) : (
+              <MUILink component={Link} to="/profile">
+                <Avatar alt={post.user.username} src={`storage/${post.user.image}`}>
+                  <Person />
+                </Avatar>
+              </MUILink>
+            )
           ) : (
-            <Avatar alt={post.user.username} src={`storage/${post.user.image}`} />
+            <Avatar alt={post.user.username} src={`storage/${post.user.image}`}>
+              <Person />
+            </Avatar>
           )
         }
         title={
@@ -42,6 +84,42 @@ const Post: FC<Props> = ({ post }) => {
       <CardContent>
         <Typography>{post.content}</Typography>
       </CardContent>
+
+      <CardActions>
+        {Api.isAdmin() && (
+          <>
+            <Button size="small" color="error" onClick={() => setOpen(true)}>
+              {t('Delete')}
+            </Button>
+            <Dialog open={open} onClose={() => setOpen(false)}>
+              <DialogTitle>{t('Confirm post delete title')}</DialogTitle>
+              <DialogContent>
+                <DialogContentText>{t('Confirm post delete body', { name: post.user.username })}</DialogContentText>
+              </DialogContent>
+              <DialogActions>
+                <Button onClick={() => setOpen(false)} autoFocus variant="contained">
+                  {t('No')}
+                </Button>
+                <Button
+                  variant="outlined"
+                  color="error"
+                  onClick={() => {
+                    deleteMutation.mutate(post.id);
+                    setOpen(false);
+                  }}
+                >
+                  {t('Yes')}
+                </Button>
+              </DialogActions>
+            </Dialog>
+          </>
+        )}
+      </CardActions>
+      <Snackbar open={deleteMutation.isError} autoHideDuration={2000} onClose={() => deleteMutation.reset()}>
+        <Alert severity="error" variant="filled" sx={{ width: '100%' }}>
+          {deleteMutation.isError && handleError(deleteMutation.error, t, 'delete')}
+        </Alert>
+      </Snackbar>
     </Card>
   );
 };