Fixes #123 - Avoid caching song_id form parameter

Restructure the add to playlist form so that instead of a list of buttons, each generating a form, we wrap the playlist buttons in a single form and each playlist button changes the form action when clicked to the proper playlist url. This allows caching each button and fixes the bug where the song_id was cached with the html for each button.
blackcandy-org · Mar 5, 2022 · 86fe009 · 86fe009
1 parent be121c3
commit 86fe009
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/app/views/dialog/playlists/_playlist.html.erb b/app/views/dialog/playlists/_playlist.html.erb
@@ -1,3 +1,4 @@
-<%= button_to playlist_songs_path(playlist, song_id: params[:song_id]), method: :post, class: 'c-list__item u-cursor-pointer', form: { 'data-turbo-frame': 'turbo-playlist', 'data-test-id': 'dialog_playlist' } do %>
+<button type="submit" class='c-list__item u-cursor-pointer'
+        formaction="<%= playlist_songs_path(playlist) %>" data-test-id="dialog_playlist">
   <%= playlist.name %>
-<% end %>
+</button>
diff --git a/app/views/dialog/playlists/index.html.erb b/app/views/dialog/playlists/index.html.erb
@@ -3,16 +3,21 @@
 <% end %>
 
 <% if @playlists.present? %>
-  <div data-controller='infinite-scroll' data-infinite-scroll-container-value='#js-dialog-content' data-infinite-scroll-url-value='<%= dialog_playlists_path %>' data-infinite-scroll-total-pages-value='<%= @pagy.pages %>'>
-    <div id='turbo-dialog-playlists' data-action='click->dialog#hide' class='c-list'>
-      <%= render partial: 'dialog/playlists/playlist', collection: @playlists, cached: true %>
+  <%= form_tag nil, 'data-turbo-frame': 'turbo-playlist' do %>
+    <%= hidden_field_tag :song_id, params[:song_id] %>
+    <div data-controller='infinite-scroll' data-infinite-scroll-container-value='#js-dialog-content'
+        data-infinite-scroll-url-value='<%= dialog_playlists_path %>'
+        data-infinite-scroll-total-pages-value='<%= @pagy.pages %>'>
+      <div id='turbo-dialog-playlists' data-action='click->dialog#hide' class='c-list'>
+        <%= render partial: 'dialog/playlists/playlist', collection: @playlists, cached: true %>
+      </div>
+      <div data-infinite-scroll-target='trigger' class='o-flex o-flex--justify-center u-my-small'>
+        <% if @pagy.next %>
+          <%= loader_tag %>
+        <% end %>
+      </div>
     </div>
-    <div data-infinite-scroll-target='trigger' class='o-flex o-flex--justify-center u-my-small'>
-      <% if @pagy.next %>
-        <%= loader_tag %>
-      <% end %>
-    </div>
-  </div>
+  <% end %>
 <% else %>
   <%= empty_alert_tag %>
 <% end %>