fix/Remove snippet from folder when moved

Author: LewisYoul

app/controllers/snippets_controller.rb

@@ -183,9 +183,12 @@ def create
         'snippets/snippet_preview'
       end
 
-      render partial: partial, locals: { snippet: snippet }
+      element = render_to_string partial: partial, locals: { snippet: snippet }
+
+      render json: { client_id: snippet.client_id, element: element }
     else
-      render partial: 'shared/errors', locals: { resource: snippet }, status: :bad_request
+      element = render_to_string partial: 'shared/errors', locals: { resource: snippet }
+      render json: { element: element }, status: :bad_request
     end
   end
 
@@ -208,9 +211,12 @@ def update
       end
 
       @display_popover = true
-      render partial: partial, locals: { snippet: snippet }
+      element = render_to_string partial: partial, locals: { snippet: snippet }
+
+      render json: { client_id: snippet.client_id, folder_id: snippet_params[:folder_id], element: element }
     else
-      render partial: 'shared/errors', locals: { resource: snippet }, status: :bad_request
+      element = render_to_string partial: 'shared/errors', locals: { resource: snippet }
+      render json: { element: element }, status: :bad_request
     end
   end
 

app/javascript/controllers/snippets_controller.js

@@ -17,45 +17,39 @@ export default class extends Controller {
   }
 
   update(event) {
-    console.log('yah')
+    console.log('yah', event)
 
-    const id = new DOMParser().parseFromString(event.detail, "text/xml").firstChild.id 
-    const element = document.getElementById(id)
+    const element = document.getElementById(event.detail.client_id)
 
-    if (element) { element.outerHTML = event.detail }
+    if (element) { element.outerHTML = event.detail.element }
   }
 
   onCreateSuccess(event) {
     const [data, status, xhr] = event.detail;
-    console.log(xhr.response)
-    const createEvent = new CustomEvent('snippet-created', { detail: xhr.response })
+    const createEvent = new CustomEvent('snippet-created', { detail: data })
     window.dispatchEvent(createEvent)
 
     this.toast.display('Your snippet was created!')
     this.modal.close()
-
-    // window.location.href = '/'
   }
 
   onCreateError(event) {
     const [data, status, xhr] = event.detail;
-    this.errorsTarget.innerHTML = xhr.response;
+    this.errorsTarget.innerHTML = data.element;
   }
 
   onUpdateSuccess(event) {
     const [data, status, xhr] = event.detail;
-    const createEvent = new CustomEvent('snippet-updated', { detail: xhr.response })
-    window.dispatchEvent(createEvent)
+    const updateEvent = new CustomEvent('snippet-updated', { detail: data })
+    window.dispatchEvent(updateEvent)
 
     this.toast.display('Your snippet was updated!')
     this.modal.close()
-
-    // window.location.href = '/'
   }
 
   onUpdateError(event) {
     const [data, status, xhr] = event.detail;
-    this.errorsTarget.innerHTML = xhr.response;
+    this.errorsTarget.innerHTML = data.element;
   }
 
   presentModal(event) {
@@ -67,6 +61,7 @@ export default class extends Controller {
     event.stopPropagation()
     const snippetUrl = event.currentTarget.dataset.snippetUrl
 
+    // event is still propagating when using visit
     // Turbolinks.visit(snippetUrl)
     window.location.href = snippetUrl
   }

app/javascript/controllers/snippets_list_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+  static targets = ['entries']
+
+  update(event) {
+    const folderId = event.detail.folder_id
+    const clientId = event.detail.client_id
+    const element = document.getElementById(clientId)
+
+    if (element) {
+      if ((this.folderId && folderId) && (this.folderId !== folderId)) {
+        element.remove()
+      } else {
+        element.outerHTML = event.detail.element
+      }
+    }
+  }
+
+  get folderId() {
+    return this.data.get('id')
+  }
+}

app/views/folders/show.html.erb

@@ -1,4 +1,7 @@
-<div data-controller="infinite-scroll" data-infinite-scroll-base-url="<%= folder_path(@folder) %>">
+<div
+  data-controller="infinite-scroll snippets-list"
+  data-infinite-scroll-base-url="<%= folder_path(@folder) %>"
+  data-snippets-list-id="<%= @folder.id %>">
   <div style="display: flex; align-items: center; justify-content: space-between;" class="margin-top">
 
       <div class="searchbar">
@@ -15,8 +18,8 @@
   </div>
 
   <div class="margin-top"
-    data-target="infinite-scroll.entries"
-    data-action="scroll@window->infinite-scroll#scroll"
+    data-target="infinite-scroll.entries snippets-list.entries"
+    data-action="scroll@window->infinite-scroll#scroll snippet-updated@window->snippets-list#update"
   >
     <%= render 'snippets/snippets' %>
   </div>

app/views/home/index.html.erb

@@ -1,8 +1,8 @@
-<div data-controller="infinite-scroll">
+<div data-controller="infinite-scroll snippets-list">
   <div
     id="infinite-snippets-list"
     data-target="infinite-scroll.entries"
-    data-action="scroll@window->infinite-scroll#scroll snippet-created@window->infinite-scroll#add snippet-updated@window->snippets#update"
+    data-action="scroll@window->infinite-scroll#scroll snippet-created@window->infinite-scroll#add snippet-updated@window->snippets-list#update"
   >
     <%= render 'snippets/snippets' %>
   </div>

app/views/snippets/_snippet_preview.html.erb

@@ -1,7 +1,7 @@
 <div
   id="<%= snippet.client_id %>"
   data-controller="snippets"
-  data-action="click->snippets#view_snippet snippet-updated@window->snippets#update"
+  data-action="click->snippets#view_snippet"
   data-snippet-url="<%= snippet_path(snippet) %>"
   class="card--container card--container-padding snippet--container-preview"
 >

app/views/snippets/index.html.erb

@@ -1,4 +1,4 @@
-<div data-controller="infinite-scroll" data-infinite-scroll-base-url="<%= snippets_path %>">
+<div data-controller="infinite-scroll snippets-list" data-infinite-scroll-base-url="<%= snippets_path %>">
   <div style="display: flex; align-items: center; justify-content: space-between;" class="margin-top">
 
       <div class="searchbar">
@@ -16,7 +16,7 @@
 
   <div class="margin-top"
     data-target="infinite-scroll.entries"
-    data-action="scroll@window->infinite-scroll#scroll"
+    data-action="scroll@window->infinite-scroll#scroll snippet-updated@window->snippets-list#update"
   >
     <%= render 'snippets/snippets' %>
   </div>