ぞえの技術めも

Ruby on Rails勉強中

【174日目】【1日20分のRailsチュートリアル】【第12章】フォロー/フォロー解除ボタンを作成する

Ruby on Railsチュートリアル(第3版)

今日は「12.2.2 統計とフォロー用フォーム」のフォロー/フォロー解除ボタン用のパーシャルを作成するところから。

12.2.2 統計とフォロー用フォーム

プロファイルにも統計情報パーシャルを表示しますが、今のうちにリスト11.23のようにフォロー/フォロー解除ボタン用のパーシャルも作成しましょう。

フォロー/フォロー解除ボタン用のパーシャルを作成する。

まずパーシャル用のファイルを生成して、

$ touch app/views/users/_follow_form.html.erb

下記内容で更新する。

app/views/users/_follow_form.html.erb

<% unless current_user?(@user) %>
  <div id="follow_form">
  <% if current_user.following?(@user) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>
  </div>
<% end %>

このコードは、followとunfollowのパーシャルに作業を振っているだけです。

そうですね。実態はどこ…と思ったらこれからか。

パーシャルでは、Relationshipsリソース用の新しいルーティングが必要です。これを、リスト11.29のMicropostsリソースの例に従って作成しましょう (リスト12.20)。

Micropostと同じように、createとdestroyだけ追加。

config/routes.rb

  resources :relationships,       only: [:create, :destroy]

follow/unfollowパーシャル自体は、リスト12.21リスト12.22に示します。

パーシャル用のファイルを生成して、

$ touch app/views/users/_follow.html.erb
$ touch app/views/users/_unfollow.html.erb

下記内容で更新。

app/views/users/_follow.html.erb

<%= form_for(current_user.active_relationships.build) do |f| %>
  <div><%= hidden_field_tag :followed_id, @user.id %></div>
  <%= f.submit "Follow", class: "btn btn-primary" %>
<% end %>

app/views/users/_unfollow.html.erb

<%= form_for(current_user.active_relationships.find_by(followed_id: @user.id),
             html: { method: :delete }) do |f| %>
  <%= f.submit "Unfollow", class: "btn" %>
<% end %>

すなわち、前者はPOSTリクエストを Relationshipsコントローラに送信してリレーションシップをcreate (作成) し、後者はDELETEリクエストを送信してリレーションシップをdestroy (削除) するということです(これらのアクションは12.2.4で実装します)。

ふむふむ。それはなんとなく分かった。

これで、12.23のようにフォロー用のフォームをユーザープロファイルページにインクルードしてパーシャルを出力できるようになりました。

プロファイルページにフォロー/フォロー解除ボタンを表示するのか。

app/views/users/show.html.erb

    <section class="stats">
      <%= render 'shared/stats' %>
    </section>
    :
  <div class="col-md-8">
    <%= render 'follow_form' if logged_in? %>

ボタン見るためにサーバーを起動して

$ rails server -b $IP -p $PORT

他ユーザーのプロファイルページにアクセス。
(ログインユーザーのプロファイルページには何も表示されてなくて最初びびった。そりゃそうだ、表示されんわ。)

f:id:kt_zoe:20170901124539p:plain

f:id:kt_zoe:20170901124551p:plain

フォローボタンもフォロー解除ボタンも表示されてます!

今日の学習時間は【25分】

次は「12.2.3「フォローしているユーザー」ページと「フォロワー」ページ」から。