Turbo Frames for comments and answers (#19)

Answers and comments using turbo frames. Somewhat more complex use cases for this technology.

.rubocop.yml

@@ -16,4 +16,10 @@ Style/Documentation:
   Enabled: false
 
 Rails/FilePath:
-  EnforcedStyle: arguments
+  EnforcedStyle: arguments
+
+Metrics/MethodLength:
+  Max: 30
+
+Metrics/AbcSize:
+  Max: 30

app/controllers/admin/users_controller.rb

@@ -21,6 +21,8 @@ def index
       end
     end
 
+    def edit; end
+
     def create
       if params[:archive].present?
         UserBulkImportJob.perform_later create_blob, current_user
@@ -30,8 +32,6 @@ def create
       redirect_to admin_users_path
     end
 
-    def edit; end
-
     def update
       if @user.update user_params
         flash[:success] = t '.success'
@@ -71,4 +71,4 @@ def authorize_user!
       authorize(@user || User)
     end
   end
-end
+end

app/controllers/answers_controller.rb

@@ -4,7 +4,6 @@ class AnswersController < ApplicationController
   include QuestionsAnswers
   include ActionView::RecordIdentifier
 
-  before_action :require_authentication, except: %i[show index]
   before_action :set_question!
   before_action :set_answer!, except: :create
   before_action :authorize_answer!
@@ -16,26 +15,50 @@ def create
     @answer = @question.answers.build answer_create_params
 
     if @answer.save
-      flash[:success] = t '.success'
-      redirect_to question_path(@question)
+      respond_to do |format|
+        format.html do
+          flash[:success] = t '.success'
+          redirect_to question_path(@question)
+        end
+
+        format.turbo_stream do
+          @answer = @answer.decorate
+          flash.now[:success] = t '.success'
+        end
+      end
     else
       load_question_answers(do_render: true)
     end
   end
 
   def update
     if @answer.update answer_update_params
-      flash[:success] = t '.success'
-      redirect_to question_path(@question, anchor: dom_id(@answer))
+      respond_to do |format|
+        format.html do
+          flash[:success] = t '.success'
+          redirect_to question_path(@question, anchor: dom_id(@answer))
+        end
+
+        format.turbo_stream do
+          @answer = @answer.decorate
+          flash.now[:success] = t '.success'
+        end
+      end
     else
-      render :edit, status: :unprocessable_entity
+      render :edit
     end
   end
 
   def destroy
     @answer.destroy
-    flash[:success] = t '.success'
-    redirect_to question_path(@question), status: :see_other
+    respond_to do |format|
+      format.html do
+        flash[:success] = t '.success'
+        redirect_to question_path(@question), status: :see_other
+      end
+
+      format.turbo_stream { flash.now[:success] = t('.success') }
+    end
   end
 
   private

app/controllers/comments_controller.rb

@@ -2,32 +2,42 @@
 
 class CommentsController < ApplicationController
   include QuestionsAnswers
-
-  before_action :require_authentication, except: %i[show index]
   before_action :set_commentable!
   before_action :set_question
   after_action :verify_authorized
 
   def create
     @comment = @commentable.comments.build comment_params
-    authorize(@comment)
+    authorize @comment
+    @comment = @comment.decorate
 
     if @comment.save
-      flash[:success] = t '.success'
-      redirect_to question_path(@question)
+      respond_to do |format|
+        format.html do
+          flash[:success] = t '.success'
+          redirect_to question_path(@question)
+        end
+
+        format.turbo_stream { flash.now[:success] = t('.success') }
+      end
     else
-      @comment = @comment.decorate
       load_question_answers do_render: true
     end
   end
 
   def destroy
-    comment = @commentable.comments.find params[:id]
-    authorize(comment)
+    @comment = @commentable.comments.find params[:id]
+    authorize @comment
+
+    @comment.destroy
+    respond_to do |format|
+      format.html do
+        flash[:success] = t '.success'
+        redirect_to question_path(@question), status: :see_other
+      end
 
-    comment.destroy
-    flash[:success] = t '.success'
-    redirect_to question_path(@question), status: :see_other
+      format.turbo_stream { flash.now[:success] = t('.success') }
+    end
   end
 
   private

app/controllers/questions_controller.rb

@@ -7,26 +7,25 @@ class QuestionsController < ApplicationController
   before_action :authorize_question!
   after_action :verify_authorized
 
+  def index
+    @tags = Tag.where(id: params[:tag_ids]) if params[:tag_ids]
+    @pagy, @questions = pagy Question.all_by_tags(@tags), link_extra: 'data-turbo-frame="pagination_pagy"'
+    @questions = @questions.decorate
+  end
+
   def show
     load_question_answers
   end
 
-  def destroy
-    @question.destroy
-    respond_to do |format|
-      format.html do
-        flash[:success] = t('.success')
-        redirect_to questions_path, status: :see_other
-      end
-
-      format.turbo_stream { flash.now[:success] = t('.success') }
-    end
+  def new
+    @question = Question.new
   end
 
   def edit; end
 
-  def update
-    if @question.update question_params
+  def create
+    @question = current_user.questions.build question_params
+    if @question.save
       respond_to do |format|
         format.html do
           flash[:success] = t('.success')
@@ -39,23 +38,12 @@ def update
         end
       end
     else
-      render :edit, status: :unprocessable_entity
+      render :new
     end
   end
 
-  def index
-    @tags = Tag.where(id: params[:tag_ids]) if params[:tag_ids]
-    @pagy, @questions = pagy Question.all_by_tags(@tags), link_extra: 'data-turbo-frame="pagination_pagy"'
-    @questions = @questions.decorate
-  end
-
-  def new
-    @question = Question.new
-  end
-
-  def create
-    @question = current_user.questions.build question_params
-    if @question.save
+  def update
+    if @question.update question_params
       respond_to do |format|
         format.html do
           flash[:success] = t('.success')
@@ -68,7 +56,19 @@ def create
         end
       end
     else
-      render :new
+      render :edit, status: :unprocessable_entity
+    end
+  end
+
+  def destroy
+    @question.destroy
+    respond_to do |format|
+      format.html do
+        flash[:success] = t('.success')
+        redirect_to questions_path, status: :see_other
+      end
+
+      format.turbo_stream { flash.now[:success] = t('.success') }
     end
   end
 
@@ -85,4 +85,4 @@ def set_question!
   def authorize_question!
     authorize(@question || Question)
   end
-end
+end

app/views/answers/_answer.html.erb

@@ -1,34 +1,35 @@
-<%= tag.article class: 'my-3 card border-0 border-top', id: dom_id(answer) do %>
-  <div class="row g-0">
-    <div class="col-sm-auto text-sm-center align-self-center">
-      <%= answer.user.gravatar size: 50, css_class: 'd-block' %>
-      <%= answer.user.name_or_email %>
-    </div>
-    <div class="col-sm">
-      <div class="card-body">
-        <section class="card-text mb-3">
-          <div class="col-sm-9">
-            <small><time datetime="<%= answer.formatted_created_at %>">
-              <%= answer.formatted_created_at %>
-            </time></small>
+<%= turbo_frame_tag answer do %>
+  <%= tag.article class: 'my-3 card border-0 border-top' do %>
+    <div class="row g-0">
+      <div class="col-sm-auto text-sm-center align-self-center">
+        <%= answer.user.gravatar size: 50, css_class: 'd-block' %>
+        <%= answer.user.name_or_email %>
+      </div>
+      <div class="col-sm">
+        <div class="card-body">
+          <section class="card-text mb-3">
+            <div class="col-sm-9">
+              <small><time datetime="<%= answer.formatted_created_at %>">
+                <%= answer.formatted_created_at %>
+              </time></small>
 
-            <div class="mt-2">
-              <%= sanitize answer.body %>
+              <div class="mt-2">
+                <%= sanitize answer.body %>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        <% if policy(answer).edit? %>
-          <%= link_to t('global.button.edit'), edit_question_answer_path(question, answer),
-                      class: 'btn btn-info btn-sm' %>
-        <% end %>
-        <% if policy(answer).destroy? %>
-          <%= link_to t('global.button.delete'), question_answer_path(question, answer), class: 'btn btn-danger btn-sm',
-                      data: {turbo_method: :delete, turbo_confirm: t('global.dialog.you_sure')} %>
-        <% end %>
+          <% if policy(answer).edit? %>
+            <%= link_to t('global.button.edit'), edit_question_answer_path(question, answer),
+                        class: 'btn btn-info btn-sm' %>
+          <% end %>
+          <% if policy(answer).destroy? %>
+            <%= link_to t('global.button.delete'), question_answer_path(question, answer), class: 'btn btn-danger btn-sm',
+                        data: {turbo_method: :delete, turbo_confirm: t('global.dialog.you_sure')} %>
+          <% end %>
+        </div>
       </div>
     </div>
-  </div>
+  <% end %>
+  <%= render 'comments/commentable', commentable: answer, comment: @comment %>
 <% end %>
-<%= render 'comments/commentable', commentable: answer, comment: @comment,
-           html_id: dom_id(answer, 'comment_form') %>

app/views/answers/_form.html.erb

@@ -1,15 +1,16 @@
-<%= render 'shared/errors', object: @answer %>
+<%= turbo_frame_tag @answer do %>
+  <%= form_with model: [@question, @answer] do |f| %>
+    <%= render 'shared/errors', object: @answer %>
+    <div class="mb-3 row">
+      <div class="col-sm-2 col-form-label">
+        <%= f.label :body %>
+      </div>
 
-<%= form_with model: [@question, @answer] do |f| %>
-  <div class="mb-3 row">
-    <div class="col-sm-2 col-form-label">
-      <%= f.label :body %>
+      <div class="col-sm-10">
+        <%= f.text_area :body, class: 'form-control', required: true %>
+      </div>
     </div>
 
-    <div class="col-sm-10">
-      <%= f.text_area :body, class: 'form-control', required: true %>
-    </div>
-  </div>
-
-  <%= f.submit t('global.button.submit'), class: 'btn btn-primary' %>
+    <%= f.submit t('global.button.submit'), class: 'btn btn-primary' %>
+  <% end %>
 <% end %>

app/views/answers/create.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.prepend "answers", render(@answer, question: @answer.question) %>
+<%= prepend_flash %>

app/views/answers/destroy.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.remove @answer %>
+<%= prepend_flash %>

app/views/answers/update.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.replace @answer, render(@answer, question: @answer.question) %>
+<%= prepend_flash %>