【174日目】【1日20分のRailsチュートリアル】【第12章】フォロー/フォロー解除ボタンを作成する
今日は「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]
パーシャル用のファイルを生成して、
$ 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
他ユーザーのプロファイルページにアクセス。
(ログインユーザーのプロファイルページには何も表示されてなくて最初びびった。そりゃそうだ、表示されんわ。)
フォローボタンもフォロー解除ボタンも表示されてます!
今日の学習時間は【25分】。
次は「12.2.3「フォローしているユーザー」ページと「フォロワー」ページ」から。