Merge pull request #2064 from hmhealey/plt882

PLT-882 Ephemeral Messages and Out-Of-Channel mentions

web/react/components/create_post.jsx

@@ -40,10 +40,6 @@ const holders = defineMessages({
     write: {
         id: 'create_post.write',
         defaultMessage: 'Write a message...'
-    },
-    deleteMsg: {
-        id: 'create_post.deleteMsg',
-        defaultMessage: '(message deleted)'
     }
 });
 
@@ -70,7 +66,6 @@ class CreatePost extends React.Component {
         this.sendMessage = this.sendMessage.bind(this);
 
         PostStore.clearDraftUploads();
-        PostStore.deleteMessage(this.props.intl.formatMessage(holders.deleteMsg));
 
         const draft = this.getCurrentDraft();
 
@@ -506,4 +501,4 @@ CreatePost.propTypes = {
     intl: intlShape.isRequired
 };
 
-export default injectIntl(CreatePost);
+export default injectIntl(CreatePost);

web/react/components/delete_post_modal.jsx

@@ -88,7 +88,7 @@ export default class DeletePostModal extends React.Component {
                     }
                 }
 
-                PostStore.removePost(this.state.post.id, this.state.post.channel_id);
+                PostStore.deletePost(this.state.post);
                 AsyncClient.getPosts(this.state.post.channel_id);
             },
             (err) => {

web/react/components/post_body.jsx

@@ -44,7 +44,6 @@ class PostBody extends React.Component {
 
         this.state = {
             links: linkData.links,
-            message: linkData.text,
             post: this.props.post,
             hasUserProfiles: profiles && Object.keys(profiles).length > 1
         };
@@ -106,7 +105,9 @@ class PostBody extends React.Component {
         if (this.props.post.filenames.length === 0 && this.state.links && this.state.links.length > 0) {
             this.embed = this.createEmbed(linkData.links[0]);
         }
-        this.setState({links: linkData.links, message: linkData.text});
+        this.setState({
+            links: linkData.links
+        });
     }
 
     createEmbed(link) {
@@ -310,6 +311,23 @@ class PostBody extends React.Component {
             );
         }
 
+        let message;
+        if (this.props.post.state === Constants.POST_DELETED) {
+            message = (
+                <FormattedMessage
+                    id='post_body.deleted'
+                    defaultMessage='(message deleted)'
+                />
+            );
+        } else {
+            message = (
+                <span
+                    onClick={TextFormatting.handleClick}
+                    dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.props.post.message)}}
+                />
+            );
+        }
+
         return (
             <div>
                 {comment}
@@ -320,11 +338,7 @@ class PostBody extends React.Component {
                         className={postClass}
                     >
                         {loading}
-                        <span
-                            ref='message_span'
-                            onClick={TextFormatting.handleClick}
-                            dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.message)}}
-                        />
+                        {message}
                     </div>
                     <PostBodyAdditionalContent
                         post={this.state.post}
@@ -346,4 +360,4 @@ PostBody.propTypes = {
     handleCommentClick: React.PropTypes.func.isRequired
 };
 
-export default injectIntl(PostBody);
+export default injectIntl(PostBody);

web/react/components/post_info.jsx

@@ -23,13 +23,14 @@ export default class PostInfo extends React.Component {
         };
 
         this.handlePermalinkCopy = this.handlePermalinkCopy.bind(this);
+        this.removePost = this.removePost.bind(this);
     }
     createDropdown() {
         var post = this.props.post;
         var isOwner = UserStore.getCurrentId() === post.user_id;
         var isAdmin = Utils.isAdmin(UserStore.getCurrentUser().roles);
 
-        if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING || post.state === Constants.POST_DELETED) {
+        if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING || Utils.isPostEphemeral(post)) {
             return '';
         }
 
@@ -166,6 +167,25 @@ export default class PostInfo extends React.Component {
             this.setState({copiedLink: false});
         }
     }
+    removePost() {
+        EventHelpers.emitRemovePost(this.props.post);
+    }
+    createRemovePostButton(post) {
+        if (!Utils.isPostEphemeral(post)) {
+            return null;
+        }
+
+        return (
+            <a
+                href='#'
+                className='post__remove theme'
+                type='button'
+                onClick={this.removePost}
+            >
+                {'×'}
+            </a>
+        );
+    }
     render() {
         var post = this.props.post;
         var comments = '';
@@ -178,7 +198,7 @@ export default class PostInfo extends React.Component {
             commentCountText = '';
         }
 
-        if (post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING && post.state !== Constants.POST_DELETED) {
+        if (post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING && !Utils.isPostEphemeral(post)) {
             comments = (
                 <a
                     href='#'
@@ -264,6 +284,7 @@ export default class PostInfo extends React.Component {
                     >
                         {permalinkOverlay}
                     </Overlay>
+                    {this.createRemovePostButton(post)}
                 </li>
             </ul>
         );