From d303751608ee2e4fba61e977e1951bc32f57010e Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Fri, 8 Sep 2017 13:36:02 -0500
Subject: [PATCH 1/9] add twitter client dependency

---
 package.json |  3 ++-
 yarn.lock    | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 103b8a1..189dcc3 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react-dom": "^15.5.4",
     "react-spinkit": "^3.0.0",
     "react-spinner": "^0.2.7",
-    "react-syntax-highlight": "^0.0.6"
+    "react-syntax-highlight": "^0.0.6",
+    "twitter": "^1.7.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 6f22be5..0836b5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1234,6 +1234,10 @@ decamelize@^1.0.0, decamelize@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+deep-extend@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.5.0.tgz#6ef4a09b05f98b0e358d6d93d4ca3caec6672803"
+
 deep-extend@~0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
@@ -2993,7 +2997,7 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
-request@^2.81.0:
+request@^2.72.0, request@^2.81.0:
   version "2.81.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
@@ -3411,6 +3415,13 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
 
+twitter@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/twitter/-/twitter-1.7.1.tgz#0762378f1dc1c050e48f666aca904e24b1a962f4"
+  dependencies:
+    deep-extend "^0.5.0"
+    request "^2.72.0"
+
 type-is@~1.6.15:
   version "1.6.15"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"

From 1d05c15351fbf93e9420523d1efce3bd189ca0d3 Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Fri, 8 Sep 2017 13:37:22 -0500
Subject: [PATCH 2/9] add twitter handler

---
 handlers/twitter.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 handlers/twitter.js

diff --git a/handlers/twitter.js b/handlers/twitter.js
new file mode 100644
index 0000000..1bd641f
--- /dev/null
+++ b/handlers/twitter.js
@@ -0,0 +1,30 @@
+const Twitter = require('twitter')
+
+const client = new Twitter({
+  consumer_key: process.env.TWITTER_CONSUMER_KEY,
+  consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
+  access_token_key: process.env.TWITTER_ACCESS_TOKEN_KEY,
+  access_token_secret: process.env.TWITTER_ACCESS_TOKEN_SECRET
+})
+
+const uploadImage = (data) => client.post('media/upload', { media_data: data })
+const uploadTweet = (media) => client.post('statuses/update', { status: 'carbon copy', media_ids: media.media_id_string })
+const extractImageUrl = (stuff) => console.log(stuff.entities.media[0].media_url)
+
+const respondSuccess = (res, url) => res.json({ url })
+const respondFail = (res, err) => {
+  console.error(`Error: ${err.message || err}`)
+  res.status(500).send()
+}
+
+module.exports = (req, res) => {
+  if (!req.body.data) {
+    return res.status(400).send()
+  }
+
+  uploadImage(req.body.data)
+    .then(uploadTweet)
+    .then(extractImageUrl)
+    .then(respondSuccess.bind(null, res))
+    .catch(respondFail.bind(null, res))
+}
\ No newline at end of file

From 32a44436ee584c419154d49e35567147fed64d77 Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Fri, 8 Sep 2017 13:38:14 -0500
Subject: [PATCH 3/9] register twitter handler on server

---
 server.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server.js b/server.js
index 427c62a..fe8d2f4 100644
--- a/server.js
+++ b/server.js
@@ -29,7 +29,7 @@ app.prepare()
 
   // api endpoints
   server.post('/upload', bodyParser.json(), wrap(require('./handlers/upload')))
-
+  server.post('/twitter', bodyParser.json(), require('./handlers/twitter'))
 
   server.listen(3000, (err) => {
     if (err) throw err

From ca9965200d2754d55e753d60971039297a1eb3ed Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Thu, 14 Sep 2017 21:19:15 -0500
Subject: [PATCH 4/9] update dependencies

---
 package.json |  2 +-
 yarn.lock    | 35 ++++++++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 189dcc3..799ab66 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "next": "^2.4.3",
     "react": "^15.5.4",
     "react-click-outside": "^2.3.1",
-    "react-codemirror": "^1.0.0",
+    "react-codemirror": "0.2.6",
     "react-color": "^2.12.1",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
diff --git a/yarn.lock b/yarn.lock
index 0836b5e..99ce3e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,16 @@
 # yarn lockfile v1
 
 
+"@skidding/react-codemirror@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@skidding/react-codemirror/-/react-codemirror-1.0.1.tgz#ce7927a10248e2369f8bce03669b92d88fead797"
+  dependencies:
+    classnames "^2.2.5"
+    codemirror "^5.18.2"
+    create-react-class "^15.5.1"
+    lodash.isequal "^4.5.0"
+    prop-types "^15.5.4"
+
 abbrev@1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
@@ -1064,6 +1074,10 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+codemirror@5.29.0, codemirror@^5.13.4:
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.29.0.tgz#e68de1350e2f0ce804a3930576d0ae318736e967"
+
 codemirror@^5.18.2, codemirror@^5.26.0:
   version "5.26.0"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.26.0.tgz#bcbee86816ed123870c260461c2b5c40b68746e5"
@@ -2133,7 +2147,7 @@ lodash-es@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
 
-lodash.debounce@^4.0.8:
+lodash.debounce@^4.0.4:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
 
@@ -2781,16 +2795,19 @@ react-click-outside@^2.3.1:
   dependencies:
     hoist-non-react-statics "^1.2.0"
 
-react-codemirror@^1.0.0:
+react-codemirror2@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/react-codemirror/-/react-codemirror-1.0.0.tgz#91467b53b1f5d80d916a2fd0b4c7adb85a9001ba"
+  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-1.0.0.tgz#b529a6c5c91219f92c751f43a17721cdaf36b05f"
   dependencies:
-    classnames "^2.2.5"
-    codemirror "^5.18.2"
-    create-react-class "^15.5.1"
-    lodash.debounce "^4.0.8"
-    lodash.isequal "^4.5.0"
-    prop-types "^15.5.4"
+    codemirror "5.29.0"
+
+react-codemirror@0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/react-codemirror/-/react-codemirror-0.2.6.tgz#e71e35717ce6effae68df1dbf2b5a75b84a44f84"
+  dependencies:
+    classnames "^2.2.3"
+    codemirror "^5.13.4"
+    lodash.debounce "^4.0.4"
 
 react-color@^2.12.1:
   version "2.12.1"

From 869db3c92dac5b4cd1c2790dcd53eb369120ba89 Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Thu, 14 Sep 2017 21:21:18 -0500
Subject: [PATCH 5/9] up max payload size to 5mb for twitter api

---
 server.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index fe8d2f4..9b53544 100644
--- a/server.js
+++ b/server.js
@@ -20,6 +20,9 @@ app.prepare()
 
   server.use(morgan('tiny'))
 
+  server.get('/about', (req, res) =>
+    app.render(req, res, '/about'))
+
   // if root, render webpage from next
   server.get('*', (req, res) =>
     app.render(req, res, '/', req.query))
@@ -29,7 +32,7 @@ app.prepare()
 
   // api endpoints
   server.post('/upload', bodyParser.json(), wrap(require('./handlers/upload')))
-  server.post('/twitter', bodyParser.json(), require('./handlers/twitter'))
+  server.post('/twitter', bodyParser.json({ limit: '5mb' }), require('./handlers/twitter'))
 
   server.listen(3000, (err) => {
     if (err) throw err

From 434be8a747503582a0338037e910d94aa47ef754 Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Thu, 14 Sep 2017 21:22:48 -0500
Subject: [PATCH 6/9] update twitter handler

---
 handlers/twitter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/handlers/twitter.js b/handlers/twitter.js
index 1bd641f..fb44a7a 100644
--- a/handlers/twitter.js
+++ b/handlers/twitter.js
@@ -9,7 +9,7 @@ const client = new Twitter({
 
 const uploadImage = (data) => client.post('media/upload', { media_data: data })
 const uploadTweet = (media) => client.post('statuses/update', { status: 'carbon copy', media_ids: media.media_id_string })
-const extractImageUrl = (stuff) => console.log(stuff.entities.media[0].media_url)
+const extractImageUrl = (response) => response.entities.media[0].display_url
 
 const respondSuccess = (res, url) => res.json({ url })
 const respondFail = (res, err) => {

From 3a60e4622f20afc91b1b7420088c94b852d8dc90 Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Thu, 14 Sep 2017 21:24:14 -0500
Subject: [PATCH 7/9] add tweet api function

---
 lib/api.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/lib/api.js b/lib/api.js
index e185dc0..a7a9068 100644
--- a/lib/api.js
+++ b/lib/api.js
@@ -1,5 +1,7 @@
 import axios from 'axios'
 
+const DOMAIN = process.browser ? document.location.origin : ''
+
 const gistClient = axios.create({
   baseURL: 'https://api.github.com',
   timeout: 5000,
@@ -9,6 +11,16 @@ const gistClient = axios.create({
   }
 });
 
+async function tweet (encodedImage) {
+  const processedData = encodedImage.split(',')[1]
+
+  return axios.post(`${DOMAIN}/twitter`, { data: processedData })
+  .then((res) => res.data.url)
+  .then((url) => encodeURIComponent(`Built with @carbon ${url}`))
+  .then((uri) => `https://twitter.com/intent/tweet?text=${uri}`)
+  .then(openTwitterUrl)
+}
+
 async function uploadImage (encodedImage) {
    // upload image
   const url = 'https://api.imgur.com/3/image'
@@ -40,5 +52,16 @@ const getGist = (id) => {
 
 export default {
   uploadImage,
-  getGist
+  getGist,
+  tweet
+}
+
+// private
+function openTwitterUrl (twitterUrl) {
+  const width  = 575, height = 400
+  const left = (window.outerWidth  - width)  / 2
+  const right = (window.outerHeight - height) / 2
+  const opts = `status=1,width=${width},height=${height},top=${top},left=${left}`
+  
+  window.open(twitterUrl, 'twitter', opts)
 }

From fd38138dae9f46e916f2e53d9000014fa0dfa740 Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Thu, 14 Sep 2017 21:24:39 -0500
Subject: [PATCH 8/9] update pages/components to handle new tweet functionality

---
 components/Toolbar.js |  2 +-
 pages/about.js        |  2 +-
 pages/editor.js       | 46 +++++++++++++++++++++++--------------------
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/components/Toolbar.js b/components/Toolbar.js
index bf20c2c..ab5bf5b 100644
--- a/components/Toolbar.js
+++ b/components/Toolbar.js
@@ -16,7 +16,7 @@ const Toolbar = (props) => (
     />
     <Settings onChange={props.onSettingsChange} enabled={props.enabled} />
     <div className="buttons">
-      <CopyButton />
+      <Button className="tweetButton" onClick={props.upload} title={props.uploading ? 'loading...' : 'Tweet Image'} color="#0084b4" style={{ marginRight: '8px' }} />
       <Button onClick={props.save} title="Save Image" color="#57b5f9" />
     </div>
     <style jsx>{`
diff --git a/pages/about.js b/pages/about.js
index c124778..97a1b41 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -17,7 +17,7 @@ export default () => (
         <p className="mb1 mt2">There are a few different ways to import code into Carbon:</p>
         <ul className="mt0 mb3">
           <li>Drag a file into the editor</li>
-          <li>Append a GitHub gist id to the url (<a className="link" href="#">example</a>)</li>
+          <li>Append a GitHub gist id to the url (<a className="link" href="/0db00e81d5416c339181e59481c74b59">example</a>)</li>
           <li>Paste your code directly</li>
         </ul>
         <h4 className="mb0">Customization</h4>
diff --git a/pages/editor.js b/pages/editor.js
index 5935516..ad1a4a9 100644
--- a/pages/editor.js
+++ b/pages/editor.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import HTML5Backend from 'react-dnd-html5-backend'
 import { DragDropContext } from 'react-dnd'
-import Axios from 'axios'
 import domtoimage from 'dom-to-image'
 
 import Page from '../components/Page'
@@ -34,11 +33,15 @@ class Editor extends React.Component {
       dropShadow: true,
       windowControls: true,
       paddingVertical: '48px',
-      paddingHorizontal: '32px'
+      paddingHorizontal: '32px',
+      uploading: false
     }
+
+    this.save = this.save.bind(this)
+    this.upload = this.upload.bind(this)
   }
 
-  save () {
+  getCarbonImage () {
     const node = document.getElementById('section')
 
     const config = {
@@ -50,40 +53,41 @@ class Editor extends React.Component {
       height: node.offsetHeight * 2
     }
 
-    domtoimage.toPng(node, config)
-      .then((dataUrl) => {
-        const link = document.createElement('a')
-        link.download = 'snippet.png'
-        link.href = dataUrl
-        link.click()
-      })
+    return  domtoimage.toPng(node, config)
+  }
+
+  save () {
+    this.getCarbonImage()
+    .then((dataUrl) => {
+      const link = document.createElement('a')
+      link.download = 'snippet.png'
+      link.href = dataUrl
+      link.click()
+    })
   }
 
   upload () {
-    domtoimage.toBlob(document.getElementById('container'))
-      .then(api.uploadImage)
-      .then(res => res.data.id)
-      .then(id => `http://i.imgur.com/${id}`)
-      .then(console.log)
+    this.setState({ uploading: true })
+    this.getCarbonImage()
+    .then(api.tweet)
+    .then(() => this.setState({ uploading: false }))
+    .catch(console.error)
   }
 
   render () {
     return (
         <Page enableHeroText>
-          {/* TODO this doesn't update the render */}
           <ReadFileDropContainer
-            onDrop={(droppedContent) => {
-              console.log(droppedContent)
-              this.setState({ droppedContent })
-            }}
+            onDrop={droppedContent => this.setState({ droppedContent })}
           >
             <div id="editor">
               <Toolbar
                 save={this.save}
                 upload={this.upload}
+                uploading={this.state.uploading}
                 onBGChange={color => this.setState({ background: color })}
                 onThemeChange={theme => this.setState({ theme: theme.id })}
-                onLanguageChange={language => this.setState({ language })}
+                onLanguageChange={language => this.setState({ language: language.module })}
                 onSettingsChange={(key, value) => this.setState({ [key]: value })}
                 bg={this.state.background}
                 enabled={this.state}

From 1cf075732401bd5282546f45f8769960c9ec537c Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Thu, 14 Sep 2017 20:35:05 -0700
Subject: [PATCH 9/9] Slight updates

---
 components/Toolbar.js | 4 ++--
 lib/api.js            | 8 ++++----
 package.json          | 2 +-
 pages/editor.js       | 5 ++++-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/components/Toolbar.js b/components/Toolbar.js
index ab5bf5b..2f18cb6 100644
--- a/components/Toolbar.js
+++ b/components/Toolbar.js
@@ -16,8 +16,8 @@ const Toolbar = (props) => (
     />
     <Settings onChange={props.onSettingsChange} enabled={props.enabled} />
     <div className="buttons">
-      <Button className="tweetButton" onClick={props.upload} title={props.uploading ? 'loading...' : 'Tweet Image'} color="#0084b4" style={{ marginRight: '8px' }} />
-      <Button onClick={props.save} title="Save Image" color="#57b5f9" />
+      <Button className="tweetButton" onClick={props.upload} title={props.uploading ? 'Loading...' : 'Tweet Image'} color="#57b5f9" style={{ marginRight: '8px' }} />
+      <Button onClick={props.save} title="Save Image" color="#c198fb" />
     </div>
     <style jsx>{`
       #toolbar {
diff --git a/lib/api.js b/lib/api.js
index a7a9068..b341a15 100644
--- a/lib/api.js
+++ b/lib/api.js
@@ -15,9 +15,9 @@ async function tweet (encodedImage) {
   const processedData = encodedImage.split(',')[1]
 
   return axios.post(`${DOMAIN}/twitter`, { data: processedData })
-  .then((res) => res.data.url)
-  .then((url) => encodeURIComponent(`Built with @carbon ${url}`))
-  .then((uri) => `https://twitter.com/intent/tweet?text=${uri}`)
+  .then(res => res.data.url)
+  .then(url => encodeURIComponent(`Built with #Carbon, by @dawn_labs ${url}`))
+  .then(uri => `https://twitter.com/intent/tweet?text=${uri}`)
   .then(openTwitterUrl)
 }
 
@@ -62,6 +62,6 @@ function openTwitterUrl (twitterUrl) {
   const left = (window.outerWidth  - width)  / 2
   const right = (window.outerHeight - height) / 2
   const opts = `status=1,width=${width},height=${height},top=${top},left=${left}`
-  
+
   window.open(twitterUrl, 'twitter', opts)
 }
diff --git a/package.json b/package.json
index 799ab66..401172d 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "code-image-2",
+  "name": "carbon",
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
diff --git a/pages/editor.js b/pages/editor.js
index ad1a4a9..212e17f 100644
--- a/pages/editor.js
+++ b/pages/editor.js
@@ -71,7 +71,10 @@ class Editor extends React.Component {
     this.getCarbonImage()
     .then(api.tweet)
     .then(() => this.setState({ uploading: false }))
-    .catch(console.error)
+    .catch((err) => {
+      console.error(err)
+      this.setState({ uploading: false })
+    })
   }
 
   render () {