- {link}
+ {this.props.link}
{notReady &&
)
}
}
EmbedlyCard.propTypes = {
- link: PropTypes.string
+ link: PropTypes.string,
+ authorizedToEdit: PropTypes.bool,
+ removeLink: PropTypes.func
}
export default EmbedlyCard
diff --git a/frontend/src/components/TopicCard/EmbedlyLink/index.js b/frontend/src/components/TopicCard/EmbedlyLinkChooser.js
similarity index 50%
rename from frontend/src/components/TopicCard/EmbedlyLink/index.js
rename to frontend/src/components/TopicCard/EmbedlyLinkChooser.js
index 0f6df211..d35dc893 100644
--- a/frontend/src/components/TopicCard/EmbedlyLink/index.js
+++ b/frontend/src/components/TopicCard/EmbedlyLinkChooser.js
@@ -1,10 +1,7 @@
-/* global embedly */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
-import Card from './Card'
-
-class EmbedlyLink extends Component {
+class EmbedlyLinkChooser extends Component {
constructor(props) {
super(props)
@@ -13,12 +10,9 @@ class EmbedlyLink extends Component {
}
}
- removeLink = () => {
- this.props.updateTopic({ link: null })
- }
-
resetLink = () => {
this.setState({ linkEdit: '' })
+ this.props.cancel()
}
onLinkChangeHandler = e => {
@@ -35,17 +29,11 @@ class EmbedlyLink extends Component {
}
render = () => {
- const { link, authorizedToEdit, topicId } = this.props
const { linkEdit } = this.state
- const hasAttachment = !!link
-
- if (!hasAttachment && !authorizedToEdit) return null
return (
- loading...
}
+ {this.props.authorizedToEdit && (
+
+ )}
-
+
+
- {link &&
)
}
}
-EmbedlyLink.propTypes = {
- topicId: PropTypes.number,
- link: PropTypes.string,
- authorizedToEdit: PropTypes.bool,
- updateTopic: PropTypes.func
+EmbedlyLinkChooser.propTypes = {
+ updateTopic: PropTypes.func,
+ cancel: PropTypes.func
}
-export default EmbedlyLink
+export default EmbedlyLinkChooser
diff --git a/frontend/src/components/TopicCard/FileAttachment.js b/frontend/src/components/TopicCard/FileAttachment.js
new file mode 100644
index 00000000..d7053a4b
--- /dev/null
+++ b/frontend/src/components/TopicCard/FileAttachment.js
@@ -0,0 +1,57 @@
+import React, { Component, PropTypes } from 'react'
+
+class FileAttachment extends Component {
+ getFileType = contentType => {
+ if (contentType === 'text/plain') {
+ return 'text'
+ } else if (contentType === 'application/pdf') {
+ return 'pdf'
+ } else if (contentType.match(/^image\//)) {
+ return 'image'
+ } else if (contentType.match(/^audio\//) ||
+ contentType === 'video/ogg' ||
+ contentType === 'video/webm') {
+ return 'audio'
+ } else {
+ return 'unknown'
+ }
+ }
+
+ getFileIcon = file => {
+ const type = this.getFileType(file.content_type)
+
+ if (this.props.fileTypeIcons[type]) {
+ return this.props.fileTypeIcons[type]
+ } else {
+ return this.props.fileTypeIcons.unknown
+ }
+ }
+
+ render() {
+ const { file } = this.props
+ return (
+
(this.linkInput = input)}
@@ -53,26 +41,17 @@ class EmbedlyLink extends Component {
value={linkEdit}
onChange={this.onLinkChangeHandler}
onKeyUp={this.onLinkKeyUpHandler}>
- {linkEdit && }
+
+
+ })
+ {file.file_name}
+
+
+
+ )
+ }
+}
+
+FileAttachment.propTypes = {
+ file: PropTypes.shape({
+ content_type: PropTypes.string,
+ file_name: PropTypes.string,
+ url: PropTypes.string
+ }),
+ authorizedToEdit: PropTypes.bool,
+ removeAttachment: PropTypes.func,
+ fileTypeIcons: PropTypes.objectOf(PropTypes.string)
+}
+
+export default FileAttachment
diff --git a/frontend/src/components/TopicCard/FileUploader.js b/frontend/src/components/TopicCard/FileUploader.js
new file mode 100644
index 00000000..80682291
--- /dev/null
+++ b/frontend/src/components/TopicCard/FileUploader.js
@@ -0,0 +1,34 @@
+import React, { Component, PropTypes } from 'react'
+import Dropzone from 'react-dropzone'
+
+class FileUploader extends Component {
+ handleFileUpload = (acceptedFiles, rejectedFiles) => {
+ if (acceptedFiles.length >= 1) {
+ this.props.uploadAttachment(acceptedFiles[0])
+ } else {
+ window.alert('File upload failed, please try again.')
+ }
+ }
+
+ render() {
+ return (
+
+
+ Drag file here
+ (maximum 5mb) +
+
+
+ )
+ }
+}
+
+FileUploader.propTypes = {
+ updateTopic: PropTypes.func,
+ uploadAttachment: PropTypes.func,
+ cancel: PropTypes.func
+}
+
+export default FileUploader
diff --git a/frontend/src/components/TopicCard/PhotoUploader.js b/frontend/src/components/TopicCard/PhotoUploader.js
new file mode 100644
index 00000000..9cd66fe5
--- /dev/null
+++ b/frontend/src/components/TopicCard/PhotoUploader.js
@@ -0,0 +1,34 @@
+import React, { Component, PropTypes } from 'react'
+import Dropzone from 'react-dropzone'
+
+class PhotoUploader extends Component {
+ handleFileUpload = (acceptedFiles, rejectedFiles) => {
+ if (acceptedFiles.length >= 1) {
+ this.props.uploadAttachment(acceptedFiles[0])
+ } else {
+ window.alert('File upload failed, please try again.')
+ }
+ }
+
+ render() {
+ return (
+ + (maximum 5mb) +
+
+ Drag photo here
+ or click to upload +
+
+
+ )
+ }
+}
+
+PhotoUploader.propTypes = {
+ updateTopic: PropTypes.func,
+ uploadAttachment: PropTypes.func,
+ cancel: PropTypes.func
+}
+
+export default PhotoUploader
diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js
index 69ffa4e7..82751ca8 100644
--- a/frontend/src/components/TopicCard/index.js
+++ b/frontend/src/components/TopicCard/index.js
@@ -10,12 +10,17 @@ import Info from './Info'
class ReactTopicCard extends Component {
render = () => {
- const { currentUser, onTopicFollow, updateTopic } = this.props
+ const {
+ currentUser, onTopicFollow, updateTopic, uploadAttachment,
+ removeAttachment
+ } = this.props
const topic = this.props.openTopic
if (!topic) return null
const wrappedUpdateTopic = obj => updateTopic(topic, obj)
+ const wrappedUploadAttachment = file => uploadAttachment(topic, file)
+ const wrappedRemoveAttachment = () => removeAttachment(topic)
const authorizedToEdit = topic.authorizeToEdit(currentUser)
const hasAttachment = topic.get('link') && topic.get('link') !== ''
@@ -48,9 +53,13 @@ class ReactTopicCard extends Component {
authorizedToEdit={authorizedToEdit}
onChange={wrappedUpdateTopic}
/>
- + or click to upload +