more modular attachments component

app/assets/stylesheets/base.scss.erb

@@ -631,14 +631,14 @@ background-color: #E0E0E0;
   width: 28px;
 }
 
-.CardOnGraph .attachments {
+.CardOnGraph .link-adder {
   width:100%;
   height:47px;
   position: relative;
   border-top: 1px solid #BDBDBD;
 }
 
-.attachments a {
+.link-adder a {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

frontend/src/components/TopicCard/Attachments.js

@@ -1,77 +1,22 @@
-/* global $, embedly */
 import React, { PropTypes, Component } from 'react'
 
-import EmbedlyCard from './EmbedlyCard'
+import EmbedlyLink from './EmbedlyLink'
 
 class Attachments extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      linkEdit: ''
-    }
-  }
-
-  removeLink = () => {
-    this.props.updateTopic({ link: null })
-    $('.embedly-card').remove()
-  }
-
-  resetLink = () => {
-    this.setState({ linkEdit: '' })
-  }
-
-  onLinkChangeHandler = e => {
-    this.setState({ linkEdit: e.target.value })
-  }
-
-  onLinkKeyUpHandler = e => {
-    const ENTER_KEY = 13
-    if (e.which === ENTER_KEY) {
-      const { linkEdit } = this.state
-      this.setState({ linkEdit: '' })
-      this.props.updateTopic({ link: linkEdit })
-    }
-  }
-
   render = () => {
-    const { link, authorizedToEdit } = this.props
+    const { topic, authorizedToEdit, updateTopic } = this.props
-    const { linkEdit } = this.state
+    const link = topic.get('link')
-    const hasAttachment = !!link
-
-    if (!hasAttachment && !authorizedToEdit) return null
-
-    const className = hasAttachment ? 'embeds' : 'attachments'
 
     return (
-      <div className={className}>
+      <div className="attachments">
-        <div className="addLink"
+        <EmbedlyLink link={link} authorizedToEdit={authorizedToEdit} updateTopic={updateTopic} />
-          style={{ display: hasAttachment ? 'none' : 'block' }}
-        >
-          <div id="addLinkIcon"></div>
-          <div id="addLinkInput">
-            <input ref={input => (this.linkInput = input)}
-              placeholder="Enter or paste a link"
-              value={linkEdit}
-              onChange={this.onLinkChangeHandler}
-              onKeyUp={this.onLinkKeyUpHandler}></input>
-            {linkEdit && <div id="addLinkReset" onClick={this.resetLink}></div>}
-          </div>
-        </div>
-        {link && <EmbedlyCard link={link} />}
-        {authorizedToEdit && (
-          <div id="linkremove"
-            style={{ display: hasAttachment ? 'block' : 'none' }}
-            onClick={this.removeLink}
-          />
-        )}
       </div>
     )
   }
 }
 
 Attachments.propTypes = {
-  link: PropTypes.string,
+  topic: PropTypes.object, // Backbone object
   authorizedToEdit: PropTypes.bool,
   updateTopic: PropTypes.func
 }

frontend/src/components/TopicCard/EmbedlyLink/index.js

@@ -0,0 +1,76 @@
+/* global embedly */
+import React, { PropTypes, Component } from 'react'
+
+import Card from './Card'
+
+class EmbedlyLink extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      linkEdit: ''
+    }
+  }
+
+  removeLink = () => {
+    this.props.updateTopic({ link: null })
+  }
+
+  resetLink = () => {
+    this.setState({ linkEdit: '' })
+  }
+
+  onLinkChangeHandler = e => {
+    this.setState({ linkEdit: e.target.value })
+  }
+
+  onLinkKeyUpHandler = e => {
+    const ENTER_KEY = 13
+    if (e.which === ENTER_KEY) {
+      const { linkEdit } = this.state
+      this.setState({ linkEdit: '' })
+      this.props.updateTopic({ link: linkEdit })
+    }
+  }
+
+  render = () => {
+    const { link, authorizedToEdit } = this.props
+    const { linkEdit } = this.state
+    const hasAttachment = !!link
+
+    if (!hasAttachment && !authorizedToEdit) return null
+
+    return (
+      <div className={hasAttachment ? 'embeds' : 'link-adder'}>
+        <div className="addLink"
+          style={{ display: hasAttachment ? 'none' : 'block' }}
+        >
+          <div id="addLinkIcon"></div>
+          <div id="addLinkInput">
+            <input ref={input => (this.linkInput = input)}
+              placeholder="Enter or paste a link"
+              value={linkEdit}
+              onChange={this.onLinkChangeHandler}
+              onKeyUp={this.onLinkKeyUpHandler}></input>
+            {linkEdit && <div id="addLinkReset" onClick={this.resetLink}></div>}
+          </div>
+        </div>
+        {link && <Card link={link} />}
+        {authorizedToEdit && (
+          <div id="linkremove"
+            style={{ display: hasAttachment ? 'block' : 'none' }}
+            onClick={this.removeLink}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+EmbedlyLink.propTypes = {
+  link: PropTypes.string,
+  authorizedToEdit: PropTypes.bool,
+  updateTopic: PropTypes.func
+}
+
+export default EmbedlyLink

frontend/src/components/TopicCard/index.js

@@ -36,7 +36,7 @@ class ReactTopicCard extends Component {
             authorizedToEdit={authorizedToEdit}
             onChange={this.props.updateTopic}
           />
-          <Attachments link={this.props.topic.get('link')}
+          <Attachments topic={topic}
             authorizedToEdit={authorizedToEdit}
             updateTopic={this.props.updateTopic}
           />