56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
import { Component } from 'react';
|
|
import Alert from '@mui/material/Alert';
|
|
import AlertTitle from '@mui/material/AlertTitle';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Typography from '@mui/material/Typography';
|
|
import { formatBackendError } from '../utils/backendError';
|
|
|
|
class BackendError extends Component {
|
|
render() {
|
|
const { error, title, onRetry, sx, action } = this.props;
|
|
if (!error) return null;
|
|
|
|
const formatted = formatBackendError(error);
|
|
const heading = title || formatted.title;
|
|
|
|
return (
|
|
<Alert
|
|
severity="error"
|
|
sx={{ maxWidth: 720, ...sx }}
|
|
action={action}
|
|
>
|
|
<AlertTitle>{heading}</AlertTitle>
|
|
{formatted.detail ? (
|
|
<Typography variant="body2" component="div" sx={{ mb: formatted.request ? 1 : 0 }}>
|
|
{formatted.detail}
|
|
</Typography>
|
|
) : null}
|
|
{formatted.request ? (
|
|
<Box
|
|
component="code"
|
|
sx={{
|
|
display: 'block',
|
|
fontSize: '0.75rem',
|
|
color: 'text.secondary',
|
|
fontFamily: 'monospace',
|
|
}}
|
|
>
|
|
{formatted.request}
|
|
{formatted.status != null ? ` → ${formatted.status}` : ''}
|
|
</Box>
|
|
) : null}
|
|
{onRetry ? (
|
|
<Box sx={{ mt: 1.5 }}>
|
|
<Button size="small" variant="outlined" color="inherit" onClick={onRetry}>
|
|
Erneut versuchen
|
|
</Button>
|
|
</Box>
|
|
) : null}
|
|
</Alert>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default BackendError;
|