toast.clearWaitingQueue() not working.

[amanjain14]

toast.clearWaitingQueue() is not clearing the queue when a queue is created by making a toast again and again
P.S. using limit-{3}

[sushmitg]

Yes, I am having the same issue with limit={1} and

App.js

<ToastContainer
        className={classes.toastsContainer}
        toastClassName={classes.notification}
        progressClassName={classes.progress}
        closeButton={
          <CloseButton className={classes.notificationCloseButton} />
        }
        limit={1}
      />

notify-util.js

function sendNotification(componentProps, options) {
  toast.clearWaitingQueue();  // <== clearing queue before every toast() call
  return toast(<Notification {...componentProps} />, options);
}

[fkhadra]

Hey,

Could you provide a codesanbox with the issue thanks.

[anoopvasudevan]

Hi, I am facing the same issue.

I have reproduced the issue in codesandbox,
https://codesandbox.io/s/cranky-montalcini-gshqf?file=/src/AppNotifications.js

My use case:

1. Fetch some data from the backend in 2 minutes intervals and display them as toasts on the frontend.
2. Limit the number of toasts displayed on the screen at any time to 3 (e.g. Data-1, Data-2, Data-3. If the user decides to close Data-2 toast, then screen should be showing Data-1, Data-3, Data-4)
3. When new set of data is fetched from the backend, I want to remove whatever data is there on the screen as well as in the queue (not displayed on the screen - Data-5, Data-6 and so on). It should display new data fetched from the BE.

Problem:

• toast.dismiss() is removing currently displayed toasts from the screen, BUT toast.clearWaitingQueue() is not removing the data from the queue
• It ends up showing Data-5, Data-6, NewData-1 on the screen. (whereas I am expecting NewData-1, NewData-2 & NewData-3)

Hope it's clear. Could someone suggest a solution to this problem?

PS: This is my first post - so, please suggest if I need to explain the problem in a better way.

[fkhadra]

Hey @anoopvasudevan , the codesanbox seems to be empty :(

[anoopvasudevan]

@fkhadra
Oh! Sorry about that. Looks like I didn't save the code properly. Let me create it again & get back to you.

[anoopvasudevan]

@fkhadra Here you go,
https://codesandbox.io/s/react-toastify-example-gshqf?file=/src/App.js

data loads in every 10 seconds

[fkhadra]

Thanks for the reproduction.

[fkhadra]

TL;DR; So here is a working example to unlock you. I've removed the container id

This is clearly a bug 🤣, oops sorry. I'll deploy a fix ASAP. Thanks a lot for the reproduction, it helped a lot

  function clearWaitingQueue({ containerId }: ClearWaitingQueueParams) {
    const { limit, enableMultiContainer } = instance.props;
    if (
      limit &&
      (!containerId ||
        (instance.containerId === containerId && enableMultiContainer))
    ) {
      toastCount -= queue.length;
      queue = [];
    }
  }

[anoopvasudevan]

@fkhadra Thanks. That fix will work for me.