[assets] Update interactions code:

This commit should address https://github.com/mouse-reeve/bookwyrm/pull/883#discussion_r609381969.

- Disable the button being used to submit the form.
- Rename variables based on @mouse-reeve’s explanations. Thanks! 
This commit is contained in:
Fabien Basmaison 2021-04-08 11:08:13 +02:00
parent ad3e91db7d
commit 83bd417878

View file

@ -229,7 +229,7 @@ let BookWyrm = new class {
/** /**
* Make a request and update the UI accordingly. * Make a request and update the UI accordingly.
* This function is used for boosts and favourites. * This function is used for boosts, favourites, follows and unfollows.
* *
* @param {Event} event * @param {Event} event
* @return {undefined} * @return {undefined}
@ -238,30 +238,32 @@ let BookWyrm = new class {
event.preventDefault(); event.preventDefault();
const bookwyrm = this; const bookwyrm = this;
const trigger = event.submitter;
let allTriggers = document.querySelectorAll(`.${event.target.dataset.id}`); const target = event.currentTarget;
const forms = document.querySelectorAll(`.${target.dataset.id}`);
// Change icon to show ongoing activity on the current UI. // Change icon to show ongoing activity on the current UI.
allTriggers.forEach(node => bookwyrm.addRemoveClass( // Disable the element used to submit the form to prevent duplicated requests.
node, // @todo Ideally, disable all potential ways to submit this specific form.
'is-processing', forms.forEach(form => {
true bookwyrm.addRemoveClass(form, 'is-processing', true);
)); trigger.setAttribute('disabled', null);
});
this.ajaxPost(event.target) this.ajaxPost(target)
.finally(() => { .finally(() => {
// Change icon to remove ongoing activity on the current UI. // Change icon to remove ongoing activity on the current UI.
allTriggers.forEach(node => bookwyrm.addRemoveClass( // Enable back the element used to submit the form.
node, forms.forEach(form => {
'is-processing', bookwyrm.addRemoveClass(form, 'is-processing', false);
false trigger.removeAttribute('disabled');
)); });
}) })
.then(function() { .then(function() {
allTriggers.forEach(node => bookwyrm.addRemoveClass( forms.forEach(form => bookwyrm.addRemoveClass(
node, form,
'is-hidden', 'is-hidden',
node.className.indexOf('is-hidden') == -1 form.className.indexOf('is-hidden') == -1
)); ));
}) })
.catch(error => { .catch(error => {
@ -269,10 +271,10 @@ let BookWyrm = new class {
// For now, the absence of change will be enough. // For now, the absence of change will be enough.
console.warn('Request failed:', error); console.warn('Request failed:', error);
allTriggers.forEach(node => bookwyrm.addRemoveClass( forms.forEach(form => bookwyrm.addRemoveClass(
node, form,
'has-error', 'has-error',
node.className.indexOf('is-hidden') == -1 form.className.indexOf('is-hidden') == -1
)); ));
}); });
} }