feature/Use JSON endpoint to file snippets

Author: LewisYoul

app/controllers/snippets_controller.rb

@@ -52,23 +52,24 @@ def unfile
 
   # Does this belong on SnippetFoldersController?
   def file
-    begin
-      Snippet.transaction do
-        if snippet_folder = current_user.snippet_folders.find_by(snippet_id: params[:id])
-          snippet_folder.destroy!
-        end  
-    
-        SnippetFolder.create!(snippet_id: params[:id], folder_id: params[:folder_id])
+    respond_to do |format|
+      format.json do
+        begin
+          Snippet.transaction do
+            if snippet_folder = current_user.snippet_folders.find_by(snippet_id: params[:id])
+              snippet_folder.destroy!
+            end  
+        
+            SnippetFolder.create!(snippet_id: params[:id], folder_id: params[:folder_id])
+          end
+        rescue => error
+          render json: { message: 'Unable to file snippet, please try again.' }, status: 400
+        else
+          new_folder = current_user.folders.find(params[:folder_id])
+          render json: { message: "Snippet filed in #{new_folder.name}!" }
+        end
       end
-    rescue => error
-      flash[:alert] = 'Unable to file snippet, please try again.'
-    else
-      new_folder = current_user.folders.find(params[:folder_id])
-
-      flash[:notice] = "Snippet filed in #{new_folder.name}!"
     end
-
-    redirect_to root_path
   end
 
   def move_modal

app/javascript/controllers/alert_controller.js

@@ -8,6 +8,7 @@ export default class extends Controller {
     const csrfToken = document.querySelector("meta[name=csrf-token]").content
     axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
   }
+
   present(event) {
     event.preventDefault()
 
@@ -21,8 +22,6 @@ export default class extends Controller {
   }
 
   confirm() {
-    console.log(this.confirmPath)
-
     axios.delete(this.confirmPath, { headers: { 'accept': 'application/json' } })
       .then(res => {
         if (this.listItem) {

app/javascript/controllers/modal_controller.js

@@ -2,7 +2,11 @@ import { Controller } from 'stimulus';
 import axios from 'axios';
 
 export default class extends Controller {
-	static targets = ["modal"];
+  static targets = ["modal"];
+  
+  connect() {
+    this.element[this.identifier] = this
+  }
 
   present() {
     event.preventDefault()

app/javascript/controllers/popover_controller.js

@@ -8,14 +8,8 @@ export default class extends Controller {
     event.preventDefault();
     event.stopPropagation()
 
-    if (this.hasPopoverTarget && !this.popoverTarget.classList.contains('hidden')) {
-      this.hideAllPopovers()
-
-      this.popoverTarget.classList.add('hidden')
-    } else if (this.hasPopoverTarget && this.popoverTarget.classList.contains('hidden')) {
-      this.hideAllPopovers()
-
-      this.popoverTarget.classList.remove('hidden')
+    if (this.hasPopoverTarget) {
+      this.popoverTarget.remove()
     } else {
       this.hideAllPopovers()
 
@@ -29,7 +23,7 @@ export default class extends Controller {
 
   hide(event) {
     if(this.hasPopoverTarget && !this.element.contains(event.target)) {
-      this.popoverTarget.classList.add('hidden')
+      this.popoverTarget.remove()
     }
   }
 
@@ -39,8 +33,6 @@ export default class extends Controller {
 
   confirm(event) {
     event.preventDefault();
-
-    console.log('text', this.confirmText)
   }
 
   disconnect() {
@@ -49,7 +41,7 @@ export default class extends Controller {
 
   hideAllPopovers() {
     Array.from(document.getElementsByClassName('popover--container')).forEach(el => {
-      el.classList.add('hidden')
+      el.remove()
     })
   }
 

app/javascript/controllers/snippets_controller.js

@@ -1,10 +1,13 @@
 import { Controller } from 'stimulus';
+import axios from 'axios';
 
 export default class extends Controller {
   static targets = ["moveButton", "listItem"];
 
 
   initialize() {
+    const csrfToken = document.querySelector("meta[name=csrf-token]").content
+    axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
   }
 
   connect() {
@@ -59,8 +62,6 @@ export default class extends Controller {
 
     this.selectedFolderId = folderId
 
-
-    this.moveButtonTarget.href = this.moveButtonTarget.href.split('?')[0].concat(`?folder_id=${folderId}`)
     if (this.selectedFolderId === this.originalFolderId) {
       this.moveButtonTarget.disabled = true
       this.moveButtonTarget.classList.remove('button--cta-new')
@@ -72,6 +73,18 @@ export default class extends Controller {
     }
   }
 
+  file() {
+    axios.post(this.confirmPath, { folder_id: this.selectedFolderId }, { headers: { 'accept': 'application/json' } })
+      .then(res => {
+        this.toast.display(res.data.message)
+        this.modal.close()
+      })
+      .catch(error => {
+        console.error(error)
+        this.toast.display('Unable to file snippet')
+      })
+  }
+
   get url() {
     return this.data.get('url')
   }
@@ -84,6 +97,22 @@ export default class extends Controller {
     return this.data.get('originalFolderId')
   }
 
+  get modal() {
+    return document.getElementById('modal').modal
+  }
+
+  get toast() {
+    return document.getElementById('toast').toast
+  }
+
+  get confirmPath() {
+    return this.data.get('confirmPath')
+  }
+
+  set confirmPath(newPath) {
+    return this.data.set('confirmPath', newPath)
+  }
+
   set selectedFolderId(folderId) {
     return this.data.set('selectedFolderId', folderId)
   }

app/views/shared/_modal.html.erb

@@ -1,4 +1,4 @@
-<div data-controller="modal" data-target="modal.modal" class="modal-mask">
+<div id="modal" data-controller="modal" data-target="modal.modal" class="modal-mask">
   <div class="modal-wrapper">
     <div class="card--container card--container-padding modal-container">
       <div class="modal-header">

app/views/snippets/move_modal.html.erb

@@ -3,6 +3,7 @@
     data-controller="snippets"
     data-snippets-selected-folder-id="<%= @current_folder_id %>"
     data-snippets-original-folder-id="<%= @current_folder_id %>"
+    data-snippets-confirm-path="<%= file_snippet_path(@snippet) %>"
   >
     <input data-action="keyup->snippets#modal_search" class="move-snippet--search" type="search" placeholder="Find a folder...">
     <div class="move-snippet--list" data-target="snippets.list">
@@ -23,8 +24,14 @@
     </div>
     <div class="move-snippet--buttons">
       <button data-action="click->modal#close" class="button--cta-cancel">CANCEL</button>
-
-      <%= link_to @header.upcase, file_snippet_path(@snippet), method: :post, disabled: true, class: "button--cta-disabled", data: { target: 'snippets.moveButton' } %>
+      <button
+        data-action="click->snippets#file"
+        data-target="snippets.moveButton"
+        class="button--cta-disabled"
+        disabled
+      >
+        <%= @header.upcase %>
+      </button>
     </div>
   </div>
 <% end %>