diff options
author | hmhealey <harrisonmhealey@gmail.com> | 2015-07-23 16:45:16 -0400 |
---|---|---|
committer | hmhealey <harrisonmhealey@gmail.com> | 2015-07-29 09:52:08 -0400 |
commit | 5488b5e2164518d9b2a745a9906152a4e6c0be10 (patch) | |
tree | bb4d4059e952f8321a8511ff6a5dd9f21b6ac416 /web/react/components/post_right.jsx | |
parent | eddb79d97d72a63fc3af6741567077e3e59b2871 (diff) | |
download | chat-5488b5e2164518d9b2a745a9906152a4e6c0be10.tar.gz chat-5488b5e2164518d9b2a745a9906152a4e6c0be10.tar.bz2 chat-5488b5e2164518d9b2a745a9906152a4e6c0be10.zip |
Reconcile the code to display attachment previews into a FileAttachmentList class to clean up duplicated code.
Diffstat (limited to 'web/react/components/post_right.jsx')
-rw-r--r-- | web/react/components/post_right.jsx | 131 |
1 files changed, 13 insertions, 118 deletions
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index 8097a181e..861f03673 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -10,7 +10,7 @@ var utils = require('../utils/utils.jsx'); var SearchBox =require('./search_bar.jsx'); var CreateComment = require( './create_comment.jsx' ); var Constants = require('../utils/constants.jsx'); -var ViewImageModal = require('./view_image.jsx'); +var FileAttachmentList = require('./file_attachment_list.jsx'); var ActionTypes = Constants.ActionTypes; RhsHeaderPost = React.createClass({ @@ -55,17 +55,8 @@ RhsHeaderPost = React.createClass({ }); RootPost = React.createClass({ - handleImageClick: function(e) { - this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'))}); - }, - getInitialState: function() { - return { startImgId: 0 }; - }, render: function() { - - var postImageModalId = "rhs_view_image_modal_" + this.props.post.id; var message = utils.textToJsx(this.props.post.message); - var filenames = this.props.post.filenames; var isOwner = UserStore.getCurrentId() == this.props.post.user_id; var timestamp = UserStore.getProfile(this.props.post.user_id).update_at; var channel = ChannelStore.get(this.props.post.channel_id); @@ -84,42 +75,6 @@ RootPost = React.createClass({ channelName = (channel.type === 'D') ? "Private Message" : channel.display_name; } - if (filenames) { - var postFiles = []; - var images = []; - var re1 = new RegExp(' ', 'g'); - var re2 = new RegExp('\\(', 'g'); - var re3 = new RegExp('\\)', 'g'); - for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) { - var fileInfo = utils.splitFileLocation(filenames[i]); - var ftype = utils.getFileType(fileInfo.ext); - - // This is a temporary patch to fix issue with old files using absolute paths - if (fileInfo.path.indexOf("/api/v1/files/get") != -1) { - fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1]; - } - fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path; - - if (ftype === "image") { - var url = fileInfo.path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29'); - postFiles.push( - <div className="post-image__column" key={fileInfo.path}> - <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={fileInfo.path} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a> - </div> - ); - images.push(filenames[i]); - } else { - postFiles.push( - <div className="post-image__column custom-file" key={fileInfo.path}> - <a href={fileInfo.path+"."+fileInfo.ext} download={fileInfo.name+"."+fileInfo.ext}> - <div className={"file-icon "+utils.getIconClassName(ftype)}/> - </a> - </div> - ); - } - } - } - return ( <div className={"post post--root " + currentUserCss}> <div className="post-right-channel__name">{ channelName }</div> @@ -146,19 +101,12 @@ RootPost = React.createClass({ </ul> <div className="post-body"> <p>{message}</p> - { filenames.length > 0 ? - <div className="post-image__columns"> - { postFiles } - </div> - : "" } - { images.length > 0 ? - <ViewImageModal - channelId={this.props.post.channel_id} - userId={this.props.post.user_id} - modalId={postImageModalId} - startId={this.state.startImgId} - imgCount={this.props.post.img_count} - filenames={images} /> + { this.props.post.filenames && this.props.post.filenames.length > 0 ? + <FileAttachmentList + postId={this.props.post.id} + channelId={this.props.post.channel_id} + userId={this.props.post.user_id} + filenames={this.props.post.filenames} /> : "" } </div> </div> @@ -169,14 +117,7 @@ RootPost = React.createClass({ }); CommentPost = React.createClass({ - handleImageClick: function(e) { - this.setState({startImgId: parseInt($(e.target.parentNode).attr('data-img-id'))}); - }, - getInitialState: function() { - return { startImgId: 0 }; - }, render: function() { - var commentClass = "post"; var currentUserCss = ""; @@ -184,8 +125,6 @@ CommentPost = React.createClass({ currentUserCss = "current--user"; } - var postImageModalId = "rhs_comment_view_image_modal_" + this.props.post.id; - var filenames = this.props.post.filenames; var isOwner = UserStore.getCurrentId() == this.props.post.user_id; var type = "Post" @@ -193,43 +132,6 @@ CommentPost = React.createClass({ type = "Comment" } - if (filenames) { - var postFiles = []; - var images = []; - var re1 = new RegExp(' ', 'g'); - var re2 = new RegExp('\\(', 'g'); - var re3 = new RegExp('\\)', 'g'); - for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) { - - var fileInfo = utils.splitFileLocation(filenames[i]); - var type = utils.getFileType(fileInfo.ext); - - // This is a temporary patch to fix issue with old files using absolute paths - if (fileInfo.path.indexOf("/api/v1/files/get") != -1) { - fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1]; - } - fileInfo.path = utils.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path; - - if (type === "image") { - var url = fileInfo.path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29'); - postFiles.push( - <div className="post-image__column" key={fileInfo.path}> - <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={fileInfo.path} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a> - </div> - ); - images.push(filenames[i]); - } else { - postFiles.push( - <div className="post-image__column custom-file" key={fileInfo.path}> - <a href={fileInfo.path+"."+fileInfo.ext} download={fileInfo.name+"."+fileInfo.ext}> - <div className={"file-icon "+utils.getIconClassName(type)}/> - </a> - </div> - ); - } - } - } - var message = utils.textToJsx(this.props.post.message); var timestamp = UserStore.getCurrentUser().update_at; @@ -256,19 +158,12 @@ CommentPost = React.createClass({ </ul> <div className="post-body"> <p>{message}</p> - { filenames.length > 0 ? - <div className="post-image__columns"> - { postFiles } - </div> - : "" } - { images.length > 0 ? - <ViewImageModal - channelId={this.props.post.channel_id} - userId={this.props.post.user_id} - modalId={postImageModalId} - startId={this.state.startImgId} - imgCount={this.props.post.img_count} - filenames={images} /> + { this.props.post.filenames && this.props.post.filenames.length > 0 ? + <FileAttachmentList + postId={this.props.post.id} + channelId={this.props.post.channel_id} + userId={this.props.post.user_id} + filenames={this.props.post.filenames} /> : "" } </div> </div> |