ログイン機能なしでの「いいね」機能【Rails】

Question

前提・実現したいこと

初めての投稿かつプログラミング初学者につき、わかりにくい点があれば申し訳ありません。

現在railsでアプリ開発をしており、投稿に対して、ユーザーログイン機能無しでの「いいね」機能の実装に取り組んでいます。
過去の投稿などもみて、cookieを利用することで、原則として同一ユーザーが複数回の「いいね」はできない形にすることを考えています。
（あくまでcookieですから、別ブラウザの利用等によって、複数回のいいねをすることも可能ですが、それはやむなしと考えています）

発生している問題・エラーメッセージ

非同期のいいね機能を作成することまではできたのですが、ページの更新をすると、元に戻ってしまう。具体的には、、、、

①いいねをクリックする前はこんな状態。

②いいねをクリックするとこうなる。

③ページを更新すると、元に戻ってしまう（いいね数は計上されている）

該当のソースコード

class Content < ApplicationRecord
  has_many :favorites, dependent: :destroy
    ransacker :favorites_count do
      query = '(SELECT COUNT(favorites.content_id) FROM favorites where favorites.content_id = contents.id GROUP BY favorites.content_id)'
      Arel.sql(query)
    end
end

class Favorite < ApplicationRecord
    belongs_to :content
end

ActiveRecord::Schema.define(version: 2021_06_26_132254) do
  create_table "contents", force: :cascade do |t|
   (略)
  end

  create_table "favorites", force: :cascade do |t|
    t.integer "content_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end
end

index.html.erb

<div class="album py-5 bg-light mt-3">
  <div class="container">
    <div class="row">
      <% @contents.each do |content| %>   
        <div class="col-md-4">     
          <div class="card border-dark mb-4 shadow-sm"> 
            <div class="card-header text-white bg-dark"  style="height: 5rem;">
              <h6><%= content.group %>
                <p class="small"><%= content.team %></p>
              </h6>
            </div>     
            <div class="card-body h6" style="height: 15rem;">
              <p><%= link_to content.title.to_s.truncate(88), "#{content.url}" %></p>           
              <p class="card-text"><small class="text-muted"><%= content.author.to_s.truncate(26) %></small></p>
            </div>
  
            <div class="card-footer bg-transparent border-info d-flex align-items-center" style="height: 2rem;">
              <!--いいね機能。_list_favorites.html.erbにrenderしています。-->
              <div class="favorite-<%= content.id %> text-nowrap">
                <%= render "favorites/list_favorite", content: content, favorites_count: content.favorites.length, cookies: cookies %>
              </div>
            </div>  
          </div>
        </div>
      <% end %>
    </div>
    
    <%= paginate @contents %>
  </div>
</div>

_list_favorites.html.erb

<% if cookies.nil? %>
  <%= link_to content_favorites_path(content), method: :post, remote: true do %>
    <span class="far fa-heart like" id="like-<%= content.id %>"></span>
  <% end %>
<% else %>
  <% arr = cookies.to_s.split(",").map(&:to_i) %>
  <% if arr.include?(content.id) %>
    <span class="fas fa-heart unlike" id="unlike-<%= content.id %>"></span>
  <% else %>
    <%= link_to content_favorites_path(content), method: :post, remote: true do %>
      <span class="far fa-heart like" id="like-<%= content.id %>"></span>
    <% end %>
  <% end %>
<% end %>
<%= favorites_count %>

class FavoritesController < ApplicationController
  def create
    @content = Content.find(params[:content_id])
    if cookies[:favorite_content_id].nil?
        cookies.permanent[:favorite_content_id] = @content.id.to_s
    else
        cookies.permanent[:favorite_content_id] = cookies.permanent[:favorite_content_id] + "," + @content.id.to_s 
    end
      Favorite.create(content_id: @content.id)
      @favorites_count = @content.favorites.count
      @cookies = cookies[:favorite_content_id]     
  end
end

class ContentsController < ApplicationController
  def index
    if params[:q].present?
      @q = Content.ransack(params[:q])
    else
      params[:q] = { sorts: 'favorites_count desc'}
      @q = Content.ransack()
    end
      
    @contents = @q.result.page(params[:page])
    @contents_all = Content.select(:author).distinct
  end
end

試したこと

以下のqiitaの投稿も参考にしながら作成し、コードのずれもないはずなのですが、原因がわかりません。。。

https://qiita.com/yuta-pharmacy2359/items/85653210cd2229dd4973

補足情報（FW/ツールのバージョンなど）

ruby 2.7.3
rails 5.2.2

Comments

[winterboum]

view にある content はどこでどう定義してますか

[shutag]

ありがとうございます。
contentはモデルで以下のように定義しています

class Content < ApplicationRecord
has_many :favorites, dependent: :destroy
ransacker :favorites_count do
query = '(SELECT COUNT(favorites.content_id) FROM favorites where favorites.content_id = contents.id GROUP BY favorites.content_id)'
Arel.sql(query)
end
end

また、contents controllerのコードも記載させていただきます。

class ContentsController < ApplicationController
def index
if params[:q].present?
@q = Content.ransack(params[:q])
else
params[:q] = { sorts: 'favorites_count desc'}
@q = Content.ransack()
end
end
@contents = @q.result.page(params[:page])
@contents_all = Content.select(:author).distinct
end

[winterboum]

質問編集して、そちらに <cod3e>で書いてほしい

[winterboum]

viewの中の変数contentはどこで代入されてますか

[shutag]

ありがとうございます。質問編集いたしました。
contentは大元のindexファイルで代入しています（こちらも質問編集して載せさせていただきました）

Answer 1

cookies が問題の元ですね。
index.html で cookies: cookies している cookies は ActionController::Cookie の cookies だということになりますが、list_favorites.html.erb の cookies は cookies: で渡ってきた　cookiesなのかActionController::Cookie のなのかどちら？
（どちらにしても、指しているのは ActionController::Cookie の cookiesではありますが）
ここは favorite_content_ids = cookies[:favorite_content_id]
として、きちんと名前を分ける所から整理しなおしましょう。

で、cookies.to_s.split(",") の cookiesはActionController::Cookie の cookies であって cookies[:favorite_content_id]ではないから、splitしても content.id に一致するものは出てきません。
なお、そこを正しくしても splitの結果は String、 content.id は Integer なので一致しません。

Comments

[shutag]

ありがとうございます！favorite_content_ids = cookies[:favorite_content_id]とすることで、うまく機能するようになりました。（おっしゃるとおり、stringとintegerの違いがあるのでダメかなと思いましたが、ここの部分は修正せずとも機能しています、、、）
いずれにしましても、ありがとうございました！