update pages/components to handle new tweet functionality

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>{`

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>

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}