Merge pull request #208 from joyofrails/feat/snippet-download

rossta · web-flow · commit 40521b3fcebb · 2024-09-04T07:15:48.000-04:00
Snippet screenshot download
diff --git a/app/controllers/share/snippet_screenshots_controller.rb b/app/controllers/share/snippet_screenshots_controller.rb
@@ -15,6 +15,15 @@ def new
   def create
     @snippet = Snippet.find(params[:snippet_id])
     @snippet.attach_screenshot_from_base64(params[:screenshot])
-    redirect_to new_share_snippet_tweet_path(@snippet, auto: true), notice: "Screenshot successful".emojoy
+    redirect_to intent_url, notice: "Screenshot successful".emojoy
+  end
+
+  def intent_url
+    case params[:intent]
+    when "share"
+      new_share_snippet_tweet_url(@snippet, auto: true)
+    else
+      share_snippet_url(@snippet)
+    end
   end
 end
diff --git a/app/javascript/controllers/snippets/screenshot.ts b/app/javascript/controllers/snippets/screenshot.ts
@@ -40,6 +40,13 @@ export default class extends Controller<HTMLFormElement> {
       const data = await this.drawScreenshot();
 
       event.detail.fetchOptions.body.append('screenshot', data);
+
+      const searchParams = new URLSearchParams(window.location.search);
+      ['auto', 'intent'].forEach((key) => {
+        if (searchParams.get(key)) {
+          event.detail.fetchOptions.body.append(key, searchParams.get(key));
+        }
+      });
     }
 
     event.detail.resume();
diff --git a/app/javascript/controllers/snippets/tweet.ts b/app/javascript/controllers/snippets/tweet.ts
@@ -21,33 +21,31 @@ const WINDOW_OPTIONS = {
 const WINDOW_OPTIONS_ARGUMENT = Object.entries(WINDOW_OPTIONS)
   .map(([key, value]) => `${key}=${value}`)
   .join(',');
-export default class extends Controller {
+export default class extends Controller<HTMLAnchorElement> {
   static values = {
-    url: String,
     auto: Boolean,
+    url: String,
   };
 
-  declare urlValue: string;
-  declare autoValue: boolean;
+  declare readonly autoValue: boolean;
+  declare readonly urlValue: string;
 
   connect() {
     console.log('Connect!');
 
     if (this.autoValue) {
-      this.tweet();
+      this.element.click();
       Turbo.visit(this.urlValue);
     }
   }
 
-  tweet() {
-    console.log('Tweet!');
-
-    const url = this.urlValue;
-
-    const tweetText = encodeURIComponent(`Created with @joyofrails ${url}`);
+  tweet = (event: Event) => {
+    if (event) {
+      event.preventDefault();
+    }
 
-    const tweetUrl = `https://x.com/intent/post?text=${tweetText}`;
+    const tweetUrl = (this.element as HTMLAnchorElement).href;
 
     window.open(tweetUrl, '_blank', WINDOW_OPTIONS_ARGUMENT);
-  }
+  };
 }
diff --git a/app/javascript/css/components/button.css b/app/javascript/css/components/button.css
@@ -55,6 +55,27 @@
       background-color: var(--joy-button-tertiary-active);
     }
   }
+  &.transparent {
+    color: inherit;
+    border: 1px solid var(--joy-button-transparent-active);
+    background-color: var(--joy-button-transparent);
+    &:hover {
+      background-color: var(--joy-button-transparent-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-transparent-active);
+    }
+  }
+  &.tertiary {
+    border: 1px solid var(--joy-button-tertiary);
+    background-color: var(--joy-button-tertiary);
+    &:hover {
+      background-color: var(--joy-button-tertiary-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-tertiary-active);
+    }
+  }
   &.warn {
     background-color: var(--joy-button-warn);
     &:hover {
diff --git a/app/javascript/css/config/theme.css b/app/javascript/css/config/theme.css
@@ -85,6 +85,9 @@
   --joy-button-tertiary: var(--color-slate-500);
   --joy-button-tertiary-hover: var(--color-slate-600);
   --joy-button-tertiary-active: var(--color-slate-700);
+  --joy-button-transparent: none;
+  --joy-button-transparent-hover: var(--joy-color-100);
+  --joy-button-transparent-active: var(--joy-color-200);
   --joy-button-warn: var(--color-red-500);
   --joy-button-warn-hover: var(--color-red-400);
 }
@@ -123,4 +126,8 @@
   --joy-link-visited: var(--joy-link-3);
   --joy-link-decoration: var(--joy-link-8);
   --joy-link-active: var(--joy-link-5);
+
+  --joy-button-transparent: none;
+  --joy-button-transparent-hover: var(--joy-color-950);
+  --joy-button-transparent-active: var(--joy-color-900);
 }
diff --git a/app/views/components/code_block/atom_aware.rb b/app/views/components/code_block/atom_aware.rb
@@ -12,6 +12,6 @@ def view_template
   end
 
   def content_type?(type)
-    helpers.headers["Content-Type"].to_s =~ %r{#{Regexp.escape(type)}}
+    helpers&.headers&.[]("Content-Type").to_s =~ %r{#{Regexp.escape(type)}}
   end
 end
diff --git a/app/views/share/snippet_tweets/tweet.rb b/app/views/share/snippet_tweets/tweet.rb
@@ -1,6 +1,4 @@
 class Share::SnippetTweets::Tweet < ApplicationComponent
-  include Phlex::Rails::Helpers::ButtonTag
-  include Phlex::Rails::Helpers::ClassNames
   include PhlexConcerns::FlexBlock
 
   def initialize(snippet, auto: false)
@@ -9,30 +7,17 @@ def initialize(snippet, auto: false)
   end
 
   def view_template
-    div(
-      class: "snippet-tweet grid-content",
-      data: {
-        controller: "snippet-tweet",
-        snippet_tweet_url_value: tweet_url,
-        snippet_tweet_auto_value: auto?.to_s
-      }
-    ) do
+    div(class: "snippet-tweet grid-content") do
       render CodeBlock::Snippet.new(
         @snippet,
         screenshot: true
       )
 
       flex_block do
-        button_tag "Share",
-          class: class_names("button", "primary"),
-          data: {action: "click->snippet-tweet#tweet"}
+        render Share::SnippetTweets::TweetButton.new(@snippet, auto: auto?)
       end
     end
   end
 
-  def tweet_url
-    share_snippet_url(@snippet)
-  end
-
   def auto? = !!@auto
 end
diff --git a/app/views/share/snippet_tweets/tweet_button.rb b/app/views/share/snippet_tweets/tweet_button.rb
@@ -0,0 +1,39 @@
+class Share::SnippetTweets::TweetButton < ApplicationComponent
+  def initialize(snippet, auto: false)
+    @snippet = snippet
+    @auto = auto
+  end
+
+  def view_template
+    a(
+      href: tweet_url,
+      class: "button primary",
+      data: {
+        controller: "snippet-tweet",
+        action: "click->snippet-tweet#tweet",
+        snippet_tweet_auto_value: auto?.to_s,
+        snippet_tweet_url_value: share_url
+      }
+    ) do
+      "Share"
+    end
+  end
+
+  def tweet_url
+    "https://x.com/intent/post?text=#{encode(tweet_text)}"
+  end
+
+  def share_url
+    share_snippet_url(@snippet)
+  end
+
+  def tweet_text
+    "Created with @joyofrails #{share_url}"
+  end
+
+  def encode(text)
+    URI.encode_www_form_component(text)
+  end
+
+  def auto? = !!@auto
+end
diff --git a/app/views/share/snippets/toolbar.rb b/app/views/share/snippets/toolbar.rb
@@ -10,11 +10,21 @@ def initialize(snippet, current_user: nil)
 
   def view_template
     flex_block do
-      link_to "Share", share_url, class: "button primary"
+      render Share::SnippetTweets::TweetButton.new(@snippet)
+
+      a(
+        href: download_url,
+        class: "button transparent"
+      ) { "Download" }
+
       if @current_user&.can_edit?(@snippet)
-        link_to "Edit this snippet", edit_share_snippet_path(@snippet),
+        a(
+          href: edit_share_snippet_path(@snippet),
           class: "button secondary",
           data: {turbo_frame: "snippet_form"}
+        ) do
+          "Edit this snippet"
+        end
       end
     end
   end
@@ -23,7 +33,15 @@ def share_url
     if @snippet.screenshot.attached?
       new_share_snippet_tweet_path(@snippet, auto: "true")
     else
-      new_share_snippet_screenshot_path(@snippet, auto: "true")
+      new_share_snippet_screenshot_path(@snippet, auto: "true", intent: "share")
+    end
+  end
+
+  def download_url
+    if @snippet.screenshot.attached?
+      rails_blob_url(@snippet.screenshot, disposition: "attachment")
+    else
+      new_share_snippet_screenshot_path(@snippet, auto: "true", intent: "download")
     end
   end
 end
diff --git a/spec/factories/snippets.rb b/spec/factories/snippets.rb
@@ -2,6 +2,7 @@
   factory :snippet do
     source { "puts \"Hello, world!\"" }
     language { "ruby" }
+    filename { "example.rb" }
     author { build(:user) }
   end
 end
diff --git a/spec/requests/share/snippet_screenshots_spec.rb b/spec/requests/share/snippet_screenshots_spec.rb
@@ -0,0 +1,37 @@
+require "rails_helper"
+
+RSpec.describe "/snippets/:id/screenshot", type: :request do
+  describe "GET show" do
+    it "is successful" do
+      get share_snippet_screenshot_path(FactoryBot.create(:snippet))
+
+      expect(response).to have_http_status(:success)
+    end
+  end
+
+  describe "GET new" do
+    it "is successful" do
+      get new_share_snippet_screenshot_path(FactoryBot.create(:snippet))
+
+      expect(response).to have_http_status(:success)
+    end
+  end
+
+  describe "POST create" do
+    let(:png_data_uri) { "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" }
+
+    it "attaches screenshot and redirects to show" do
+      post share_snippet_screenshot_path(FactoryBot.create(:snippet)), params: {screenshot: png_data_uri}
+
+      expect(response).to have_http_status(:found)
+      expect(response).to redirect_to(share_snippet_path(Snippet.last))
+    end
+
+    it "attaches screenshot and redirects to share" do
+      post share_snippet_screenshot_path(FactoryBot.create(:snippet)), params: {intent: "share", screenshot: png_data_uri}
+
+      expect(response).to have_http_status(:found)
+      expect(response).to redirect_to(new_share_snippet_tweet_url(Snippet.last, auto: true))
+    end
+  end
+end
diff --git a/spec/support/phlex_helpers.rb b/spec/support/phlex_helpers.rb
@@ -0,0 +1,5 @@
+RSpec.configure do |config|
+  config.before(:each, type: :view) do
+    allow(view).to receive(:headers).and_return({"Content-Type" => "text/html"})
+  end
+end
diff --git a/spec/system/snippets_spec.rb b/spec/system/snippets_spec.rb
@@ -50,7 +50,7 @@
 
     click_link "Share"
 
-    expect(page).to have_content("Screenshot")
+    expect(page).to have_content("Download")
   end
 
   it "can share Snippet" do
@@ -63,6 +63,7 @@
       click_link "Share"
     end
 
-    expect(page).to have_content("Screenshot")
+    expect(page).to have_content("Download")
+    click_link "Download"
   end
 end
diff --git a/spec/views/share/snippet_tweets/tweet_button_spec.rb b/spec/views/share/snippet_tweets/tweet_button_spec.rb
@@ -0,0 +1,10 @@
+require "rails_helper"
+
+RSpec.describe Share::SnippetTweets::TweetButton, type: :view do
+  it "renders" do
+    snippet = instance_double(Snippet, **FactoryBot.attributes_for(:snippet))
+    render Share::SnippetTweets::TweetButton.new(snippet)
+
+    expect(rendered).to have_css("a[href*='x.com']")
+  end
+end
diff --git a/spec/views/share/snippet_tweets/tweet_spec.rb b/spec/views/share/snippet_tweets/tweet_spec.rb
@@ -0,0 +1,10 @@
+require "rails_helper"
+
+RSpec.describe Share::SnippetTweets::Tweet, type: :view do
+  it "renders" do
+    snippet = instance_double(Snippet, **FactoryBot.attributes_for(:snippet))
+    render Share::SnippetTweets::Tweet.new(snippet)
+
+    expect(rendered).to have_css(".snippet-tweet")
+  end
+end
