import React, { useContext } from 'react'; import { Snackbar, Button, IconButton } from '@material-ui/core'; import Alert from '@material-ui/lab/Alert'; import CloseIcon from '@material-ui/icons/Close'; import { useHistory } from 'react-router-dom'; import { SnackContext } from './SnackContext'; const SimpleSnackbar = () => { const { snack, setSnack } = useContext(SnackContext); const { open, message, action, actionParams, type } = snack; const history = useHistory(); const handleAction = () => { if (action === 'EDIT') { history.push('/updateproduct', { name: actionParams.name, sellingPrice: actionParams.sellingPrice, loose: actionParams.loose, id: actionParams.id, }); } setSnack(prevState => ({ ...prevState, open: false })); }; const handleClose = (event, reason) => { if (reason === 'clickaway') { return; } setSnack(prevState => ({ ...prevState, open: false })); }; return ( <div> <Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center', }} open={open} autoHideDuration={6000} onClose={handleClose} > <Alert variant='filled' elevation={6} severity={type} onClose={handleClose} action={ // eslint-disable-next-line react/jsx-wrap-multilines <> {action === '' ? null : ( <Button color='inherit' size='small' onClick={handleAction}> {action} </Button> )} <IconButton size='small' aria-label='close' color='inherit' onClick={handleClose} > <CloseIcon fontSize='small' /> </IconButton> </> } > {message} </Alert> </Snackbar> </div> ); }; export default SimpleSnackbar;