未解決 いいね機能を非同期にしたい。 リロードをすれば読み込まれる。

Question

前提・実現したいこと

現在SNSのようなアプリのいいね機能を実装中です。
ボタンになっている部分をクリックするとデータベースにはしっかりと記録が残り、リロードをすれば読み込まれます。

・非同期になっていない
・ターミナルにはステータス２００、エラーメッセージなし

と言った状態です

ターミナル

Started POST "/posts/1/likes" for ::1 at 2020-12-10 09:27:06 +0900
Processing by LikesController#create as JS
  Parameters: {"authenticity_token"=>"gLf2VbgAMI4UilZjwT13haZKK0LDa+wbfrBQ01UVsYyGDhEp7C/b4CKzqM3oFWv+ThkVcXMsN+FPFIUSlUwNbA==", "post_id"=>"1"}
  Post Load (0.5ms)  SELECT `posts`.* FROM `posts` WHERE `posts`.`id` = 1 LIMIT 1
  ↳ app/controllers/likes_controller.rb:21:in `set_post'
  User Load (0.7ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ app/controllers/likes_controller.rb:6:in `create'
   (0.2ms)  BEGIN
  ↳ app/controllers/likes_controller.rb:6:in `create'
  Post Load (0.4ms)  SELECT `posts`.* FROM `posts` WHERE `posts`.`id` = 1 LIMIT 1
  ↳ app/controllers/likes_controller.rb:6:in `create'
  User Load (0.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
  ↳ app/controllers/likes_controller.rb:6:in `create'
  Like Create (0.4ms)  INSERT INTO `likes` (`user_id`, `post_id`, `created_at`, `updated_at`) VALUES (1, 1, '2020-12-10 00:27:06.440564', '2020-12-10 00:27:06.440564')
  ↳ app/controllers/likes_controller.rb:6:in `create'
  Post Update All (0.5ms)  UPDATE `posts` SET `posts`.`likes_count` = COALESCE(`posts`.`likes_count`, 0) + 1 WHERE `posts`.`id` = 1
  ↳ app/controllers/likes_controller.rb:6:in `create'
   (1.3ms)  COMMIT
  ↳ app/controllers/likes_controller.rb:6:in `create'
  Rendering likes/create.js.erb
  Like Load (0.5ms)  SELECT `likes`.* FROM `likes` WHERE `likes`.`post_id` = 1 AND `likes`.`user_id` = 1 LIMIT 1
  ↳ app/models/post.rb:6:in `like_user'
  Rendered likes/_like.html.erb (Duration: 5.1ms | Allocations: 1379)
  Rendered likes/create.js.erb (Duration: 7.5ms | Allocations: 1731)
Completed 200 OK in 36ms (Views: 11.4ms | ActiveRecord: 5.0ms | Allocations: 10875)

該当のソースコード

_like.html.erb

<% if user_signed_in? %>
        <% if post.like_user(current_user.id) %>
          <%= button_to post_like_path(like, post_id: post.id), method: :delete, id: "but-like-button", remote: true do %>
          <i class="fas fa-star"></i>
            <span>
              <%= post.likes_count %>
            </span>
           <% end %>
        <% else %>
        <%= button_to post_likes_path(post), id: "like-button", remote: true do %>
        <i class="far fa-star"></i>
          <span>
            <%= post.likes_count %>
          </span>
          <% end %>
        <% end %>
      <% else %>
      <i class="far fa-star"></i>
          <span>
            <%= post.likes_count %>
          </span>
<% end %>

create.js.erb

$("#like-button-#{@post.id}").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like, post: @post}) %>")

destroy.js.erb

$("#like-button-#{@post.id}").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like, post: @post}) %>")

likes_contoroller

 before_action :set_post

  def create
    @like = Like.create(user_id: current_user.id, post_id: params[:post_id])
    @likes = Like.where(post_id: params[:post_id])
    @posts = Post.all
    
  end

  def destroy
    like = Like.find_by(user_id: current_user.id, post_id: params[:post_id])
    like.destroy
    @likes = Like.where(post_id: params[:post_id])
    @posts = Post.all
  end

  private
    def set_post
      @post = Post.find(params[:post_id])
    end

end

like.rb

class Like < ActiveRecord::Base
  belongs_to :post, counter_cache: :likes_count
  belongs_to :user
end

routes.rb

  devise_for :users
  root to: 'posts#index'
  
  resources :users, only: :show

  resources :posts do
    resources :likes, only: [:create, :destroy]
  end

end

上記以外に気になる点などがありましたらコメントいただけたら幸いです。

試したこと

https://qiita.com/YuitoSato/items/94913d6a349a530b2ea2
こちらの記事を参考に実装を進めています

Answer 1

create.js.erb でも destroy.js.erb でも ローカル変数 post が指定されていません。

コントローラーでは@postを設定されてるようですので、以下のように post: @post を追加してください。

$("#like-button").html("<%= j(render partial: 'like', locals: { tweets: @tweets, likes: @likes, like: @like, post: @post }) %>")

_like.html.erb の post は post のままで、 @postにする必要はありません。

Comments

[Pro01x19]

返答ありがとうございます！
参考記事からそのままツイートが残ったままなのに気付き、修正しました！

今度はどのツイートのいいねボタンを押しても
最新のツイートのいいねが非同期になっている模様です。
また最新のツイートもlikes_countが正常に動いてないみたいです

引き続き原因追求と実装頑張っていきます