【Rails】Userがいいねした投稿一覧作成

はじめに

ユーザーがいいねをした投稿の一覧を見れるようにしたい。
しかし、users_path（indexアクション）は別の用途で使用している。
そこで、routesに新しいルーティングを追加し、専用のページを作成する。
完成図

前提

使用環境は以下の通りである。

No	項目	内容
1	OS	Mac
2	Ruby	2.6.3
3	rails	6.0.4
4	Kaminari	1.2.2
5	bootstrap-sass	3.4.1
6	sass-rails	5.1.0

ルーティングの設定をする

routes.rb

  resources :users do
  # memberだと、 users/:id/following, collectionだと users/following 
    member do
      # GET request, favorited_posts action, favorited_posts_user_path(:id)
      get :favorited_posts
    end
  end

ターミナル

$ rails routes
favorited_posts_user GET    /users/:id/favorited_posts(.:format)      users#favorited_posts

コントローラーの設定をする

users_controller.rb

  def favorited_posts
    @user = User.find(params[:id])
    posts = @user.favorited_posts
    @posts = Kaminari.paginate_array(posts).page(params[:page]).per(10)
    render 'show_favorited_posts'
  end

テンプレートを作っていく

users_controllersでfavorited_postsアクションが実行された時、レンダリングされるページをtouchコマンド等で作成する。
Kaminari gemでpaginateもしていく。そのためにcontrollersでKaminariモデル上に@postsを作成した。

app/views/users/show_favorited_posts.html.erb

<% provide(:title, 'Favorited Post') %>
<h1>Favorited Post</h1>
<%= paginate @posts %>
<ul class="posts">
  <%= render @posts %>
</ul>
<%= paginate @posts %>

リンクを埋め込みたいテンプレートに追加していく。
今回はhomeページに追加する。

home.html.erb

    <aside class="col-md-2">
      <section class="user_info">
        <%= render 'shared/user_info' %>
      </section>
# 下記の部分を追加する。
      <section class="favorited_posts">
        <%= render 'shared/favorited_posts' %>
      </section>

      <section class="stats">
        <%= render 'shared/stats' %>
      </section>
    </aside>

favorited_postsパーシャルを作成する。

app/views/shared/_favorited_posts.html.erb

<% @user ||= current_user %>
<div class="favorited_posts">
  <a href="<%= favorited_posts_user_path(@user) %>">
    <strong id="favorited_posts" class="favorited_posts">
      <%=  @user.favorited_posts.count %>
    </strong>
    favorited posts
  </a>
</div>

テンプレートを整える。
今回は、statsクラス（follow, followerの表示する部分）と同じようなデザインに統一する。

custom.scss

.favorited_posts, .stats {
  overflow: auto;
  margin-top: 0;
  padding: 0;
  a {
    float: left;
    padding: 0 5px;
    border-left: 1px solid $gray-lighter;
    color: gray;
    &:first-child {
      padding-left: 0;
      border: 0;
    }
    &:hover {
      text-decoration: none;
      color: blue;
    }
  }
  strong {
    display: block;
  }
}

おわりに

実装完了した。