About adding a like function

Like function in asynchronous communication

I've been having an affair with Java for a while, and when I touched a personal application (Ruby) for the first time in a while, I had a lot of memory, so I installed a like function to remember it. I implemented it while looking at various articles, so it is a memo to summarize for myself. Until you can like by associating user and article and pressing a button.

Attention ... It is an explanation from the state where the shape as an application has already been made to some extent

① Addition of model and table

Modify the migration file with rails g model favorite

Migration file


class CreateFavorites < ActiveRecord::Migration[5.2]
  def change
    create_table :favorites do |t|
      t.references :user, null: false, foreign_key: true
      t.references :article, null: false, foreign_key: true
      t.timestamps
    end
  end
end

Then rails db: migrate

Add association to model

user.rb


  has_many :favorites, dependent: :destroy
  has_many :favorite_articles, through: :favorites, source: :article

article.rb


  has_many :favorites, dependent: :destroy
  has_many :favorite_users, through: :favorites, source: :user

favorite.rb


  belongs_to :user
  belongs_to :article

  validates :user_id, presence: true
  validates :article_id, presence: true
  validates_uniqueness_of :article_id, scope: :user_id

(2) Addition of controller (in addition to routing)

Add favorite controller with rails g controller favorites And add as follows

favorites_contoroller.rb


before_action :set_article, only: [:create, :destroy]

  def create
    @favorite = Favorite.create(user_id: current_user.id, article_id: @article.id)
  end

  def destroy
    @favorite = Favorite.find_by(user_id: current_user.id, article_id: @article.id)
    @favorite.destroy
  end

  private
  def set_article
    @article = Article.find(params[:article_id])
  end

Edit routing

routes.rb


  resources :articles do
    resources :favorites , only: [:create, :destroy] #Postscript
  end

③ Edit view

Add a like button using a partial template

view


.content
  = render "layouts/favorite", article: @article

ruby:_favorite.html.haml


.content__favorite{id: "like-#{@article.id}"}
  - if Favorite.find_by(user_id: current_user.id, article_id: article.id)
    .btn1
      = link_to article_favorite_path(article.id, current_user.id), method: :delete, class: "like-delete", remote: true do
        = icon('fa', 'star')
Favorite added
        = article.favorites.length
  - else
    .btn2
      = link_to article_favorites_path(article.id), method: :post, class: "like-create", remote: true do
        = icon('fa', 'star')
favorite
        = article.favorites.length

If remote: true is added, ajax will start when you step on the link.

④ Make the button asynchronous communication

Create and add create.js.haml and destroy.js.haml files

ruby:views/favorites/create.js.haml


$("#like-#{@article.id}").html("#{j(render partial: 'layouts/favorite', locals: { article: @article })}");

ruby:views/favorites/destroy.js.haml


$("#like-#{@article.id}").html("#{j(render partial: 'layouts/favorite', locals: { article: @article })}");

It seems that the file is reloaded when the button is pressed by referring to the id attached to the button.

After that, if you arrange the appearance of the buttons neatly, it will be completed.

Referenced articles https://qiita.com/yummy888/items/2b7708a498861e5ba733 https://qiita.com/nojinoji/items/2c66499848d882c31ffa

Recommended Posts

About adding a like function
[Rails] About implementation of like function
[Swift] A note about function and closure
A note about adding Junit 4 to Android Studio
Q & A about JDK
About the function double-java
Do something like a JS immediate function in Ruby
A note about Java GC
A note about the scope
A note about the seed function of Ruby on Rails
A private note about AtomicReference
[Rails] Implementation of like function
Create a name input function
A note about RocksDB's Column Families
[Rails] Asynchronous implementation of like function
Add a search function in Rails.
[Rails] About the Punk List function
User evaluation using the like function
About error handling of comment function
Implement a like feature for posts
Create a filtering function using acts-as-taggable-on
A murmur about the utility class
I made a simple recommendation function.
[Rails 6] Like function (synchronous → asynchronous) implementation
A little summary about typesafe config
Call a C function from Swift
Implementation of like function in Java