From 818e2d45d316b1ab918a28482b73d1ea2519c27e Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Sun, 18 Jun 2017 21:34:12 -0700
Subject: [PATCH 1/4] switch imgur link to path that has twitter card

---
 pages/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/index.js b/pages/index.js
index 6fb17ec..1de88df 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -48,7 +48,8 @@ class Index extends React.Component {
   upload () {
     domtoimage.toBlob(document.getElementById('container'))
       .then(api.uploadImage)
-      .then(res => res.data.link)
+      .then(res => res.data.id)
+      .then(id => `http://i.imgur.com/${id}`)
       .then(console.log)
   }
 

From f33bcc9e87967e3458550118a50fb7e11151f4c4 Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Sun, 18 Jun 2017 21:49:44 -0700
Subject: [PATCH 2/4] add copy button

---
 components/CopyButton.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 components/CopyButton.js

diff --git a/components/CopyButton.js b/components/CopyButton.js
new file mode 100644
index 0000000..1a96693
--- /dev/null
+++ b/components/CopyButton.js
@@ -0,0 +1,18 @@
+import React from 'react'
+
+// constants
+const STATUS = {
+  IDLE: 'IDLE',
+  LOADING: 'LOADING',
+  DEBOUNCED: 'DEBOUNCED'
+}
+
+class CopyButton extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      status: STATUS.IDLE
+    }
+  }
+}
\ No newline at end of file

From 3ddf969fb8a92c43dd36a2f6ddb4a6a513a350fc Mon Sep 17 00:00:00 2001
From: briandennis <briandennis321@gmail.com>
Date: Sun, 18 Jun 2017 22:05:13 -0700
Subject: [PATCH 3/4] add basic render function to copy button

---
 components/CopyButton.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/components/CopyButton.js b/components/CopyButton.js
index 1a96693..0ce77f4 100644
--- a/components/CopyButton.js
+++ b/components/CopyButton.js
@@ -1,12 +1,22 @@
 import React from 'react'
 
+import Button from './Button'
+
 // constants
+const BUTTON_COLOR = '#84ACFC'
+
 const STATUS = {
   IDLE: 'IDLE',
   LOADING: 'LOADING',
   DEBOUNCED: 'DEBOUNCED'
 }
 
+const textMap = {
+  [STATUS.IDLE]: 'Copy Imgur Link',
+  [STATUS.LOADING]: 'Loading...',
+  [STATUS.DEBOUNCED]: 'Coppied'
+}
+
 class CopyButton extends React.Component {
   constructor(props) {
     super(props)
@@ -15,4 +25,18 @@ class CopyButton extends React.Component {
       status: STATUS.IDLE
     }
   }
-}
\ No newline at end of file
+
+  handleClick () {
+    switch (this.state.status)
+  }
+
+  render () {
+    return (
+      <div>
+        <Button onClick={() => {}} title={textMap[this.state.status]} bg={BUTTON_COLOR}/>
+      </div>
+    )
+  }
+}
+
+export default CopyButton
\ No newline at end of file

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 4/4] 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>{`