From 69c2557eee9a4f7994bb812eeb440cbad1b01851 Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Sun, 18 Jun 2017 23:08:34 -0700
Subject: [PATCH] add basic copy button support

---
 components/CopyButton.js | 61 ++++++++++++++++++++++++++++++++++++----
 components/Toolbar.js    |  8 ++----
 2 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/components/CopyButton.js b/components/CopyButton.js
index 0ce77f4..07b48fb 100644
--- a/components/CopyButton.js
+++ b/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}/>
+      <div >
+        { 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>
     )
   }
diff --git a/components/Toolbar.js b/components/Toolbar.js
index dc4dfd0..5cac09a 100644
--- a/components/Toolbar.js
+++ b/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>{`