ブックマークのアイコン表示について

kodamarisa commented 3 days ago

質問内容・実現したいことブックマークボタンとして、枠線の星(FontAwesomeのや<%= icon "far", "star" %>)が表示され、ブックマークされたら、塗りつぶされた星(FontAwesomeのや<%= icon "fas", "star" %>)が表示され、ブックマーク一覧に表示される。ブックマーク一覧や筋トレ一覧で、塗りつぶされた星を再度クリックし、ブックマークを外したら、ブックマーク一覧から削除され、枠線の星に戻るようにしたい。
現状発生している問題・エラーメッセージ

ブックマークボタンをクリックして、ブックマーク一覧に追加されるが、ページ再読み込みにて星が枠線に戻ってしまう。
ブックマーク一覧でもブックマークされているのに枠線の星で表示される。
ブックマーク一覧で削除しようとしても星が塗りつぶされた星に変わるだけで、削除されない。

どの処理までうまく動いているのか
クリックして、枠線の星をクリックしたら、塗りつぶされた星に変わる。（ページ再読み込みで枠線に戻ってしまう）
ブックマークした筋トレがブックマーク一覧に追加される。（星は枠線のまま）

該当のソースコード app/controllers/bookmarks_controller.rb

class BookmarksController < ApplicationController
before_action :authenticate_user_or_line_user!
before_action :set_exercise, only: [:create]
before_action :set_bookmark, only: [:destroy]

def index
@bookmarks = current_user_or_line_user.bookmarks.includes(:exercise)
end

def create
# 既にブックマークが存在するか確認
if current_user_or_line_user.bookmarks.exists?(exercise_id: params[:exercise_id])
  @exercise = Exercise.find(params[:exercise_id])
  respond_to do |format|
    format.js { render partial: 'already_bookmarked' } # 既にブックマークされている場合の処理
    format.json { render json: { status: 'already_bookmarked' }, status: :unprocessable_entity }
  end
else
  @bookmark = current_user_or_line_user.bookmarks.create(exercise_id: params[:exercise_id])
  @exercise = @bookmark.exercise
  respond_to do |format|
    format.html { redirect_back(fallback_location: root_path) }
    format.js   # JSレスポンスを追加
    format.json { render json: { status: 'created' } }
  end
end
end  

def destroy
if @bookmark.present?
  @bookmark.destroy
  respond_to do |format|
    format.html { redirect_back(fallback_location: root_path) }
    format.js   # JSレスポンスを追加
    format.json { render json: { status: 'deleted' } }
  end
else
  respond_to do |format|
    format.html { redirect_to bookmarks_path, alert: 'Bookmark not found.' }
    format.js { render js: "alert('Bookmark not found.');" } # JSでエラーメッセージを表示
    format.json { render json: { status: 'not_found' }, status: :not_found }
  end
end
end  

private

def set_exercise
@exercise = Exercise.find(params[:exercise_id])
rescue ActiveRecord::RecordNotFound
redirect_to exercises_path, alert: 'Exercise not found.'
end

def set_bookmark
@bookmark = current_user_or_line_user.bookmarks.find_by(exercise_id: params[:exercise_id])
rescue ActiveRecord::RecordNotFound
redirect_to bookmarks_path, alert: 'Bookmark not found.'
end

def current_user_or_line_user
current_user || current_line_user
end
end

app/controllers/exercises_controller.rb

class ExercisesController < ApplicationController
  def index
    logger.debug "INDEX: Current Calendar ID: #{session[:current_calendar_id]}"

    @calendar = Calendar.find_by(id: session[:current_calendar_id])
    unless @calendar
      logger.error "Calendar not found"
      flash[:alert] = 'カレンダーが見つかりません。'
      redirect_to calendars_path
      return
    end

    @q = Exercise.ransack(search_params)
    @exercises = @q.result
    logger.debug "Found Exercises: #{@exercises.map(&:name).join(', ')}"

    @exercise = @exercises.first if @exercises.any?
    @schedule = @calendar.schedules.new if @calendar
  end    

  def show
    logger.debug "SHOW: Exercise ID: #{params[:id]}, Calendar ID: #{session[:current_calendar_id]}"

    @calendar = Calendar.find_by(id: session[:current_calendar_id])
    unless @calendar
      logger.error "Calendar not found"
      flash[:alert] = 'カレンダーが見つかりません。'
      redirect_to calendars_path and return
    end

    @exercise = Exercise.find_by(id: params[:id])
    unless @exercise
      logger.error "Exercise not found"
      flash[:alert] = '筋トレが見つかりません。'
      redirect_to exercises_path and return
    end

    @schedule = @calendar.schedules.new(exercise: @exercise)
    logger.debug "Initialized New Schedule for Exercise: #{@exercise.name}"
  end  

  def autocomplete
    logger.debug "AUTOCOMPLETE: Query: #{params[:q]}"

    @exercises = Exercise.ransack(name_cont: params[:q]).result(distinct: true)
    logger.debug "Autocomplete Results: #{@exercises.map(&:name).join(', ')}"

    render json: @exercises.pluck(:name)
  end

  private

  def search_params
    logger.debug "SEARCH PARAMS: #{params[:q].inspect}"
    params.fetch(:q, {}).permit(:description_or_target_muscles_cont)
  end  
end

app/views/boolmarks/_already_bookmarked.js.erb

$("#bookmark-button-<%= @exercise.id %>").html('<%= icon "fas", "star" %>');
$("#bookmark-button-<%= @exercise.id %>").attr("href", "<%= exercise_bookmarks_path(@exercise) %>");
$("#bookmark-button-<%= @exercise.id %>").attr("data-method", "delete");

app/views/bookmarks/_exercise/row.html.erb

<div class="col-sm-12 col-lg-4 mb-3 exercise-card-<%= exercise.id %>">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title d-flex justify-content-between align-items-center">
        <%= link_to exercise.name, exercise_path(exercise) %>
        <%= render 'exercises/bookmark', exercise: exercise %>
      </h4>
      <p class="card-text">
        <strong>Difficulty:</strong> <%= exercise.difficulty %><br>
        <strong>Duration:</strong> <%= exercise.is_cardio? ? "#{exercise.minimum_reps_or_distance} m" : "#{exercise.minimum_reps_or_distance} reps" %>
      </p>
    </div>
  </div>
</div>

app/views/bookmarks/create.js.erb

$("#bookmark-button-<%= @exercise.id %>").html('<%= icon "fas", "star" %>');
$("#bookmark-button-<%= @exercise.id %>").attr("href", "<%= exercise_bookmarks_path(@exercise) %>");
$("#bookmark-button-<%= @exercise.id %>").attr("data-method", "delete");

app/views/bookmarks/destroy.js.erb

$("#bookmark-button-<%= @exercise.id %>").html('<%= icon "far", "star" %>');
$("#bookmark-button-<%= @exercise.id %>").attr("href", "<%= exercise_bookmarks_path(@exercise) %>");
$("#bookmark-button-<%= @exercise.id %>").attr("data-method", "post");

ap/views/exercises/_bookmark.html.erb

<% if user_signed_in? || line_user_signed_in? %>
  <% current_user_or_line_user = user_signed_in? ? current_user : line_user %>
  <% if current_user_or_line_user&.bookmarks&.exists?(exercise: exercise) %> 
    <%= link_to '<i class="fa-solid fa-star"></i>'.html_safe, 
                exercise_bookmark_path(exercise, current_user_or_line_user.bookmarks.find_by(exercise: exercise)), 
                method: :delete, 
                remote: true, 
                id: "bookmark-button-#{exercise.id}", 
                class: "bookmark-btn btn btn-warning" %>
  <% else %>
    <%= link_to '<i class="fa-regular fa-star"></i>'.html_safe, 
                exercise_bookmarks_path(exercise), 
                method: :post, 
                remote: true, 
                id: "bookmark-button-#{exercise.id}", 
                class: "bookmark-btn btn btn-warning" %>
  <% end %>
<% end %>

app/views/exercises/_exercise_row.html.erb

<div class="col-sm-12 col-lg-4 mb-3">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title d-flex justify-content-between align-items-center">
        <%= link_to exercise.name, exercise_path(exercise) %>
        <%= render 'exercises/bookmark', exercise: exercise %>
      </h4>
      <p class="card-text">
        <strong>Difficulty:</strong> <%= exercise.difficulty %><br>
        <strong>Duration:</strong> <%= exercise.is_cardio? ? "#{exercise.minimum_reps_or_distance} m" : "#{exercise.minimum_reps_or_distance} reps" %>
      </p>
      <%= link_to 'Add to Schedule', '#', class: "btn btn-success", 
            data: { bs_toggle: "modal", bs_target: "#scheduleModal", exercise_id: exercise.id } %>
    </div>
  </div>
  <!-- モーダル部分を読み込む -->
  <%= render 'schedule_modal', exercise: exercise %>
</div>

app/views/exercises/show.html.erb

<% if user_signed_in? || line_user_signed_in? %>
  <% current_user_or_line_user = user_signed_in? ? current_user : line_user %>
  <% if current_user_or_line_user&.bookmarks&.exists?(exercise: exercise) %> 
    <%= link_to icon("fas", "star").html_safe.html_safe, 
                exercise_bookmark_path(exercise, current_user_or_line_user.bookmarks.find_by(exercise: exercise)), 
                method: :delete, 
                remote: true, 
                id: "bookmark-button-#{exercise.id}", 
                class: "bookmark-btn btn btn-warning" %>
  <% else %>
    <%= link_to icon("far", "star").html_safe, 
                exercise_bookmarks_path(exercise), 
                method: :post, 
                remote: true, 
                id: "bookmark-button-#{exercise.id}", 
                class: "bookmark-btn btn btn-warning" %>
  <% end %>
<% end %>

エラーから考えられる原因ブックマーク一覧にて、枠線の星をクリックしたら、ブックマークに追加しようとするログが表示された。それにより、ブックマーク自体の登録がうまく行っていないため、削除できないとわかった。しかし、登録ができていないなら、なぜ、ブックマーク一覧に追加できるのかわからない。
試したこと destryコードの見直しをしていて、ログに気づきました。

kenchasonakai commented 3 days ago

ブックマークボタンをクリックして、ブックマーク一覧に追加されるが、ページ再読み込みにて星が枠線に戻ってしまう。

Bookmarkの登録が行われるが、リロードすると表示が意図したものになっていないのであれば、条件分岐やViewの見直しを行ったり検証するとよいかと思います。 1行・1メソッドすべて意味をきちんと理解して一つずつ見ていきましょう

<% if user_signed_in? || line_user_signed_in? %>
  <% current_user_or_line_user = user_signed_in? ? current_user : line_user %>
  <% if current_user_or_line_user&.bookmarks&.exists?(exercise: exercise) %> 
    <%= link_to '<i class="fa-solid fa-star"></i>'.html_safe, 
                exercise_bookmark_path(exercise, current_user_or_line_user.bookmarks.find_by(exercise: exercise)), 
                method: :delete, 
                remote: true, 
                id: "bookmark-button-#{exercise.id}", 
                class: "bookmark-btn btn btn-warning" %>
  <% else %>
    <%= link_to '<i class="fa-regular fa-star"></i>'.html_safe, 
                exercise_bookmarks_path(exercise), 
                method: :post, 
                remote: true, 
                id: "bookmark-button-#{exercise.id}", 
                class: "bookmark-btn btn btn-warning" %>
  <% end %>
<% end %>

kodamarisa commented 3 days ago

調べたら、current_user_or_line_userがnilであるためにブックマーク情報が取れていない状態でした。なので、現在、ログイン動作でcurrent_user_or_line_userに値が渡されるかを確認しようとログアウトし、ログインをしようとしたところ、ログインにてユーザーに紐づいたカレンダーとそのカレンダーに紐づいたスケジュールが呼び出されず、別の問題が出ています。なので、別のissuesを使用し、それについての質問を行います。

kodamarisa / osinotameni_yasetai

ブックマークのアイコン表示について #50