フォロー機能を非同期で実装

Question

ご回答いただけるとありがたいです。よろしくお願いします！

実現したいこと

フォロー機能を非同期で実装したいです。

現状

以下のコードでフォロー機能は実装済みです。

該当のソースコード

class CreateRelationships < ActiveRecord::Migration[6.0]
  def change
    create_table :relationships do |t|
      t.references :user, foreign_key: true
      t.references :follow, foreign_key: { to_table: :users }
      t.timestamps
      t.index [:user_id, :follow_id], unique: true
    end
  end
end

#User
(省略)
  has_many :relationships
  has_many :followings, through: :relationships, source: :follow
  has_many :reverse_of_relationships, class_name: 'Relationship', foreign_key: 'follow_id'
  has_many :followers, through: :reverse_of_relationships, source: :user

  def follow(other_user)
    unless self == other_user
      self.relationships.find_or_create_by(follow_id: other_user.id)
    end
  end

  def unfollow(other_user)
    relationship = self.relationships.find_by(follow_id: other_user.id)
    relationship.destroy if relationship
  end

  def following?(other_user)
    self.followings.include?(other_user)
  end

end


#Relationship
class Relationship < ApplicationRecord
  belongs_to :user
  belongs_to :follow, class_name: 'User'

  validates :user_id, presence: true
  validates :follow_id, presence: true
end

#relationships
class RelationshipsController < ApplicationController
  before_action :set_user, only: [:create, :destroy]

  def create
    following = current_user.follow(@user)
    following.save
    redirect_back(fallback_location: root_path)
  end

  def destroy
    following = current_user.unfollow(@user)
    following.destroy
    redirect_back(fallback_location: root_path)
  end

  private

  def set_user
    @user = User.find(params[:follow_id])
  end

end

#relationships/_follow_btn
<% unless current_user == user %>
  <% if current_user.following?(user) %>
    <%= form_for(current_user.relationships.find_by(follow_id: user.id), html: { method: :delete }) do |f| %>
      <%= hidden_field_tag :follow_id, user.id %>
      <div class="following-button">
        <%= f.submit 'フォロー中', class: 'follow-btn following-btn' %>
      </div>
    <% end %>
  <% else %>
    <%= form_for(current_user.relationships.build) do |f| %>
      <%= hidden_field_tag :follow_id, user.id %>
      <%= f.submit 'フォローする', class: 'follow-btn unfollow-btn' %>
    <% end %>
  <% end %>
<% end %>


#users/show
(省略)
<%= render partial: "/relationships/follow_btn", locals: { user: @user } %>
(省略)

この状態では、「フォローする」をクリックしたら、自動でリロードが行われフォローすることができます。
「フォロー中」をクリックしたら、自動でリロードが行われ、フォローを解除することができます。
しかし、非同期で実装したいと思い、以下を参考に実装してみました。
Ajaxを用いた非同期フォロー機能の実装
Ajaxを用いて非同期でフォロー機能の実装

###試したこと

#users/show
(省略)
<div class="follow-button<%= @user.id %>">
  <%= render partial: "/relationships/follow_btn", locals: { user: @user } %>
</div>
(省略)


#relationships/_follow_btn
<% unless current_user == user %>
  <% if current_user.following?(user) %>
    <%= form_for(current_user.relationships.find_by(follow_id: user.id), url: relationship_path(user), html: { method: :delete }, remote: true) do |f| %>
      <%= hidden_field_tag :follow_id, user.id %>
      <div class="following-button">
        <%= f.submit 'フォロー中', class: 'follow-btn following-btn' %>
        <%= f.submit 'フォローを解除', class: 'follow-btn following-btn-hover' %>
      </div>
    <% end %>
  <% else %>
    <%= form_for(current_user.relationships.build, url: relationships_path(user), remote: true) do |f| %>
      <%= hidden_field_tag :follow_id, user.id %>
      <%= f.submit 'フォローする', class: 'follow-btn unfollow-btn' %>
    <% end %>
  <% end %>
<% end %>


#create.js.erb
$("#follow-button<%= @user.id %>").html("<%= j(render partial: "relationships/follow-btn", locals: { user: @user })%>");


#destroy.js.erb
$("#follow-button<%= @user.id %>").html("<%= j(render partial: "relationships/follow-btn", locals: { user: @user })%>");

これで「フォローする」をクリックすると、データベースで見るとフォローはできているのですが、自動でリロードされず、手動でリロードすると「フォロー中」という表示に変わります。
非同期どころか、自動でリロードもされない形になってしまいました。

###試したこと
views/users/showの<div class="follow-button<%= @user.id %>">~</div>をviews/relationships/_follow_btnに記述。

<% unless current_user == user %>
  <div class="follow-button<%= user.id %>">
    <% if current_user.following?(user) %>
      <%= form_for(current_user.relationships.find_by(follow_id: user.id), url: relationship_path(user), html: { method: :delete }, remote: true) do |f| %>
        <%= hidden_field_tag :follow_id, user.id %>
        <div class="following-button">
          <%= f.submit 'フォロー中', class: 'follow-btn following-btn' %>
          <%= f.submit 'フォローを解除', class: 'follow-btn following-btn-hover' %>
        </div>
      <% end %>
    <% else %>
      <%= form_for(current_user.relationships.build, url: relationships_path(user), remote: true) do |f| %>
        <%= hidden_field_tag :follow_id, user.id %>
        <%= f.submit 'フォローする', class: 'follow-btn unfollow-btn' %>
      <% end %>
    <% end %>
  </div>
<% end %>

create.js.erbの@userをuserに変える

$("#follow-button<%= user.id %>").html("<%= j(render partial: "relationships/follow-btn", locals: { user: user })%>");

結果は変わりませんでした。
以上になります。ご助言いただけると幸いです。

Answer 1

• apiを用意し
• 非同期でなげ
• JSONで戻り値をえて
• HTMLに反映する

Comments

[shawn_709]

ご回答ありがとうございます！！
すみません。初心者でその方法がわかりません。
よろしければ、コード等で教えていただけると助かります。

[yambejp]

rubyは専門外なのでrubyでapiをつくるソースは提示できません。
非同期で投げるのはjsのfetchでできます