Post Create/Edit

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

@@ -23,6 +23,7 @@ import { useTranslation } from 'react-i18next';
 import Api from '../../api/Api';
 import { PostAuth, PostNonAuth } from '../../types/Post';
 import convertDate from '../../utils/date';
+import PostEditDialog from '../Dialogs/PostEdit/PostEditDialog';
 import ErrorComponent from '../Error/ErrorComponent';
 
 interface Props {
@@ -30,7 +31,8 @@ interface Props {
 }
 
 const Post: FC<Props> = ({ post }) => {
-  const [open, setOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
   //eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [error, setError] = useState<any>();
 
@@ -86,22 +88,32 @@ const Post: FC<Props> = ({ post }) => {
         subheader={convertDate(post.postedAt)}
       />
       <CardContent>
-        <Typography>{post.content}</Typography>
+        <Typography>
+          <span dangerouslySetInnerHTML={{ __html: post.content }} />
+        </Typography>
       </CardContent>
 
       <CardActions>
+        {(Api.isAdmin() || ('id' in post.user && post.user.id === Api.getAuthenticatedUser()?.id)) && (
+          <>
+            <Button size="small" onClick={() => setEditOpen(true)}>
+              {t('Edit')}
+            </Button>
+            <PostEditDialog post={post as PostAuth} open={editOpen} onClose={() => setEditOpen(false)} />
+          </>
+        )}
         {Api.isAdmin() && (
           <>
-            <Button size="small" color="error" onClick={() => setOpen(true)}>
+            <Button size="small" color="error" onClick={() => setDeleteOpen(true)}>
               {t('Delete')}
             </Button>
-            <Dialog open={open} onClose={() => setOpen(false)}>
+            <Dialog open={deleteOpen} onClose={() => setDeleteOpen(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">
+                <Button onClick={() => setDeleteOpen(false)} autoFocus variant="contained">
                   {t('No')}
                 </Button>
                 <Button
@@ -116,7 +128,7 @@ const Post: FC<Props> = ({ post }) => {
                       },
                       onError: setError,
                     });
-                    setOpen(false);
+                    setDeleteOpen(false);
                   }}
                 >
                   {t('Yes')}