非同期通信でいいね機能実装してみた

今回は非同期通信を用いてのいいね機能を実装していきたいと思います。

##下準備
①favoriteコントローラーを追加

　$rails g controller Favorites

②ルーティング設定

routes.rb

　resource :favorites only: [:create, :destroy]

③favoriteモデルを追加

　$rails g model Favorite user_id:integer pet_id:integer
　$rails db:miigrate

今回私はuserテーブルとpetテーブルの中間テーブルとしてfavoriteテーブルを使用しています。

④リレーションを関連付ける

favorite.rb

    belongs_to :user
    belongs_to :pet

user.rb

     has_many :favorites, dependent: :destroy

pet.rb

has_many: favorites, dependent: :destroy


def favorited_by?(user)
 favorites.where(user_id: user.id).exists?
end

これで下準備は完成！

##いざ、非同期通信いいね実装
①　いいね用の部分テンプレートを作成
view/favorites の中に _favorite.html.rebを作成する

_favorite.html.reb

<% if pet.favorited_by?(current_user) %>  
   <%= link_to pet_favorites_path(pet), method: :delete, remote: true do %>
       ♥<%= pet.favorites.count %>
   <% end %>
 
   <% else %>
      <%= link_to pet_favorites_path(pet), method: :post, remote: true do %>
         ♡<%= pet.favorites.count %>
      <% end %>
<% end %>

②　部分テンプレートを呼び出したいページに呼び出す

 <div class="favorite-btn<%= pet.id %>">
  <%= render 'favorites/favorite', pet: @pet %>
</div>

③　view/favorite　の中に create.js.erb　と　destroy.js.erbを作成する

create.js.erb

$(".favorite-btn<%= @pet.id %>").html("<%= j (render 'favorite', pet: @pet) %>");

destroy.js.erb

$(".favorite-btn<%= @pet.id %>").html("<%= j (render 'favorite', pet: @pet) %>");

④ favorites_controller.rb を編集

favorites_controller.rb

 def create
    @pet = Pet.find(params[:pet_id])
    favorite = current_user.favorites.new(pet_id: @pet.id)
    favorite.save
  end

  def destroy
    @pet = Pet.find(params[:pet_id])
    favorite = current_user.favorites.find_by(pet_id: @pet.id)
    favorite.destroy
  end

これで完成！！