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 (
-
-
- {link &&
}
- {authorizedToEdit && (
-
- )}
+
+
)
}
}
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 (
+
+
+ {link &&
}
+ {authorizedToEdit && (
+
+ )}
+
+ )
+ }
+}
+
+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}
/>
-