いいね（Like）機能を正しく設定したい

Question

いいね(Like)ぼたんをクリックすると表示が変わるように実装したい

• 投稿画面でLikeボタンをクリックするとLikedとなりもう一度クリックするとLikedに表示が変更するように実装したい機能を動作するようにする

前提

いいねボタンを実装中、ブラウザ上で一度クリックするとLike→Likedに変わり
もう一度クリックするとLiked→Likeに変更させたいのですが表示が変わらず特にエラーも出ません。
イベント発火もしていないようでして、binding.pryを実行しましたがターミナルでも何も表示されませんでした。
どのファイルの記述がおかしいのか回答いただけると嬉しいです。
投稿に慣れていないなので投稿内容も違和感があると思いますがよろしくお願いします。

該当のソースコード

<% if user_signed_in? && tweet.liked_by?(current_user)%>
  <%=link_to "Liked", tweet_likes_path(tweet.id),  data: { turbo_method: :delete }, class: "tweet_likes" , remote: true %>
<% else %>
  <%=link_to "Like", tweet_likes_path(tweet.id), data: { turbo_method: :post }, class: "tweet_likes" , remote: true %>
<% end %>

class Like < ApplicationRecord
    belongs_to :user
    belongs_to :tweet
end

class LikesController < ApplicationController
    before_action :set_tweet
    before_action :authenticate_user!

    def create
        like = current_user.likes.build(tweet_id: params[:tweet_id])
        like.save
        respond_to do |format|
          format.js
        end
    end
    
    def destroy
        like = Like.find_by(tweet_id: params[:tweet_id], user_id: current_user.id)
        like.destroy
        respond_to do |format|
          format.js
        end
    end

    private

    def set_tweet
        @tweet = Tweet.find(params[:tweet_id])
    end
    
end

Rails.application.routes.draw do
  devise_for :users
  root to: 'tweets#index'
  resources :tweets do
    resources :comments, only: :create
    resources :likes, only: [:create, :destroy]
    collection do
      get 'search'
    end
  end
  resources :users, only: :show
end

class Tweet < ApplicationRecord
    validates :text, presence: true
    belongs_to :user
    has_many :comments
    has_one_attached :image
    has_many :likes, dependent: :destroy

    def liked_by?(user)
        likes.where(user_id: user.id).exists?
    end

    def self.search(search)
        if search != ""
          Tweet.where('text LIKE(?)', "%#{search}%")
        else
          Tweet.all
        end
    end
end

<div id="like-btn<%= tweet.id %>">
    <%= render partial: "likes/like", locals: { tweet: tweet } %>
</div>
<div class="content_post" style="background-image: url(<%= tweet.image %>);">
  <div class="tweet__image">
    <%= image_tag tweet.image %>
  </div>
    <div class="more">   
      <span><%= image_tag 'arrow_top.png' %></span>
      <ul class="more_list">
        <li>
          <%= link_to 'Detail', tweet_path(tweet.id)%>
        </li>
        <% if user_signed_in? && current_user.id == tweet.user_id %>
        <li>
          <%= link_to 'Edit', edit_tweet_path(tweet.id)%>
        </li>
        <li>
          <%= link_to 'Delete', tweet_path(tweet.id), data: { turbo_method: :delete } %>
        </li>
        <% end %>
      </ul>
    </div>
      <p><%= tweet.text %></p>
      <span class="name">
      </span>
</div>

試したこと

ネストの記述がおかしいのではと記述を変更したりしましたが特に挙動に変化はありませんでした。
リンク内容

追加

class LikesController < ApplicationController
    before_action :set_tweet
    before_action :authenticate_user!

    def create
      binding.pry
        like = current_user.likes.build(tweet_id: params[:tweet_id])
        like.save
        respond_to do |format|
          format.js
        end
    end
    
    def destroy
      
        like = Like.find_by(tweet_id: params[:tweet_id], user_id: current_user.id)
        like.destroy
        respond_to do |format|
          format.js
        end
    end

    private

    def set_tweet
        @tweet = Tweet.find(params[:tweet_id])
    end
    
end

を実行し、ターミナルではこちらの表示になりました。
bindin.pryの使い方も間違いでしょうか？

Comments

[winterboum]

「いいねボタンを実装中、ブラウザ上で一度クリックするとLike→Likedに変わり
もう一度クリックするとLiked→Likeに変更させたいのですが表示が変わらず特にエラーも出ません。」
ですと、どこまでできてどこからできないのかが判りにくいです。codeから判断して
「ブラウザ上で一度クリックするとLike→Likedに変わり」もできていない、と判断して合ってますか？

「イベント発火もしていないようでして、binding.pryを実行しましたがターミナルでも何も表示されません」
とのことですが、どこにbinding.pryを入れましたか？ 質問のcode書き直して示して下さい。

「ブラウザ上で一度クリックするとLike→Likedに変わり」のときに、リロードするとLikedになってませんか？

[you_your]

*「ブラウザ上で一度クリックするとLike→Likedに変わり」もできていない、と判断して合ってますか？
-クリックするとLikedには変わっています。
*「ブラウザ上で一度クリックするとLike→Likedに変わり」のときに、リロードするとLikedになってませんか？
-リロードせずにLikedに変化します。

コードを書き換えるのは時間いただきます。
返答になっていない場合はすみません。

[winterboum]

liked にするのは行けてるのですね、
liked を like にするほうがだめ。
でしたら、
それを行ったあとで リロードしたら表示どうなってます？

[you_your]

返信ありがとうございます。
今確認してみます。
少々お待ちください。

[you_your]

実行しましたがLikedから何も変化ありませんでした。

[you_your]

tweet.html.erbのファイルも追加いたしました。
確認いただけますでしょうか

[winterboum]

＞ Likedから何も変化ありませんでした。
リロードしても Likedの表示ということですね。
すると destroyに行ってないかな。 log でmethodが GET になってるか DELETE になってるかみてください

[you_your]

返信ありがとうございます。
* log でmethodが GET になってるか DELETE になってるかみてください
-logは DELETE になっていると思います
こちらにroutesを貼らせていただいても大丈夫でしょうか？
こちらがroutesになります→(https://gyazo.com/9af6d2492c4f7974582b1333ebc7bb53)

[you_your]

"<%=link_to "Liked", tweet_likes_path(tweet.id), data: { turbo_method: :delete }, class: "tweet_likes" , remote: true %>"
ルーティングを tweet_like_pathに変更するとエラーが出てしまします。
こちらがエラーです→(https://gyazo.com/dc959f53c0a6f9d89fc89bdd871317ac)

[winterboum]

> -logは DELETE になっていると思います
でないだろう、と推定しているので、確認してほしいのです。

[winterboum]

エラーも画像でなく textで貼ってほしいな。
検索もコピペもできないから厄介

[you_your]

エラーは解消できているので大丈夫です。

Answer 1

あぁ、、、
tweetのIDだけしか渡してないから、ですね。Like も渡して下さい。
tweet_likes_path では DELETE の pathではない
tweet_like_path は DELETE(とGETの）pathだが、tweet_like_path(tweet.id) では LikeのIDが渡っていないのでエラー

Comments

[you_your]

理解不足なのですが、こちらの記述で大丈夫でしょうか？
```
<% if user_signed_in? && tweet.liked_by?(current_user)%>
<%=link_to "Liked", tweet_like_path(tweet.id, like.id), data: { turbo_method: :delete }, class: "tweet_likes" , remote: true %>
<% else %>
<%=link_to "Like", tweet_likes_path(tweet.id), data: { turbo_method: :post }, class: "tweet_likes" , remote: true %>
<% end %>
```

[winterboum]

よさげ

[you_your]

エラーになってしまいました。。
```
NameError in Tweets#index
Showing /home/asami/projects/cafe/app/views/likes/_like.html.erb where line #2 raised:

undefined local variable or method `like' for #<ActionView::Base:0x0000000000f5c8>
Extracted source (around line #2):
1
2
3
4
5

<% if user_signed_in? && tweet.liked_by?(current_user)%>
<%=link_to "Liked", tweet_like_path(tweet.id, like.id), data: { turbo_method: :delete }, class: "tweet_likes" , remote: true %>
<% else %>
<%=link_to "Like", tweet_likes_path(tweet.id), data: { turbo_method: :post }, class: "tweet_likes" , remote: true %>
<% end %>
```

[winterboum]

like 未定義だ って言ってますね。
tweet.likes から current_user のものを取り出しましょう

[you_your]

tweet.likes から current_user のものを取得するコードを修正すると無事
Like→Liked、Liked→Likeに変化しました!!!!!!
とても感動です…
長時間お付き合いいただいたのと解決頂きとても感謝しております。
winterboumさんのようになりたいですが、なぜそのようにすぐ解決できるのでしょうか？
MVCをしっかり理解していればわかりますか？

[winterboum]

コンピューターは誤動作しません。期待通りに動かないのはプログラムの問題です。
ということを肝に命じておく、ってことですね。

エラーメッセージから逃げないこと、修羅場をたくさん潜ること、
自分がCPUになってプログラムを動かしてみること

あたりかなぁ、、、

[you_your]

返信遅くなり申し訳ありません。
エラーメッセージから逃げないこと、修羅場をたくさん潜ること
-こちらは今私の課題なので逃げていたらスキルアップは無理だなと体感しております。
　エラーを見ると心が揺らぎますがエラーを味方にしていきたいなと思います。
自分がCPUになってプログラムを動かしてみること
-とても深いなと思いました。自分がCPUになって動かしてみる発想はなかったのでどちらも肝に銘じてこれからも頑張りたいと思います！

[winterboum]

エラーを味方!!! です

[you_your]

承知しました！