[Rails 6] Asynchronous (Ajax) follow function is implemented

Premise

--Created functions related to users with devise --Environment where jquery can be used has been built

Overview

The Rails Tutorial has a detailed description of how the follow function works, so we recommend that you refer to it. The column names and model names used this time are as follows. It's just a memo, but I'll put it for reference.

Create a Relationship model

Create a relationship model in the console

rails g model relationships

--Reference --Follower: Refer to the user table --Follow: Refer to the user table with the name follow

• index --Added composite key index so that user_id and follow_id do not match ――This will prevent you from "following yourself"

20210104064312_create_relationships.rb

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

Perform migration

rails db:migrate

The relationship between the relationship model and the user model is described as follows. Also describe validation.

relationship.rb

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

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

――For the association, please refer to the above image. --The "Follow", "Unfollow", and "Check if you are following" methods are used many times, so define them.

relationship.rb

class User < ApplicationRecord
  has_many :relationships, dependent: :destroy
  has_many :followings, through: :relationships, source: :follow
  has_many :reverse_of_relationships, class_name: 'Relationship', foreign_key: 'follow_id', dependent: :destroy
  has_many :followers, through: :reverse_of_relationships, source: :user

  def follow(other_user_id)
    relationships.find_or_create_by(follow_id: other_user_id) unless id == other_user_id.to_i
  end

  def unfollow(other_user_id)
    relationship = relationships.find_by(follow_id: other_user_id)
    relationship.destroy if relationship
  end

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

Creating a view controller

--In the case of your own user page, the "Edit button" will be displayed, and in the case of other user pages, the "Follow button" will be displayed.

erb:app/views/users/show.html.erb

<div>
  <% if @user.id == current_user.id %>
    <%= link_to 'Edit', edit_user_registration_path(current_user) %>
  <% else %>
    <%= render partial: 'follow' %>
    <%= render partial: 'follow_count'%>
  <% end %>
</div>

erb:app/views/users/_follow.html.erb

<span id="follow">
  <%= follow_button(@user) %>
</span>

--Defines follow_button. --If you are using Bootstrap, you can change the color of the button because the key will be primary or secondary depending on whether you are following or not. (If you don't use Bootstrap, you can delete it.) --Ajax communication can be performed by entering remote: true.

erb:app/helpers/application_helper.html.erb

module ApplicationHelper
  def follow_button(user)
    label, key = current_user.following?(user) ? %w[Following secondary] : %w[Follow primary]
    link_to(label, user_follow_path(@user), method: :post, remote: true, class: "btn btn-#{key} rounded-pill")
  end
end

--Written in javascript. --The id in html can render the contents of follow.

erb:app/views/users/follow.js.erb

$('#follow').html('<%= j(render partial: "follow") %>');

――Don't forget to change the route. --post Must be specified for communication.

routes.rb

Rails.application.routes.draw do
  resources :users, only: %w[index show] do
    post :follow
  end
end

Finally

With @ user.followers.count and @ user.followings.count, it is possible to count and display the number of followers and followers. If you can understand this article, you can easily implement it with Ajax, so please try it.