Render example post form dynamically

We modify the Examples::Post to have the ability to set typed nested
attributes and re-render the form on refresh with state.

Author: rossta

app/controllers/examples/posts_controller.rb

@@ -1,20 +1,11 @@
 class Examples::PostsController < ApplicationController
   def index
-    post = Examples::Post.new(postable: build_postable)
+    post = Examples::Post.new(post_params_new)
 
     render Examples::Posts::IndexView.new(post: post)
   end
 
   def create
-    if params[:commit] == "Refresh"
-      post_params = params.require(:examples_post).permit(:title)
-      post = Examples::Post.new(post_params) do |p|
-        p.postable = build_postable
-      end
-      Rails.logger.info("Post: #{post.inspect}")
-      return render Examples::Posts::IndexView.new(post: post), status: :unprocessable_entity
-    end
-
     post = Examples::Post.new(post_create_params)
 
     if post.save
@@ -26,19 +17,11 @@ def create
 
   private
 
-  def post_create_params
-    postable_attributes = (params.dig(:examples_post, :postable_type) == "Examples::Posts::Markdown") ? [:body] : [:url]
-    params.require(:examples_post).permit(:title, :postable_type, postable_attributes: postable_attributes)
-  end
+  def post_create_params = params.require(:examples_post, {}).permit(:title)
 
-  def build_postable
-    case params[:type]
-    when "link"
-      Examples::Posts::Link.new
-    when "image"
-      Examples::Posts::Image.new
-    else
-      Examples::Posts::Markdown.new
-    end
+  def post_params = params.fetch(:examples_post, {})
+
+  def post_params_new
+    post_params.permit(:title, :postable_type, link_attributes: [:url], image_attributes: [:url], markdown_attributes: [:body])
   end
 end

app/javascript/controllers/forms/refresh.js

@@ -4,20 +4,13 @@ import debug from '../../utils/debug';
 const console = debug('app:javascript:controllers:forms:refresh');
 
 export default class extends Controller {
+  static targets = ['refreshButton'];
+
   connect() {
-    console.log('connect');
+    this.refreshButtonTarget.hidden = true;
   }
 
   refresh() {
-    this.element.querySelectorAll('[required]').forEach((element) => {
-      element.required = false;
-    });
-    const submitButton = document.createElement('input');
-    submitButton.type = 'submit';
-    submitButton.name = 'commit';
-    submitButton.value = 'Refresh';
-    submitButton.style.display = 'none';
-    this.element.closest('form').appendChild(submitButton);
-    submitButton.click();
+    this.refreshButtonTarget.click();
   }
 }

app/javascript/css/components/button.css

@@ -9,6 +9,10 @@
   font-family: var(--sans-serif);
   color: var(--joy-light);
 
+  &[hidden] {
+    display: none;
+  }
+
   &:is(a) {
     text-decoration: none;
   }

app/models/examples/post.rb

@@ -1,9 +1,70 @@
 class Examples::Post < ApplicationRecord
-  delegated_type :postable, types: %w[
+  POSTABLE_TYPES = %w[
     Examples::Posts::Markdown
     Examples::Posts::Link
     Examples::Posts::Image
-  ]
+  ].freeze
+
+  delegated_type :postable, types: POSTABLE_TYPES
+
+  attr_writer :markdown, :link, :image
 
   accepts_nested_attributes_for :postable
+
+  after_initialize :infer_postable
+
+  def self.postable_types
+    POSTABLE_TYPES
+  end
+
+  def markdown
+    @markdown || (postable if postable.is_a?(Examples::Posts::Markdown))
+  end
+
+  def image
+    @image || (postable if postable.is_a?(Examples::Posts::Image))
+  end
+
+  def link
+    @link || (postable if postable.is_a?(Examples::Posts::Link))
+  end
+
+  def markdown?
+    @markdown.present? || postable.is_a?(Examples::Posts::Markdown)
+  end
+
+  def image?
+    @image.present? || postable.is_a?(Examples::Posts::Image)
+  end
+
+  def link?
+    @link.present? || postable.is_a?(Examples::Posts::Link)
+  end
+
+  def markdown_attributes=(attributes)
+    self.markdown = Examples::Posts::Markdown.new(attributes)
+  end
+
+  def link_attributes=(attributes)
+    self.link = Examples::Posts::Link.new(attributes)
+  end
+
+  def image_attributes=(attributes)
+    self.image = Examples::Posts::Image.new(attributes)
+  end
+
+  private
+
+  def infer_postable
+    return unless postable.nil?
+
+    case postable_type
+    when "Examples::Posts::Markdown"
+      self.postable = markdown if markdown?
+    when "Examples::Posts::Link"
+      self.postable = link if link?
+    when "Examples::Posts::Image"
+      self.postable = image if image?
+    end
+  end
 end

app/views/examples/posts/index_view.rb

@@ -3,13 +3,15 @@
 class Examples::Posts::IndexView < ApplicationView
   include Phlex::Rails::Helpers::FormWith
   include Phlex::Rails::Helpers::LinkTo
-  include Phlex::Rails::Helpers::ContentFor
-  include Phlex::Rails::Helpers::LabelTag
-  include Phlex::Rails::Helpers::RadioButtonTag
   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
@@ -22,42 +24,60 @@ def view_template
       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
-            link_to "Text", url_for(type: "markdown"), class: "tab"
-            link_to "Link", url_for(type: "link"), class: "tab"
-            link_to "Image", url_for(type: "image"), class: "tab"
+            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
 
           fieldset do
             form.label :title
             form.text_field :title, placeholder: "My Post 🎸", required: false
           end
 
-          form.hidden_field :postable_type
-          form.fields_for :postable, @post.postable do |postable_form|
-            case @post.postable
-            when Examples::Posts::Markdown
-              fieldset do
-                postable_form.label :body, "Text (Markdown)"
-                postable_form.text_area :body, placeholder: "# This is a post about guitars 🎸", required: false
-              end
-            when Examples::Posts::Link
-              fieldset do
-                postable_form.label :url, "Link URL"
-                postable_form.text_field :url, placeholder: "https://example.com", required: false
-              end
-            when Examples::Posts::Image
-              fieldset do
-                postable_form.label :url, "Image URL"
-                postable_form.text_field :url, placeholder: "https://example.com/image.jpg", required: true
-              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",
+              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
 end

spec/system/examples/posts_spec.rb

@@ -1,30 +1,65 @@
 require "rails_helper"
 
 RSpec.describe "Examples: Posts", type: :system do
-  it "renders the form" do
+  it "renders the form inputs dynamically and retains previously entered values" do
     visit examples_posts_path
 
     within "form" do
       expect(page).to have_content("Title")
-      expect(page).to have_content("Markdown")
+      expect(page).to have_content("Text (Markdown)")
+
+      expect(page).not_to have_content("Link URL")
+
+      fill_in "Title", with: "My Post 🎸"
+      fill_in "Text (Markdown)", with: "# This is a post about guitars 🎸"
     end
 
-    click_link "Link"
+    choose "Link"
 
     within "form" do
       expect(page).to have_content("Title")
       expect(page).to have_content("Link URL")
 
       expect(page).not_to have_content("Markdown")
+
+      fill_in "Link URL", with: "https://example.com/link"
     end
 
-    click_link "Image"
+    choose "Image"
 
     within "form" do
       expect(page).to have_content("Title")
       expect(page).to have_content("Image URL")
 
       expect(page).not_to have_content("Link URL")
+
+      fill_in "Image URL", with: "https://example.com/image.jpg"
+    end
+
+    choose "Text"
+
+    within "form" do
+      expect(page).to have_content("Title")
+      expect(page).to have_content("Markdown")
+
+      expect(page).not_to have_content("Image URL")
+
+      expect(page).to have_field("Title", with: "My Post 🎸")
+      expect(page).to have_field("Text (Markdown)", with: "# This is a post about guitars 🎸")
+    end
+
+    choose "Link"
+
+    within "form" do
+      expect(page).to have_field("Title", with: "My Post 🎸")
+      expect(page).to have_field("Link URL", with: "https://example.com/link")
+    end
+
+    choose "Image"
+
+    within "form" do
+      expect(page).to have_field("Title", with: "My Post 🎸")
+      expect(page).to have_field("Image URL", with: "https://example.com/image.jpg")
     end
   end
 end