Toast Conflicting or loading infinite in promise at concurrent requests

[vikassharmasat]

The toast don't close if API Request function is centralized and in scenario of concurrent requests. It will process only one result others will be in infinite.

there are some screenshots please check

`
import { Bounce, toast } from "react-toastify";

export class ToastUtil {
constructor( unique_key ) {
this.toast_id = {};
this.unique_key = unique_key;
this.toastify_options = {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "colored",
transition: Bounce,
isLoading: false,
};
this.toast = toast;
}

showToast() {
    console.log( this.toast_id, 'this is toast id' )
    this.toast_id[this.unique_key] = this.toast.loading( `Please wait success...` );
}

updateToast( message, type ) {
    this.toast.update( this.toast_id[this.unique_key], {
        render: message,
        type,
        ...this.toastify_options,
    } );
    this.hideToast();
}

hideToast() {
    // this.toast.clearWaitingQueue();
    // this.toast_id = null;
   // delete this.toast_id[this.unique_key];
    console.log( Object.keys( this.toast_id ) );
   setTimeout(() => {
       Object.keys(this.toast_id).forEach(key => toast.dismiss(key));
   },5000);
}

}

`

[kathanshah1206]

Here is the solution for TypeScript:-
(call the toast first )

(define the toast as follows:-)

-> the stopPropogation() will prevent default actions

(define the tooglefunction and a timer state as follows:- )
const exitBtnTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const [isToastActive, setIsToastActive] = useState(false);
const [isCloseToastActive, setisCloseToastActive] = useState(false);

do same for exit ..thus there is a functionality complete and without any error or bugs