Handle conversation form errors via Turbo Stream

Author: rsmithlal

app/controllers/better_together/conversations_controller.rb

@@ -33,7 +33,12 @@ def create # rubocop:todo Metrics/MethodLength
           format.html { redirect_to @conversation }
         end
       else
-        render :new
+        respond_to do |format|
+          format.turbo_stream do
+            render :create_error, status: :unprocessable_entity
+          end
+          format.html { render :new, status: :unprocessable_entity }
+        end
       end
     end
 

app/javascript/controllers/better_together/form_validation_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
+import { Turbo } from "@hotwired/turbo-rails";
 
 export default class extends Controller {
   static targets = ["input"];
@@ -19,13 +20,15 @@ export default class extends Controller {
 
     // Handle form submission
     this.element.addEventListener("submit", this.handleFormSubmit.bind(this));
+    this.element.addEventListener("turbo:submit-end", this.handleSubmitEnd.bind(this));
 
     // Handle Turbo navigation (unsaved changes warning)
     document.addEventListener("turbo:before-visit", this.handleTurboNavigation.bind(this));
   }
 
   disconnect() {
     document.removeEventListener("turbo:before-visit", this.handleTurboNavigation.bind(this));
+    this.element.removeEventListener("turbo:submit-end", this.handleSubmitEnd.bind(this));
   }
 
   storeInitialValues() {
@@ -59,6 +62,18 @@ export default class extends Controller {
     this.isSubmitting = true;
   }
 
+  async handleSubmitEnd(event) {
+    const { success, fetchResponse } = event.detail;
+
+    if (!success && fetchResponse?.response.status === 422) {
+      const html = await fetchResponse.responseHTML;
+      Turbo.renderStreamMessage(html);
+      this.isSubmitting = false;
+    } else if (success) {
+      this.resetValidation();
+    }
+  }
+
   handleTurboNavigation(event) {
     if (this.isFormDirty() && !this.isSubmitting) {
       const confirmation = confirm("You have unsaved changes. Are you sure you want to leave?");

app/views/better_together/conversations/create_error.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.update 'form_errors', partial: 'layouts/better_together/errors', locals: { object: @conversation } %>

app/views/better_together/conversations/new.html.erb

@@ -4,9 +4,10 @@
       <h6 class="mb-0"><%= t('.new_conversation') %></h6>
     </div>
 
-    <div class="card-body">
-      <%= form_with(model: @conversation, local: true, data: { turbo: false, controller: 'better_together--form-validation'}) do |form| %>
-        <div class="mb-3">
+      <div class="card-body">
+        <%= form_with(model: @conversation, data: { controller: 'better_together--form-validation' }) do |form| %>
+          <%= turbo_frame_tag 'form_errors' %>
+          <div class="mb-3">
           <%= form.label :participant_ids, t('.add_participants') %>
           <%= form.collection_select :participant_ids, available_participants, :id, :select_option_title, { }, { multiple: true, class: 'form-select', required: true, data: { controller: "better_together--slim-select" } } %>
         </div>