diff --git a/app/javascript/retrospring/features/settings/mute.ts b/app/javascript/retrospring/features/settings/mute.ts index e8580f8c..8456c49d 100644 --- a/app/javascript/retrospring/features/settings/mute.ts +++ b/app/javascript/retrospring/features/settings/mute.ts @@ -1,4 +1,5 @@ import Rails from '@rails/ujs'; +import { destroy, post } from '@rails/request.js'; function createSubmitEvent( submit: HTMLButtonElement, @@ -10,29 +11,31 @@ function createSubmitEvent( event.preventDefault(); submit.disabled = true; - Rails.ajax({ - url: '/ajax/mute', - type: 'POST', - dataType: 'json', - data: new URLSearchParams({muted_phrase: textEntry.value}).toString(), - success: (data) => { + post('/ajax/mute', { + body: { + muted_phrase: textEntry.value + }, + contentType: 'application/json' + }) + .then(async response => { + const data = await response.json; + submit.disabled = false; if (!data.success) return; const newEntryFragment = template.content.cloneNode(true) as Element; newEntryFragment.querySelector('input').value = textEntry.value; - const newDeleteButton = newEntryFragment.querySelector('button') + + const newDeleteButton = newEntryFragment.querySelector('button'); newDeleteButton.dataset.id = String(data.id); newDeleteButton.onclick = createDeleteEvent( newEntryFragment.querySelector('.form-group'), newDeleteButton - ) + ); - rulesList.appendChild(newEntryFragment) - - textEntry.value = '' - } - }); + rulesList.appendChild(newEntryFragment); + textEntry.value = ''; + }); }; } @@ -43,18 +46,16 @@ function createDeleteEvent( return () => { deleteButton.disabled = true; - Rails.ajax({ - url: '/ajax/mute/' + deleteButton.dataset.id, - type: 'DELETE', - dataType: 'json', - success: (data) => { + destroy(`/ajax/mute/${deleteButton.dataset.id}`) + .then(async response => { + const data = await response.json; + if (data.success) { entry.parentElement.removeChild(entry) } else { deleteButton.disabled = false; } - } - }) + }); } }