Merge pull request #5 from metacorn/Part_6_AJAX_in_Rails

Part 6. AJAX in Rails.

Gemfile

@@ -17,6 +17,8 @@ gem 'uglifier', '>= 1.3.0'
 # gem 'mini_racer', platforms: :ruby
 # Devise
 gem 'devise'
+# JS
+gem 'jquery-rails'
 
 # Use CoffeeScript for .coffee assets and views
 gem 'coffee-rails', '~> 4.2'
@@ -61,7 +63,9 @@ end
 group :test do
   # Adds support for Capybara system testing and selenium driver
   gem 'capybara', '>= 2.15'
+  gem 'selenium-webdriver'
   # Easy installation and use of chromedriver to run system tests with Chrome
+  gem 'webdrivers', '~> 4.0'
   gem 'shoulda-matchers'
   gem 'rails-controller-testing'
   gem 'launchy'

Gemfile.lock

@@ -59,6 +59,8 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (~> 1.5)
       xpath (~> 3.2)
+    childprocess (1.0.1)
+      rake (< 13.0)
     coffee-rails (4.2.2)
       coffee-script (>= 2.2.0)
       railties (>= 4.0.0)
@@ -89,6 +91,10 @@ GEM
       concurrent-ruby (~> 1.0)
     jbuilder (2.9.1)
       activesupport (>= 4.2.0)
+    jquery-rails (4.3.5)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
     launchy (2.4.3)
       addressable (~> 2.3)
     listen (3.1.5)
@@ -107,7 +113,7 @@ GEM
     mini_mime (1.0.1)
     mini_portile2 (2.4.0)
     minitest (5.11.3)
-    msgpack (1.2.10)
+    msgpack (1.3.0)
     nio4r (2.3.1)
     nokogiri (1.10.3)
       mini_portile2 (~> 2.4.0)
@@ -172,6 +178,7 @@ GEM
       rspec-support (~> 3.8.0)
     rspec-support (3.8.2)
     ruby_dep (1.5.0)
+    rubyzip (1.2.3)
     sass (3.7.4)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
@@ -183,6 +190,9 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    selenium-webdriver (3.142.3)
+      childprocess (>= 0.5, < 2.0)
+      rubyzip (~> 1.2, >= 1.2.2)
     shoulda-matchers (4.1.0)
       activesupport (>= 4.2.0)
     slim (4.0.1)
@@ -221,6 +231,10 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
+    webdrivers (4.0.1)
+      nokogiri (~> 1.6)
+      rubyzip (~> 1.0)
+      selenium-webdriver (>= 3.0, < 4.0)
     websocket-driver (0.7.1)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.4)
@@ -238,6 +252,7 @@ DEPENDENCIES
   devise
   factory_bot_rails
   jbuilder (~> 2.5)
+  jquery-rails
   launchy
   listen (>= 3.0.5, < 3.2)
   pg (>= 0.18, < 2.0)
@@ -246,6 +261,7 @@ DEPENDENCIES
   rails-controller-testing
   rspec-rails (~> 3.8)
   sass-rails (~> 5.0)
+  selenium-webdriver
   shoulda-matchers
   slim-rails
   spring
@@ -254,6 +270,7 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
+  webdrivers (~> 4.0)
 
 RUBY VERSION
    ruby 2.6.3p62

app/assets/javascripts/answers.js

@@ -0,0 +1,8 @@
+$(document).on('turbolinks:load', function() {
+  $('.answers').on('click', '.edit-answer-links', function(e) {
+    e.preventDefault()
+    $(this).hide()
+    var answerId = $(this).data('answerId')
+    $('form#edit-answer-' + answerId).show()
+  })
+})

app/assets/javascripts/application.js

@@ -13,4 +13,5 @@
 //= require rails-ujs
 //= require activestorage
 //= require turbolinks
+//= require jquery3
 //= require_tree .

app/assets/javascripts/questions.js

@@ -0,0 +1,8 @@
+$(document).on('turbolinks:load', function() {
+  $('.edit-question-link').on('click', function(e) {
+    e.preventDefault()
+    $(this).hide()
+    var questionId = $(this).data('questionId')
+    $('form#edit-question-' + questionId).show()
+  })
+})

app/assets/stylesheets/common.scss

@@ -0,0 +1,3 @@
+.hidden {
+  display: none
+}

app/controllers/answers_controller.rb

@@ -1,5 +1,6 @@
 class AnswersController < ApplicationController
   before_action :authenticate_user!
+  before_action :set_answer, only: %i[update destroy mark]
 
   def new
     @answer = Answer.new
@@ -9,25 +10,33 @@ def create
     @question = Question.find(params[:question_id])
     @answer = @question.answers.new(answer_params)
     @answer.user = current_user
+    @answer.save
+  end
 
-    if @answer.save
-      redirect_to @question, notice: "Your answer was saved."
-    else
-      flash[:alert] = "Your answer was not saved."
-      render "questions/show"
-    end
+  def update
+    return head :forbidden unless current_user.owner?(@answer)
+    @answer.update(answer_params)
+    @question = @answer.question
   end
 
   def destroy
-    answer = Answer.find(params[:id])
-    return head :forbidden unless current_user.owned?(answer)
-    answer.destroy
-    redirect_to answer.question, notice: "Your answer was successfully deleted!"
+    return head :forbidden unless current_user.owner?(@answer)
+    @answer.destroy
+  end
+
+  def mark
+    return head :forbidden unless current_user.owner?(@answer.question)
+    @answer.mark_as_best
+    @question = @answer.question
   end
 
   private
 
   def answer_params
     params.require(:answer).permit(:body)
   end
+
+  def set_answer
+    @answer = Answer.find(params[:id])
+  end
 end

app/controllers/questions_controller.rb

@@ -29,15 +29,12 @@ def create
   end
 
   def update
-    if @question.update(question_params)
-      redirect_to @question
-    else
-      render :edit
-    end
+    return head :forbidden unless current_user.owner?(@question)
+    @question.update(question_params)
   end
 
   def destroy
-    return head :forbidden unless current_user.owned?(@question)
+    return head :forbidden unless current_user.owner?(@question)
     @question.destroy
     redirect_to questions_path, notice: "Your question was successfully deleted!"
   end

app/models/answer.rb

@@ -2,6 +2,32 @@ class Answer < ApplicationRecord
   belongs_to :user
   belongs_to :question
 
+  default_scope { order(best: :desc, created_at: :asc) }
+  scope :best, -> { where(best: true) }
+
   validates :body,  presence: true,
                     length: { minimum: 50 }
+  validate :only_one_best_per_question
+
+  def mark_as_best
+    transaction do
+      question.answers.best.update_all(best: false)
+      self.update!(best: true)
+    end
+  end
+
+  private
+
+  def only_one_best_per_question
+    return unless best?
+    return unless question&.answers.best.any?
+
+    if persisted?
+      # update
+      errors.add(:best, :there_is_the_best_answer_in_question_already) if changes['best'] == [false, true]
+    else
+      # create
+      errors.add(:best, :there_is_the_best_answer_in_question_already)
+    end
+  end
 end

app/models/user.rb

@@ -8,7 +8,7 @@ class User < ApplicationRecord
           :rememberable,
           :validatable
 
-  def owned?(content)
+  def owner?(content)
     content.user_id == id
   end
 end

app/views/answers/_answer.html.slim

@@ -1,2 +1,12 @@
-p= answer.body
-p= render(partial: 'shared/manage_answer_links', locals: { answer: answer }) if current_user&.owned?(answer)
+div id="answer_#{answer.id}"
+  - if answer.persisted?
+    - if answer.best?
+      div id="best-answer"
+        h4 The best answer
+    p= answer.body
+    p= render(partial: 'shared/answer_links', locals: { answer: answer })
+
+  = form_with model: answer, class: 'hidden', html: { id: "edit-answer-#{answer.id}" } do |f|
+    = f.label :body, 'Your answer'
+    = f.text_area :body
+    = f.submit 'Update'

app/views/answers/create.js.erb

@@ -0,0 +1,5 @@
+$('.answer-errors').html('<%= render 'shared/errors', resource: @answer %>')
+<% if @answer.persisted? %>
+  $('.answers').append('<%= j render @answer %>')
+  $('.new-answer #answer_body').val('')
+<% end %>

app/views/answers/destroy.js.erb

@@ -0,0 +1 @@
+$('#answer_' + <%= @answer.id %>).remove()

app/views/answers/mark.js.erb

@@ -0,0 +1 @@
+$('.answers').html('<%= j render @question.answers %>')

app/views/answers/update.js.erb

@@ -0,0 +1,4 @@
+$('.answer-errors').html('<%= render 'shared/errors', resource: @answer %>')
+<% if @answer.errors.empty? %>
+  $("#answer_" + <%= @answer.id %>).replaceWith('<%= j render @answer %>')
+<% end %>

app/views/layouts/application.html.erb

@@ -10,9 +10,7 @@
   </head>
 
   <body>
-    <p align="right">
-      <%= render 'shared/user_nav' %>
-    </p>
+    <%= render 'shared/user_nav' %>
     <p class="notice"><%= notice %></p>
     <p class="alert"><%= alert %></p>
     <%= yield %>

app/views/questions/_question_for_show.html.slim

@@ -0,0 +1,11 @@
+h4= @question.title
+p= @question.body
+=render(partial: 'shared/question_links', locals: { question: @question }) if current_user&.owner?(@question)
+.question-errors
+  =render 'shared/errors', resource: @question
+= form_with model: @question, class: 'hidden', html: { id: "edit-question-#{@question.id}" } do |f|
+  = f.label :title
+  = f.text_field :title
+  = f.label :body, 'Body'
+  = f.text_area :body
+  = f.submit 'Update'

app/views/questions/show.html.slim

@@ -1,12 +1,12 @@
-= render 'shared/errors', resource: @answer
-
-=render(partial: 'shared/manage_question_links', locals: { question: @question }) if current_user&.owned?(@question)
-h4= @question.title
-p= @question.body
-p Answers
-p= render @question.reload.answers
+div id="question_#{@question.id}"
+  = render 'question_for_show', resource: @question
+h4 Answers
+div.answers
+  = render @question.answers
 p Your answer
-= form_with model: @answer, url: question_answers_path(@question), local: true do |f|
+.answer-errors
+  = render 'shared/errors', resource: @answer
+= form_with model: [@question, @answer], class: 'new-answer' do |f|
   = f.label :body
   = f.text_area :body
   = f.submit 'Leave'

app/views/questions/update.js.erb

@@ -0,0 +1,4 @@
+$('.question-errors').html('<%= render 'shared/errors', resource: @question %>')
+<% if !@question.errors.present? %>
+  $("#question_" + <%= @question.id %>).html('<%= j render 'question_for_show', resource: @question %>')
+<% end %>

app/views/shared/_answer_links.html.slim

@@ -0,0 +1,7 @@
+p
+  => link_to('Mark as the best', mark_answer_path(answer), method: :post, remote: true) \
+  if current_user&.owner?(answer.question) && !answer.best?
+  => link_to('Edit', '#', class: 'edit-answer-links', data: { answer_id: answer.id }) \
+  if current_user&.owner?(answer)
+  = link_to('Delete', answer_path(answer), method: :delete, remote: true) \
+  if current_user&.owner?(answer)

app/views/shared/_question_links.html.slim

@@ -0,0 +1,3 @@
+p
+  => link_to 'Edit', '#', class: 'edit-question-link', data: { question_id: question.id }
+  = link_to 'Delete', question_path(question), method: :delete

app/views/shared/_user_nav.html.slim

@@ -1 +1,7 @@
-p= link_to 'Log out', destroy_user_session_path, method: :delete
+- if current_user
+  p= link_to 'Log out', destroy_user_session_path, method: :delete
+- else
+  p
+  = link_to 'Log in', new_user_session_path
+  | | 
+  = link_to 'Sign up', new_user_registration_path

config/routes.rb

@@ -3,6 +3,10 @@
   root to: "questions#index"
 
   resources :questions do
-    resources :answers, shallow: true, except: %i[index show]
+    resources :answers, shallow: true, except: %i[index show] do
+      member do
+        post :mark
+      end
+    end
   end
 end

db/migrate/20190624142356_add_best_to_answers.rb

@@ -0,0 +1,5 @@
+class AddBestToAnswers < ActiveRecord::Migration[5.2]
+  def change
+    add_column :answers, :best, :boolean, default: false
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2019_06_18_204807) do
+ActiveRecord::Schema.define(version: 2019_06_24_142356) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -21,6 +21,7 @@
     t.datetime "updated_at", null: false
     t.bigint "question_id"
     t.bigint "user_id"
+    t.boolean "best", default: false
     t.index ["question_id"], name: "index_answers_on_question_id"
     t.index ["user_id"], name: "index_answers_on_user_id"
   end