Can someone help me align my SnackBar with the LinearProgress so that they both have an auto-hide duration of 4 seconds? I've been struggling to figure it out for hours and haven't found a solution yet. Could the issue be in the useEffect part of my code where I set up the progress interval? Any suggestions would be greatly appreciated since I'm new to this. Thank you!
This is the code I'm currently using:
interface SuccessMessageProps {
open: boolean;
onClose: () => void;
title?: string;
message?: string;
}
const SlideTransition = (props: SlideProps) => <Slide {...props} direction="left" />;
export const SuccessMessage = ({
open,
onClose,
title = 'Title',
message = 'Insert message here' } : SuccessMessageProps ) => {
const { palette } = useTheme();
const [progress, setProgress] = useState(0);
const [showLinearProgress, setShowLinearProgress] = useState(false);
const handleClose = (): void => {
onClose();
};
useEffect(() => {
const timer = setInterval(() => {
setProgress((oldProgress) => {
if (oldProgress === 100) {
return 0;
}
const diff = Math.random() * 15;
return Math.min(oldProgress + diff, 100);
});
}, 400);
return () => {
clearInterval(timer);
};
}, []);
return (
<Snackbar
open={open}
autoHideDuration={4000}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
TransitionComponent={SlideTransition}
onClose={handleClose}
>
<div>
<Alert
sx={{
width: '487px',
height: '104px',
paddingTop: '20px',
paddingLeft: '20px',
backgroundColor: '#FDFDFD',
}}
icon={(
<Stack
justifyContent="center"
alignItems="center"
style={{
borderRadius: '100%',
backgroundColor: alpha(palette.success.main, 0.10),
width: '48px',
height: '48px',
}}
>
<CheckIcon
size={24}
color={palette.success.main}
/>
</Stack>
)}
onClose={handleClose}
>
<AlertTitle sx={{ paddingRight:'80px' }}>
<Typography variant='headings.h4'>{title}</Typography>
</AlertTitle>
<Typography variant='captions.default'>{message}</Typography>
</Alert>
{!showLinearProgress && <LinearProgress variant="determinate" sx={{ color:'#222221' }} value={progress} />}
</div>
</Snackbar>
);
};