feat: upload code snippet image to twitter

Author: Lewis Youl

Gemfile

@@ -29,6 +29,7 @@ gem "aws-sdk-s3", require: false
 gem 'redis'
 gem 'omniauth-github'
 gem 'omniauth-rails_csrf_protection'
+gem 'twitter'
 
 # Use Redis adapter to run Action Cable in production
 # gem 'redis', '~> 4.0'

Gemfile.lock

@@ -95,22 +95,40 @@ GEM
     bindex (0.8.1)
     bootsnap (1.4.6)
       msgpack (~> 1.0)
+    buftok (0.2.0)
     builder (3.2.4)
     byebug (11.1.1)
     case_transform (0.2)
       activesupport
     concurrent-ruby (1.1.6)
     crass (1.0.6)
+    domain_name (0.5.20190701)
+      unf (>= 0.0.5, < 1.0.0)
+    equalizer (0.0.11)
     erubi (1.9.0)
     faraday (1.3.0)
       faraday-net_http (~> 1.0)
       multipart-post (>= 1.2, < 3)
       ruby2_keywords
     faraday-net_http (1.0.1)
     ffi (1.12.2)
+    ffi-compiler (1.0.1)
+      ffi (>= 1.0.0)
+      rake
     globalid (0.4.2)
       activesupport (>= 4.2.0)
     hashie (4.1.0)
+    http (4.4.1)
+      addressable (~> 2.3)
+      http-cookie (~> 1.0)
+      http-form_data (~> 2.2)
+      http-parser (~> 1.2.0)
+    http-cookie (1.0.3)
+      domain_name (~> 0.5)
+    http-form_data (2.3.0)
+    http-parser (1.2.3)
+      ffi-compiler (>= 1.0, < 2.0)
+    http_parser.rb (0.6.0)
     i18n (1.8.2)
       concurrent-ruby (~> 1.0)
     jbuilder (2.10.0)
@@ -133,6 +151,8 @@ GEM
       mini_mime (>= 0.1.1)
     marcel (0.3.3)
       mimemagic (~> 0.3.2)
+    memoizable (0.4.2)
+      thread_safe (~> 0.3, >= 0.3.1)
     method_source (1.0.0)
     mimemagic (0.3.4)
     mini_mime (1.0.2)
@@ -142,6 +162,7 @@ GEM
     multi_json (1.15.0)
     multi_xml (0.6.0)
     multipart-post (2.1.1)
+    naught (1.1.0)
     nio4r (2.5.2)
     nokogiri (1.10.9)
       mini_portile2 (~> 2.4.0)
@@ -223,6 +244,7 @@ GEM
       sprockets (> 3.0)
       sprockets-rails
       tilt
+    simple_oauth (0.3.1)
     spring (2.1.0)
     spring-watcher-listen (2.0.1)
       listen (>= 2.7, < 4.0)
@@ -242,8 +264,22 @@ GEM
     turbolinks (5.2.1)
       turbolinks-source (~> 5.2)
     turbolinks-source (5.2.0)
+    twitter (7.0.0)
+      addressable (~> 2.3)
+      buftok (~> 0.2.0)
+      equalizer (~> 0.0.11)
+      http (~> 4.0)
+      http-form_data (~> 2.0)
+      http_parser.rb (~> 0.6.0)
+      memoizable (~> 0.4.0)
+      multipart-post (~> 2.0)
+      naught (~> 1.0)
+      simple_oauth (~> 0.3.0)
     tzinfo (1.2.7)
       thread_safe (~> 0.1)
+    unf (0.1.4)
+      unf_ext
+    unf_ext (0.0.7.7)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.0.1)
@@ -284,6 +320,7 @@ DEPENDENCIES
   spring-watcher-listen (~> 2.0.0)
   tailwindcss-rails (~> 0.3.1)
   turbolinks (~> 5)
+  twitter
   tzinfo-data
   web-console (>= 3.3.0)
   webpacker (~> 4.0)

app/controllers/tweets_controller.rb

@@ -0,0 +1,11 @@
+class TweetsController < ApplicationController
+  def create
+    twitter_client.tweet_media(params[:data].path)
+  end
+
+  private
+
+  def twitter_client
+    Clients::Twitter.new
+  end
+end

app/javascript/controllers/picture_controller.js

@@ -1,34 +1,71 @@
 import { Controller } from 'stimulus';
 import domtoimage from 'dom-to-image';
+import axios from 'axios'
 
 export default class extends Controller {
 	static targets = ['code']
 
-	capture() {
-		const scale = 2;
-		const node = this.codeTarget
-		const options = {
-			height: node.offsetHeight * scale,
-			width: node.offsetWidth * scale,
-			style: {
-				transform: "scale(" + scale + ")",
-				transformOrigin: "top left",
-				width: node.offsetWidth + "px",
-				height: node.offsetHeight + "px"
-			}
-		}
+  initialize() {
+    const csrfToken = document.querySelector("meta[name=csrf-token]").content
+    axios.defaults.headers.common['X-CSRF-Token'] = csrfToken
+  }
 
-		domtoimage.toJpeg(node, options)
-			.then(this.downloadImage)
-			.catch(console.error)
+	toDataUrl() {
+		return domtoimage.toPng(this.codeTarget, this.imageConfig)
 	}
 
+  toBlob() {
+    return domtoimage.toBlob(this.codeTarget, this.imageConfig)
+  }
+
+  tweet() {
+    this.toBlob()
+      .then(this.tweetImage)
+      .catch(console.error)
+  }
+
+  download() {
+    this.toDataUrl()
+      .then(this.downloadImage)
+      .catch(console.error)
+  }
+
+  tweetImage(blob) {
+    let fd = new FormData();
+    fd.append('fname', 'tweet.png');
+    fd.append('data', blob);
+
+    const headers = { 'Content-Type': `multipart/form-data` }
+
+    axios.post(`/tweets`, fd, { headers })
+      .then(res => {
+        console.log('tweeted!')
+        // create the twet intent with the created media url in it
+      })
+      .catch(console.error)
+  }
+
 	downloadImage(dataUrl) {
 		let link = document.createElement('a')
 
-		link.setAttribute('download', 'snippetsafe.jpeg');
+		link.setAttribute('download', 'snippetsafe.png');
 		link.setAttribute('href', dataUrl);
 		link.click();
 		link.remove()
 	}
+
+  get imageConfig() {
+    const scale = 2;
+
+		return {
+			height: this.codeTarget.offsetHeight * scale,
+			width: this.codeTarget.offsetWidth * scale,
+			style: {
+				transform: "scale(" + scale + ")",
+				transformOrigin: "top left",
+				width: this.codeTarget.offsetWidth + "px",
+				height: this.codeTarget.offsetHeight + "px"
+			}
+		}
+  }
 }

app/services/clients/twitter.rb

@@ -0,0 +1,26 @@
+require 'twitter'
+
+module Clients
+  class Twitter
+
+    def tweet(body)
+      client.update(body)
+    end
+
+    def tweet_media(filepath)
+      client.update_with_media('', File.new(filepath))
+    end
+
+    private
+  
+    def client
+      @client ||= ::Twitter::REST::Client.new do |config|
+        config.consumer_key        = "0bEb97Ev9jfb0SdZAc3bnvuzq"
+        config.consumer_secret     = "x5cpKgPzcdhXXHPKDKOuo5JAIOhMDr3Y22SZiYwHrHvV9dUzuW"
+        config.access_token        = "1354061940260294656-OA3CosQ2hUd90llhxLubtdNASYfgaW"
+        config.access_token_secret = "k8MZ8tCtvIJQs56FNjRzkbDHzY7BIkoOh5IVqAK4fnt4A"
+      end
+    end
+
+  end
+end

app/views/modals/snippets/picture.html.erb

@@ -7,7 +7,7 @@
 	</div>
 
 	<div class="flex justify-end mt-4">
-		<%= button_tag('Tweet', class: 'button--disabled mr-2') %>
-		<%= button_tag('Download', class: 'button--cta-tertiary', data: { action: 'click->picture#capture' }) %>
+		<%= button_tag('Tweet', class: 'button--cta-tertiary mr-2', data: { action: 'click->picture#tweet' }) %>
+		<%= button_tag('Download', class: 'button--cta-tertiary', data: { action: 'click->picture#download' }) %>
 	</div>
 </div>

config/routes.rb

@@ -97,4 +97,6 @@
     put :file_snippet, on: :collection
     put :unfile_snippet, on: :collection
   end
+
+  resources :tweets, only: :create
 end