Changed deleted posts to be more general ephemeral posts

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_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 || post.ephemeral) {
             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 (!post.ephemeral) {
+            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 && !post.ephemeral) {
             comments = (
                 <a
                     href='#'
@@ -264,6 +284,7 @@ export default class PostInfo extends React.Component {
                     >
                         {permalinkOverlay}
                     </Overlay>
+                    {this.createRemovePostButton(post)}
                 </li>
             </ul>
         );

web/react/dispatcher/event_helpers.jsx

@@ -180,3 +180,10 @@ export function emitPreferenceChangedEvent(preference) {
         preference
     });
 }
+
+export function emitRemovePost(post) {
+    AppDispatcher.handleViewAction({
+        type: Constants.ActionTypes.REMOVE_POST,
+        post
+    });
+}

web/react/stores/post_store.jsx

@@ -57,6 +57,7 @@ class PostStoreClass extends EventEmitter {
         this.clearFocusedPost = this.clearFocusedPost.bind(this);
         this.clearChannelVisibility = this.clearChannelVisibility.bind(this);
 
+        this.deletePost = this.deletePost.bind(this);
         this.removePost = this.removePost.bind(this);
 
         this.getPendingPosts = this.getPendingPosts.bind(this);
@@ -65,10 +66,6 @@ class PostStoreClass extends EventEmitter {
         this.clearPendingPosts = this.clearPendingPosts.bind(this);
         this.updatePendingPost = this.updatePendingPost.bind(this);
 
-        this.storeUnseenDeletedPost = this.storeUnseenDeletedPost.bind(this);
-        this.getUnseenDeletedPosts = this.getUnseenDeletedPosts.bind(this);
-        this.clearUnseenDeletedPosts = this.clearUnseenDeletedPosts.bind(this);
-
         // These functions are bad and work should be done to remove this system when the RHS dies
         this.storeSelectedPost = this.storeSelectedPost.bind(this);
         this.getSelectedPost = this.getSelectedPost.bind(this);
@@ -211,28 +208,6 @@ class PostStoreClass extends EventEmitter {
                 postList.order = this.postsInfo[id].pendingPosts.order.concat(postList.order);
             }
 
-            // Add deleted posts
-            if (this.postsInfo[id].hasOwnProperty('deletedPosts')) {
-                Object.assign(postList.posts, this.postsInfo[id].deletedPosts);
-
-                for (const postID in this.postsInfo[id].deletedPosts) {
-                    if (this.postsInfo[id].deletedPosts.hasOwnProperty(postID)) {
-                        postList.order.push(postID);
-                    }
-                }
-
-                // Merge would be faster
-                postList.order.sort((a, b) => {
-                    if (postList.posts[a].create_at > postList.posts[b].create_at) {
-                        return -1;
-                    }
-                    if (postList.posts[a].create_at < postList.posts[b].create_at) {
-                        return 1;
-                    }
-                    return 0;
-                });
-            }
-
             return postList;
         }
 
@@ -286,15 +261,6 @@ class PostStoreClass extends EventEmitter {
                     if (combinedPosts.order.indexOf(pid) === -1) {
                         combinedPosts.order.push(pid);
                     }
-                } else {
-                    if (pid in combinedPosts.posts) {
-                        Reflect.deleteProperty(combinedPosts.posts, pid);
-                    }
-
-                    const index = combinedPosts.order.indexOf(pid);
-                    if (index !== -1) {
-                        combinedPosts.order.splice(index, 1);
-                    }
                 }
             }
         }
@@ -365,6 +331,24 @@ class PostStoreClass extends EventEmitter {
         this.postsInfo[id].atBottom = atBottom;
     }
 
+    deletePost(post) {
+        const postList = this.postsInfo[post.channel_id].postList;
+
+        if (isPostListNull(postList)) {
+            return;
+        }
+
+        if (post.id in postList.posts) {
+            // make sure to copy the post so that component state changes work properly
+            postList.posts[post.id] = Object.assign({}, post, {
+                message: this.delete_message, // TODO
+                state: Constants.POST_DELETED,
+                filenames: [],
+                ephemeral: true
+            });
+        }
+    }
+
     removePost(post) {
         const channelId = post.channel_id;
         this.makePostsInfo(channelId);
@@ -439,37 +423,6 @@ class PostStoreClass extends EventEmitter {
         this.emitChange();
     }
 
-    storeUnseenDeletedPost(post) {
-        let posts = this.getUnseenDeletedPosts(post.channel_id);
-
-        if (!posts) {
-            posts = {};
-        }
-
-        post.message = this.delete_message;
-        post.state = Constants.POST_DELETED;
-        post.filenames = [];
-
-        posts[post.id] = post;
-
-        this.makePostsInfo(post.channel_id);
-        this.postsInfo[post.channel_id].deletedPosts = posts;
-    }
-
-    getUnseenDeletedPosts(channelId) {
-        if (this.postsInfo.hasOwnProperty(channelId)) {
-            return this.postsInfo[channelId].deletedPosts;
-        }
-
-        return null;
-    }
-
-    clearUnseenDeletedPosts(channelId) {
-        if (this.postsInfo.hasOwnProperty(channelId)) {
-            Reflect.deleteProperty(this.postsInfo[channelId], 'deletedPosts');
-        }
-    }
-
     storeSelectedPost(postList) {
         this.selectedPost = postList;
     }
@@ -615,7 +568,6 @@ PostStore.dispatchToken = AppDispatcher.register((payload) => {
     case ActionTypes.CLICK_CHANNEL:
         PostStore.clearFocusedPost();
         PostStore.clearChannelVisibility(action.id, true);
-        PostStore.clearUnseenDeletedPosts(action.prev);
         break;
     case ActionTypes.CREATE_POST:
         PostStore.storePendingPost(action.post);
@@ -623,7 +575,10 @@ PostStore.dispatchToken = AppDispatcher.register((payload) => {
         PostStore.jumpPostsViewToBottom();
         break;
     case ActionTypes.POST_DELETED:
-        PostStore.storeUnseenDeletedPost(action.post);
+        PostStore.deletePost(action.post);
+        PostStore.emitChange();
+        break;
+    case ActionTypes.REMOVE_POST:
         PostStore.removePost(action.post);
         PostStore.emitChange();
         break;

web/react/utils/constants.jsx

@@ -12,6 +12,7 @@ export default {
         LEAVE_CHANNEL: null,
         CREATE_POST: null,
         POST_DELETED: null,
+        REMOVE_POST: null,
 
         RECIEVED_CHANNELS: null,
         RECIEVED_CHANNEL: null,
@@ -127,6 +128,7 @@ export default {
     POST_FAILED: 'failed',
     POST_DELETED: 'deleted',
     POST_TYPE_JOIN_LEAVE: 'system_join_leave',
+    POST_TYPE_EPHEMERAL: 'system_ephemeral',
     SYSTEM_MESSAGE_PREFIX: 'system_',
     SYSTEM_MESSAGE_PROFILE_NAME: 'System',
     SYSTEM_MESSAGE_PROFILE_IMAGE: '/static/images/logo_compact.png',

web/sass-files/sass/partials/_post.scss

@@ -408,7 +408,7 @@ body.ios {
 	@include legacy-pie-clearfix;
 
 	&:hover {
-		.dropdown, .comment-icon__container, .post__reply {
+		.dropdown, .comment-icon__container, .post__reply, .post__remove {
 			visibility: visible;
 		}
 		.permalink-icon {
@@ -646,6 +646,13 @@ body.ios {
 		}
 	}
 
+	.post__remove {
+		display: inline-block;
+		visibility: hidden;
+		margin-right: 5px;
+		top: -1px;
+	}
+
 	.post__body {
 		word-wrap: break-word;
 		padding: 0.2em 0.5em 0em;