Merge pull request #18 from sad16/7-ajax

ajax

Gemfile

@@ -38,10 +38,12 @@ gem 'bootsnap', '>= 1.1.0', require: false
 
 gem 'slim-rails'
 gem 'devise'
+gem 'jquery-rails'
 
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
+  gem 'pry-rails'
 
   gem 'rspec-rails', '~> 3.8'
   gem 'factory_bot_rails'

Gemfile.lock

@@ -66,6 +66,7 @@ GEM
     chromedriver-helper (2.1.0)
       archive-zip (~> 0.10)
       nokogiri (~> 1.8)
+    coderay (1.1.3)
     coffee-rails (4.2.2)
       coffee-script (>= 2.2.0)
       railties (>= 4.0.0)
@@ -98,6 +99,10 @@ GEM
     jbuilder (2.8.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
+    jquery-rails (4.4.0)
+      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)
@@ -123,6 +128,11 @@ GEM
       mini_portile2 (~> 2.4.0)
     orm_adapter (0.5.0)
     pg (1.1.4)
+    pry (0.12.2)
+      coderay (~> 1.1.0)
+      method_source (~> 0.9.0)
+    pry-rails (0.3.9)
+      pry (>= 0.10.4)
     public_suffix (3.0.3)
     puma (3.12.0)
     rack (2.0.6)
@@ -254,9 +264,11 @@ DEPENDENCIES
   devise
   factory_bot_rails
   jbuilder (~> 2.5)
+  jquery-rails
   launchy
   listen (>= 3.0.5, < 3.2)
   pg (>= 0.18, < 2.0)
+  pry-rails
   puma (~> 3.11)
   rails (~> 5.2.2)
   rails-controller-testing

app/assets/javascripts/answers.js

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

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(){
+  $('.question').on('click', '.edit-question-link', function(e) {
+    e.preventDefault();
+    $(this).addClass('hidden');
+    var questionId = $(this).data('questionId');
+    $('form#edit-question-form-' + questionId).removeClass('hidden');
+  })
+});

app/assets/stylesheets/answers.scss

@@ -1,3 +1,13 @@
 // Place all the styles related to the Answers controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+.answers {
+  .best {
+    border: 2px solid green;
+
+    .mark-as-best {
+      display: none;
+    }
+  }
+}

app/assets/stylesheets/common.scss

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

app/controllers/answers_controller.rb

@@ -1,27 +1,43 @@
 class AnswersController < ApplicationController
-  before_action :authenticate_user!, only: [:create, :destroy]
+  before_action :authenticate_user!
   before_action :find_question, only: [:create]
-  before_action :find_answer, only: [:destroy]
+  before_action :find_answer, only: [:update, :destroy, :mark_as_best]
 
   def create
     @answer = @question.answers.new(answer_params)
     @answer.user = current_user
 
     if @answer.save
-      redirect_to @question, notice: "The answer has been successfully created"
+      @notice = "The answer has been successfully created"
     else
-      render 'questions/show'
+      @alert = "The answer has not been created"
     end
   end
 
-  def destroy
-    question = @answer.question
+  def update
+    if current_user.author_of?(@answer)
+      if @answer.update(answer_params)
+        @notice = "The answer has been successfully updated"
+      end
+    else
+      @alert = "You can't update the answer, because you aren't its author"
+    end
+  end
 
+  def destroy
     if current_user.author_of?(@answer)
       @answer.destroy
-      redirect_to question, notice: "The answer has been successfully deleted"
+      @notice = "The answer has been successfully deleted"
+    else
+      @alert = "You can't delete the answer, because you aren't its author"
+    end
+  end
+
+  def mark_as_best
+    if current_user.author_of?(@answer.question)
+      @answer.mark_as_best
     else
-      redirect_to question, alert: "You can't delete the answer, because you aren't its author"
+      @alert = "You can't mark the answer, because you aren't author the question"
     end
   end
 

app/controllers/questions_controller.rb

@@ -1,6 +1,6 @@
 class QuestionsController < ApplicationController
-  before_action :authenticate_user!, only: [:new, :create, :destroy]
-  before_action :find_question, only: [:show, :destroy]
+  before_action :authenticate_user!, only: [:new, :create, :update, :destroy]
+  before_action :find_question, only: [:show, :update, :destroy]
 
   def index
     @questions = Question.all
@@ -24,6 +24,16 @@ def create
     end
   end
 
+  def update
+    if current_user.author_of?(@question)
+      if @question.update(question_params)
+        @notice = "The question has been successfully updated"
+      end
+    else
+      @alert = "You can't update the question, because you aren't its author"
+    end
+  end
+
   def destroy
     if current_user.author_of?(@question)
       @question.destroy

app/models/answer.rb

@@ -3,4 +3,12 @@ class Answer < ApplicationRecord
   belongs_to :question
 
   validates :body, presence: true
+
+  def mark_as_best
+    question.update(best_answer_id: id)
+  end
+
+  def best?
+    question.best_answer_id == id
+  end
 end

app/models/question.rb

@@ -1,6 +1,11 @@
 class Question < ApplicationRecord
   belongs_to :user
+  has_one :best_answer, class_name: 'Answer', dependent: :nullify
   has_many :answers, dependent: :destroy
 
   validates :title, :body, presence: true
+
+  def answers_without_best
+    answers.where.not(id: best_answer_id)
+  end
 end

app/views/answers/_answer.html.slim

@@ -0,0 +1,16 @@
+- if answer.persisted?
+  .answer id="answer-id-#{answer.id}" class=("best" if local_assigns[:best])
+    p = answer.body
+
+    - if user_signed_in?
+      - if current_user.author_of?(answer.question)
+        p.mark-as-best = link_to "Mark as best", mark_as_best_answer_path(answer), method: :post, remote: true
+
+      - if current_user.author_of?(answer)
+        p = link_to "Edit answer", "#", class: "edit-answer-link", data: { answer_id: answer.id }
+
+        .edit-answer-form
+          .answer-errors
+          = render "answers/edit_form", answer: answer
+
+        p = link_to "Delete answer", answer_path(answer), method: :delete, remote: true

app/views/answers/_edit_form.html.slim

@@ -0,0 +1,6 @@
+= form_with model: answer, class: "hidden", html: { id: "edit-answer-form-#{answer.id}" } do |f|
+  p
+    = f.label :body
+    = f.text_field :body
+  p
+    = f.submit "Save"

app/views/answers/_form.html.slim

@@ -1,6 +1,6 @@
-= form_with model: [ @question, @answer ], local: true do |f|
+= form_with model: [@question, @answer] do |f|
   p
     = f.label :body
     = f.text_field :body
   p
-    = f.submit 'Answer'
+    = f.submit "Answer"

app/views/answers/create.js.erb

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

app/views/answers/destroy.js.erb

@@ -0,0 +1,3 @@
+<% if @answer.destroyed? %>
+  $(".answers #answer-id-<%= @answer.id %>").remove();
+<% end %>

app/views/answers/mark_as_best.js.erb

@@ -0,0 +1,3 @@
+$(".answers .best .mark-as-best").removeClass("hidden");
+$(".answers .best").removeClass("best");
+$(".answers #answer-id-<%= @answer.id %>").addClass("best");

app/views/answers/update.js.erb

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

app/views/layouts/application.js.erb

@@ -0,0 +1,4 @@
+$('.notice').html('<%= @notice %>');
+$('.alert').html('<%= @alert %>');
+
+<%= yield %>

app/views/questions/_edit_form.html.slim

@@ -0,0 +1,9 @@
+= form_with model: @question, class: "hidden", html: {id: "edit-question-form-#{@question.id}"} do |f|
+  p
+    = f.label :title
+    = f.text_field :title
+  p
+    = f.label :body
+    = f.text_area :body
+  p
+    = f.submit "Save"

app/views/questions/_form.html.slim

@@ -0,0 +1,9 @@
+= form_with model: @question, local: true do |f|
+  p
+    = f.label :title
+    = f.text_field :title
+  p
+    = f.label :body
+    = f.text_area :body
+  p
+    = f.submit "Ask"

app/views/questions/index.html.slim

@@ -1,6 +1,6 @@
 h1 Questions
 
-p = link_to 'Ask question', new_question_path
+p = link_to "Ask question", new_question_path
 
 - if @questions.present?
   - @questions.each do |question|

app/views/questions/new.html.slim

@@ -1,11 +1,3 @@
-= render '/shared/errors', resource: @question
+= render "/shared/errors", resource: @question
 
-= form_with model: @question, local: true do |f|
-  p
-    = f.label :title
-    = f.text_field :title
-  p
-    = f.label :body
-    = f.text_area :body
-  p
-    = f.submit 'Ask'
+= render "/questions/form"

app/views/questions/show.html.slim

@@ -1,21 +1,26 @@
 p = link_to "Questions", questions_path
 
-h1 = @question.title
-p = @question.body
+.question
+  h1.title = @question.title
+  p.body = @question.body
 
-- if user_signed_in?
-  - if current_user.author_of?(@question)
-   p = link_to "Delete question", question_path(@question), method: :delete
+  - if user_signed_in?
+    - if current_user.author_of?(@question)
+      p = link_to "Edit question", "#", class: "edit-question-link", data: {question_id: @question.id}
 
-  p New answer
-  = render '/shared/errors', resource: @answer
-  = render '/answers/form'
+      .edit-question-form
+        .question-errors
+        = render "/questions/edit_form"
 
-p Answers
-- if @question.answers.present?
-  - @question.answers.each do |answer|
-    - if answer.persisted?
-      p = answer.body
+      p = link_to "Delete question", question_path(@question), method: :delete
+
+    p New answer
+    .new-answer-form
+      .answer-errors
+      = render "/answers/form"
 
-      - if current_user&.author_of?(answer)
-        p = link_to "Delete answer", answer_path(answer), method: :delete
+p Answers
+.answers
+  - if @question.best_answer_id
+    = render @question.best_answer, best: true
+  = render @question.answers_without_best

app/views/questions/update.js.erb

@@ -0,0 +1,8 @@
+$(".edit-question-form .question-errors").html("<%= render "shared/errors", resource: @question %>");
+
+<% if @question.errors.empty? %>
+  $(".question .title").html("<%= j @question.title %>");
+  $(".question .body").html("<%= j @question.body %>");
+  $(".question .edit-question-link").removeClass("hidden");
+  $("form#edit-question-form-<%= @question.id %>").addClass("hidden");
+<% end %>

config/routes.rb

@@ -3,7 +3,11 @@
 
   devise_for :users
 
-  resources :questions, only: [:index, :show, :new, :create, :destroy] do
-    resources :answers, only: [:create, :destroy], shallow: true
+  resources :questions, except: [:edit] do
+    resources :answers, only: [:create, :update, :destroy], shallow: true do
+      member do
+        post :mark_as_best
+      end
+    end
   end
 end

db/migrate/20210317212358_add_best_answer_id_to_questions.rb

@@ -0,0 +1,5 @@
+class AddBestAnswerIdToQuestions < ActiveRecord::Migration[5.2]
+  def change
+    add_column :questions, :best_answer_id, :integer
+  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: 2021_03_12_210732) do
+ActiveRecord::Schema.define(version: 2021_03_17_212358) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -31,6 +31,7 @@
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.bigint "user_id"
+    t.integer "best_answer_id"
     t.index ["user_id"], name: "index_questions_on_user_id"
   end