Make `api` a prop of Editor (#480)

components/Editor.js

@@ -15,7 +15,6 @@ import Settings from './Settings'
 import Toolbar from './Toolbar'
 import Overlay from './Overlay'
 import Carbon from './Carbon'
-import api from '../lib/api'
 import {
   THEMES,
   THEMES_HASH,
@@ -77,8 +76,8 @@ class Editor extends React.Component {
     const initialState = Object.keys(queryParams).length ? queryParams : {}
     try {
       // TODO fix this hack
-      if (path.length >= 19 && path.indexOf('.') === -1) {
-        const { content, language } = await api.getGist(path)
+      if (this.props.api.getGist && path.length >= 19 && path.indexOf('.') === -1) {
+        const { content, language } = await this.props.api.getGist(path)
         if (language) {
           initialState.language = language.toLowerCase()
         }
@@ -122,12 +121,13 @@ class Editor extends React.Component {
     // if safari, get image from api
     const isPNG = format !== 'svg'
     if (
+      this.props.api.image,
       navigator.userAgent.indexOf('Safari') !== -1 &&
       navigator.userAgent.indexOf('Chrome') === -1 &&
       isPNG
     ) {
       const encodedState = serializeState(this.state)
-      return api.image(encodedState)
+      return this.props.api.image(encodedState)
     }
 
     if (isPNG) {
@@ -207,7 +207,7 @@ class Editor extends React.Component {
   upload() {
     this.setState({ uploading: true })
     this.getCarbonImage({ format: 'png' })
-      .then(this.props.tweet.bind(null, this.state.code || DEFAULT_CODE))
+      .then(this.props.api.tweet.bind(null, this.state.code || DEFAULT_CODE))
       // eslint-disable-next-line
       .catch(console.error)
       .then(() => this.setState({ uploading: false }))
@@ -291,7 +291,7 @@ class Editor extends React.Component {
               resetDefaultSettings={this.resetDefaultSettings}
             />
             <div className="buttons">
-              {this.props.tweet &&
+              {this.props.api.tweet &&
                 this.state.online && (
                   <Button
                     className="tweetButton"
@@ -369,6 +369,7 @@ function readAs(file) {
 }
 
 Editor.defaultProps = {
+  api: {},
   onUpdate: () => {}
 }
 

pages/index.js

@@ -13,7 +13,7 @@ class Index extends React.Component {
   render() {
     return (
       <Page enableHeroText={true}>
-        <Editor {...this.props.router} onUpdate={onEditorUpdate} tweet={api.tweet} />
+        <Editor {...this.props.router} onUpdate={onEditorUpdate} api={api} />
       </Page>
     )
   }