feature/Extract toast to stimulus component

Author: LewisYoul

app/assets/stylesheets/toast.scss

@@ -2,7 +2,7 @@
 
 .toast {
   &--container {
-    position: absolute;
+    position: fixed;
     left: 50%;
     margin-left: -150px;
     width: 300px;

app/controllers/folders_controller.rb

@@ -20,6 +20,7 @@ def delete_alert
     @message = DELETE_CONFIRM_TEXT
     @confirm_word = 'DELETE'
     @confirm_path = folder_path(@folder, redirect_url: folders_path)
+    @resource_id = @folder.client_id
     @method = :delete
 
     render layout: false, partial: 'shared/alert'
@@ -96,13 +97,17 @@ def update
   end
 
   def destroy
-    if @folder.destroy
-      flash[:notice] = 'Folder deleted!'
-    else
-      flash[:alert] = 'Unable to delete folder'
+    respond_to do |format|
+      format.html do
+        if @folder.destroy
+          flash[:notice] = 'Folder deleted!'
+        else
+          flash[:alert] = 'Unable to delete folder'
+        end
+
+        redirect_to folders_path
+      end
     end
-
-    redirect_to folders_path
   end
 
   # Remove this once all routes no longer use JSON

app/controllers/snippets_controller.rb

@@ -83,7 +83,7 @@ def delete_alert
     @message = DELETE_CONFIRM_TEXT
     @confirm_word = 'DELETE'
     @confirm_path = snippet_path(@snippet)
-    @method = :delete
+    @resource_id = @snippet.client_id
 
     render layout: false
   end

app/javascript/controllers/alert_controller.js

@@ -2,23 +2,56 @@ import { Controller } from 'stimulus';
 import axios from 'axios';
 
 export default class extends Controller {
-  static targets = ["alert"];
+  static targets = ["alert", "confirm"];  d
 
+  initialize() {
+    const csrfToken = document.querySelector("meta[name=csrf-token]").content
+    axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
+  }
   present(event) {
     event.preventDefault()
 
     axios.get(this.url)
-      .then(res => {
-        document.getElementById('vue-app').insertAdjacentHTML('afterbegin', res.data);
-      })
+      .then(res => this.app.insertAdjacentHTML('afterbegin', res.data))
       .catch(console.error)
   }
 
   close(event) {
     this.alertTarget.remove()
   }
 
+  confirm() {
+    console.log(this.confirmPath)
+
+    axios.delete(this.confirmPath, { headers: { 'accept': 'application/json' } })
+      .then(res => {
+        document.getElementById(this.resourceId).remove()
+        this.alertTarget.remove()
+        this.toast.display('Snippet deleted!')
+      })
+      .catch(error => {
+        console.error(error)
+        this.toast.display('Unable to delete snippet')
+      })
+  }
+
   get url() {
     return this.data.get('url')
   }
+
+  get confirmPath() {
+    return this.data.get('confirmPath')
+  }
+
+  get resourceId() {
+    return this.data.get('resourceId')
+  }
+
+  get app() {
+    return document.getElementById('vue-app')
+  }
+
+  get toast() {
+    return document.getElementById('toast').toast
+  }
 }

app/javascript/controllers/toast_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from 'stimulus';
+import axios from 'axios';
+
+export default class extends Controller {
+  static targets = ["toast", "message"];
+
+  connect() {
+    this.element[this.identifier] = this
+  }
+  
+  initialize() {
+    const csrfToken = document.querySelector("meta[name=csrf-token]").content
+    axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
+
+    this.checkForNotice();
+  }
+
+  checkForNotice() {
+    if (this.hasNotice() || this.hasAlert()) {
+      const message = this.hasNotice() ? this.notice : this.alert
+
+      this.display(message)
+    }
+  }
+
+  hasNotice() {
+    return this.notice.length > 0
+  }
+
+  hasAlert() {
+    return this.alert.length > 0
+  }
+
+  display(message, type = 'notice') {
+    this.messageTarget.innerHTML = message
+    this.toastTarget.classList.remove('hidden')
+    setTimeout(() => this.hideToast(), 3000)
+  }
+
+  hideToast() {
+    this.toastTarget.classList.add('hidden')
+  }
+  
+  get notice() {
+    return this.data.get('notice')
+  }
+  
+  get alert() {
+    return this.data.get('alert')
+  }
+}

app/models/folder.rb

@@ -15,4 +15,8 @@ def popover_options_for(user)
 
     options
   end
+
+  def client_id
+    "folder_#{id}"
+  end
 end

app/models/snippet.rb

@@ -49,6 +49,10 @@ def highlighted
     ).html_safe
   end
 
+  def client_id
+    "snippet_#{id}"
+  end
+
   private
 
   def owner_folder_presence

app/views/layouts/application.html.erb

@@ -31,8 +31,8 @@
     <% else %>
       <div id="vue-app" v-cloak>
     <% end %>
-      <toast alert="<%= alert %>" notice="<%= notice %>"></toast>
-      <%# <alert></alert> %>
+      <%= render partial: 'shared/toast' %>
+
       <popover></popover>
 
       <%= render partial: 'shared/topbar' %>

app/views/shared/_alert.html.erb

@@ -1,4 +1,10 @@
-<div data-controller="alert" data-target="alert.alert" class="alert-mask">
+<div
+  class="alert-mask"
+  data-controller="alert"
+  data-target="alert.alert"
+  data-alert-confirm-path="<%= @confirm_path %>"
+  data-alert-resource-id="<%= @resource_id %>"
+>
   <div class="alert-wrapper">
     <div class="alert-container">
       <div class="alert-header">
@@ -16,7 +22,18 @@
         <button data-action="click->alert#close" class="button--cta-cancel">
           CANCEL
         </button>
-        <%= link_to @confirm_word, @confirm_path, method: @method, class: "button--cta-new" %>
+
+        <% if @method == :delete %>
+          <%= link_to @confirm_word, @confirm_path, method: @method, class: "button--cta-new" %>
+        <% else %>
+          <button
+            class="button--cta-new"
+            data-action="click->alert#confirm"
+          >
+            <%= @confirm_word %>
+          </button>
+        <% end %>
+        
       </div>
     </div>
   </div>

app/views/shared/_toast.html.erb

@@ -0,0 +1,10 @@
+<div
+  id="toast"
+  class="toast--container-notice hidden"
+  data-controller="toast"
+  data-target="toast.toast"
+  data-toast-notice="<%= notice %>"
+  data-toast-alert="<%= alert %>"
+>
+  <span data-target="toast.message"></span>
+</div>