add basic copy button support

components/CopyButton.js

@@ -1,9 +1,13 @@
 import React from 'react'
+import domtoimage from 'dom-to-image'
 
 import Button from './Button'
+import api from '../lib/api'
 
 // constants
 const BUTTON_COLOR = '#84ACFC'
+const BUTTON_STYLE = { borderRadius: '3px 0px 0px 3px' }
+const DEBOUNCE_DURATION = 10000
 
 const STATUS = {
   IDLE: 'IDLE',
@@ -13,8 +17,8 @@ const STATUS = {
 
 const textMap = {
   [STATUS.IDLE]: 'Copy Imgur Link',
-  [STATUS.LOADING]: 'Loading...',
-  [STATUS.DEBOUNCED]: 'Coppied'
+  [STATUS.LOADING]: 'Uploading...',
+  [STATUS.DEBOUNCED]: 'Copied to Clipboard'
 }
 
 class CopyButton extends React.Component {
@@ -24,16 +28,63 @@ class CopyButton extends React.Component {
     this.state = {
       status: STATUS.IDLE
     }
+
+    // bind methods
+    this.handleIdleClick = this.handleIdleClick.bind(this)
+    this.handleDebounceClick = this.handleDebounceClick.bind(this)
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  uploadImage () {
+    return domtoimage.toBlob(document.getElementById('container'))
+      .then(api.uploadImage)
+      .then(res => res.data.id)
+      .then(id => `http://i.imgur.com/${id}`)
+  }
+
+  handleIdleClick () {
+    // set to loading
+    this.setState({
+      status: STATUS.LOADING
+    })
+
+    // upload code image and update state
+    this.uploadImage()
+      .then(link => {
+        console.log('link')
+        this.setState({
+          status: STATUS.DEBOUNCED,
+          link
+        })
+
+        setTimeout(() => {
+          this.setState({
+            status: STATUS.IDLE
+          })
+        }, DEBOUNCE_DURATION)
+      })
+  }
+
+  handleDebounceClick () {
+    // copy link to clipboard
   }
 
   handleClick () {
-    switch (this.state.status)
+    console.log('called!')
+    switch (this.state.status) {
+      case STATUS.IDLE:
+        this.handleIdleClick()
+        break
+      case STATUS.DEBOUNCED:
+        this.handleDebounceClick()
+    }
   }
 
   render () {
     return (
       <div >
-        <Button onClick={() => {}} title={textMap[this.state.status]} bg={BUTTON_COLOR}/>
+        { this.state.link ? <input id="linkTarget" type="hidden" value="https://github.com/zenorocha/clipboard.js.git" /> : null }
+        <Button onClick={this.handleClick} title={textMap[this.state.status]} bg={BUTTON_COLOR} style={BUTTON_STYLE}/>
       </div>
     )
   }

components/Toolbar.js

@@ -3,6 +3,7 @@ import Dropdown from './Dropdown'
 import ColorPicker from './Colorpicker'
 import Settings from './Settings'
 import Button from './Button'
+import CopyButton from './CopyButton'
 import { THEMES, LANGUAGES } from '../lib/constants'
 
 const Toolbar = (props) => (
@@ -15,12 +16,7 @@ const Toolbar = (props) => (
     />
     <Settings />
     <div className="buttons">
-      <Button
-        onClick={props.upload}
-        title="Copy Imgur Link"
-        bg="#84ACFC"
-        style={{ borderRadius: '3px 0px 0px 3px' }}
-      />
+      <CopyButton />
       <Button onClick={props.save} title="Save Image" bg="#C3E98D" />
     </div>
     <style jsx>{`