use turbo streams for forms

Author: thejonroberts

.gitignore

@@ -38,3 +38,5 @@
 !/app/assets/builds/.keep
 
 /node_modules
+
+TODO.txt

NOTES.txt

@@ -0,0 +1,37 @@
+Rule 1: When clicking on a link within a Turbo Frame, Turbo expects a frame of the same id on the target page. It will then replace the Frame's content on the source page with the Frame's content on the target page.
+
+Rule 2: When clicking on a link within a Turbo Frame, if there is no Turbo Frame with the same id on the target page, the frame disappears, and the error Response has no matching <turbo-frame id="name_of_the_frame"> element is logged in the console.
+
+Rules 3: A link can target another frame than the one it is directly nested in thanks to the data-turbo-frame data attribute.
+
+There is a special frame called `_top` that represents the whole page. It's not really a Turbo Frame, but it behaves almost like one, so we will make this approximation for our mental model.
+
+
+TURBO STREAM
+Note: As of writing this chapter, the turbo_stream helper responds to the following methods, so that it can perform the following actions:
+
+# Remove a Turbo Frame
+turbo_stream.remove
+
+# Insert a Turbo Frame at the beginning/end of a list
+turbo_stream.append
+turbo_stream.prepend
+
+# Insert a Turbo Frame before/after another Turbo Frame
+turbo_stream.before
+turbo_stream.after
+
+# Replace or update the content of a Turbo Frame
+turbo_stream.update
+turbo_stream.replace
+
+When our user clicks on the "Cancel" link for the new quote form:
+
+The link is within a Turbo Frame of id new_quote, so Turbo will only replace the content of this frame
+The link navigates to the Quotes#index page that contains an empty Turbo Frame with id new_quote
+Turbo replaces the content of the new_quote frame with the empty content, so the form disappears
+When our user clicks on the "Cancel" link for the edit quote form:
+
+The link is within a Turbo Frame of id dom_id(quote), so Turbo will only replace the content of this frame
+The link navigates to the Quotes#index page that contains a Turbo Frame with id dom_id(quote) that contains the HTML for this quote
+Turbo replaces the content of the dom_id(quote) Frame containing the form with the HTML for this quote

app/controllers/quotes_controller.rb

@@ -2,7 +2,7 @@ class QuotesController < ApplicationController
   before_action :set_quote, only: [:show, :edit, :update, :destroy]
 
   def index
-    @quotes = Quote.all.order(updated_at: :asc)
+    @quotes = Quote.desc_id_ordered
   end
 
   def show
@@ -16,10 +16,13 @@ def create
     @quote = Quote.new(quote_params)
 
     if @quote.save
-      redirect_to quotes_url, notice: "Quote was successfully created."
-    else
-      render :new, status: :unprocessable_entity
+    respond_to do |format|
+      format.html { redirect_to quotes_path, notice: "Quote was successfully created." }
+      format.turbo_stream
     end
+  else
+    render :new, status: :unprocessable_entity
+  end
   end
 
   def edit
@@ -35,7 +38,10 @@ def update
 
   def destroy
     @quote.destroy
-    redirect_to quotes_path, notice: "Quote was successfully destroyed."
+    respond_to do |format|
+      format.html { redirect_to quotes_path, notice: "Quote was successfully destroyed." }
+      format.turbo_stream
+    end
   end
 
   private

app/models/quote.rb

@@ -1,3 +1,5 @@
 class Quote < ApplicationRecord
   validates :name, presence: true
+
+  scope :desc_id_ordered, -> { order(id: :desc) }
 end

app/views/quotes/_form.html.erb

@@ -30,5 +30,6 @@ COMMENT
   <% end %>
 
   <%= f.input :name, input_html: { autofocus: true } %>
+  <%= link_to "Cancel", quotes_path, class: "btn btn--light" %>
   <%= f.submit class: "btn btn--secondary" %>
 <% end %>

app/views/quotes/_quote.html.erb

@@ -7,15 +7,19 @@
 COMMENT
 %>
 
-<div class="quote">
-  <%= link_to quote.name, quote_path(quote) %>
-  <div class="quote__actions">
-    <%= button_to "Delete",
-                  quote_path(quote),
-                  method: :delete,
+<%= turbo_frame_tag quote do %>
+  <div class="quote">
+    <%= link_to quote.name,
+                quote_path(quote),
+                data: { turbo_frame: "_top" } %>
+    <div class="quote__actions">
+      <%= button_to "Delete",
+                    quote_path(quote),
+                    method: :delete,
+                    class: "btn btn--light" %>
+      <%= link_to "Edit",
+                  edit_quote_path(quote),
                   class: "btn btn--light" %>
-    <%= link_to "Edit",
-                edit_quote_path(quote),
-                class: "btn btn--light" %>
+    </div>
   </div>
-</div>
+<% end %>

app/views/quotes/create.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.prepend "quotes", @quote %>
+<%= turbo_stream.update Quote.new, "" %>

app/views/quotes/destroy.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.remove @quote %>

app/views/quotes/edit.html.erb

@@ -22,5 +22,7 @@ COMMENT
     <h1>Edit quote</h1>
   </div>
 
-  <%= render "form", quote: @quote %>
+  <%= turbo_frame_tag @quote do %>
+    <%= render "form", quote: @quote %>
+  <% end %>
 </main>

app/views/quotes/index.html.erb

@@ -24,8 +24,12 @@ COMMENT
     <h1>Quotes</h1>
     <%= link_to "New quote",
                 new_quote_path,
-                class: "btn btn--primary" %>
+                class: "btn btn--primary",
+                data: { turbo_frame: dom_id(Quote.new) } %>
   </div>
 
-  <%= render @quotes %>
+  <%= turbo_frame_tag Quote.new %>
+  <%= turbo_frame_tag "quotes" do %>
+    <%= render @quotes %>
+  <% end %>
 </main>