Rework turbo interaction for snippet and screenshot

Author: rossta

app/controllers/share/snippets_controller.rb

@@ -56,7 +56,7 @@ def update
   def destroy
     @snippet = Snippet.find(params[:id])
     @snippet.destroy!
-    redirect_to share_snippets_url, notice: "Snippet was successfully destroyed.", status: :see_other
+    redirect_to share_snippets_url, notice: "Your snippet has been deleted permanently".emojoy, status: :see_other
   end
 
   private
@@ -66,7 +66,7 @@ def share_snippet_redirect_url(snippet)
     when "Share"
       new_share_snippet_screenshot_url(snippet)
     else
-      share_snippet_url(snippet)
+      edit_share_snippet_url(snippet)
     end
   end
 

app/javascript/controllers/snippets/preview.ts

@@ -1,6 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 
 import debug from '../../utils/debug';
+import { debounce } from '../../utils/debounce';
 
 const console = debug('app:javascript:controllers:snippets:preview');
 
@@ -14,7 +15,6 @@ export default class extends Controller<HTMLFormElement> {
     console.log('Connect!');
 
     // this.element.addEventListener('turbo:submit-start', this.disable);
-
     // this.element.addEventListener('turbo:submit-end', this.enable);
   }
 
@@ -43,7 +43,11 @@ export default class extends Controller<HTMLFormElement> {
 
   preview = (): void => {
     console.log('Start preview!');
-    this.clickPreviewButton();
+
+    // Click the preview button after 0 delay to submit in the next tick
+    setTimeout(() => {
+      this.clickPreviewButton();
+    });
   };
 
   clickPreviewButton = (): void => {

app/views/share/snippet_screenshots/form.rb

@@ -17,15 +17,16 @@ def view_template
       method: :post,
       class: "grid-content",
       data: {
-        controller: "snippet-screenshot"
+        controller: "snippet-screenshot",
+        turbo_frame: "_top"
       }
     ) do |form|
       errors
 
       render CodeBlock::Snippet.new(snippet, screenshot: true, data: {snippet_screenshot_target: "snippet"})
 
       fieldset do
-        plain form.button "Share", class: "button primary"
+        plain form.button "Share", class: "button primary", data: {snippet_screenshot_target: "submitButton"}
       end
     end
   end

app/views/share/snippet_screenshots/new.html.erb

@@ -1,6 +1,8 @@
 <%= render Pages::Header.new(title: "Snippet Screenshot") %>
 <div class="section-content container py-gap">
-  <%= render Share::SnippetScreenshots::Form.new(@snippet) %>
+  <%= turbo_frame_tag :snippet_form do %>
+    <%= render Share::SnippetScreenshots::Form.new(@snippet) %>
+  <% end %>
 
   <br>
 

app/views/share/snippets/edit.html.erb

@@ -1,6 +1,8 @@
-<%= render Pages::Header.new(title: "Edit snippet") %>
+<%= render Pages::Header.new(title: "Snippet Share") %>
 <div class="section-content container py-gap">
-  <%= render Share::Snippets::Form.new(@snippet) %>
+  <%= turbo_frame_tag :snippet_form do %>
+    <%= render Share::Snippets::Form.new(@snippet) %>
+  <% end %>
 
   <br>
 

app/views/share/snippets/form.rb

@@ -3,6 +3,8 @@ class Share::Snippets::Form < ApplicationComponent
   include Phlex::Rails::Helpers::FormWith
   include Phlex::Rails::Helpers::TurboFrameTag
   include Phlex::Rails::Helpers::Pluralize
+  include Phlex::Rails::Helpers::TurboStream
+  include PhlexConcerns::FlexBlock
 
   attr_accessor :snippet
 
@@ -11,6 +13,7 @@ def initialize(snippet)
   end
 
   def view_template
+    turbo_stream.update "flash", partial: "application/flash"
     form_with(
       model: [:share, snippet],
       class: "grid-content",
@@ -21,25 +24,25 @@ def view_template
     ) do |form|
       errors
 
-      language_select(form, data: {action: "change->snippet-preview#preview"})
-
-      turbo_frame_tag dom_id(snippet, :code_block), class: "snippet-frame grid-cols-12" do
+      div(class: "grid-cols-12") do
         div(class: "snippet-background") do
           render CodeBlock::Container.new(language: language, class: "snippet") do
             render CodeBlock::Header.new do
               label(class: "sr-only", for: "snippet[filename]") { "Filename" }
               input(type: "text", name: "snippet[filename]", value: filename)
             end
 
-            render CodeBlock::Body.new(data: {controller: "snippet-editor"}) do
-              div(class: "grid-stack") do
-                render CodeBlock::Code.new(source, language: language, data: {snippet_editor_target: "source"})
-                label(class: "sr-only", for: "snippet[source]") { "Source" }
-                div(class: "code-editor autogrow-wrapper") do
-                  textarea(
-                    name: "snippet[source]",
-                    data: {snippet_editor_target: "textarea"}
-                  ) { source }
+            turbo_frame_tag dom_id(snippet, :code_block) do
+              render CodeBlock::Body.new(data: {controller: "snippet-editor"}) do
+                div(class: "grid-stack") do
+                  render CodeBlock::Code.new(source, language: language, data: {snippet_editor_target: "source"})
+                  label(class: "sr-only", for: "snippet[source]") { "Source" }
+                  div(class: "code-editor autogrow-wrapper") do
+                    textarea(
+                      name: "snippet[source]",
+                      data: {snippet_editor_target: "textarea"}
+                    ) { source }
+                  end
                 end
               end
             end
@@ -48,19 +51,23 @@ def view_template
       end
 
       fieldset do
-        plain form.submit class: "button primary"
-        whitespace
-        plain form.submit "Share", class: "button secondary"
-        whitespace
-        plain form.submit "Preview",
-          class: "button secondary hidden",
-          formaction: form_path,
-          formmethod: "get",
-          formnovalidate: true,
-          data: {
-            snippet_preview_target: "previewButton",
-            turbo_frame: dom_id(snippet, :code_block)
-          }
+        flex_block do
+          plain form.submit "Share", class: "button primary"
+
+          plain form.submit "Save", class: "button secondary"
+
+          plain form.submit "Preview",
+            class: "button secondary hidden",
+            formaction: form_path,
+            formmethod: "get",
+            formnovalidate: true,
+            data: {
+              snippet_preview_target: "previewButton",
+              turbo_frame: dom_id(snippet, :code_block)
+            }
+
+          language_select(form, data: {action: "change->snippet-preview#preview"})
+        end
       end
     end
   end
@@ -106,7 +113,9 @@ def language_select(form, data: {})
 
   def language_select_options
     [%w[Auto auto]] +
-      Rouge::Lexer.all.map { |lexer|
+      Rouge::Lexer.all
+        .sort_by { |lexer| lexer.title }
+        .map { |lexer|
         [lexer.title, lexer.tag]
       }
   end

app/views/share/snippets/new.html.erb

@@ -1,6 +1,8 @@
 <%= render Pages::Header.new(title: "New Snippet") %>
 <div class="section-content container py-gap">
-  <%= render Share::Snippets::Form.new(@snippet) %>
+  <%= turbo_frame_tag :snippet_form do %>
+    <%= render Share::Snippets::Form.new(@snippet) %>
+  <% end %>
 
   <br>
 

app/views/share/snippets/show.html.erb

@@ -1,6 +1,8 @@
 <%= render Pages::Header.new(title: "Snippet") %>
 <div class="section-content container py-gap">
-  <%= render CodeBlock::Snippet.new(@snippet) %>
+  <%= turbo_frame_tag :snippet_form do %>
+    <%= render CodeBlock::Snippet.new(@snippet) %>
+  <% end %>
 
   <div>
     <%= link_to "Edit this snippet", edit_share_snippet_path(@snippet) %> |

spec/requests/share/snippets_spec.rb

@@ -50,9 +50,9 @@
         }.to change(Snippet, :count).by(1)
       end
 
-      it "redirects to the created snippet" do
+      it "redirects back to the edit page" do
         post share_snippets_url, params: {snippet: {source: "puts \"Hello!\"", language: "ruby"}}
-        expect(response).to redirect_to(share_snippet_url(Snippet.last))
+        expect(response).to redirect_to(edit_share_snippet_url(Snippet.last))
       end
     end
 
@@ -87,11 +87,11 @@
         expect(snippet.source).to eq("puts \"Goodbye!\"")
       end
 
-      it "redirects to the snippet" do
+      it "redirects back to the edit page" do
         snippet = FactoryBot.create(:snippet)
         patch share_snippet_url(snippet), params: {snippet: {source: "puts \"Goodbye!\""}}
         snippet.reload
-        expect(response).to redirect_to(share_snippet_url(snippet))
+        expect(response).to redirect_to(edit_share_snippet_url(snippet))
       end
     end
 

spec/system/snippets_spec.rb

@@ -12,36 +12,34 @@
 
     click_link "New snippet"
 
-    fill_in "snippet[filename]", with: "app/models/user.rb"
+    fill_in "snippet[filename]", with: "app/models/blog.rb"
     select "Ruby", from: "Language"
 
-    find("[data-controller=snippet-editor]").click
+    find(".code-editor").click
 
-    fill_in "snippet[source]", with: "class User\nend"
+    fill_in "snippet[source]", with: "class Blog\nend"
 
-    click_button "Create Snippet"
+    click_button "Save"
 
-    expect(page).to have_content("Snippet was successfully created.")
+    expect(page).to have_content("Your snippet has been saved")
 
     snippet = Snippet.last
-    expect(snippet.source).to eq("class User\nend")
+    expect(snippet.source).to eq("class Blog\nend")
     expect(snippet.language).to eq("ruby")
-    expect(snippet.filename).to eq("app/models/user.rb")
+    expect(snippet.filename).to eq("app/models/blog.rb")
 
-    click_link "Edit"
+    fill_in "snippet[filename]", with: "lib/models/blog.rb"
 
-    fill_in "snippet[filename]", with: "app/models/admin_user.rb"
+    find(".code-editor").click
+    fill_in "snippet[source]", with: "class Blog\n  has_many :posts\nend"
 
-    find("[data-controller=snippet-editor]").click
-    fill_in "snippet[source]", with: "class User\n  has_many :posts\nend"
+    click_button "Save"
 
-    click_button "Update Snippet"
+    expect(page).to have_content("Your snippet has been saved")
 
-    expect(page).to have_content("Snippet was successfully updated.")
+    click_link "Back to snippets"
 
-    snippet.reload
-    expect(snippet.source).to eq("class User\n  has_many :posts\nend")
-    expect(snippet.language).to eq("ruby")
-    expect(snippet.filename).to eq("app/models/admin_user.rb")
+    expect(page).to have_content("lib/models/blog.rb")
+    expect(page).to have_content("class Blog\n  has_many :posts\nend")
   end
 end