Missign translation

exam/react/src/components/Error/ErrorComponent.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import { Typography, TypographyTypeMap } from '@mui/material';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ERRORS } from './Errors';
@@ -7,9 +7,10 @@ interface Props {
   //eslint-disable-next-line @typescript-eslint/no-explicit-any
   error: any;
   context?: string;
+  color?: TypographyTypeMap['props']['color'];
 }
 
-const ErrorComponent: FC<Props> = ({ error, context }) => {
+const ErrorComponent: FC<Props> = ({ error, context, color = 'error.main' }) => {
   const { t } = useTranslation();
 
   if (!error) return null;
@@ -17,19 +18,19 @@ const ErrorComponent: FC<Props> = ({ error, context }) => {
   if (error.code) {
     switch (error.code) {
       case ERRORS.NOT_FOUND:
-        return <Typography color="error.main">{t(error.code, { context: `${error.entity}:${context}` })}</Typography>;
+        return <Typography color={color}>{t(error.code, { context: `${error.entity}:${context}` })}</Typography>;
       case ERRORS.UNAUTHORIZED:
-        return <Typography color="error.main">{t(error.code, { context })}</Typography>;
+        return <Typography color={color}>{t(error.code, { context })}</Typography>;
       case ERRORS.FAILEDUPDATE:
         return error.fields.map((field: string) => (
-          <Typography key={`error_${field}`} color="error.main">
+          <Typography key={`error_${field}`} color={color}>
             {t(error.code, { context, name: t(field) })}
           </Typography>
         ));
     }
   }
 
-  return <Typography color="error.main">{t(error?.message ?? 'Unknown', { context })}</Typography>;
+  return <Typography color={color}>{t(error?.message ?? 'Unknown', { context })}</Typography>;
 };
 
 export default ErrorComponent;

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

@@ -31,6 +31,8 @@ interface Props {
 
 const Post: FC<Props> = ({ post }) => {
   const [open, setOpen] = useState(false);
+  //eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [error, setError] = useState<any>();
 
   const deleteMutation = useMutation({
     mutationFn: (id: number) => {
@@ -112,6 +114,7 @@ const Post: FC<Props> = ({ post }) => {
                           queryKey: ['posts'],
                         });
                       },
+                      onError: setError,
                     });
                     setOpen(false);
                   }}
@@ -123,9 +126,18 @@ const Post: FC<Props> = ({ post }) => {
           </>
         )}
       </CardActions>
-      <Snackbar open={deleteMutation.isError} autoHideDuration={2000} onClose={() => deleteMutation.reset()}>
+      <Snackbar
+        open={deleteMutation.isError}
+        autoHideDuration={2000}
+        onClose={() => {
+          deleteMutation.reset();
+        }}
+        TransitionProps={{
+          onExited: () => setError(undefined),
+        }}
+      >
         <Alert severity="error" variant="filled" sx={{ width: '100%' }}>
-          {deleteMutation.isError && <ErrorComponent error={deleteMutation.error} context="delete" />}
+          {error && <ErrorComponent error={error} context="delete" color="white" />}
         </Alert>
       </Snackbar>
       <Snackbar open={deleteMutation.isPending} message={t('Deleting')} />

exam/react/src/routes/__root.tsx

@@ -15,7 +15,7 @@ const Root = () => {
     <>
       <Header />
       <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-        <Box sx={{ maxWidth: '800px' }}>
+        <Box sx={{ maxWidth: '800px', flexGrow: 1 }}>
           <Outlet />
         </Box>
       </Box>