add helper method to add ephemeral messages; also switch 'delete message' to this new method

web/react/components/post.jsx

@@ -179,7 +179,7 @@ export default class Post extends React.Component {
         }
 
         let profilePic = null;
-        if (!this.props.hideProfilePic) {
+        if (!this.props.hideProfilePic && post.user_id !== '0') {
             let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex();
             if (post.props && post.props.from_webhook && global.window.mm_config.EnablePostIconOverride === 'true') {
                 if (post.props.override_icon_url) {

web/react/stores/post_store.jsx

@@ -7,6 +7,9 @@ import EventEmitter from 'events';
 import ChannelStore from '../stores/channel_store.jsx';
 import BrowserStore from '../stores/browser_store.jsx';
 import UserStore from '../stores/user_store.jsx';
+import SocketStore from '../stores/socket_store.jsx';
+
+import * as Utils from '../utils/utils.jsx';
 
 import Constants from '../utils/constants.jsx';
 const ActionTypes = Constants.ActionTypes;
@@ -53,11 +56,14 @@ class PostStoreClass extends EventEmitter {
         this.storePost = this.storePost.bind(this);
         this.storeFocusedPost = this.storeFocusedPost.bind(this);
         this.checkBounds = this.checkBounds.bind(this);
+        this.addEphemeralPost = this.addEphemeralPost.bind(this);
 
         this.clearFocusedPost = this.clearFocusedPost.bind(this);
         this.clearChannelVisibility = this.clearChannelVisibility.bind(this);
 
         this.removePost = this.removePost.bind(this);
+        this.deletePost = this.deletePost.bind(this);
+        this.clearUnseenDeletedPosts = this.clearUnseenDeletedPosts.bind(this);
 
         this.getPendingPosts = this.getPendingPosts.bind(this);
         this.storePendingPost = this.storePendingPost.bind(this);
@@ -65,10 +71,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 +213,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;
         }
 
@@ -439,33 +419,88 @@ class PostStoreClass extends EventEmitter {
         this.emitChange();
     }
 
-    storeUnseenDeletedPost(post) {
-        let posts = this.getUnseenDeletedPosts(post.channel_id);
-
-        if (!posts) {
-            posts = {};
+    addEphemeralPost(post, disableNotification, autoDeleteTimer) {
+        if (!post.channel_id) {
+            return null;
         }
 
+        const member = ChannelStore.getMember(post.channel_id);
+        if (!member) {
+            return null;
+        }
+
+        const timestamp = Utils.getTimestamp();
+        const newPost = $.extend(true, {
+            id: Utils.generateId(),
+            user_id: '0',
+            create_at: timestamp,
+            update_at: timestamp,
+            filenames: [],
+            props: {}
+        }, post);
+
+        if (disableNotification) {
+            newPost.props.disable_notification = true;
+        }
+
+        SocketStore.handleMessage({
+            user_id: newPost.user_id,
+            channel_id: newPost.channel_id,
+            action: Constants.SocketEvents.POSTED,
+            props: {
+                post: JSON.stringify(newPost),
+                ephemeral: true
+            }
+        });
+
+        if (autoDeleteTimer) {
+            setTimeout(() => {
+                ChannelStore.resetCounts(newPost.channel_id);
+                this.removePost(newPost);
+                this.emitChange();
+                ChannelStore.emitChange();
+            }, autoDeleteTimer);
+        }
+
+        return newPost;
+    }
+
+    deletePost(post) {
+        const newId = Utils.generateId();
+        const index = this.postsInfo[post.channel_id].postList.order.indexOf(post.id);
+        this.postsInfo[post.channel_id].postList.order.splice(index, 1, newId);
+        this.removePost(post);
+
+        post.id = newId;
         post.message = '(message deleted)';
         post.state = Constants.POST_DELETED;
         post.filenames = [];
-
-        posts[post.id] = post;
-        this.postsInfo[post.channel_id].deletedPosts = posts;
-    }
-
-    getUnseenDeletedPosts(channelId) {
-        if (this.postsInfo.hasOwnProperty(channelId)) {
-            return this.postsInfo[channelId].deletedPosts;
+        if (post.props && post.props.attachments) {
+            Reflect.deleteProperty(post.props, 'attachments');
         }
 
-        return null;
+        Utils.defer(() => {
+            this.addEphemeralPost(post, true);
+        });
     }
 
     clearUnseenDeletedPosts(channelId) {
-        if (this.postsInfo.hasOwnProperty(channelId)) {
-            Reflect.deleteProperty(this.postsInfo[channelId], 'deletedPosts');
+        const postList = this.postsInfo[channelId] && this.postsInfo[channelId].postList;
+        if (!postList) {
+            return;
         }
+
+        const member = ChannelStore.getMember(channelId);
+        if (!member) {
+            return;
+        }
+
+        Object.keys(postList.posts).forEach((postId) => {
+            const post = postList.posts[postId];
+            if (post.state === Constants.POST_DELETED && post.create_at < member.last_viewed_at) {
+                this.removePost(post);
+            }
+        });
     }
 
     storeSelectedPost(postList) {
@@ -618,9 +653,7 @@ PostStore.dispatchToken = AppDispatcher.register((payload) => {
         PostStore.jumpPostsViewToBottom();
         break;
     case ActionTypes.POST_DELETED:
-        PostStore.storeUnseenDeletedPost(action.post);
-        PostStore.removePost(action.post);
-        PostStore.emitChange();
+        PostStore.deletePost(action.post);
         break;
     case ActionTypes.RECIEVED_POST_SELECTED:
         PostStore.storeSelectedPost(action.post_list);

web/react/stores/socket_store.jsx

@@ -160,11 +160,15 @@ function handleNewPostEvent(msg) {
             AsyncClient.updateLastViewedAt();
         }
     } else if (UserStore.getCurrentId() !== msg.user_id || post.type !== Constants.POST_TYPE_JOIN_LEAVE) {
-        AsyncClient.getChannel(msg.channel_id);
+        if (msg.props.ephemeral) {
+            AsyncClient.getChannelAndAddUnreadMessages(msg.channel_id, 1);
+        } else {
+            AsyncClient.getChannel(msg.channel_id);
+        }
     }
 
     // Send desktop notification
-    if ((UserStore.getCurrentId() !== msg.user_id || post.props.from_webhook === 'true') && !Utils.isSystemMessage(post)) {
+    if ((UserStore.getCurrentId() !== msg.user_id || post.props.from_webhook === 'true') && !Utils.isSystemMessage(post) && !post.props.disable_notification) {
         const msgProps = msg.props;
 
         let mentions = [];

web/react/utils/async_client.jsx

@@ -82,7 +82,7 @@ export function getChannels(checkVersion) {
     );
 }
 
-export function getChannel(id) {
+export function getChannelAndAddUnreadMessages(id, unreadCount) {
     if (isCallInProgress('getChannel' + id)) {
         return;
     }
@@ -97,6 +97,7 @@ export function getChannel(id) {
                 return;
             }
 
+            data.channel.total_msg_count += (unreadCount || 0);
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECIEVED_CHANNEL,
                 channel: data.channel,
@@ -110,6 +111,10 @@ export function getChannel(id) {
     );
 }
 
+export function getChannel(id) {
+    getChannelAndAddUnreadMessages(id, 0);
+}
+
 export function updateLastViewedAt(id) {
     let channelId;
     if (id) {
@@ -131,6 +136,14 @@ export function updateLastViewedAt(id) {
         channelId,
         () => {
             callTracker.updateLastViewed = 0;
+
+            var channel = ChannelStore.get(channelId);
+            var member = ChannelStore.getMember(channelId);
+            if (channel && member) {
+                member.msg_count = channel.total_msg_count;
+                member.last_viewed_at = utils.getTimestamp();
+                ChannelStore.setChannelMember(member);
+            }
         },
         (err) => {
             callTracker.updateLastViewed = 0;

web/react/utils/utils.jsx

@@ -1254,3 +1254,8 @@ export function isFeatureEnabled(feature) {
 export function isSystemMessage(post) {
     return post.type && (post.type.lastIndexOf(Constants.SYSTEM_MESSAGE_PREFIX) === 0);
 }
+
+// convenience method to dispatch an event in JS' next event cycle
+export function defer(fn) {
+    setTimeout(fn, 0);
+}