refactor: usage with turbo stream (without remote)

app/controllers/concerns/destroy_with_undo_response.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module DestroyWithUndoResponse
+  extend ActiveSupport::Concern
+
+  private
+
+  def destroy_with_undo_response(record:, job_id:, redirect:)
+    respond_to do |format|
+      format.html do
+        flash[:success] = undo_flash_message(klass: record.class, job_id: job_id)
+        redirect_to redirect
+      end
+      format.turbo_stream do
+        if params[:redirect]
+          flash[:success] = undo_flash_message(klass: record.class, job_id: job_id)
+          redirect_to redirect
+        else
+          flash.now[:success] = undo_flash_message(klass: record.class, job_id: job_id, inline: true)
+          render 'undo/destroy', locals: { record: record }
+        end
+      end
+    end
+  end
+
+  def undo_flash_message(klass:, job_id:, inline: nil)
+    timeout = defined?(klass::UNDO_TIMEOUT) ? klass::UNDO_TIMEOUT : 10
+
+    {
+      title: "#{klass.model_name.human} was removed",
+      body: 'You can recover it using the undo action below.',
+      timeout: timeout, countdown: true,
+      action: {
+        url: undo_path(job_id, inline: inline),
+        method: 'delete',
+        name: 'Undo'
+      }
+    }
+  end
+end

app/controllers/posts_controller.rb

@@ -1,4 +1,6 @@
 class PostsController < ApplicationController
+  include DestroyWithUndoResponse
+
   before_action :set_post, only: [:show, :edit, :update, :destroy]
 
   # GET /posts
@@ -57,34 +59,11 @@ def update
   def destroy
     post = Post.active.find(params[:id])
     job_id = post.schedule_destroy
-
-    respond_to do |format|
-      format.html do
-        flash[:success] = flash_message_with_undo(job_id: job_id, post: post)
-        redirect_to posts_url
-      end
-      format.js do
-        flash.now[:success] = flash_message_with_undo(job_id: job_id, post: post, inline: true)
-        render :destroy, locals: { post: post }
-      end
-    end
+    destroy_with_undo_response(record: post, job_id: job_id, redirect: posts_path)
   end
 
   private
 
-  def flash_message_with_undo(job_id:, post:, inline: nil)
-    {
-      title: "Post #{post.title} was removed",
-      body: 'You can recover it using the undo action below.',
-      timeout: Post::UNDO_TIMEOUT, countdown: true,
-      action: {
-        url: undo_path(job_id, inline: inline),
-        method: 'delete',
-        name: 'Undo'
-      }
-    }
-  end
-
   # Use callbacks to share common setup or constraints between actions.
   def set_post
     @post = Post.find(params[:id])

app/javascript/misc/turbo-actions.js

@@ -0,0 +1,39 @@
+// https://jpscaletti.com/p/5/adding-custom-actions-to-hotwire-turbo-streams
+
+const ExtraActions = {
+  addclass: function (target, content) {
+    target.classList.add(content)
+  },
+
+  removeclass: function (target, content) {
+    target.classList.remove(content)
+  }
+}
+
+document.addEventListener(
+  "turbo:before-stream-render",
+  function (event) {
+    const stream = event.target
+    const actionFunction = ExtraActions[stream.action]
+    if (!actionFunction) {
+      return  // A built-in action, ignore
+    }
+    const target = getTarget(stream)
+    const content = getContent(stream)
+    actionFunction(target, content)
+    event.preventDefault()
+  }
+)
+
+function getTarget (stream) {
+  if (stream.target) {
+    return stream.ownerDocument?.getElementById(stream.target)
+  }
+  throw "target attribute is missing"
+}
+
+function getContent (stream) {
+  // Quick and dirty method to extract the content of the
+  // <template> tag.
+  return stream.innerHTML.trim().slice(10, -11).trim()
+}

app/javascript/packs/application.js

@@ -5,8 +5,10 @@
 
 require("@rails/ujs").start()
 import "@hotwired/turbo-rails"
-require("@rails/activestorage").start()
-require("channels")
+import '../misc/turbo-actions' // Custom turbo actions
+
+// require("@rails/activestorage").start()
+// require("channels")
 
 import '../css/application'
 

app/views/posts/_form.html.erb

@@ -22,7 +22,7 @@
     </span>
     <%= link_to 'Back', posts_path, class: 'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-indigo-200 transition ease-in-out duration-150' %>
     <% if @post.persisted? %>
-      <%= link_to 'Delete', post_path(@post), method: :delete, class: 'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red active:bg-red-700 transition ease-in-out duration-150' %>
+      <%= link_to 'Delete', post_path(@post, redirect: true), method: :delete, class: 'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red active:bg-red-700 transition ease-in-out duration-150' %>
     <% end %>
   </div>
 

app/views/posts/index.html.erb

@@ -20,7 +20,7 @@
                   <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900"><%= post.title %></td>
                   <td class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium"><%= link_to 'Show', post, class: 'text-indigo-600 hover:text-indigo-900' %></td>
                   <td class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium"><%= link_to 'Edit', edit_post_path(post), class: 'text-indigo-600 hover:text-indigo-900' %></td>
-                  <td class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium"><%= link_to 'Destroy', post, method: :delete, remote: true, data: { turbo: false }, class: 'text-red-600 hover:text-red-900' %></td>
+                  <td class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium"><%= link_to 'Destroy', post, method: :delete, class: 'text-red-600 hover:text-red-900' %></td>
                 </tr>
               <% end %>
             </tbody>

app/views/posts/show.html.erb

@@ -5,4 +5,4 @@
 </span>
 
 <%= link_to 'Back', posts_path, class: 'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-indigo-200 transition ease-in-out duration-150' %>
-<%= link_to 'Delete', post_path(@post), method: :delete, class: 'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red active:bg-red-700 transition ease-in-out duration-150' %>
+<%= link_to 'Delete', post_path(@post, redirect: true), method: :delete, class: 'inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red active:bg-red-700 transition ease-in-out duration-150' %>

app/views/undo/destroy.turbo_stream.erb

@@ -0,0 +1,7 @@
+<turbo-stream action="addclass" target="<%= dom_id(record) %>">
+  <template>hidden</template>
+</turbo-stream>
+
+<% flash.each do |type, data| %>
+  <%= turbo_stream.prepend('notifications', render(NotificationComponent.new(type: type, data: data))) %>
+<% end %>