diff options
author | Corey Hulen <corey@hulen.com> | 2015-09-02 12:41:01 -0700 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-09-02 12:41:01 -0700 |
commit | eaeab0d645ca69efb4a0b47b802db750a6f54136 (patch) | |
tree | 3e9fbd1aa6ac487ed3e1b600a607814e8c738d29 /web/react/components/post_body.jsx | |
parent | 3e431b6c88105470e2bd583b6647976f9b9d3e5b (diff) | |
parent | 7d07bf6a79c9507b2178338464f7d28ce9a9a4ac (diff) | |
download | chat-eaeab0d645ca69efb4a0b47b802db750a6f54136.tar.gz chat-eaeab0d645ca69efb4a0b47b802db750a6f54136.tar.bz2 chat-eaeab0d645ca69efb4a0b47b802db750a6f54136.zip |
Merge pull request #538 from hmhealey/mm2064
MM-2064 Cosmetic refactoring for ES6 and style guide
Diffstat (limited to 'web/react/components/post_body.jsx')
-rw-r--r-- | web/react/components/post_body.jsx | 127 |
1 files changed, 86 insertions, 41 deletions
diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index e5ab5b624..88fb9aec8 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -1,95 +1,140 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var FileAttachmentList = require('./file_attachment_list.jsx'); -var UserStore = require('../stores/user_store.jsx'); -var utils = require('../utils/utils.jsx'); -var Constants = require('../utils/constants.jsx'); +const FileAttachmentList = require('./file_attachment_list.jsx'); +const UserStore = require('../stores/user_store.jsx'); +const Utils = require('../utils/utils.jsx'); +const Constants = require('../utils/constants.jsx'); -module.exports = React.createClass({ - componentWillReceiveProps: function(nextProps) { - var linkData = utils.extractLinks(nextProps.post.message); +export default class PostBody extends React.Component { + constructor(props) { + super(props); + + const linkData = Utils.extractLinks(this.props.post.message); + this.state = {links: linkData.links, message: linkData.text}; + } + componentWillReceiveProps(nextProps) { + const linkData = Utils.extractLinks(nextProps.post.message); this.setState({links: linkData.links, message: linkData.text}); - }, - getInitialState: function() { - var linkData = utils.extractLinks(this.props.post.message); - return {links: linkData.links, message: linkData.text}; - }, - render: function() { - var post = this.props.post; - var filenames = this.props.post.filenames; - var parentPost = this.props.parentPost; - var inner = utils.textToJsx(this.state.message); + } + render() { + const post = this.props.post; + const filenames = this.props.post.filenames; + const parentPost = this.props.parentPost; + const inner = Utils.textToJsx(this.state.message); - var comment = ''; - var reply = ''; - var postClass = ''; + let comment = ''; + let postClass = ''; if (parentPost) { - var profile = UserStore.getProfile(parentPost.user_id); - var apostrophe = ''; - var name = '...'; + const profile = UserStore.getProfile(parentPost.user_id); + + let apostrophe = ''; + let name = '...'; if (profile != null) { if (profile.username.slice(-1) === 's') { apostrophe = '\''; } else { apostrophe = '\'s'; } - name = <a className='theme' onClick={function searchName() { utils.searchForTerm(profile.username); }}>{profile.username}</a>; + name = ( + <a + className='theme' + onClick={Utils.searchForTerm.bind(null, profile.username)} + > + {profile.username} + </a> + ); } - var message = ''; + let message = ''; if (parentPost.message) { - message = utils.replaceHtmlEntities(parentPost.message); + message = Utils.replaceHtmlEntities(parentPost.message); } else if (parentPost.filenames.length) { message = parentPost.filenames[0].split('/').pop(); if (parentPost.filenames.length === 2) { message += ' plus 1 other file'; } else if (parentPost.filenames.length > 2) { - message += ' plus ' + (parentPost.filenames.length - 1) + ' other files'; + message += ` plus ${parentPost.filenames.length - 1} other files`; } } comment = ( <p className='post-link'> - <span>Commented on {name}{apostrophe} message: <a className='theme' onClick={this.props.handleCommentClick}>{message}</a></span> + <span> + Commented on {name}{apostrophe} message: + <a + className='theme' + onClick={this.props.handleCommentClick} + > + {message} + </a> + </span> </p> ); postClass += ' post-comment'; } - var loading; + let loading; if (post.state === Constants.POST_FAILED) { postClass += ' post-fail'; - loading = <a className='theme post-retry pull-right' href='#' onClick={this.props.retryPost}>Retry</a>; + loading = ( + <a + className='theme post-retry pull-right' + href='#' + onClick={this.props.retryPost} + > + Retry + </a> + ); } else if (post.state === Constants.POST_LOADING) { postClass += ' post-waiting'; - loading = <img className='post-loading-gif pull-right' src='/static/images/load.gif'/>; + loading = ( + <img + className='post-loading-gif pull-right' + src='/static/images/load.gif' + /> + ); } - var embed; + let embed; if (filenames.length === 0 && this.state.links) { - embed = utils.getEmbed(this.state.links[0]); + embed = Utils.getEmbed(this.state.links[0]); } - var fileAttachmentHolder = ''; + let fileAttachmentHolder = ''; if (filenames && filenames.length > 0) { - fileAttachmentHolder = (<FileAttachmentList - filenames={filenames} - modalId={'view_image_modal_' + post.id} - channelId={post.channel_id} - userId={post.user_id} />); + fileAttachmentHolder = ( + <FileAttachmentList + filenames={filenames} + modalId={`view_image_modal_${post.id}`} + channelId={post.channel_id} + userId={post.user_id} + /> + ); } return ( <div className='post-body'> {comment} - <p key={post.id + '_message'} className={postClass}>{loading}<span>{inner}</span></p> + <p + key={`${post.id}_message`} + className={postClass} + > + {loading}<span>{inner}</span> + </p> {fileAttachmentHolder} {embed} </div> ); } -}); +} + +PostBody.propTypes = { + post: React.PropTypes.object.isRequired, + parentPost: React.PropTypes.object, + retryPost: React.PropTypes.func.isRequired, + handleCommentClick: React.PropTypes.func.isRequired +}; |