From c35d2019a4561d54fae1d442ae91af91533c4fdf Mon Sep 17 00:00:00 2001
From: Jberczel <jxberc@gmail.com>
Date: Thu, 13 Jul 2023 16:05:29 -0400
Subject: [PATCH 1/3] Update favorite counts when faving

---
 app/controllers/users_controller.rb | 4 +++-
 app/views/assets/_asset.html.erb    | 9 ++++++---
 app/views/shared/_asset.html.erb    | 7 +++++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index dec248dc08..1c5c6326d8 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -84,7 +84,9 @@ def toggle_favorite
 
     current_user.toggle_favorite(asset)
     respond_to do |format|
-      format.turbo_stream { render turbo_stream: '' }
+      format.turbo_stream do
+        render turbo_stream: turbo_stream.update_all(".faved-#{asset.id}", asset.reload.favorites_count)
+      end
     end
   end
 
diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb
index a16e206c41..81e1c94bdb 100644
--- a/app/views/assets/_asset.html.erb
+++ b/app/views/assets/_asset.html.erb
@@ -84,10 +84,13 @@
           </i>
           </div>
 
-          <div class="favorites"><%= asset.favorites_count %>
-              <i class="icon_favs">
+          <div class="favorites">
+            <div class="<%= "faved-#{asset.id}"%>">
+              <%= asset.favorites_count %>
+            </div>
+            <i class="icon_favs">
               <%== render file: svg_path('svg/icon_favorite_inverted.svg') %>
-              </i>
+            </i>
           </div>
         </div>
     </div>
diff --git a/app/views/shared/_asset.html.erb b/app/views/shared/_asset.html.erb
index 73df42b007..e5e5d2a31c 100644
--- a/app/views/shared/_asset.html.erb
+++ b/app/views/shared/_asset.html.erb
@@ -50,7 +50,9 @@
         <i class="icon_favs">
           <%== render file: svg_path('svg/icon_favorite_inverted.svg') %>
         </i>
-        <%= @asset.favorites_count %>
+        <div class="<%= "faved-#{@asset.id}"%>">
+          <%= @asset.favorites_count %>
+        </div>
       </div>
       <div class="plays">
         <i class="icon_plays">
@@ -124,4 +126,5 @@
   </div>
   <% end %>
 </div>
-</turbo-frame>
\ No newline at end of file
+</turbo-frame>
+

From e5518d90a8b320b10ded6f884b95c08e58bdd4b8 Mon Sep 17 00:00:00 2001
From: Jberczel <jxberc@gmail.com>
Date: Fri, 4 Aug 2023 21:55:03 -0400
Subject: [PATCH 2/3] Broadcast heart toggle with custom event

---
 app/javascript/controllers/favorite_controller.js | 9 +++++++++
 app/views/assets/_asset.html.erb                  | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/javascript/controllers/favorite_controller.js b/app/javascript/controllers/favorite_controller.js
index a0b95c8590..b678418f91 100644
--- a/app/javascript/controllers/favorite_controller.js
+++ b/app/javascript/controllers/favorite_controller.js
@@ -8,4 +8,13 @@ export default class extends HeartController {
   isFavorited() {
     return window.userFavorites.includes(this.idValue)
   }
+
+  broadcast(e) {
+    this.dispatch('broadcasted', { detail: { id: this.idValue }, target: window })
+  }
+
+  toggle(e) {
+    if (this.idValue === e.detail.id)
+      super.toggle()
+  }
 }
diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb
index 81e1c94bdb..4c83edb0fa 100644
--- a/app/views/assets/_asset.html.erb
+++ b/app/views/assets/_asset.html.erb
@@ -56,7 +56,7 @@
     <%= button_to toggle_favorite_path(asset_id: asset.id), class: 'add_to_favorites',
       method: :put, data: {
         controller: 'favorite',
-        action: 'favorite#toggle',
+        action: 'favorite#broadcast favorite:broadcasted@window->favorite#toggle',
         'favorite-id-value': asset.id
       } do %>
       <%== render file: svg_path('svg/animation_heart.svg') %>

From a1b733f787223a05732e4cc5e06de7d72a9bc49e Mon Sep 17 00:00:00 2001
From: Jberczel <jxberc@gmail.com>
Date: Sat, 5 Aug 2023 07:10:44 -0400
Subject: [PATCH 3/3] Broadcast heart toggle with Stimulus Outlets

---
 app/javascript/controllers/favorite_controller.js | 14 +++++++-------
 app/views/assets/_asset.html.erb                  |  5 +++--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/javascript/controllers/favorite_controller.js b/app/javascript/controllers/favorite_controller.js
index b678418f91..c273009df2 100644
--- a/app/javascript/controllers/favorite_controller.js
+++ b/app/javascript/controllers/favorite_controller.js
@@ -5,16 +5,16 @@ export default class extends HeartController {
     id: Number,
   }
 
+  static outlets = [ "favorite" ]
+
   isFavorited() {
     return window.userFavorites.includes(this.idValue)
   }
 
-  broadcast(e) {
-    this.dispatch('broadcasted', { detail: { id: this.idValue }, target: window })
-  }
-
-  toggle(e) {
-    if (this.idValue === e.detail.id)
-      super.toggle()
+  broadcast() {
+    this.favoriteOutlets.forEach((result) => {
+      if (this.idValue == result.idValue)
+        result.toggle()
+    })
   }
 }
diff --git a/app/views/assets/_asset.html.erb b/app/views/assets/_asset.html.erb
index 4c83edb0fa..ea605a687b 100644
--- a/app/views/assets/_asset.html.erb
+++ b/app/views/assets/_asset.html.erb
@@ -56,8 +56,9 @@
     <%= button_to toggle_favorite_path(asset_id: asset.id), class: 'add_to_favorites',
       method: :put, data: {
         controller: 'favorite',
-        action: 'favorite#broadcast favorite:broadcasted@window->favorite#toggle',
-        'favorite-id-value': asset.id
+        action: 'favorite#broadcast',
+        'favorite-id-value': asset.id,
+        'favorite-favorite-outlet': ".add_to_favorites"
       } do %>
       <%== render file: svg_path('svg/animation_heart.svg') %>
     <% end %>