【rails】「いいね」をaxiosでpostする

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

目次表示

APIを作る
「いいね」したらjsが動くようにしたい
クリックしたときの処理を書く

APIを作る

likes_controller.rbで、createとdestroyのAPIを作る

  def create
    article = Article.find(params[:article_id])
    article.likes.create!(user_id: current_user.id)

    render json: { status: 'ok' }
  end

  def destroy
    article = Article.find(params[:article_id])
    like = article.likes.find_by!(user_id: current_user.id)
    like.destroy!

    render json: { status: 'ok' }
  end

「いいね」したらjsが動くようにしたい

articles/show.html.hamlを確認

    .article_heart.hidden.active-heart
      = image_tag 'heart-active.svg'
    .article_heart.hidden.inactive-heart
      = image_tag 'heart.svg'

image_tag 'heart-active.svg'、image_tag 'heart.svg'をクリックしただけでjavascriptが動くようにしたい

クリックしたときの処理を書く

application.jsを開く

↓のコードに追加していく

const handleHeartDisplay = (hasLiked) => {
  if (hasLiked) {
    $('.active-heart').removeClass('hidden')
  } else {
    $('.inactive-heart').removeClass('hidden')
  }
}

document.addEventListener('turbolinks:load', () => {
  const dataset = $('#article-show').data()
  const articleId = dataset.articleId

  axios.get(`/articles/${articleId}/like`)
    .then((response) => {
      const hasLiked = response.data.hasLiked
      handleHeartDisplay(hasLiked)
    })

クリックイベントが起きたときにどう動かすのか

クリックイベントが起きたらon('click', () =>、axiosでpostリクエストを送る

  $('.inactive-heart').on('click', () => {
    axios.post(`/articles/${articleId}/like`)
      .then((response) => {
        console.log(response)
      })
      .catch((e) => {
        window.alert('Error')
        console.log(e)
      })
  })
})

処理がうまくいったとき→then
うまくいかなかったとき→catch
console.log(e)で、エラー内容をConsoleに表示する

postリクエストには制約がある

実はこのままだとエラーが発生してpostリクエストが動かない

getリクエストはデータを見るだけ
postリクエストはデータベースを変更する

postは攻撃に使われることがあるため、制約がかかっている

これを動かすためにrailsで用意されている「rails-ujs」をインストールする

yarn add rails-ujs@5.2.4-3

※講義動画にあわせて、バージョンは5.2.4-3を使用

鍵をつけてpostリクエストできるようにする

application.jsに追加する

import $ from 'jquery'
import axios from 'axios'

//　ここから追加
import { csrfToken } from 'rails-ujs'

axios.defaults.headers.common['X-CSRF-Token'] = csrfToken()
// ↑「axiosでpostリクエストを送るとき、常に鍵をつけます」という設定

↓　簡単に説明するとこういうことらしい

axiosでpostリクエストを送るときに鍵を使うよ
鍵はcsrfToken（メソッド）が発行するよ
その鍵がないとpostリクエストできないよ

deleteも同じように書く

axios.deleteとして、同じように書いていけば「いいね」を外せる

  $('.active-heart').on('click', () => {
    axios.delete(`/articles/${articleId}/like`)
      .then((response) => {
        console.log(response)
      })
      .catch((e) => {
        window.alert('Error')
        console.log(e)
      })
  })

#DAY6