// ** React Imports import { Fragment, SyntheticEvent, useEffect, useState } from 'react' // ** MUI Imports import Alert from '@mui/material/Alert' import Button from '@mui/material/Button' import Snackbar from '@mui/material/Snackbar' export interface SnackbarMessage { key: number message: string } const SnackbarConsecutive = () => { // ** States const [open, setOpen] = useState(false) const [snackPack, setSnackPack] = useState([]) const [messageInfo, setMessageInfo] = useState(undefined) useEffect(() => { if (snackPack.length && !messageInfo) { setOpen(true) setSnackPack(prev => prev.slice(1)) setMessageInfo({ ...snackPack[0] }) } else if (snackPack.length && messageInfo && open) { setOpen(false) } }, [snackPack, messageInfo, open]) const handleClick = (message: string) => () => { setSnackPack(prev => [...prev, { message, key: new Date().getTime() }]) } const handleClose = (event: Event | SyntheticEvent, reason?: string) => { if (reason === 'clickaway') { return } setOpen(false) } const handleExited = () => { setMessageInfo(undefined) } return (
This is {messageInfo?.message === 'success' ? 'a success' : 'an error'} message!
) } export default SnackbarConsecutive