React-toastify: toast.update() not working?

[rezmoth]

Toast Update not working:

... Component omited for brevity ...

notifyNewEnterprise(enterprise) {
    let toastId = toast.info('Hello', { position: toast.POSITION.TOP_RIGHT });
    Enterprises.insert(enterprise, (err) => {
       if(!err) {
           toast.update(toastId, {
            render: 'Enterprise Created Successfully.',
            type: toast.TYPE.SUCCESS,
            className: css({
              transform: "rotateY(360deg)",
              transition: "transform 0.6s"
            })
          });
       }
   });
}

It just displays Hello Toast it doesn't change even when the insertion to collection succeed. I'd expect it to update from info toast to success toast but I don't know why doesn't. How can I fix it for the intended result? Thanks

[fkhadra]

Hello @rezmoth,

The update is working as expected.

What you can do is to track the toastId and the one inside the callback to ensure they are the same.

EDIT: the animation has been fixed

[DreadfulDeveloper]

I'm trying to integrate react-toastify with redux to give feedback to the user about different application states. The toast displays with the message "Submission in progress", but the update doesn't take place when the form is submitted.

import { ToastContainer, toast } from 'react-toastify';

const reducer = combineReducers({
  form: formReducer.plugin({
    dynamicForm: (state = {
      fetching: false,
      posting: false,
      toastId: null
    }, action) => {
      switch(action.type) {
        case "FORM_IS_SUBMITTING":
          let t_id = toast("Submission in progress, please wait...", { autoClose: false }); // can create toast no problem
          console.log(t_id);
          return Object.assign({}, state, { toastId: t_id, posting: action.isPosting })
        case "SUBMIT_FORM_DATA":
          const { toastId } = state;
          if(toastId >= 0) {
            console.log(toastId); // matches originally logged t_id from above
            console.log(toast.isActive(toastId)) // true
            toast.update(toastId, "Submission Complete.", { type: toast.TYPE.INFO, autoClose: 5000 }); // does nothing
          } else {
            toast("Submission Complete.", { type: toast.TYPE.INFO, autoClose: 5000 }); 
          }
          return Object.assign({}, state, { posting: action.isPosting });
        default:
          return state
      }
    }
  }),
});

Am I overlooking something?

[maxchehab]

I to am having difficulties with toast.update(). I have noticed that it works when inside of a timeout. For example....

 setTimeout(() => {
     toast.update(toastID, { render: "hello world" } );
}, 0);

however, outside of the timeout, toast.update() does not work.
toast.update(toastID, { render: "hello world" } );
What causes this behavior?

[fkhadra]

Hey @maxchehab,

Are you using redux as well ?

[fkhadra]

Can someone setup a boilerplate with redux on codesandbox to help me debug ?

Edit: I'm pretty sure it has something to do with redux.
It works with the timeout because we push the toast call to the next tick.

[maxchehab]

I am not using redux. I think it has to do with the callstack. Running it inside of setTimeout would push it to the end of the callstack. It would be nice if toast.update() had a queue that would then run at the end of the callstack to avoid confusion.

[fkhadra]

oh sorry @maxchehab, I misunderstood you. Actually when I display a toast I already push it at the end of the callstack. You can look at the source of the EventManager.

But I'll implement a queu for the update and see if it fix your issue like you suggested

[rezmoth]

Hello @fkhadra
I've uploaded an example of the problem I'm having with toast.update()

I believe it has to do with consecutive calls to setState as consecutive calls are 'discarded', altought I haven't checked the source code. Hope this helps. Thanks

[fkhadra]

@rezmoth You're probably right. It's not working at all when updating the toast too fast.
I have to find a way to interrupt the animation or to wait for them to end before updating the toast.

Edit: I found exactly what is happening. toast.update is called before the toast has been mounted.

[fkhadra]

Off topic
@rezmoth For info the signature of your toast.update is wrong:

toast.update(this.toastId, "Enteprise created successfully.", {
        type: toast.TYPE.SUCCESS,
        autoClose: 5000
      });
// need to be 
toast.update(this.toastId, {
        render: "Enteprise created successfully.",
        type: toast.TYPE.SUCCESS,
        autoClose: 5000
      });

Maybe it could be useful to accept both.
End off topic

I found a solution but if the update occurs too fast you won't see the first message.

[fkhadra]

@rezmoth I forked your sandbox with the hotfix:

@maxchehab and @DreadfulDeveloper could you update to the latest version v3.3.4 and see if it fix your issue, please.
Don't forget to clear your cache 😁

[rezmoth]

Seems to be working, yes, if the update is too fast (which it is) I won't see the first toast, but placing a breakpoint and continuing execution it does show both toasts (for verifying purposes). Thanks

[fkhadra]

Thank you @rezmoth for the feedback. @maxchehab I close the issue, if yours is still not fixed, feel free to open a new one.