refactor/Extract custom event creation to mixin

Author: LewisYoul

app/javascript/controllers/alert_controller.js

@@ -8,22 +8,15 @@ export default class extends Controller {
   present(event) {
     event.preventDefault();
     event.stopPropagation();
-    console.log(this.urlValue)
+
     axios.get(this.urlValue)
       .then(res => {
-        console.log(res)
         document.body.insertAdjacentHTML('afterbegin', res.data);
       })
       .catch(console.error)
   }
 
-  close() {
-    this.alertTarget.classList.add('hidden')
-    this.bodyTarget.innerHTML = ''
-  }
-
   deleteSuccess(event) {
-    console.log('e', event.currentTarget)
     const resourceId = event.currentTarget.dataset.resourceId
     const listItem = document.getElementById(resourceId)
 
@@ -41,6 +34,10 @@ export default class extends Controller {
     this.close()
   }
 
+  close() {
+    if (this.hasAlertTarget) { this.alertTarget.remove(); };
+  }
+
   get toast() {
     return document.getElementById('toast').toast
   }

app/javascript/controllers/cropper_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from 'stimulus'
+import { events } from '../mixins/events'
 import axios from 'axios';
 
 export default class extends Controller {
@@ -11,11 +12,12 @@ export default class extends Controller {
   }
 
   connect() {
+    events(this)
+
     this.populateCropper()
   }
 
   populateCropper() {
-    console.log(this.upload)
     this.imageTarget.setAttribute('src', this.upload.uploadedFile)
 
     this.cropper = new Cropper(this.imageTarget, {
@@ -30,8 +32,6 @@ export default class extends Controller {
     });
 
     canvas.toBlob(blob => {
-      console.log('b', blob)
-      
       let formData = new FormData();
 
       formData.append('user[avatar]', blob);
@@ -44,25 +44,20 @@ export default class extends Controller {
         data: formData
         })
         .then(function (response) {
-            const event = new CustomEvent('update-image', { detail: { src: response.data.avatar_url } })
-            window.dispatchEvent(event)
-
-            self.upload.avatarTarget.setAttribute('src', canvas.toDataURL())
-            self.modal.close()
+          self.upload.avatarTarget.setAttribute('src', canvas.toDataURL())
+          
+          self.emitEvent('update-image', { src: response.data.avatar_url })
+          self.emitEvent('close-modal')
         })
         .catch(function (response) {
-            //handle error
-            console.log(response);
-            self.modal.close()
+          //handle error
+          console.log(response);
+          self.emitEvent('close-modal')
         });
     })
   }
 
   get upload() {
     return document.getElementById('upload').upload
   }
-
-  get modal() {
-    return document.getElementById('modal').modal
-  }
 }

app/javascript/controllers/modal_controller.js

@@ -5,12 +5,11 @@ export default class extends Controller {
   static targets = ["modal", "header", "body"];
   static values = { url: String }
 
-  initialize() {
+  present(event) {
     const csrfToken = document.querySelector("meta[name=csrf-token]").content
     axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
-  }
+    axios.defaults.headers.common['Accept'] = 'application/xhtml+xml'
 
-  present(event) {
     event.preventDefault();
     event.stopPropagation();
 
@@ -24,6 +23,6 @@ export default class extends Controller {
   }
 
   close() {
-    if (this.hasModalTarget) { this.modalTarget.remove() }
+    if (this.hasModalTarget) { this.modalTarget.remove(); };
   }
 }

app/javascript/controllers/snippets_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from 'stimulus';
+import { events } from "../mixins/events";
 import axios from 'axios';
 
 export default class extends Controller {
@@ -11,6 +12,8 @@ export default class extends Controller {
   }
 
   connect() {
+    events(this)
+  
     if (this.hasMoveButtonTarget) {
       this.moveButtonTarget.disabled = true
     }
@@ -24,11 +27,11 @@ export default class extends Controller {
 
   onCreateSuccess(event) {
     const [data, status, xhr] = event.detail;
-    const createEvent = new CustomEvent('snippet-created', { detail: data })
-    window.dispatchEvent(createEvent)
+    
+    this.emitEvent('snippet-created', data)
+    this.emitEvent('close-modal');
 
     this.toast.display('Your snippet was created!')
-    this.emitModalClose();
   }
 
   onCreateError(event) {
@@ -38,11 +41,10 @@ export default class extends Controller {
 
   onUpdateSuccess(event) {
     const [data, status, xhr] = event.detail;
-    const updateEvent = new CustomEvent('snippet-updated', { detail: data })
-    window.dispatchEvent(updateEvent)
 
+    this.emitEvent('snippet-updated', data)
+    this.emitEvent('close-modal');
     this.toast.display('Your snippet was updated!')
-    this.emitModalClose();
   }
 
   onUpdateError(event) {
@@ -112,19 +114,14 @@ export default class extends Controller {
     axios.post(this.confirmPath, { folder_id: this.selectedFolderId }, { headers: { 'accept': 'application/json' } })
       .then(res => {
         this.toast.display(res.data.message)
-        this.emitModalClose();
+        this.emitEvent('close-modal');
       })
       .catch(error => {
         console.error(error)
         this.toast.display('Unable to file snippet')
       })
   }
 
-  emitModalClose() {
-    const event = new CustomEvent('close-modal')
-    window.dispatchEvent(event)
-  }
-
   get url() {
     return this.data.get('url')
   }
@@ -137,10 +134,6 @@ export default class extends Controller {
     return this.data.get('originalFolderId')
   }
 
-  get modal() {
-    return document.getElementById('modal').modal
-  }
-
   get toast() {
     return document.getElementById('toast').toast
   }
@@ -156,8 +149,4 @@ export default class extends Controller {
   set selectedFolderId(folderId) {
     return this.data.set('selectedFolderId', folderId)
   }
-
-  get modal() {
-    return document.getElementById('modal').modal
-  }
 }

app/javascript/controllers/upload_controller.js

@@ -1,9 +1,12 @@
 import { Controller } from 'stimulus'
+import { events } from '../mixins/events'
 
 export default class extends Controller {
   static targets = ['fileInput', 'avatar']
 
   connect() {
+    events(this)
+
     this.element[this.identifier] = this
   }
 
@@ -22,9 +25,7 @@ export default class extends Controller {
 
       reader.onload = function(e) {
         self.uploadedFile = e.target.result
-
-        const event = new CustomEvent('open-avatar-modal')
-        window.dispatchEvent(event)
+        self.emitEvent('open-avatar-modal')
       }
 
       reader.readAsDataURL(input.files[0]);

app/javascript/event-bus.js

@@ -0,0 +1,12 @@
+export const events = controller => {
+
+  Object.assign(controller, {
+
+    emitEvent(name, data = undefined) {
+      const event = new CustomEvent(name, { detail: data })
+      window.dispatchEvent(event)
+    }
+
+  });
+
+}