에서 "좋아요!"기능 만들기 - ③ "좋아요!"를 해제할 수 있도록 한다

지금까지의 전제 / 이번 목표

그런데, 초학자용의 텍스트를 씹어서 풀어 보는 시리즈, 제3단이 되었습니다.
여기까지는, Twitter와 같은 앱으로, 투고에 「좋아!」기능을 붙이는 것을 목표로, 이하와 같은 순서로 코드를 써 왔습니다.

Rails로 "좋아요!"기능 만들기 - ①연결에 별명을 붙인다
Rails로 "좋아요!"기능 만들기 - ② "좋아요!"의 create 액션

이번에는 이들을 한 걸음 더 나아가 "좋아요!"한 게시물의 "좋아요!"를 해제하는 기능을 만들려고 합니다.



유저가 투고한 내용에 대해서, 버튼을 누를 때마다 「좋아!」와「좋아!해제」가 바뀌어「좋아!

보기

이번에는 뷰에서 구현을 시작합니다.
뷰는 이런 식으로 만들었습니다.

views/posts/_post.erb

<!-- postsのインスタンスは、パーシャルに渡されている前提です。 -->
<% posts.each do |post| %>
  <div>
    <!-- 投稿者名・投稿日時・投稿内容 -->
    <div>
      <%= post.user.name %> posted at <%= post.created_at %>
    </div>
    <div>
      <p><%= post.content %></p>
    </div>

    <!-- いいね！ボタン -->
    <div>
      <!-- すでに「いいね！」されている時の表示 -->
      <% if current_user.favorites.include?(post) %>     
        <%= form_with(model: @like, url: like_path(id: post.id), local: true, method: :delete) do |f| %>
          <%= f.hidden_field :post_id, value: post.id %>
          <%= f.submit 'いいね！解除' %>
        <% end %>
      <% else %>

　　　　　<!-- まだ「いいね！」していない時の表示 -->
        <%= form_with(model: @like, url: likes_path, local: true) do |f| %>
          <%= f.hidden_field :post_id, value: post.id %>
          <%= f.submit 'いいね！' %>
        <% end %>
      <% end %>      
    </div>
  </div>
<% end %>

첫 번째 포인트이지만 form_with(model: @like, url: ...) 부분에서는 model: Like 대신 model: @like를 사용하지 않으면 좋지 않았습니다.

왜일까라고 생각 api 문서 을 조사해 보았지만, 여기만은 해결하지 않고.

다만, 이 기사에 의하면 「숨겨진 필드로 데이터를 보내고 싶을 때는 @like 」라고 하는 것이라고 하므로, 이번은 여기까지의 이해가 하지 않기로 합니다.
form_with(model: @like) do |f|의 형태로 Rails는 자동으로 요청 대상 URL을 추측합니다.

또한 url:에서 클릭 한 게시물 ID가 요청의 url: like_path(id: post.id)에 포함되어 있음에 유의하십시오.

마지막으로 params는 ajax가 아닌 통신을 지정하고 local: true는 DELETE 메소드가 Rails에 요청을 보내는 것을 설명합니다.

컨트롤러

컨트롤러의 기재는 이런 느낌입니다.

class LikesController < ApplicationController

  def create
    current_user.like_this(clicked_post)
    flash[:success] = '投稿に「いいね！」しました。'
    redirect_back(fallback_location: root_path)
    # 前回の記事からelse以下の記述は削除
  end

  # ↓前回の記事からここを追記！
  def destroy
    current_user.likes.find_by(post_id: params[:post_id]).destroy
    flash[:danger] = '「いいね！」を解除しました。'
    redirect_back(fallback_location: root_path)
  end

  private

  def clicked_post
    Post.find(params[:post_id])
  end
end

먼저 destroy 액션은 method: :delete에서 현재 사용자의 "좋아요!"한 게시물에 클릭한 게시물이 포함되어 있는지 확인합니다.

클릭 한 게시물의 ID는 current_user.likes.find_by(post_id: params[:micropost_id]).destroy의 형태로 검색 할 수 있습니다. (아까 params[:post_id]의 형태로 보냈습니다!)
그런 다음 게시물을 찾으면 url: like_path(id: post.id) 합니다.

위에서 destroy 액션을 구현할 수 있었으므로 destroy 액션 설명도 조금 다시 씁니다. 더 이상 필요하지 않은 코드는 지워 둡니다.

이상으로, 좋아!/좋아요 해제 기능의 구현이 완료되었습니다 create 의 구조만 설명을 하지 않았던 것이 유감입니다만, 이것으로 자신있게 설명할 수 있을 것 같습니다

여유가 있으면, 이것을 한층 더 응용해 유저의 팔로우/팔로우 ​​해제 기능도 실장해, 자세하게 읽어 풀어 가고 싶습니다.

여기까지 읽어 주신 여러분, 감사합니다 ^^

추가

2020.09.29 일부 메소드를 리팩토링했습니다.

기타

응용편으로, 이런 것도 만들었습니다.

Rails에서 Ajax에서 "좋아요!"기능을 구현합니다.