PHP-Course/exam/react/src/components/Error/ErrorComponent.tsx
2024-07-29 00:43:12 +02:00

46 lines
1.6 KiB
TypeScript

import { Typography, TypographyTypeMap } from '@mui/material';
import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { ERRORS } from './Errors';
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, color = 'error.main' }) => {
const { t } = useTranslation();
if (!error) return null;
if (error.code) {
switch (error.code) {
case ERRORS.NOT_FOUND:
return <Typography color={color}>{t(error.code, { context: `${error.entity}:${context}` })}</Typography>;
case ERRORS.NOT_ALLOWED:
case ERRORS.UNAUTHORIZED:
return <Typography color={color}>{t(error.code, { context })}</Typography>;
case ERRORS.FAILED_UPDATE:
return error.fields.map((field: string, index: number) => (
<Typography key={`error_${field}`} color={color}>
{t(error.code, { context: `${error.reasons[index]}:${field}:${context}` })}
</Typography>
));
case ERRORS.MISSING_FIELD:
return error.fields.map((field: string) => (
<Typography key={`error_${field}`} color={color}>
{t(error.code, { context: `${field}:${context}` })}
</Typography>
));
case ERRORS.DUPLICATE:
return <Typography color={color}>{t(error.code, { context: `${error.entity}:${context}` })}</Typography>;
}
}
return <Typography color={color}>{t(error?.message ?? 'Unknown', { context })}</Typography>;
};
export default ErrorComponent;