Hook up imgur

components/toolbar.js

@@ -87,7 +87,7 @@ const Toolbar = (props) => (
     />
     <Settings />
     <Button
-      onClick={props.copyLink}
+      onClick={props.upload}
       title="Copy Imgur Link"
       bg="#84ACFC"
       style={{ borderRadius: '3px 0px 0px 3px' }}

lib/api.js

@@ -15,24 +15,17 @@ async function uploadImage (encodedImage) {
 
   const data = new FormData()
   data.append('image', encodedImage)
-  data.append('type', 'base64')
+  data.append('type', 'image/png')
 
   const config = {
     headers: {
-      Authorization: ` Client-ID 87cc98dcdabcbb3`
+      Authorization: `Client-ID 87cc98dcdabcbb3`
     }
   }
 
-  try {
-    const result = await axios.post(url, data, config)
-
-    console.log('success! ')
-    console.log(Object.keys(result.data))
-    console.log(result.data)
-  } catch (e) {
-    console.log('bummer man')
-    console.log(e)
-  }
+  return axios.post(url, data, config)
+    .then(res => res.data)
+    .catch(console.log)
 }
 
 const getGist = (id) => {

pages/index.js

@@ -30,7 +30,6 @@ class Index extends React.Component {
   }
 
   save () {
-    // save
     domtoimage.toJpeg(document.getElementById('container'))
       .then((dataUrl) => {
         const link = document.createElement('a')
@@ -40,6 +39,13 @@ class Index extends React.Component {
       })
   }
 
+  upload () {
+    domtoimage.toBlob(document.getElementById('container'))
+      .then(api.uploadImage)
+      .then(res => res.data.link)
+      .then(console.log)
+  }
+
   render () {
     return (
         <div className="main">
@@ -48,6 +54,7 @@ class Index extends React.Component {
           <div id="editor">
             <Toolbar
               save={this.save}
+              upload={this.upload}
               onBGChange={color => this.setState({ bgColor: color })}
               bg={this.state.bgColor}
             />