【Rails】いいね一覧について

はじめに

いいね機能を非同期通信で実装して、いいね一覧を作成した際に、
いいね一覧でいいねをはずしたときは、一覧から消えて欲しいなーと思い実装を試みたので、備忘録です。
色々話を聞いて完成に持っていくことができました。一部抜粋して今回の記事にしています。
いいね機能、いいねの非同期通信、いいね一覧表示については他にも記事が多くあるので、割愛します。
割愛した部分、下記を参考にして実装しました。実装完了後に今回の実装を行います。

実装完成形

現在がこちら

完成形がこちら

実装

まずは、一覧の表示方法を変えます。

app/views/users/favorites.html.erb

<h1>いいね一覧</h1>
<div>
  <% @favorite_posts.each do |post| %>
    <div><%=post.title %></div>
    <div id="post_<%= post.id %>"><%= render "favorites/favorite", post: post %>
  <% end %>
</div>

↓

<h1>いいね一覧</h1>
<div>
  <% @favorite_posts.each do |post| %>
    <%= render 'users/favorite_content', post: post %>
  <% end %>
</div>

eachの中を部分テンプレートで作成しています。
「users」のフォルダの中に「favorite_content」というファイルを作成しているので
ファイル名はなんでも大丈夫です。
そして「favorite_content」の中身がこちら

app/views/users/_favorites_content.html.erb

<div id="favorite_list_<%= post.id %>">
  <div><%=post.title %></div>
  <div id="post_<%= post.id %>"><%= render "favorites/favorite", post: post %></div>
</div>

ここで「id="favorite_list_<%= post.id %>"」を追記していますが、関連する記述がこちら

app/views/favorites/destroy.js.erb

$("#favorite_list_<%= @post.id %>").remove();  ・・・追記
$("#post_<%= @post.id %>").html("<%= j(render "favorites/favorite", post: @post) %>");

removeメソッドは、いいねが「destroy」されたときに「favorite_list_<%= @post.id %>」を削除する記述です。
今回の場合、eachの中身一つ一つに設定されてため、いいねをはずしたときにその一つを削除しているイメージだと思っています。

これで最初にあげた完成形になりました。
私はユーザー一覧に自分の投稿、フォロワーの投稿、いいね一覧をタブで切り替えれるようにしていたので、いいねしたとき、はずしたときの動きがなかなかうまくいきませんでした。（その記事は時間があるときに書けたら書きます。）
記述するところは少ないのですが、理解が足りなかったため、結構時間がかかってしまいましたが、これをきっかけに理解が深まった気がするので、結果的にはよかったということにしましょう。