Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | 1x 28x 28x 28x 28x 27x 27x 1x 26x 3x 23x 23x 28x 27x 28x 3x 3x 28x 2x 28x 28x 24x 28x 1x 27x 27x 27x 28x | import React, { useEffect, useState } from 'react';
import { Snackbar, Alert, AlertColor, Box, Typography, IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { useTranslation } from 'react-i18next';
import { useErrorToast } from '@/hooks/useErrorToast';
interface ErrorToastProps {
/**
* Duration in ms before auto-hiding the toast (default: 6000ms)
* Set to null to disable auto-hide
*/
autoHideDuration?: number | null;
/**
* Position of the toast (default: top-center)
*/
anchorOrigin?: {
vertical: 'top' | 'bottom';
horizontal: 'left' | 'center' | 'right';
};
}
/**
* Global error toast component
* Displays error messages with automatic dismissal and user-friendly formatting
*
* @example
* <ErrorToast />
* <ErrorToast autoHideDuration={3000} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} />
*/
const ErrorToast: React.FC<ErrorToastProps> = ({
autoHideDuration = 6000,
anchorOrigin = { vertical: 'top', horizontal: 'center' },
}) => {
const { t } = useTranslation();
const { error, clearError } = useErrorToast();
const [isPaused, setIsPaused] = useState(false);
/**
* Determine severity level based on status code
*/
const getSeverity = (): AlertColor => {
Iif (!error?.statusCode) {
return 'error';
}
// 401 Unauthorized → info (session expired)
if (error.statusCode === 401) {
return 'info';
}
// 4xx Client errors → warning
if (error.statusCode >= 400 && error.statusCode < 500) {
return 'warning';
}
// 5xx Server errors → error
Eif (error.statusCode >= 500) {
return 'error';
}
return 'error';
};
/**
* Check if error is critical (should not auto-close)
*/
const isCritical = (): boolean => {
return (error as typeof error & { severity?: string })?.severity === 'critical';
};
/**
* Handle close button click
*/
const handleClose = (_event?: React.SyntheticEvent | Event, reason?: string) => {
// Don't close on clickaway
Iif (reason === 'clickaway') {
return;
}
clearError();
};
/**
* Handle mouse enter (pause auto-close)
*/
const handleMouseEnter = () => {
setIsPaused(true);
};
/**
* Handle mouse leave (resume auto-close)
*/
const handleMouseLeave = () => {
setIsPaused(false);
};
/**
* Reset pause state when error changes
*/
useEffect(() => {
setIsPaused(false);
}, [error]);
if (!error) {
return null;
}
const severity = getSeverity();
const critical = isCritical();
// Auto-hide duration: null if critical, otherwise use provided value (or default 6000ms)
// Also disable auto-hide when paused
const effectiveAutoHideDuration = critical || isPaused ? null : autoHideDuration;
return (
<Snackbar
open={!!error}
autoHideDuration={effectiveAutoHideDuration}
onClose={handleClose}
anchorOrigin={anchorOrigin}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<Alert
severity={severity}
role="alert"
aria-live="assertive"
onClose={handleClose}
sx={{
width: '100%',
minWidth: '300px',
maxWidth: '600px',
}}
action={
<IconButton
size="small"
aria-label={t('actions.close')}
color="inherit"
onClick={handleClose}
>
<CloseIcon fontSize="small" />
</IconButton>
}
>
<Box>
<Typography variant="body1" component="div">
{error.message}
</Typography>
{error.correlationId && (
<Typography variant="caption" component="div" sx={{ marginTop: 1, opacity: 0.8 }}>
{t('userAccount.errors.correlationId', { id: error.correlationId })}
</Typography>
)}
</Box>
</Alert>
</Snackbar>
);
};
export default ErrorToast;
|