From 80ccc55131d0e7da34e1a67218e489449f38215d Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sat, 25 Feb 2017 15:38:28 -0800
Subject: [PATCH] more modular attachments component

---
 app/assets/stylesheets/base.scss.erb          |  4 +-
 .../src/components/TopicCard/Attachments.js   | 67 ++--------------
 .../{EmbedlyCard.js => EmbedlyLink/Card.js}   |  0
 .../components/TopicCard/EmbedlyLink/index.js | 76 +++++++++++++++++++
 frontend/src/components/TopicCard/index.js    |  2 +-
 5 files changed, 85 insertions(+), 64 deletions(-)
 rename frontend/src/components/TopicCard/{EmbedlyCard.js => EmbedlyLink/Card.js} (100%)
 create mode 100644 frontend/src/components/TopicCard/EmbedlyLink/index.js

diff --git a/app/assets/stylesheets/base.scss.erb b/app/assets/stylesheets/base.scss.erb
index 6883fffb..355f5652 100644
--- a/app/assets/stylesheets/base.scss.erb
+++ b/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;
diff --git a/frontend/src/components/TopicCard/Attachments.js b/frontend/src/components/TopicCard/Attachments.js
index 94f60897..3e04dfbc 100644
--- a/frontend/src/components/TopicCard/Attachments.js
+++ b/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 { linkEdit } = this.state
-    const hasAttachment = !!link
-
-    if (!hasAttachment && !authorizedToEdit) return null
-
-    const className = hasAttachment ? 'embeds' : 'attachments'
+    const { topic, authorizedToEdit, updateTopic } = this.props
+    const link = topic.get('link')
 
     return (
-      <div className={className}>
-        <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 && <EmbedlyCard link={link} />}
-        {authorizedToEdit && (
-          <div id="linkremove"
-            style={{ display: hasAttachment ? 'block' : 'none' }}
-            onClick={this.removeLink}
-          />
-        )}
+      <div className="attachments">
+        <EmbedlyLink link={link} authorizedToEdit={authorizedToEdit} updateTopic={updateTopic} />
       </div>
     )
   }
 }
 
 Attachments.propTypes = {
-  link: PropTypes.string,
+  topic: PropTypes.object, // Backbone object
   authorizedToEdit: PropTypes.bool,
   updateTopic: PropTypes.func
 }
diff --git a/frontend/src/components/TopicCard/EmbedlyCard.js b/frontend/src/components/TopicCard/EmbedlyLink/Card.js
similarity index 100%
rename from frontend/src/components/TopicCard/EmbedlyCard.js
rename to frontend/src/components/TopicCard/EmbedlyLink/Card.js
diff --git a/frontend/src/components/TopicCard/EmbedlyLink/index.js b/frontend/src/components/TopicCard/EmbedlyLink/index.js
new file mode 100644
index 00000000..1775ab03
--- /dev/null
+++ b/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
diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js
index c2183d77..3ebe700a 100644
--- a/frontend/src/components/TopicCard/index.js
+++ b/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}
           />