目的
Railsでいいね機能を導入したアプリに、いいねした投稿一覧を表示する、
開発環境
macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0
前提
-
いいね機能が作成されている。
【Rails】いいね機能の実装（非同期）
手順
はじめに
今回は一覧表示させるために、
ユーザー詳細ページから、いいねした投稿一覧ページへ飛ぶようにします。
ルーティングの設定
まずはルーティングの設定です！
config/routes
#省略
resources :users do
member do
get :likes
end
end
idが必要なため、memberを使用しています。
アクションの定義
アクションの定義です。
usersコントローラーに新たに設定していきます。
class UsersController < ApplicationController
before_action :set_user, only: [:likes]
#省略
def likes
likes = Like.where(user_id: @user.id).pluck(:post_id)
@like_posts = Post.find(likes)
end
private
def set_user
@user = User.find(params[:id])
end
end
いいねした投稿を探し、@like_postsに格納しています。
一覧ページの作成
ユーザー詳細ページにリンクボタンを設置し、一覧表示をさせます。
app/views/users/show.html.erb
<%= link_to "いいねした投稿", likes_user_path(@user) %>
続いて部分テンプレートを呼びます。
collectionを使用することでeachの記載が不要になります。
app/views/users/followers.html.erb
<p>いいねした投稿一覧</p>
<%= render partial: "posts/post", collection: @like_posts %>
部分テンプレートとして切り出したビューファイルです。
app/views/posts/_post.html.erb
<%= link_to image_tag( post.image.variant(resize: '100x100') ), post_path(post.id) %>
<%= link_to post.user.name, user_path(post.user.id) %>
<i class="fa fa-heart unlike-btn"></i>
<%= post.likes.length %>
<%= link_to post.title, post_path(post.id) %>
投稿された画像、ユーザー名、いいねアイコン、タイトルを表示しています。
最後に
以上で、一覧表示の実装は完了です。
CSSは実装していないため、簡素な見た目となっています。
必要に応じて各自編集をお願いします。
では。