Merge pull request #656 from Retrospring/feature/request-js-settings

Refactor settings TS functionality to use `@rails/request.js`

app/controllers/ajax/mute_rule_controller.rb

@@ -12,7 +12,7 @@ class Ajax::MuteRuleController < AjaxController
     @response[:status] = :okay
     @response[:success] = true
     @response[:message] = t(".success")
-    @response[:id] = rule.id
+    @response[:id] = rule.id.to_s # Returning this as a string as JavaScript defines all numbers as floats
   end
 
   def update

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

@@ -1,27 +1,21 @@
-import Rails from '@rails/ujs';
+import { destroy } from '@rails/request.js';
 import { showNotification, showErrorNotification } from 'utilities/notifications';
 import I18n from 'retrospring/i18n';
 
 export function unblockAnonymousHandler(event: Event): void {
   const button: HTMLButtonElement = event.currentTarget as HTMLButtonElement;
   const targetId = button.dataset.target;
-  let success = false;
 
-  Rails.ajax({
+  destroy(`/ajax/block_anon/${targetId}`)
-    url: `/ajax/block_anon/${targetId}`,
+    .then(async response => {
-    type: 'DELETE',
+      if (!response.ok) return;
-    success: (data) => {
+
-      success = data.success;
+      const data = await response.json;
       showNotification(data.message, data.success);
-    },
-    error: (data, status, xhr) => {
-      console.log(data, status, xhr);
-      showErrorNotification(I18n.translate('frontend.error.message'));
-    },
-    complete: () => {
-      if (!success) return;
-
       button.closest('.list-group-item').remove();
-     }
+    })
+    .catch(err => {
+      console.log(err);
+      showErrorNotification(I18n.translate('frontend.error.message'));
     });
 }

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,28 +11,30 @@ function createSubmitEvent(
     event.preventDefault();
     submit.disabled = true;
 
-    Rails.ajax({
+    post('/ajax/mute', {
-      url: '/ajax/mute',
+      body: {
-      type: 'POST',
+        muted_phrase: textEntry.value
-      dataType: 'json',
+      },
-      data: new URLSearchParams({muted_phrase: textEntry.value}).toString(),
+      contentType: 'application/json'
-      success: (data) => {
+    })
+      .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<HTMLInputElement>('input').value = textEntry.value;
-        const newDeleteButton = newEntryFragment.querySelector<HTMLButtonElement>('button')
+
+        const newDeleteButton = newEntryFragment.querySelector<HTMLButtonElement>('button');
         newDeleteButton.dataset.id = String(data.id);
         newDeleteButton.onclick = createDeleteEvent(
           newEntryFragment.querySelector('.form-group'),
           newDeleteButton
-        )
+        );
 
-        rulesList.appendChild(newEntryFragment)
+        rulesList.appendChild(newEntryFragment);
-
+        textEntry.value = '';
-        textEntry.value = ''
-      }
       });
   };
 }
@@ -43,18 +46,16 @@ function createDeleteEvent(
   return () => {
     deleteButton.disabled = true;
 
-    Rails.ajax({
+    destroy(`/ajax/mute/${deleteButton.dataset.id}`)
-      url: '/ajax/mute/' + deleteButton.dataset.id,
+      .then(async response => {
-      type: 'DELETE',
+        const data = await response.json;
-      dataType: 'json',
+
-      success: (data) => {
         if (data.success) {
           entry.parentElement.removeChild(entry)
         } else {
           deleteButton.disabled = false;
         }
-      }
+      });
-    })
   }
 }
 

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@babel/preset-typescript": "^7.18.6",
     "@melloware/coloris": "^0.16.0",
+    "@rails/request.js": "^0.0.6",
     "@rails/ujs": "^6.1.6",
     "bootstrap": "^4.6.2",
     "cheet.js": "^0.3.3",

spec/controllers/ajax/mute_rule_controller_spec.rb

@@ -1,20 +1,21 @@
-require 'rails_helper'
+# frozen_string_literal: true
+
+require "rails_helper"
 
 describe Ajax::MuteRuleController, :ajax_controller, type: :controller do
-
   describe "#create" do
-    subject { post(:create, params: params) }
+    subject { post(:create, params:) }
 
     context "when user is signed in" do
       before(:each) { sign_in(user) }
 
-      let(:params) { { muted_phrase: 'test' } }
+      let(:params) { { muted_phrase: "test" } }
       let(:expected_response) do
         {
           "success" => true,
           "status"  => "okay",
-          "id" => MuteRule.last.id,
+          "id"      => MuteRule.last.id.to_s,
-          "message" => "Rule added successfully.",
+          "message" => "Rule added successfully."
         }
       end
 
@@ -24,7 +25,7 @@ describe Ajax::MuteRuleController, :ajax_controller, type: :controller do
 
         rule = MuteRule.first
         expect(rule.user_id).to eq(user.id)
-        expect(rule.muted_phrase).to eq('test')
+        expect(rule.muted_phrase).to eq("test")
       end
 
       include_examples "returns the expected response"
@@ -32,13 +33,13 @@ describe Ajax::MuteRuleController, :ajax_controller, type: :controller do
   end
 
   describe "#update" do
-    subject { post(:update, params: params) }
+    subject { post(:update, params:) }
 
     context "when user is signed in" do
       before(:each) { sign_in(user) }
 
-      let(:rule) { MuteRule.create(user: user, muted_phrase: 'test') }
+      let(:rule) { MuteRule.create(user:, muted_phrase: "test") }
-      let(:params) { { id: rule.id, muted_phrase: 'dogs' } }
+      let(:params) { { id: rule.id, muted_phrase: "dogs" } }
       let(:expected_response) do
         {
           "success" => true,
@@ -51,7 +52,7 @@ describe Ajax::MuteRuleController, :ajax_controller, type: :controller do
         subject
         expect(response).to have_http_status(:success)
 
-        expect(rule.reload.muted_phrase).to eq('dogs')
+        expect(rule.reload.muted_phrase).to eq("dogs")
       end
 
       include_examples "returns the expected response"
@@ -59,12 +60,12 @@ describe Ajax::MuteRuleController, :ajax_controller, type: :controller do
   end
 
   describe "#destroy" do
-    subject { delete(:destroy, params: params) }
+    subject { delete(:destroy, params:) }
 
     context "when user is signed in" do
       before(:each) { sign_in(user) }
 
-      let(:rule) { MuteRule.create(user: user, muted_phrase: 'test') }
+      let(:rule) { MuteRule.create(user:, muted_phrase: "test") }
       let(:params) { { id: rule.id } }
       let(:expected_response) do
         {
@@ -79,11 +80,9 @@ describe Ajax::MuteRuleController, :ajax_controller, type: :controller do
         expect(response).to have_http_status(:success)
 
         expect(MuteRule.exists?(rule.id)).to eq(false)
-
       end
 
       include_examples "returns the expected response"
     end
   end
-
 end

yarn.lock

@@ -1193,6 +1193,11 @@
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.0.3.tgz#71f08e958883af64f6a20489318b5e95d2c6dc5b"
   integrity sha512-Iefl21FZD+ck1di6xSHMYzSzRiNJTHV4NrAzCfDfqc/wPz4xncrP8f2/fJ+2jzwKIaDn76UVMsALh7R5OzsF8Q==
 
+"@rails/request.js@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@rails/request.js/-/request.js-0.0.6.tgz#5f0347a9f363e50ec45118c7134080490cda81d8"
+  integrity sha512-dfFWaQXitYJ4kxrgGJNhDNXX54/v10YgoJqBMVe6lhqs6a4N9WD7goZJEvwin82TtK8MqUNhwfyisgKwM6dMdg==
+
 "@rails/ujs@^6.1.4-1", "@rails/ujs@^6.1.6":
   version "6.1.6"
   resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.1.6.tgz#de486ae0a663e1bed637a012cbb2739bfcfa2031"