factor out embedly card into its own component; it seems to help

frontend/src/components/TopicCard/Attachments.js

@@ -1,39 +1,20 @@
 /* global $, embedly */
 import React, { PropTypes, Component } from 'react'
 
+import EmbedlyCard from './EmbedlyCard'
+
 class Attachments extends Component {
   constructor(props) {
     super(props)
 
     this.state = {
-      linkEdit: '',
+      linkEdit: ''
-      embedlyLinkError: false,
-      embedlyLinkStarted: false,
-      embedlyLinkLoaded: false
     }
   }
 
-  componentDidMount = () => {
+  removeLink = () => {
-    embedly('on', 'card.rendered', this.embedlyCardRendered)
+    this.props.updateTopic({ link: null })
-    if (this.props.link) this.loadLink()
+    $('.embedly-card').remove()
-  }
-
-  componentWillUnmount = () => {
-    embedly('off')
-  }
-
-  componentDidUpdate = () => {
-    const { embedlyLinkStarted } = this.state
-    !embedlyLinkStarted && this.props.link && this.loadLink()
-  }
-
-  embedlyCardRendered = (iframe, test) => {
-    this.setState({embedlyLinkLoaded: true, embedlyLinkError: false})
-  }
-
-  resetLinkInput = () => {
-    this.setState({ linkEdit: '' })
-    this.linkInput.focus()
   }
 
   onLinkChangeHandler = e => {
@@ -41,46 +22,23 @@ class Attachments extends Component {
   }
 
   onLinkKeyUpHandler = e => {
-    const { linkEdit } = this.state
-    let finalLink
     const ENTER_KEY = 13
     if (e.which === ENTER_KEY) {
-      // TODO evaluate converting this to '//' no matter what (infer protocol)
+      const { linkEdit } = this.state
-      if (linkEdit.slice(0, 7) !== 'http://' &&
-        linkEdit.slice(0, 8) !== 'https://' &&
-        linkEdit.slice(0, 2) !== '//') {
-        finalLink = '//' + linkEdit
-      }
       this.setState({ linkEdit: '' })
-      this.props.updateTopic({ link: finalLink })
+      this.props.updateTopic({ link: linkEdit })
     }
   }
 
-  loadLink = () => {
-    debugger
-    this.setState({ embedlyLinkStarted: true })
-    var e = embedly('card', document.getElementById('embedlyLink'))
-    if (e && e.type === 'error') this.setState({embedlyLinkError: true})
-  }
-
-  removeLink = () => {
-    this.setState({
-      embedlyLinkStarted: false,
-      embedlyLinkLoaded: false,
-      embedlyLinkError: false
-    })
-    this.props.updateTopic({ link: null })
-    $('div.embedly-card').after(`<a href="" id="embedlyLink" target="_blank" data-card-description="0"></a>`)
-    $('.embedly-card').remove()
-  }
-
   render = () => {
     const { link, authorizedToEdit } = this.props
-    const { linkEdit, embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state
+    const { linkEdit } = this.state
     const hasAttachment = !!link
 
     if (!hasAttachment && !authorizedToEdit) return null
 
+    const embedlyLinkLoaded = 'TODO how to get this value'
+
     const className = hasAttachment
       ? `embeds ${embedlyLinkLoaded ? '' : 'nonEmbedlyLink'}`
       : 'attachments'
@@ -100,15 +58,7 @@ class Attachments extends Component {
             {linkEdit && <div id="addLinkReset"></div>}
           </div>
         </div>
-        <a style={{ display: hasAttachment ? 'block' : 'none' }}
+        {link && <EmbedlyCard link={link} />}
-          href={link}
-          id="embedlyLink"
-          target="_blank"
-          data-card-description="0"
-        >
-          {link}
-        </a>
-        {embedlyLinkStarted && !embedlyLinkLoaded && !embedlyLinkError && <div id="embedlyLinkLoader">loading...</div>}
         {authorizedToEdit && (
           <div id="linkremove"
             style={{ display: hasAttachment ? 'block' : 'none' }}

frontend/src/components/TopicCard/EmbedlyCard.js

@@ -0,0 +1,65 @@
+/* global $, embedly */
+import React, { PropTypes, Component } from 'react'
+
+class EmbedlyCard extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      embedlyLinkStarted: false,
+      embedlyLinkLoaded: false,
+      embedlyLinkError: false
+    }
+  }
+
+  componentDidMount = () => {
+    embedly('on', 'card.rendered', this.embedlyCardRendered)
+    if (this.props.link) this.loadLink()
+  }
+
+  componentWillUnmount = () => {
+    embedly('off')
+  }
+
+  componentDidUpdate = () => {
+    const { embedlyLinkStarted } = this.state
+    !embedlyLinkStarted && this.props.link && this.loadLink()
+  }
+
+  embedlyCardRendered = (iframe, test) => {
+    this.setState({embedlyLinkLoaded: true, embedlyLinkError: false})
+  }
+
+  loadLink = () => {
+    this.setState({ embedlyLinkStarted: true })
+    var e = embedly('card', document.getElementById('embedlyLink'))
+    if (e && e.type === 'error') this.setState({embedlyLinkError: true})
+  }
+
+  render = () => {
+    const { link } = this.props
+    const { embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state
+
+    const notReady = embedlyLinkStarted && !embedlyLinkLoaded && !embedlyLinkError
+
+    return (
+      <div>
+        <a style={{ display: notReady ? 'none' : 'block' }}
+          href={link}
+          id="embedlyLink"
+          target="_blank"
+          data-card-description="0"
+        >
+          {link}
+        </a>
+        {notReady && <div id="embedlyLinkLoader">loading...</div>}
+      </div>
+    )
+  }
+}
+
+EmbedlyCard.propTypes = {
+  link: PropTypes.string
+}
+
+export default EmbedlyCard