changes for new tweet modal

app/controllers/tweets_controller.rb

@@ -29,10 +29,13 @@ def create
         format.html { redirect_to tweets_url, notice: "Tweet was successfully created." }
         format.json { render :show, status: :created, location: @tweet }
       else
-        format.turbo_stream { # route turbo validation errors
-                      render turbo_stream: turbo_stream.replace(
-                              @tweet, partial: "tweets/form",
-                              locals: { tweet: @tweet}) }
+        # route turbo validation errors
+        format.turbo_stream # populate `create.turbo_stream.erb`
+        # this is better if if create.turbo_stream.erb in happy path also needs a @tweet replace
+        # format.turbo_stream {render turbo_stream: turbo_stream.replace(
+        #                             # @tweet, partial: "tweets/modal_form",
+        #                             "new_tweet", partial: "tweets/modal_form",
+        #                             locals: { tweet: @tweet}) }
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @tweet.errors, status: :unprocessable_entity }
       end

app/views/tweets/_modal_form.html.erb

@@ -0,0 +1,36 @@
+<%= form_with(model: tweet, id: dom_id(tweet)) do |form| %>
+
+  <div class="modal-header">
+    <h5 class="modal-title">New Tweet</h5>
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <div class="modal-body">
+    <% if tweet.errors.any? %>
+    <div id="error_explanation">
+      <h2><%= pluralize(tweet.errors.count, "error") %> prohibited this tweet from being saved:</h2>
+
+      <ul>
+        <% tweet.errors.each do |error| %>
+        <li><%= error.full_message %></li>
+        <% end %>
+      </ul>
+    </div>
+    <% end %>
+
+    <div class="field">
+      <%= form.label :body %>
+      <%= form.text_area :body %>
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <div class="actions">
+      <%= form.submit class: "btn btn-sm btn-outline-success" %>
+      <%= link_to "Cancel", tweet, class: "btn btn-sm btn-outline-danger" %>
+    </div>
+  </div>
+
+<% end %>

app/views/tweets/_modal_new.html.erb

@@ -0,0 +1,11 @@
+<%= link_to "#", class: 'btn btn-sm btn-outline-primary', data: { toggle: "modal", target: "#tweetModal" } do %>
+New Tweet
+<% end %>
+
+<div class="modal fade" id="tweetModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <%= render "tweets/modal_form", tweet: tweet %>
+    </div>
+  </div>
+</div>

app/views/tweets/create.turbo_stream.erb

@@ -0,0 +1,14 @@
+<!-- to prepend on create - disabled to avoid double vision when broadcasting -->
+<%#%   stream_action   dom_id_target, render_partial,       send_local_variables   %>
+<%# turbo_stream.prepend "tweets", partial: "tweets/tweet", locals: { tweet: @tweet } %>
+
+<!-- might be better to use JS method and never conflict with replace in failure condition -->
+<%# clear form on create - without js - but now disable above or have double vision %>
+<%# turbo_stream.replace "new-tweet", partial: "tweets/form", locals: { tweet: Tweet.new } %>
+
+<!-- with a modal it auto clears so we don't conflict with a replace after create -->
+<%# turbo_stream.replace "new_tweet", partial: "tweets/modal_form", locals: { tweet: @tweet } %>
+<%= turbo_stream.replace @tweet, partial: "tweets/modal_form", locals: { tweet: @tweet } %>
+
+<%# to send a message to the notice partial %>
+<%# turbo_stream.append "notice", partial: "shared/notice", locals: {notice: "Tweet was successfully created."} %>

app/views/tweets/index.html.erb

@@ -2,6 +2,8 @@
 <%= turbo_stream_from "tweets" %>
 
 <h2 class="mt-3 h4 text-muted">New Tweet</h2>
+<%= render "tweets/modal_new", tweet: @tweet %>
+
 <div class="card card-body">
   <%= turbo_frame_tag "tweet-form" do %>
     <%= render "tweets/form", tweet: @tweet %>