【rails】「いいね」の状態によって画面表示を切り替える

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

目次 表示

目次へ

「いいね」の状態によって画面表示を切り替える

前回までで、axiosで「いいね」しているか確認することができた

【rails】axiosで「いいね」しているか確認する

今回は、取得した「いいね」の状態によって画面を切り替える

RubyからJavaScriptに書き換える

articles/show.html.hamlを開く

javascriptで表示を切り替えるので、rubyのコードを削除する

    - if current_user.has_liked?(@article)　#　←ここを消す
      .article_heart
        = link_to article_like_path(@article), data: { method: 'delete' } do
          = image_tag 'heart-active.svg'
    - else　#　←ここを消す
      .article_heart
        = link_to article_like_path(@article), data: { method: 'post' } do
          = image_tag 'heart.svg'

app/assets/stylesheets/application.scssを開く

.hidden {
  display: none;
}

articles/show.html.hamlに戻る

「.hidden」を追加する

  - if user_signed_in?
    .article_heart.hidden.active-herat　# ←①
      = link_to article_like_path(@article), data: { method: 'delete' } do
        = image_tag 'heart-active.svg'
    .article_heart.hidden.inactive-herat　# ←②
      = link_to article_like_path(@article), data: { method: 'post' } do
        = image_tag 'heart.svg'

これにより、いいねボタンが隠される

後の作業のため、うしろに「.active-herat」「.inactive-herat」も追加しておく

やりたいこと

application.jsで、「いいね」のステータスをAPI経由でgetする

  • 「いいね」されていたら、①のクラスから.hiddenをなくす
    →　’heart-active.svg’を表示する
  • 「いいね」されていなかったら、②のクラスから.hiddenをなくす
    →　’heart.svg’を表示にする

debuggerで取得データを確認する

application.jsを開く

document.addEventListener('turbolinks:load', () => {
  const dataset = $('#article-show').data()
  const articleId = dataset.articleId
  axios.get(`/articles/${articleId}/like`)
    .then((response) => {
      debugger #　←responseで取得しているデータを見るために処理をとめる
      console.log(response)
    })
})

検証ツールで確認すると、以下のようにデータが取得できている

const hasLiked = response.data.hasLikedで値がとれる

表示の切り替えをする

定義した「hasLiked」を使って、表示切り替えの条件分岐を書く

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
      if (hasLiked) {
        $('.active-herat').removeClass('hidden')
      } else {
        $('.inactive-herat').removeClass('hidden')
      }
    })
})

  1. もしhasLikedがtrueなら、active-heratクラスからhiddenをremoveする
  2. もし違うなら、inactive-heratクラスからhiddenをremoveする

コードの可読性を上げる

  • これまでのコードを、読まなくてもわかるようにする
  • 読もうとしなくても、一目でなにをしているかわかるようにする
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)
    })
})

handleHeartDisplay（heartの表示を操作する）という意味のfunctionを定義する

#DAY6

前の記事

【rails】axiosで「いいね」しているか確認する

次の記事

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