Display a notification that an item was successfully deleted

Question

The site has a button for deleting an element (one element is deleted per button click).

Timing: the user presses the delete button -> a window opens with a warning and two buttons: cancel and confirm -> when the confirm button is pressed, the deletion process begins, which is accompanied by a scroll wheel. After deletion, the window closes and you can continue to work on the site.

I would like to display a notification after the window is closed that the item was removed successfully. Tell me how can I do it.

export function Delete() {
  const [alertShown, setAlertShown] = useState(false);
  const [alertLoading, setAlertLoading] = useState(false);

  const onNo = () => {
    setAlertShown(false);
  };

  const onYes = async () => {
      setAlertLoading(true);
      await deleteItem();
      setAlertShown(false);
      setAlertLoading(false);
  };

  
  return <ButtonGroup >
            <div onClick={() => setAlertShown(true)}>
                  <DeleteForeverIcon/>
            </div>

            {alertShown && (
                <Dialog open={onYes}>

                    {alertLoading 
                        ? <div ><Spinner/></div>
        
                        : <DialogActions >
                            <Button  color="error" onClick={onNo}>Cancel</Button >
                            <Button   onClick={onYes}>Confirm </Button >
                          </DialogActions>}                   
                </Dialog>
                )}
    </ButtonGroup>
}

Answer 1

The easiest approach to implement notification is using setTimeout. You can try the below code snippet

export function Delete() {
  const [alertShown, setAlertShown] = useState(false);
  const [alertLoading, setAlertLoading] = useState(false);
  const [notificationShown, setNotificationShown] = useState(false);

  const onNo = () => {
    setAlertShown(false);
  };

  const onYes = async () => {
    setAlertLoading(true);
    await deleteItem();
    setAlertShown(false);
    setAlertLoading(false);
    //open the notification
    setNotificationShown(true);
    setTimeout(() => {
      setNotificationShown(false);
    }, 5000); //automatically close the notification after 5 seconds
  };

  return (
    <ButtonGroup>
      {notificationShown && <span>The item was removed successfully</span>}
      <div onClick={() => setAlertShown(true)}>
        <DeleteForeverIcon />
      </div>
      {alertShown && (
        <Dialog open={onYes}>
          {alertLoading ? (
            <div>
              <Spinner />
            </div>
          ) : (
            <DialogActions>
              <Button color="error" onClick={onNo}>
                Cancel
              </Button>
              <Button onClick={onYes}>Confirm </Button>
            </DialogActions>
          )}
        </Dialog>
      )}
    </ButtonGroup>
  );
}

The sandbox link