Implement frontend for adding mute rules

app/javascript/packs/application.ts

@@ -2,10 +2,12 @@ import start from 'retrospring/common';
 import initAnswerbox from 'retrospring/features/answerbox/index';
 import initInbox from 'retrospring/features/inbox/index';
 import initUser from 'retrospring/features/user';
+import initSettings from 'retrospring/features/settings/index';
 import initLists from 'retrospring/features/lists';
 
 start();
 document.addEventListener('turbolinks:load', initAnswerbox);
 document.addEventListener('turbolinks:load', initInbox);
 document.addEventListener('DOMContentLoaded', initUser);
+document.addEventListener('turbolinks:load', initSettings);
 document.addEventListener('DOMContentLoaded', initLists);

app/javascript/retrospring/features/settings/index.ts

@@ -0,0 +1,14 @@
+import {createSubmitEvent} from "retrospring/features/settings/mute";
+
+export default (): void => {
+  const submit: HTMLButtonElement = document.getElementById('new-rule-submit') as HTMLButtonElement;
+  if (submit.classList.contains('js-initialized')) return;
+
+  const rulesList = document.querySelector<HTMLDivElement>('.js-rules-list');
+  const textEntry: HTMLButtonElement = document.getElementById('new-rule-text') as HTMLButtonElement;
+  const template: HTMLTemplateElement = document.getElementById('rule-template') as HTMLTemplateElement;
+
+  submit.form.onsubmit = createSubmitEvent(submit, rulesList, textEntry, template)
+
+  submit.classList.add('js-initialized')
+}

app/javascript/retrospring/features/settings/mute.ts

@@ -0,0 +1,32 @@
+import Rails from '@rails/ujs';
+
+export function createSubmitEvent(
+  submit: HTMLButtonElement,
+  rulesList: HTMLDivElement,
+  textEntry: HTMLButtonElement,
+  template: HTMLTemplateElement
+): (event: Event) => void {
+  return (event) => {
+    event.preventDefault();
+    submit.disabled = true;
+
+    Rails.ajax({
+      url: '/ajax/mute',
+      type: 'POST',
+      dataType: 'json',
+      data: new URLSearchParams({muted_phrase: textEntry.value}).toString(),
+      success: (data) => {
+        submit.disabled = false;
+        if (!data.success) return;
+
+        const newEntryFragment = template.content.cloneNode(true) as Element;
+        newEntryFragment.querySelector<HTMLInputElement>('input').value = textEntry.value;
+        newEntryFragment.querySelector<HTMLButtonElement>('button').dataset.id = String(data.id);
+
+        rulesList.appendChild(newEntryFragment)
+
+        textEntry.value = ''
+      }
+    });
+  };
+}

app/views/settings/_muted.haml

@@ -3,15 +3,22 @@
     %h2 Muted words
     %p Muting words (or longer phrases) will prevent questions containing those to appear in your inbox.
     %p Note: Filtered questions are discarded completely from your inbox, and won't reappear if you remove a filter later on.
-    - @rules.each do |rule|
-      .form-group
-        .input-group
-          %input.form-control#new-rule-text{disabled: true, value: rule.muted_phrase}
-          .input-group-append
-            %button.btn.btn-danger#new-rule-submit{type: 'button'} Remove
+    .js-rules-list
+      - @rules.each do |rule|
+        .form-group
+          .input-group
+            %input.form-control{disabled: true, value: rule.muted_phrase}
+            .input-group-append
+              %button.btn.btn-danger{type: 'button', data: {id: rule.id}} Remove
     .form-group
       %form
         .input-group
           %input.form-control#new-rule-text{placeholder: 'Add a new muted word...'}
           .input-group-append
-            %button.btn.btn-primary#new-rule-submit{type: 'submit'} Add
+            %button.btn.btn-primary#new-rule-submit{type: 'submit'} Add
+%template#rule-template
+  .form-group
+    .input-group
+      %input.form-control{disabled: true}
+      .input-group-append
+        %button.btn.btn-danger{type: 'button'} Remove