いいねしたユーザーの一覧表示

はじめに

ポートフォリオ制作中です！
いいね数をクリックするといいねしたユーザーの一覧を表示
できるように実装したためアウトプットします✍️

※旅行やデートのプランを共有するアプリなので、投稿機能はPostではなくPlanを使用しています！

前提

いいね機能は実装済み、いいねボタンの非同期化済みです
ご留意ください！

モデル

plan.rb

class Plan < ApplicationRecord

  # アソシエーション
  belongs_to :user
  has_many :likes, dependent: :destroy
  # この行を追加
  has_many :liked_users, through: :likes, source: :user
  #throughで、likesを通してuserのカラムを使用できる
:
end

ルーティング

routes.rb

Rails.application.routes.draw do
  scope module: :public do
    resources :plans do
      resource :like, only: [:create, :destroy]
      # 以下を追加
      member do
        get :liked_users
      end
    end
:
end

作成されたルーティング↓

liked_users_plan GET    /plans/:id/liked_users(.:format) public/plans#liked_users

コントローラー

plans_controller.rb

class Public::PlansController < ApplicationController
:
  def liked_users
    @plan = Plan.find(params[:id])
    @liked_users = @plan.liked_users
  end
:
end

ビュー

いいねボタン修正

いいねカウントのコードにliked_users_plan_path(plan)を追加

_like.html.erb

<% if user_signed_in? %>

  <% if plan.liked_by?(current_user) %>
    <%= link_to plan_like_path(plan), method: :delete, remote: true do %>
      <i class="fa-solid fa-star"></i>
    <% end %>
    <!--リンク追加-->
    <%= link_to plan.likes.count, liked_users_plan_path(plan) %>
  <% else %>
    <%= link_to plan_like_path(plan), method: :post, remote: true do %>
      <i class="fa-regular fa-star"></i>
    <% end %>
    <!--リンク追加-->
    <%= link_to plan.likes.count, liked_users_plan_path(plan) %>
  <% end %>

<% else %>
  <i class="fa-regular fa-star"></i><%= plan.likes.count %>
<% end %>

いいねしたユーザー一覧作成

user一覧はテンプレートを使用します

liked_users.html.erb

<%= render 'public/users/index', users: @liked_users %>

ユーザー一覧のテンプレートの中身

レイアウトの部分は省略しています！

_index.html.erb

<% if users.present? %>
  <% users.each do |user| %>
    <%= image_tag user.get_profile_image(100, 100) %>
    <%= link_to  user.name, user_path(user) %>
    フォロー：<%= link_to user.followings.count, user_followings_path(user) %>
    フォロワー：<%= link_to user.followers.count, user_followers_path(user) %>
  <% end %>
<% else %>
  ユーザーがいません
<% end %>

さいごに

ポートフォリオ制作も終盤です
細かいところを詰めていけるようがんばります！

参照記事

参考にさせていただきました！
ありがとうございます！