[MM-18177] Increase post visibility when creating/receiving a new post for the current channel (#3662) (#3715)

* Increase post visibility for current channel on new post

* Increase post visibility after post creation

app/actions/views/channel.js

@@ -662,6 +662,16 @@ export function increasePostVisibility(channelId, postId) {
     };
 }
 
+export function increasePostVisibilityByOne(channelId) {
+    return (dispatch) => {
+        dispatch({
+            type: ViewTypes.INCREASE_POST_VISIBILITY,
+            data: channelId,
+            amount: 1,
+        });
+    };
+}
+
 function doIncreasePostVisibility(channelId) {
     return {
         type: ViewTypes.INCREASE_POST_VISIBILITY,

app/reducers/views/channel.js

@@ -278,6 +278,15 @@ function postVisibility(state = {}, action) {
         nextState[action.channelId] = ViewTypes.POST_VISIBILITY_CHUNK_SIZE;
         return nextState;
     }
+    case PostTypes.RECEIVED_NEW_POST: {
+        if (action.data.id === action.data.pending_post_id) {
+            const nextState = {...state};
+            nextState[action.data.channel_id] += 1;
+            return nextState;
+        }
+
+        return state;
+    }
     default:
         return state;
     }

app/reducers/views/channel.test.js

@@ -1,6 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {PostTypes} from 'mattermost-redux/action_types';
+
 import channelReducer from './channel';
 import {ViewTypes} from 'app/constants';
 
@@ -109,4 +111,42 @@ describe('Reducers.channel', () => {
             },
         });
     });
+
+    test('should increase the postVisibility amount for a channel by one after creating a post', () => {
+        const channelId = 'channel_id';
+        const amount = 15;
+        const state = {
+            ...initialState,
+            postVisibility: {
+                [channelId]: amount,
+            },
+        };
+
+        const receiveOtherPostAction = {
+            type: PostTypes.RECEIVED_NEW_POST,
+            data: {
+                channel_id: channelId,
+                id: 'post-id',
+                pending_post_id: 'pending-post-id',
+            },
+        };
+        let nextState = channelReducer(state, receiveOtherPostAction);
+        expect(nextState).toEqual(state);
+
+        const receiveCreatedPostAction = {
+            type: PostTypes.RECEIVED_NEW_POST,
+            data: {
+                channel_id: channelId,
+                id: 'post-id',
+                pending_post_id: 'post-id',
+            },
+        };
+        nextState = channelReducer(state, receiveCreatedPostAction);
+        expect(nextState).toEqual({
+            ...state,
+            postVisibility: {
+                [channelId]: amount + 1,
+            },
+        });
+    });
 });

app/screens/channel/channel_post_list/channel_post_list.js

@@ -11,6 +11,7 @@ import {
 
 import {getLastPostIndex} from 'mattermost-redux/utils/post_list';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
+import {WebsocketEvents} from 'mattermost-redux/constants';
 
 import AnnouncementBanner from 'app/components/announcement_banner';
 import PostList from 'app/components/post_list';
@@ -30,6 +31,7 @@ export default class ChannelPostList extends PureComponent {
             loadPostsIfNecessaryWithRetry: PropTypes.func.isRequired,
             loadThreadIfNecessary: PropTypes.func.isRequired,
             increasePostVisibility: PropTypes.func.isRequired,
+            increasePostVisibilityByOne: PropTypes.func.isRequired,
             selectPost: PropTypes.func.isRequired,
             recordLoadTime: PropTypes.func.isRequired,
             refreshChannelWithRetry: PropTypes.func.isRequired,
@@ -67,6 +69,7 @@ export default class ChannelPostList extends PureComponent {
 
     componentDidMount() {
         EventEmitter.on('goToThread', this.goToThread);
+        EventEmitter.on(WebsocketEvents.INCREASE_POST_VISIBILITY_BY_ONE, this.increasePostVisibilityByOne);
     }
 
     componentWillReceiveProps(nextProps) {
@@ -97,6 +100,7 @@ export default class ChannelPostList extends PureComponent {
 
     componentWillUnmount() {
         EventEmitter.off('goToThread', this.goToThread);
+        EventEmitter.off(WebsocketEvents.INCREASE_POST_VISIBILITY_BY_ONE, this.increasePostVisibilityByOne);
     }
 
     getVisiblePostIds = (props) => {
@@ -124,6 +128,11 @@ export default class ChannelPostList extends PureComponent {
         });
     };
 
+    increasePostVisibilityByOne = () => {
+        const {actions, channelId} = this.props;
+        actions.increasePostVisibilityByOne(channelId);
+    }
+
     loadMorePostsTop = () => {
         const {actions, channelId} = this.props;
         if (!this.isLoadingMoreTop) {

app/screens/channel/channel_post_list/channel_post_list.test.js

@@ -0,0 +1,40 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import Preferences from 'mattermost-redux/constants/preferences';
+import EventEmitter from 'mattermost-redux/utils/event_emitter';
+import {WebsocketEvents} from 'mattermost-redux/constants';
+
+import ChannelPostList from './channel_post_list';
+
+describe('ChannelPostList', () => {
+    const baseProps = {
+        actions: {
+            loadPostsIfNecessaryWithRetry: jest.fn(),
+            loadThreadIfNecessary: jest.fn(),
+            increasePostVisibility: jest.fn(),
+            increasePostVisibilityByOne: jest.fn(),
+            selectPost: jest.fn(),
+            recordLoadTime: jest.fn(),
+            refreshChannelWithRetry: jest.fn(),
+        },
+        channelId: 'channel-id',
+        loadMorePostsVisible: false,
+        refreshing: false,
+        theme: Preferences.THEMES.default,
+    };
+
+    test('should call increasePostVisibilityByOne', () => {
+        shallow(
+            <ChannelPostList {...baseProps}/>
+        );
+
+        expect(baseProps.actions.increasePostVisibilityByOne).toHaveBeenCalledTimes(0);
+
+        EventEmitter.emit(WebsocketEvents.INCREASE_POST_VISIBILITY_BY_ONE);
+        expect(baseProps.actions.increasePostVisibilityByOne).toHaveBeenCalledWith(baseProps.channelId);
+    });
+});

app/screens/channel/channel_post_list/index.js

@@ -10,7 +10,13 @@ import {getCurrentChannelId} from 'mattermost-redux/selectors/entities/channels'
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
-import {loadPostsIfNecessaryWithRetry, loadThreadIfNecessary, increasePostVisibility, refreshChannelWithRetry} from 'app/actions/views/channel';
+import {
+    loadPostsIfNecessaryWithRetry,
+    loadThreadIfNecessary,
+    increasePostVisibility,
+    increasePostVisibilityByOne,
+    refreshChannelWithRetry,
+} from 'app/actions/views/channel';
 import {recordLoadTime} from 'app/actions/views/root';
 import {isLandscape} from 'app/selectors/device';
 
@@ -41,6 +47,7 @@ function mapDispatchToProps(dispatch) {
             loadPostsIfNecessaryWithRetry,
             loadThreadIfNecessary,
             increasePostVisibility,
+            increasePostVisibilityByOne,
             selectPost,
             recordLoadTime,
             refreshChannelWithRetry,

package-lock.json

@@ -7283,8 +7283,8 @@
       }
     },
     "mattermost-redux": {
-      "version": "github:mattermost/mattermost-redux#6421d6ee52784c629a405d010047becbbf196c00",
-      "from": "github:mattermost/mattermost-redux#6421d6ee52784c629a405d010047becbbf196c00",
+      "version": "github:mattermost/mattermost-redux#6d119cab2c41170350d52087eeeb1b716cbb63e3",
+      "from": "github:mattermost/mattermost-redux#6d119cab2c41170350d52087eeeb1b716cbb63e3",
       "requires": {
         "form-data": "2.5.1",
         "gfycat-sdk": "1.4.18",

package.json

@@ -24,7 +24,7 @@
     "intl": "1.2.5",
     "jail-monkey": "2.3.0",
     "jsc-android": "241213.1.0",
-    "mattermost-redux": "github:mattermost/mattermost-redux#6421d6ee52784c629a405d010047becbbf196c00",
+    "mattermost-redux": "github:mattermost/mattermost-redux#6d119cab2c41170350d52087eeeb1b716cbb63e3",
     "mime-db": "1.42.0",
     "moment-timezone": "0.5.27",
     "prop-types": "15.7.2",