フォロー機能 一覧ページ

前提条件

・バージョン　rails 6.1.7
・device導入　・Bootstrap導入
・ユーザー機能実装済（Userモデル）
・投稿機能実装済（Bookモデル）
・フォロー機能実装済（relationhipsモデル)

---

一覧ページ作成

今回は部分テンプレートを使用します。

部分テンプレートを作成
_index.html.erb

<table class='table'>
  <thead>
    <tr>
      <th>image</th>
      <th>name</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <% users.each do |user| %>
      <tr>
        <td><%= image_tag user.get_profile_image(50,50) %></td>
        <td><%= user.name %></td>
     <!--フォロー、フォロワー数の表示-->
        <td>フォロー数:<%= user.follower.count %></td>
        <td>フォロワー数:<%= user.followed.count %></td>

        <!--フォローボタン-->
        <td>
       <% if current_user != user %>
        <% if current_user.following?(user) %>
          <%= link_to 'フォロー外す', user_relationships_path(user.id), method: :delete %>
        <% else %>
          <%= link_to 'フォローする', user_relationships_path(user.id), method: :POST %>
        <% end %>
       <% end %>
      </td>
      
        <td><%= link_to 'Show', user %></td>
      </tr>
    <% end %>
  </tbody>
</table>

relationhipsディレクトリ内に follwed.html.erb と follwer.html.erbを作成します。

follwer.html.erb

<!--フォロワーの一覧ページ-->
<h1>Follower Users</h1>
<table class='table'>
  <tbody>
   <%= render 'users/index', users: @users %>
  </tbody>
</table>

follwed.html.erb

<!--フォローしているユーザー一覧-->
<h1>Follow Users</h1>
<table class='table'>
  <tbody>
    <%= render 'users/index', users: @users %>
  </tbody>
</table>

<%= render 'users/index', users: @users %> で作成した部分プレートを呼び出す。

---

フォロー、フォロワー一覧ページへのリンク作成

（今回はフォロー、フォロワー数にリンクを設定する。）

　イメージ画像

リンクを表示したいページに以下を追加する。
今回は、_info.html.erbに以下を追加

 <tr>
    <th>follows</th>
    <th>
      <%= link_to user_follows_path(user) do %>
      <%= user.follower.count %>
      <% end %>
    </th>
  </tr>
  
  <tr>
    <th>followers</th>
    <th>
      <%= link_to user_followers_path(user) do %>
        <%= user.followed.count %>
      <% end %>
    </th>
  </tr>

---

　一覧ページ完成イメージ

ひとこと

今回は、リンクをカウント数に設定しましたが、一覧ページ用のボタンを作成したりしてもいいですね！
まだまだ初心者ですので、間違えている部分があれば、教えて頂けると幸いです。

参考