Post delete, Profile edit

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

@@ -16,27 +16,29 @@ import {
   Snackbar,
   Typography,
 } from '@mui/material';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 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';
+import ErrorComponent from '../Error/ErrorComponent';
 
 interface Props {
   post: PostNonAuth | PostAuth;
 }
 
 const Post: FC<Props> = ({ post }) => {
+  const [open, setOpen] = useState(false);
+
   const deleteMutation = useMutation({
     mutationFn: (id: number) => {
       return Api.deletePost(id);
     },
   });
 
-  const [open, setOpen] = useState(false);
+  const queryClient = useQueryClient();
 
   const { t } = useTranslation();
 
@@ -104,7 +106,13 @@ const Post: FC<Props> = ({ post }) => {
                   variant="outlined"
                   color="error"
                   onClick={() => {
-                    deleteMutation.mutate(post.id);
+                    deleteMutation.mutate(post.id, {
+                      onSuccess: () => {
+                        queryClient.invalidateQueries({
+                          queryKey: ['posts'],
+                        });
+                      },
+                    });
                     setOpen(false);
                   }}
                 >
@@ -117,9 +125,10 @@ const Post: FC<Props> = ({ post }) => {
       </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')}
+          {deleteMutation.isError && <ErrorComponent error={deleteMutation.error} context="delete" />}
         </Alert>
       </Snackbar>
+      <Snackbar open={deleteMutation.isPending} message={t('Deleting')} />
     </Card>
   );
 };