I click a button and in that for each item in a list, it goes and deletes some stuff.
My goal is to disable the button while the deleting is going on so I have a state of isDeleting that handles the enabled/disabled of the button.
Here is how I have set up the change of this isDeleting state.
But still the button becomes enabled although some delete processing is still going on.( because I can see the API of deleting is still running in the Network tab of Chrome Dev Tools).
How should I change my code to fully wait until everything is done before changing the state of my isDeleting state?
// Button Click
handleDeleteAllItems = async () => {
await this.gridApiforEachNodeAfterFilter((node) => {
this.setState({ isDeleting: true });
node.setSelected(false);
});
};
// This code runs for each item in the button click loop
{
this.setRowSelectable(event.node, false);
let Id = this.brokerFundsDict[event.data.id].id;
fetchDeleteFund(someOtherThing.id, id).then(() => {
fetchGetFunds(selectedBroker.id).then(() => {
this.setRowSelectable(event.node, true);
});
});
this.setState({ isDeleting: false });
}
You can use Promise.all like so:
function deleter(someOtherThing) {
//original: This code runs for each item in the button click loop
return fetchDeleteFund(someOtherThing.id, id).then(() => {
fetchGetFunds(selectedBroker.id).then(() => {
this.setRowSelectable(event.node, true);
});
});
}
function triggerDelete() {
this.setRowSelectable(event.node, false);
let allDeletePromises = [];
toBeDeletedNodes.forEach(node => {
allDeletePromises.push(deleter(node));
});
Promise.all(allDeletePromises)
.then(arrOfMessages => {
this.setState({ isDeleting: false });
})
}