Add favorite/unfavorite button

Gemfile

@@ -24,6 +24,7 @@ gem "jbuilder", "~> 2.7"
 
 # Use Active Storage variant
 # gem "image_processing", "~> 1.2"
+gem "jquery-rails", "4.3.1"
 
 # Reduces boot times through caching; required in config/boot.rb
 gem "bootsnap", ">= 1.4.2", require: false

Gemfile.lock

@@ -133,6 +133,10 @@ GEM
       concurrent-ruby (~> 1.0)
     jbuilder (2.9.1)
       activesupport (>= 4.2.0)
+    jquery-rails (4.3.1)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
     kaminari (1.1.1)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.1.1)
@@ -302,6 +306,7 @@ DEPENDENCIES
   config
   devise
   jbuilder (~> 2.7)
+  jquery-rails (= 4.3.1)
   kaminari
   listen (>= 3.0.5, < 3.2)
   mechanize

app/assets/javascripts/application.js

+//= require jquery
 //= require bootstrap.min
+//= require rails-ujs
+//= require turbolinks
+//= require_tree .

app/controllers/favorites_controller.rb

+class FavoritesController < ApplicationController
+  before_action :check_user_logged_in?
+  before_action :load_job
+
+  def index
+    @favorites = current_user.favorites.includes(:job)
+  end
+
+  def create
+    @favorite = current_user.favorites.find_or_create_by(job_id: @job.id)
+  end
+
+  def destroy
+    @favorite = current_user.favorites.find(params[:id])
+    @favorite.destroy
+  end
+
+  private
+
+  def load_job
+    @job = Job.find_by(id: params[:job_id])
+  end
+end

app/javascript/packs/application.js

@@ -7,6 +7,7 @@ require("@rails/ujs").start()
 require("turbolinks").start()
 require("@rails/activestorage").start()
 require("channels")
+require("jquery")
 
 
 // Uncomment to copy all static images under ../images to the output folder and reference

app/models/job.rb

@@ -5,6 +5,7 @@ class Job < ApplicationRecord
   has_many :cities, through: :city_jobs
   has_many :industries, through: :industry_jobs
   has_many :applies
+  has_many :favorites
 
   def self.latest_jobs
     @latest ||= order(created_at: :desc).take(Settings.top.job.limit)

app/views/favorites/_favorite.html.erb

+<% job = favorite.job %>
+<dl class="row-2">
+  <dt class="col-sm-6">Job Title:</dt>
+  <dd class="col-sm-9">
+    <%= job.title %>
+  </dd>
+
+  <dt class="col-sm-6">Position:</dt>
+  <dd class="col-sm-9">
+    <%= job.position%>
+  </dd>
+
+  <dt class="col-sm-6">Salary:</dt>
+  <dd class="col-sm-9"><%= job.salary %></dd>
+
+  <dt class="col-sm-6">Description:</dt>
+  <dd class="col-sm-9">
+    <%= truncate(simple_format(job.description), escape: false, length: 200) %>
+  </dd>
+
+  <dt class="col-sm-6">Requirement: </dt>
+  <dd class="col-sm-9">
+    <%= truncate(simple_format(job.requirement), escape: false, length: 200) %>
+  </dd>
+</dl>

app/views/favorites/_favorite_form.html.erb

+<% if user_signed_in? %>
+  <div id = "favorite_form">
+  <% if current_user.favorites.exists?(job_id: job.id) %>
+    <%= render "favorites/unfavorite_job", job: job,
+      favorite: current_user.favorites.find_by(job_id: job.id) %>
+  <% else %>
+    <%= render "favorites/favorite_job", job: job %>
+  <% end %>
+  </div>
+<% end %>

app/views/favorites/_favorite_job.html.erb

+<%= link_to "Favorite", job_favorites_path(job, current_user.favorites.build),
+                        method: :post,
+                        remote: true,
+                        class: "btn btn-outline-secondary" %>

app/views/favorites/_unfavorite_job.html.erb

+<%= link_to "Unfavorite", job_favorite_path(job, favorite),
+                          method: :delete,
+                          remote: true,
+                          class: "btn btn-outline-secondary" %>

app/views/favorites/create.js.erb

+$("#favorite_form").html("<%= escape_javascript(render('favorites/unfavorite_job', job: @job, favorite: current_user.favorites.find_by(job_id: @job.id))) %>");

app/views/favorites/destroy.js.erb

+$("#favorite_form").html("<%= escape_javascript(render('favorites/favorite_job', job: @job )) %>");

app/views/favorites/index.html.erb

+<div class="area-title-wrapper">
+  <h3>Favorite Jobs List</h3>
+</div>
+<div>
+  <div class="row row-cols-3">
+    <%= render partial: "favorites/favorite", collection: @favorites %>
+  </div>
+</div>

app/views/jobs/_job.html.erb

 <dl class="row">
   <dt class="col-sm-3">Job Title:</dt>
   <dd class="col-sm-9">
-    <%= link_to (simple_format job.title), job_path(job_id: job.id) %>
+    <%= link_to (simple_format job.title), job_detail_path(job_id: job.id) %>
   </dd>
 
   <dt class="col-sm-3">Position:</dt>

app/views/jobs/show.html.erb

@@ -50,5 +50,6 @@
         <dd class="col-sm-9"><%= simple_format @job.requirement %></dd>
       </dl>
       <%= link_to "Apply", apply_path, class: "btn btn-primary" %>
+      <%= render "favorites/favorite_form", job: @job %>
     </div>
   </div

app/views/layouts/_header.html.erb

@@ -6,7 +6,7 @@
   <nav class="navbar navbar-light bg-light">
     <% if user_signed_in? %>
       <%= link_to "Log out", destroy_user_session_path, method: :delete, class: "btn btn-outline-success" %>
-      <button class="btn btn-outline-success" type="button">Favorite</button>
+      <%= link_to "Favorite", favorites_path, method: :get, class: "btn btn-outline-success" %>
       <button class="btn btn-outline-success" type="button">History</button>
     <% else %>
       <form class="form-inline">

app/views/top/_job.html.erb

 <div class="row align-items-center">
   <div class="col text-center">
-    <%= link_to "#{job.title}", job_path(job.id) %>
+    <%= link_to "#{job.title}", job_detail_path(job.id) %>
   </div>
 </div>
 </br>

config/application.rb

@@ -11,6 +11,9 @@ module VenJob
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 6.0
 
+    # Include the authenticity token in remote forms.
+    config.action_view.embed_authenticity_token_in_remote_forms = true
+
     # Settings in config/environments/* take precedence over those specified here.
     # Application configuration can go into files in config/initializers
     # -- all .rb files in that directory are automatically loaded after loading

config/routes.rb

 Rails.application.routes.draw do
   root "top#index"
+  devise_for :users
+
+  concern :paginatable do
+    get "(page/:page)", action: :index, on: :collection, as: ""
+  end
+
   resources :cities, only: :index
   resources :industries, only: :index
   resources :top, only: :index
   resources :users, only: :show
-  devise_for :users
+  resources :favorites, only: :index
+
+  resources :jobs, only: :show, concerns: :paginatable do
+    resources :favorites, only: [:create, :destroy]
+  end
+
   as :user do
     get "login" , to: "devise/sessions#new"
     get "registration/", to: "devise/registrations#new"
@@ -20,14 +31,8 @@ Rails.application.routes.draw do
 
   get "jobs/city/:city_id", to: "jobs#index", as: "city_jobs"
   get "jobs/industry/:industry_id", to: "jobs#index", as: "industry_jobs"
-  get "detail/:job_id", to: "jobs#show", as: "job"
+  get "detail/:job_id", to: "jobs#show", as: "job_detail"
   get "apply/:job_id", to: "apply#new", as: "apply"
   post "confirm/:job_id", to: "apply#confirm", as: "confirm"
   post "done/:job_id", to: "apply#done", as: "done"
-
-  concern :paginatable do
-    get "(page/:page)", action: :index, on: :collection, as: ""
-  end
-
-  resources :jobs, only: :show, concerns: :paginatable
 end

config/webpack/environment.js

 const { environment } = require('@rails/webpacker')
 
+const webpack = require('webpack')
+environment.plugins.prepend('Provide',
+  new webpack.ProvidePlugin({
+    $: 'jquery/src/jquery',
+    jQuery: 'jquery/src/jquery'
+  })
+)
 module.exports = environment

package.json

@@ -6,6 +6,7 @@
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "^4.2.0",
+    "jquery": "^3.4.1",
     "turbolinks": "^5.2.0"
   },
   "version": "0.1.0",

yarn.lock

@@ -3792,6 +3792,11 @@ jest-worker@^24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
+jquery@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
+  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
+
 js-base64@^2.1.8:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"