소개

이번에 사용할 라이브러리

필요한 예비 지식

환경

$ ruby -v
ruby 2.5.0p0 (2017-12-25 revision 61468) [x86_64-linux]

$ rails -v
Rails 5.2.1

구현

모델

# マイグレーション
class CreateDogs < ActiveRecord::Migration[5.2]
  def change
    create_table :dogs do |t|
      t.string :name, null: false, default: ''
      t.integer :receive_likes_count, null: false, default: 0
    end
  end
end

class CreateLikes < ActiveRecord::Migration[5.2]
  def change
    create_table :likes do |t|
      t.references :user
      t.references :dog
    end
  end
end

class User < ApplicationRecord
  has_many :likes, dependent: :destroy
end

class Dog < ApplicationRecord
  has_many :receive_likes, dependent: :destroy, class_name: 'Like'

  # 特定のユーザーからお気に入りされているか
  def liked_by?(user)
    user.likes.exists?(dog_id: id)
  end

  # Ajax実行時に、DOMエレメントを特定するID
  def id_attribute
    "dog-#{id}"
  end
end

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :dog
  # counter culture設定
  counter_culture :dog, column_name: 'receive_likes_count'
end

컨트롤러

class SampleController < ApplicationController
  def index
    @dogs = Dog.all.order(created_at: :asc) 
  end
end

class Api::LikeController < ApplicationController
  before_action :setup_dog!
  before_action :setup_like!

  def create
    @like.save
  end

  def destroy
    @like.destroy
  end

  private

  def setup_dog!
    @dog = Dog.find(params[:dog_id])
  end

  def setup_like!
    # create時はまだ存在していないのでinitializeされ、
    # destroy時は既に存在しているのでfindされる。
    @like = current_user
              .likes
              .find_or_initialize_by(dog_id: @dog.id)
  end
end

namespace :api do
  post 'like/:dog_id' => 'like#create', as: :like
  delete 'like/:dog_id' => 'like#destroy', as: :unlike
end

도우미

module MyHelper
  def toggle_like_button(dog)
    # ログインしていない場合
    return fa_icon 'heart-o', text: dog.receive_likes_count if current_user.blank?

    liked = dog.liked_by?(current_user)
    icon = fa_icon (liked ? 'heart' : 'heart-o'), text: dog.reload.receive_likes_count
    if liked
      # お気に入りを外すボタン
      link_to icon, api_unlike_path(dog_id: dog.id), remote: true, method: :delete
    else
      # お気に入りするボタン
      link_to icon, api_like_path(dog_id: dog.id), remote: true, method: :post
    end
  end
end

보기

# ページ
app/views/sample/
├── _dog.html.slim
└── index.html.slim

/ index.html.slim
.container.my-5
  .row
    .col-md-6.offset-md-3
      #project-list(style='overflow-y: scroll; height: 80vh;')
        = render @dogs

/ _dog.html.slim
.card.card-body.mb-3(id="#{dog.id_attribute}")
  / この.like要素をAjaxで書き換える
  .like
    = toggle_like_button(dog)
  h3.card-title = dog.name

JS 파일

app/views/api/like/
├── create.js.erb
└── destroy.js.erb

// create.js.erb

// toastrの通知処理
toastr.success("<%= "#{@like.dog.name}をお気に入りに追加しました" %>")
// 特定のLIKEボタンのDOMを入れ替える。
$("<%= "##{@dog.id_attribute} .like" %>").html("<%= j toggle_like_badge(@dog) %>") 

// destroy.js.erb

toastr.error("<%= "#{@dog.name}をお気に入りから削除しました" %>")
$("<%= "##{@dog.id_attribute} .like" %>").html("<%= j toggle_like_badge(@dog) %>")

결론