Add gist support to embed (#703)

* support gists in embed

* update GistContainer

* make init function have more generic naming

components/Editor.js

@@ -15,6 +15,7 @@ import Carbon from './Carbon'
 import ExportMenu from './ExportMenu'
 import Themes from './Themes'
 import TweetButton from './TweetButton'
+import GistContainer from './GistContainer'
 import {
   LANGUAGES,
   LANGUAGE_MIME_HASH,
@@ -29,7 +30,7 @@ import {
   DEFAULT_PRESET_ID
 } from '../lib/constants'
 import { serializeState, getQueryStringState } from '../lib/routing'
-import { getSettings, escapeHtml, unescapeHtml, formatCode, omit } from '../lib/util'
+import { getSettings, unescapeHtml, formatCode, omit } from '../lib/util'
 import LanguageIcon from './svg/Language'
 
 const languageIcon = <LanguageIcon />
@@ -61,29 +62,9 @@ class Editor extends React.Component {
 
   async componentDidMount() {
     const { asPath = '' } = this.props.router
-    const { query, pathname } = url.parse(asPath, true)
-    const path = escapeHtml(pathname.split('/').pop())
+    const { query } = url.parse(asPath, true)
     const queryParams = getQueryStringState(query)
-    let initialState = Object.keys(queryParams).length ? queryParams : {}
-    try {
-      // TODO fix this hack
-      if (path.length >= 19 && path.indexOf('.') === -1 && this.context.gist) {
-        const { code, language, config } = await this.context.gist.get(path)
-
-        if (typeof config === 'object') {
-          initialState = config
-        }
-
-        if (language) {
-          initialState.language = language.toLowerCase()
-        }
-
-        initialState.code = code
-      }
-    } catch (e) {
-      // eslint-disable-next-line
-      console.log(e)
-    }
+    const initialState = Object.keys(queryParams).length ? queryParams : {}
 
     const newState = {
       // Load from localStorage
@@ -355,6 +336,8 @@ class Editor extends React.Component {
             </Overlay>
           )}
         </Dropzone>
+
+        <GistContainer onChange={stateFromGist => this.setState(stateFromGist)} />
         <style jsx>
           {`
             .editor {

components/GistContainer.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import url from 'url'
+import { withRouter } from 'next/router'
+
+import { escapeHtml } from '../lib/util'
+import ApiContext from './ApiContext'
+
+class GistContainer extends React.Component {
+  static contextType = ApiContext
+
+  async componentDidMount() {
+    const { asPath = '' } = this.props.router
+    const { pathname } = url.parse(asPath, true)
+    const path = escapeHtml(pathname.split('/').pop())
+    let newState = {}
+
+    if (this.context.gist && path.length >= 19 && path.indexOf('.') === -1) {
+      try {
+        const { code, language, config } = await this.context.gist.get(path)
+        if (typeof config === 'object') {
+          newState = config
+        }
+        if (language) {
+          newState.language = language.toLowerCase()
+        }
+        newState.code = code
+      } catch (e) {
+        // eslint-disable-next-line
+        console.log(e)
+      }
+    }
+    this.props.onChange(newState)
+  }
+
+  render() {
+    return null
+  }
+}
+
+export default withRouter(GistContainer)

pages/embed.js

@@ -8,6 +8,7 @@ import morph from 'morphmorph'
 // Ours
 import { StylesheetLink, CodeMirrorLink, MetaTags } from '../components/Meta'
 import Carbon from '../components/Carbon'
+import GistContainer from '../components/GistContainer'
 import { DEFAULT_CODE, DEFAULT_SETTINGS } from '../lib/constants'
 import { getQueryStringState } from '../lib/routing'
 
@@ -52,7 +53,7 @@ class Embed extends React.Component {
     readOnly: true
   }
 
-  componentDidMount() {
+  handleUpdate = updates => {
     const { asPath = '' } = this.props.router
     const { query } = url.parse(asPath, true)
     const queryParams = getQueryStringState(query)
@@ -61,6 +62,7 @@ class Embed extends React.Component {
     this.setState(
       {
         ...initialState,
+        ...updates,
         id: query.id,
         copyable: queryParams.copy !== false,
         readOnly: queryParams.readonly !== false,
@@ -99,6 +101,7 @@ class Embed extends React.Component {
   render() {
     return (
       <Page theme={this.state.theme}>
+        <GistContainer onChange={this.handleUpdate} />
         {this.state.mounted && (
           <Carbon
             ref={this.ref}