From 84a921aada57bf518e74b428652308bb958a697f Mon Sep 17 00:00:00 2001
From: yakitorii <yuki.torii.23@gmail.com>
Date: Sun, 11 Dec 2022 15:06:39 +0900
Subject: [PATCH] =?UTF-8?q?=E5=89=8A=E9=99=A4=E3=82=92=E3=83=96=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E3=82=AD=E3=83=A3=E3=82=B9=E3=83=88=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hotwire-tw-demo/app/models/emotion.rb         |  2 +
 .../app/views/emotions/_emotion.html.erb      | 54 ++++++++++---------
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/hotwire-tw-demo/app/models/emotion.rb b/hotwire-tw-demo/app/models/emotion.rb
index 4a9ffd5..e4509fa 100644
--- a/hotwire-tw-demo/app/models/emotion.rb
+++ b/hotwire-tw-demo/app/models/emotion.rb
@@ -8,5 +8,7 @@ def like_countup!
     update!(like_count: like_count + 1)
   end
 
+  # NOTE: broadcasts_to -> (_emotion) { "emotions" }, inserts_by: :prepend でも代用可
   after_create_commit -> { broadcast_prepend_to("emotions") }
+  after_destroy_commit -> { broadcast_remove_to("emotions") }
 end
diff --git a/hotwire-tw-demo/app/views/emotions/_emotion.html.erb b/hotwire-tw-demo/app/views/emotions/_emotion.html.erb
index 4dc8365..47556e1 100644
--- a/hotwire-tw-demo/app/views/emotions/_emotion.html.erb
+++ b/hotwire-tw-demo/app/views/emotions/_emotion.html.erb
@@ -1,27 +1,29 @@
-<li class="emotion-card">
-  <div class="emotion-content">
-    <div class="emotion-header">
-      <span class="fullname">
-        <strong><%= emotion.name %></strong>
-      </span>
-      <span class="emotion-time">
-        <%= link_to "- #{l(emotion.created_at, format: :date)}", emotion_path(emotion) %>
-      </span>
+<%= turbo_frame_tag emotion do %>
+  <li class="emotion-card">
+    <div class="emotion-content">
+      <div class="emotion-header">
+        <span class="fullname">
+          <strong><%= emotion.name %></strong>
+        </span>
+        <span class="emotion-time">
+          <%= link_to "- #{l(emotion.created_at, format: :date)}", emotion_path(emotion) %>
+        </span>
+      </div>
+      <div class="emotion-card-avatar">
+        <%== show_icon(Emotion.icons[emotion.icon]) %>
+      </div>
+      <div class="emotion-text">
+        <p> <%= simple_format emotion.body %> </p>
+      </div>
+      <div class="emotion-footer">
+        <%= button_to like_emotion_path(emotion), method: :put, class: "emotion-footer-btn" do %>
+          <svg class="bi me-2" width="20" height="20"><use xlink:href="#balloon-heart-fill"/></svg><span><%=emotion.like_count %></span>
+        <% end %>
+        <%= button_to emotion, method: :delete, class: "emotion-footer-btn" do %>
+          <svg class="bi me-2" width="20" height="20"><use xlink:href="#trash-fill"/></svg>
+          <span>削除</span>
+        <% end %>
+      </div>
     </div>
-    <div class="emotion-card-avatar">
-      <%== show_icon(Emotion.icons[emotion.icon]) %>
-    </div>
-    <div class="emotion-text">
-      <p> <%= simple_format emotion.body %> </p>
-    </div>
-    <div class="emotion-footer">
-      <%= button_to like_emotion_path(emotion), method: :put, class: "emotion-footer-btn" do %>
-        <svg class="bi me-2" width="20" height="20"><use xlink:href="#balloon-heart-fill"/></svg><span><%=emotion.like_count %></span>
-      <% end %>
-      <%= button_to emotion, method: :delete, class: "emotion-footer-btn" do %>
-        <svg class="bi me-2" width="20" height="20"><use xlink:href="#trash-fill"/></svg>
-        <span>削除</span>
-      <% end %>
-    </div>
-  </div>
-</li>
+  </li>
+<% end %>