Move example post to new action, handle redirect from frame

Now UX is to click a "New post" button that will render the post form
dynamically in a target turbo frame. The Stimulus refresh controller is
renamed as it now needs to handle a special redirect use case; on
successful submission of the POST from the "examples_post_form" we want
to render an updated list in the "examples_posts" turbo frame. The
framework does not yet provide an intuitive mechanism for breaking out
of a frame on redirect, so we use a Stimulus Turbo.visit to the
"examples_post" form here. This does result in a "double GET" request,
the first results in re-rendering the requesting "examples_post_form",
but the second is needed to re-render the "examples_posts" frame.

There are other approaches, described in the resources below, which also
lay out the problem in more detail:

- https://www.ducktypelabs.com/turbo-break-out-and-redirect/
- hotwired/turbo-rails#367 (comment)
- https://discuss.hotwired.dev/t/break-out-of-a-frame-during-form-redirect/1562/26

Author: rossta

app/controllers/examples/posts_controller.rb

@@ -1,27 +1,29 @@
 class Examples::PostsController < ApplicationController
   def index
-    post = Examples::Post.new(post_params_new)
+    render Examples::Posts::IndexView.new(posts: Examples::Post.limit(25).order(created_at: :desc))
+  end
+
+  def new
+    post = Examples::Post.new(post_params_permitted)
 
-    render Examples::Posts::IndexView.new(post: post)
+    render Examples::Posts::NewView.new(post: post)
   end
 
   def create
-    post = Examples::Post.new(post_create_params)
+    post = Examples::Post.new(post_params_permitted)
 
     if post.save
-      redirect_to :index
+      redirect_to examples_posts_path
     else
-      render Examples::Posts::IndexView.new(post: post), status: :unprocessable_entity
+      render Examples::Posts::NewView.new(post: post), status: :unprocessable_entity
     end
   end
 
   private
 
-  def post_create_params = params.require(:examples_post, {}).permit(:title)
-
   def post_params = params.fetch(:examples_post, {})
 
-  def post_params_new
+  def post_params_permitted
     post_params.permit(:title, :postable_type, link_attributes: [:url], image_attributes: [:url], markdown_attributes: [:body])
   end
 end

app/javascript/controllers/forms/frame.js

@@ -0,0 +1,41 @@
+import { Controller } from '@hotwired/stimulus';
+import debug from '../../utils/debug';
+
+const console = debug('app:javascript:controllers:forms:frame');
+
+export default class extends Controller {
+  static targets = ['refreshButton'];
+  static values = {
+    redirectFrame: String,
+  };
+
+  connect() {
+    console.log('Connect!');
+    this.refreshButtonTarget.hidden = true;
+  }
+
+  refresh() {
+    console.log('Refresh!');
+    this.refreshButtonTarget.click();
+  }
+
+  redirect(event) {
+    if (this.refreshButtonTarget === event.detail.formSubmission.submitter)
+      return;
+
+    if (event.detail.success) {
+      const fetchResponse = event.detail.fetchResponse;
+      history.pushState(
+        { turbo_frame_history: true },
+        '',
+        fetchResponse.response.url,
+      );
+      console.log('Redirect!', fetchResponse.response.url, {
+        frame: this.redirectFrameValue,
+      });
+      Turbo.visit(fetchResponse.response.url, {
+        frame: this.redirectFrameValue,
+      });
+    }
+  }
+}

app/javascript/controllers/forms/refresh.js

@@ -15,7 +15,7 @@ import PwaWebPushDemo from './pwa/web-push-demo';
 import AnalyticsCustomEvent from './analytics/custom-event';
 import TableOfContents from './table-of-contents';
 
-import FormRefresh from './forms/refresh';
+import FrameForm from './forms/frame';
 
 application.register('analytics', AnalyticsCustomEvent);
 application.register('code-example', CodeExample);
@@ -27,4 +27,4 @@ application.register('pwa-web-push-subscription', PwaWebPushSubscription);
 application.register('pwa-web-push-demo', PwaWebPushDemo);
 application.register('table-of-contents', TableOfContents);
 
-application.register('form-refresh', FormRefresh);
+application.register('frame-form', FrameForm);

app/javascript/controllers/index.js

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+class Examples::Posts::Form < ApplicationComponent
+  include Phlex::Rails::Helpers::FormWith
+  include Phlex::Rails::Helpers::LinkTo
+  include Phlex::Rails::Helpers::TurboFrameTag
+  include Phlex::Rails::Helpers::ClassNames
+
+  def initialize(post:)
+    @post = post
+    @image = post.image || Examples::Posts::Image.new
+    @link = post.link || Examples::Posts::Link.new
+    @markdown = post.markdown || Examples::Posts::Markdown.new
+    @post.postable ||= @markdown
+  end
+
+  def view_template
+    form_with model: @post,
+      url: examples_posts_path,
+      method: :post,
+      data: {
+        controller: "frame-form",
+        action: "turbo:submit-end->frame-form#redirect",
+        frame_form_redirect_frame_value: "examples_posts"
+      } do |form|
+      div(class: "tabs") do
+        form.label :postable_type, "Text", value: @markdown.class.name, class: "tab"
+        form.radio_button :postable_type, @markdown.class.name, checked: markdown?, data: {action: "change->frame-form#refresh"}
+        form.label :postable_type, "Link", value: @link.class.name, class: "tab"
+        form.radio_button :postable_type, @link.class.name, checked: link?, data: {action: "frame-form#refresh"}
+        form.label :postable_type, "Image", value: @image.class.name, class: "tab"
+        form.radio_button :postable_type, @image.class.name, checked: image?, data: {action: "frame-form#refresh"}
+      end
+
+      fieldset do
+        form.label :title
+        form.text_field :title, placeholder: "My Post 🎸", required: false
+      end
+
+      form.fields_for :markdown, @markdown do |postable_form|
+        fieldset(class: class_names(hidden: !markdown?)) do
+          postable_form.label :body, "Text (Markdown)"
+          postable_form.text_area :body, placeholder: "# This is a post about guitars 🎸", required: false
+        end
+      end
+      form.fields_for :link, @link do |postable_form|
+        fieldset(class: class_names(hidden: !link?)) do
+          postable_form.label :url, "Link URL"
+          postable_form.text_field :url, placeholder: "https://example.com", required: false
+        end
+      end
+      form.fields_for :image, @image do |postable_form|
+        fieldset(class: class_names(hidden: !image?)) do
+          postable_form.label :url, "Image URL"
+          postable_form.text_field :url, placeholder: "https://example.com/image.jpg", required: false
+        end
+      end
+
+      fieldset do
+        form.submit "Refresh",
+          class: "button primary hidden",
+          formaction: new_examples_post_path,
+          formmethod: "get",
+          formnovalidate: true,
+          data: {frame_form_target: "refreshButton"}
+      end
+
+      fieldset do
+        form.submit "Save", class: "button primary"
+      end
+    end
+  end
+
+  private
+
+  def markdown? = @post.postable == @markdown
+
+  def link? = @post.postable == @link
+
+  def image? = @post.postable == @image
+end

app/views/examples/posts/form.rb

@@ -1,17 +1,15 @@
 # frozen_string_literal: true
 
 class Examples::Posts::IndexView < ApplicationView
+  include Phlex::Rails::Helpers::ClassNames
+  include Phlex::Rails::Helpers::ContentFor
   include Phlex::Rails::Helpers::FormWith
   include Phlex::Rails::Helpers::LinkTo
   include Phlex::Rails::Helpers::TurboFrameTag
-  include Phlex::Rails::Helpers::ClassNames
+  include Phlex::Rails::Helpers::TurboRefreshesWith
 
-  def initialize(post:)
-    @post = post
-    @image = post.image || Examples::Posts::Image.new
-    @link = post.link || Examples::Posts::Link.new
-    @markdown = post.markdown || Examples::Posts::Markdown.new
-    @post.postable ||= @markdown
+  def initialize(posts:)
+    @posts = posts
   end
 
   def view_template
@@ -21,63 +19,34 @@ def view_template
     )
 
     div(class: "section-content container py-gap") do
-      turbo_frame_tag :examples_post_form do
-        form_with model: @post, url: examples_posts_path, method: :post, data: {controller: "form-refresh"} do |form|
-          div(class: "tabs") do
-            form.label :postable_type, "Text", value: @markdown.class.name, class: "tab"
-            form.radio_button :postable_type, @markdown.class.name, checked: markdown?, data: {action: "form-refresh#refresh"}
-            form.label :postable_type, "Link", value: @link.class.name, class: "tab"
-            form.radio_button :postable_type, @link.class.name, checked: link?, data: {action: "form-refresh#refresh"}
-            form.label :postable_type, "Image", value: @image.class.name, class: "tab"
-            form.radio_button :postable_type, @image.class.name, checked: image?, data: {action: "form-refresh#refresh"}
-          end
+      link_to "New Post", new_examples_post_path, class: "button primary", data: {turbo_frame: "examples_post_form"}
 
-          fieldset do
-            form.label :title
-            form.text_field :title, placeholder: "My Post 🎸", required: false
-          end
+      turbo_frame_tag :examples_post_form
 
-          form.fields_for :markdown, @markdown do |postable_form|
-            fieldset(class: class_names(hidden: !markdown?)) do
-              postable_form.label :body, "Text (Markdown)"
-              postable_form.text_area :body, placeholder: "# This is a post about guitars 🎸", required: false
-            end
-          end
-          form.fields_for :link, @link do |postable_form|
-            fieldset(class: class_names(hidden: !link?)) do
-              postable_form.label :url, "Link URL"
-              postable_form.text_field :url, placeholder: "https://example.com", required: false
-            end
+      turbo_frame_tag :examples_posts, refresh: "morph" do
+        if @posts.empty?
+          div do
+            p { "Nothing has been posted yet!" }
           end
-          form.fields_for :image, @image do |postable_form|
-            fieldset(class: class_names(hidden: !image?)) do
-              postable_form.label :url, "Image URL"
-              postable_form.text_field :url, placeholder: "https://example.com/image.jpg", required: false
+        end
+        @posts.each do |post|
+          div do
+            h2 { post.title }
+            case post.postable
+            when Examples::Posts::Link
+              a(href: post.postable.url, rel: "noopener noreferrer", target: "_blank") { post.postable.url }
+            when Examples::Posts::Image
+              img(src: post.postable.url, alt: post.title)
+            when Examples::Posts::Markdown
+              markdown(post.postable.body)
             end
           end
-
-          fieldset do
-            form.submit "Refresh",
-              class: "button primary",
-              formaction: examples_posts_path,
-              formmethod: "get",
-              formnovalidate: true,
-              data: {form_refresh_target: "refreshButton"}
-          end
-
-          fieldset do
-            form.submit "Save", class: "button primary"
-          end
         end
       end
     end
   end
 
-  private
-
-  def markdown? = @post.postable == @markdown
-
-  def link? = @post.postable == @link
-
-  def image? = @post.postable == @image
+  def markdown(content)
+    render Markdown::Base.new(content)
+  end
 end

app/views/examples/posts/index_view.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class Examples::Posts::NewView < ApplicationView
+  include Phlex::Rails::Helpers::FormWith
+  include Phlex::Rails::Helpers::LinkTo
+  include Phlex::Rails::Helpers::TurboFrameTag
+  include Phlex::Rails::Helpers::ClassNames
+
+  def initialize(post:)
+    @post = post
+  end
+
+  def view_template
+    render Pages::Header.new(
+      title: "Examples: New Post",
+      description: "This is an example for creating a post of different types, like text, link, or image."
+    )
+
+    div(class: "section-content container py-gap") do
+      turbo_frame_tag :examples_post_form do
+        render Examples::Posts::Form.new(post: @post)
+      end
+    end
+  end
+end

app/views/examples/posts/new_view.rb

@@ -13,7 +13,7 @@
   namespace :examples do
     resource :counters, only: [:show, :update, :destroy]
     resource :hello, only: [:show]
-    resources :posts, only: [:index, :create]
+    resources :posts, only: [:index, :create, :new]
   end
   resources :examples, only: [:index, :show]