Rework twitter share button

Consolidate stimulus tweet functionality to link and extract as Phlex
component for toolbar

Author: rossta

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);
-  }
+  };
 }

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

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

app/views/share/snippets/toolbar.rb

@@ -10,7 +10,8 @@ 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)
+
       if @current_user&.can_edit?(@snippet)
         link_to "Edit this snippet", edit_share_snippet_path(@snippet),
           class: "button secondary",