Rails 7 Turbo stream / turbo frame. Render index with new item

Question

I am having terrible problems trying to get a new item to render back to the index of a page using turbo streams.

I want it to go back to the index after the create action and append the deal to the page, I need this to be a turbo stream. So far when I create it never leaves the new form..how do I make the create action go back to the index using the turbo stream and append the new deal. Thanks in advance

Here is my code

index.html.haml
%p{style: "color: green"}= notice
%h1 Deals
= turbo_frame_tag "deals" do
  - @deals.each do |deal|
    = render deal

= link_to "New deal", new_deal_path


_deal.html.haml
%div
  %p
    %strong Name:
    = deal.name

new.html.haml
%h1 New deal
= simple_form_for(@deal) do |f|
  %div
    = f.input :name
  %div
    = f.submit

deals_controller.rb
def create
    @deal = Deal.new(deal_params)
    respond_to do |format|
      if @deal.save
        format.turbo_stream
      end
    end
  end

create.turbo_stream.haml
= turbo_stream.prepend "deals", partial: "deals/deal", locals: { deal: @deal }

Answer 1

The thing is here you don't want to be redirecting the user around. Instead they just stay on the index page and you just send the form submission with ajax and then append the new records to the existing document.

So lets start refactoring the form into a partial for resuse:

# deals/_form.html.haml
= simple_form_for(deal) do |f|
  %div
    = f.input :name
  %div
    = f.submit

And then lets put the form on the index view:

# deals/index.html.haml
%h1 Deals
= turbo_frame_tag "deal_form" do
  = render "form", deal: @deal

= turbo_frame_tag "deals" do
  = render @deals

We also need a turbo stream view for invalid form submissions:

# deals/new.turbo_stream.haml
= turbo_stream.replace "deal_form" do
  = render partial: "deals/form", locals: { deal: @deal } 

Here we are just using the progressive enhancement approach and both the form and deals are rendered on the initial page view. Using a turbo frame and not just div#deals isn't actually doing that much in this case but it will later if you add the src attribute for example to decompose the page.

Then lets setup the controller to stream either a new deal to to the list or "send the form back" with errors.

class DealsController < ApplicationController

  # GET /deals or /deals.json
  def index
    @deals = Deal.all
  end

  # POST /deals or /deals.json
  def create
    @deal = Deal.new(deal_params)
    respond_to do |format|
      if @deal.save
        format.html { redirect_to action: :index, notice: "Deal was successfully created." }
        format.turbo_stream
      else
        format.html do 
          @deals = Deal.all
          render :index, status: :unprocessable_entity
        end
        format.turbo_stream { render :new, status: :unprocessable_entity }
      end
    end
  end

  private
    # Only allow a list of trusted parameters through.
    def deal_params
      params.require(:deal).permit(:name)
    end
end

Turbo also provides methods to just render turbo streams straight for the the controller if what you're doing is simple enough that you don't need a view:

  def create
    @deal = Deal.new(deal_params)

    respond_to do |format|
      if @deal.save
        format.html { redirect_to action: :index, notice: "Deal was successfully created." }
        format.turbo_stream do
          render turbo_stream: turbo_stream.prepend(:deals, partial: "deals/deal", locals: { deal: @deal })
        end 
      else
        format.html { render :new, status: :unprocessable_entity }
        format.turbo_stream do
          render turbo_stream: turbo_stream.replace(:deal_form, partial: "deals/form", locals: { deal: @deal })
        end 
      end
    end
  end