Revert virtualised and auto load of posts (mattermost#2622)

* Revert "MM-14810 Fix for channel header loading in center channel (mattermost#2596)" This reverts commit 6bc18af. * Revert "MM-14761 Loading channel with lot of unreads should show loader at the top (mattermost#2589)" This reverts commit 3e88c52. * Revert "MM-14810 Fix for infinite loop caused by loading channels with content less than screen height (mattermost#2572)" This reverts commit b11b42c. * Revert "Expose virt list scroll variables to window (mattermost#2569)" This reverts commit 4e7715a. * Revert "MM-14820 Fix post menu on mobile view (mattermost#2576)" This reverts commit 8bd8dda. * Revert "Fix postlist connector when channel is undefined (mattermost#2573)" This reverts commit 03177f2. * Revert "MM-14800 Fix missing messages when switching to a team not previously loaded (mattermost#2562)" This reverts commit 3537b03. * Revert "MM-14196 Add virtualised list for posts (mattermost#2447)" This reverts commit ec5c279. * Revert infinite scroll from release 5.8v (mattermost#2303) * Revert infinite scroll changes * Fix an error with ScrollToBottomArrows * Fix the error of onClick with scrollToBottomArrow prop * Remove unused variables
Designveloper · Jun 13, 2019 · 6d0f270 · 6d0f270
1 parent ef2af1a
commit 6d0f270
Show file tree

Hide file tree

Showing 40 changed files with 622 additions and 985 deletions.
diff --git a/actions/global_actions.jsx b/actions/global_actions.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import debounce from 'lodash/debounce';
 import {batchActions} from 'redux-batched-actions';
 
 import {
@@ -37,6 +38,7 @@ import LocalStorageStore from 'stores/local_storage_store';
 import WebSocketClient from 'client/web_websocket_client.jsx';
 
 import {ActionTypes, Constants, PostTypes, RHSStates} from 'utils/constants.jsx';
+import EventTypes from 'utils/event_types.jsx';
 import {filterAndSortTeamsByDisplayName} from 'utils/team_utils.jsx';
 import * as Utils from 'utils/utils.jsx';
 import {equalServerVersions} from 'utils/server_version';
@@ -321,6 +323,20 @@ export async function redirectUserToDefaultTeam() {
     }
 }
 
+export const postListScrollChange = debounce(() => {
+    AppDispatcher.handleViewAction({
+        type: EventTypes.POST_LIST_SCROLL_CHANGE,
+        value: false,
+    });
+});
+
+export function postListScrollChangeToBottom() {
+    AppDispatcher.handleViewAction({
+        type: EventTypes.POST_LIST_SCROLL_CHANGE,
+        value: true,
+    });
+}
+
 let serverVersion = '';
 
 export function reloadIfServerVersionChanged() {

diff --git a/actions/post_actions.jsx b/actions/post_actions.jsx
@@ -175,11 +175,18 @@ export function increasePostVisibility(channelId, focusedPostId) {
             return true;
         }
 
-        dispatch({
-            type: ActionTypes.LOADING_POSTS,
-            data: true,
-            channelId,
-        });
+        dispatch(batchActions([
+            {
+                type: ActionTypes.LOADING_POSTS,
+                data: true,
+                channelId,
+            },
+            {
+                type: ActionTypes.INCREASE_POST_VISIBILITY,
+                data: channelId,
+                amount: POST_INCREASE_AMOUNT,
+            },
+        ]));
 
         const page = Math.floor(currentPostVisibility / POST_INCREASE_AMOUNT);
 
@@ -191,25 +198,13 @@ export function increasePostVisibility(channelId, focusedPostId) {
         }
         const posts = result.data;
 
-        const actions = [{
+        dispatch({
             type: ActionTypes.LOADING_POSTS,
             data: false,
             channelId,
-        }];
-
-        if (posts) {
-            actions.push({
-                type: ActionTypes.INCREASE_POST_VISIBILITY,
-                data: channelId,
-                amount: posts.order.length,
-            });
-        }
+        });
 
-        dispatch(batchActions(actions));
-        return {
-            moreToLoad: posts ? posts.order.length >= POST_INCREASE_AMOUNT : false,
-            error: result.error,
-        };
+        return posts ? posts.order.length >= POST_INCREASE_AMOUNT : false;
     };
 }
 

diff --git a/actions/post_actions.test.js b/actions/post_actions.test.js
@@ -216,40 +216,43 @@ describe('Actions.Posts', () => {
 
         await testStore.dispatch(Actions.increasePostVisibility('current_channel_id'));
         expect(testStore.getActions()).toEqual([
-            {channelId: 'current_channel_id', data: true, type: 'LOADING_POSTS'},
-            {args: ['current_channel_id', 2, 30], type: 'MOCK_GET_POSTS'},
             {
                 meta: {batch: true},
                 payload: [
-                    {channelId: 'current_channel_id', data: false, type: 'LOADING_POSTS'},
+                    {channelId: 'current_channel_id', data: true, type: 'LOADING_POSTS'},
+                    {amount: 30, data: 'current_channel_id', type: 'INCREASE_POST_VISIBILITY'},
                 ],
                 type: 'BATCHING_REDUCER.BATCH',
             },
+            {args: ['current_channel_id', 2, 30], type: 'MOCK_GET_POSTS'},
+            {channelId: 'current_channel_id', data: false, type: 'LOADING_POSTS'},
         ]);
 
         await testStore.dispatch(Actions.increasePostVisibility('current_channel_id', 'latest_post_id'));
         expect(testStore.getActions()).toEqual([
-            {channelId: 'current_channel_id', data: true, type: 'LOADING_POSTS'},
-            {args: ['current_channel_id', 2, 30], type: 'MOCK_GET_POSTS'},
             {
                 meta: {batch: true},
                 payload: [
-                    {channelId: 'current_channel_id', data: false, type: 'LOADING_POSTS'},
+                    {channelId: 'current_channel_id', data: true, type: 'LOADING_POSTS'},
+                    {amount: 30, data: 'current_channel_id', type: 'INCREASE_POST_VISIBILITY'},
                 ],
                 type: 'BATCHING_REDUCER.BATCH',
             },
-            {channelId: 'current_channel_id', data: true, type: 'LOADING_POSTS'},
-            {
-                args: ['current_channel_id', 'latest_post_id', 2, 30],
-                type: 'MOCK_GET_POSTS_BEFORE',
-            },
+            {args: ['current_channel_id', 2, 30], type: 'MOCK_GET_POSTS'},
+            {channelId: 'current_channel_id', data: false, type: 'LOADING_POSTS'},
             {
                 meta: {batch: true},
                 payload: [
-                    {channelId: 'current_channel_id', data: false, type: 'LOADING_POSTS'},
+                    {channelId: 'current_channel_id', data: true, type: 'LOADING_POSTS'},
+                    {amount: 30, data: 'current_channel_id', type: 'INCREASE_POST_VISIBILITY'},
                 ],
                 type: 'BATCHING_REDUCER.BATCH',
             },
+            {
+                args: ['current_channel_id', 'latest_post_id', 2, 30],
+                type: 'MOCK_GET_POSTS_BEFORE',
+            },
+            {channelId: 'current_channel_id', data: false, type: 'LOADING_POSTS'},
         ]);
     });
 

diff --git a/components/create_post/create_post.test.jsx b/components/create_post/create_post.test.jsx
@@ -19,6 +19,7 @@ jest.mock('actions/global_actions.jsx', () => ({
     emitUserPostedEvent: jest.fn(),
     showChannelNameUpdateModal: jest.fn(),
     toggleShortcutsModal: jest.fn(),
+    postListScrollChange: jest.fn(),
 }));
 
 jest.mock('react-dom', () => ({

diff --git a/components/create_post/index.js b/components/create_post/index.js
@@ -28,6 +28,7 @@ import {Posts, Preferences as PreferencesRedux} from 'mattermost-redux/constants
 
 import {connectionErrorCount} from 'selectors/views/system';
 
+import {postListScrollChangeToBottom} from 'actions/global_actions.jsx';
 import {addReaction, createPost, setEditingPost} from 'actions/post_actions.jsx';
 import {selectPostFromRightHandSideSearchByPostId} from 'actions/views/rhs';
 import {executeCommand} from 'actions/command';
@@ -98,6 +99,7 @@ function makeMapStateToProps() {
 function onSubmitPost(post, fileInfos) {
     return (dispatch) => {
         dispatch(createPost(post, fileInfos));
+        postListScrollChangeToBottom();
     };
 }
 

diff --git a/components/permalink_view/__snapshots__/permalink_view.test.jsx.snap b/components/permalink_view/__snapshots__/permalink_view.test.jsx.snap
@@ -8,7 +8,7 @@ exports[`components/PermalinkView should match snapshot 1`] = `
   <withRouter(Connect(ChannelHeader))
     channelId="channel_id"
   />
-  <withRouter(Connect(PostList))
+  <Connect(PostList)
     channelId="channel_id"
     focusedPostId="post_id"
   />
@@ -41,7 +41,7 @@ exports[`components/PermalinkView should match snapshot with archived channel 1`
   <withRouter(Connect(ChannelHeader))
     channelId="channel_id"
   />
-  <withRouter(Connect(PostList))
+  <Connect(PostList)
     channelId="channel_id"
     focusedPostId="post_id"
   />

diff --git a/components/post_view/floating_timestamp.jsx b/components/post_view/floating_timestamp.jsx
@@ -9,10 +9,7 @@ export default class FloatingTimestamp extends React.PureComponent {
     static propTypes = {
         isScrolling: PropTypes.bool.isRequired,
         isMobile: PropTypes.bool,
-        createAt: PropTypes.oneOfType([
-            PropTypes.instanceOf(Date),
-            PropTypes.number,
-        ]).isRequired,
+        createAt: PropTypes.number,
         isRhsPost: PropTypes.bool,
     }
 

diff --git a/components/post_view/index.js b/components/post_view/index.js
@@ -3,50 +3,21 @@
 
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {withRouter} from 'react-router-dom';
-
 import {getPosts, getPostsAfter, getPostsBefore, getPostThread} from 'mattermost-redux/actions/posts';
 import {getChannel} from 'mattermost-redux/selectors/entities/channels';
 import {makeGetPostsAroundPost, makeGetPostsInChannel} from 'mattermost-redux/selectors/entities/posts';
-import {getCurrentUserId, getUser} from 'mattermost-redux/selectors/entities/users';
-import {getTeamByName} from 'mattermost-redux/selectors/entities/teams';
+import {get} from 'mattermost-redux/selectors/entities/preferences';
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 
 import {increasePostVisibility} from 'actions/post_actions.jsx';
 import {checkAndSetMobileView} from 'actions/views/channel';
-import {makePreparePostIdsForPostList} from 'selectors/posts';
-import {Constants} from 'utils/constants.jsx';
+import {Preferences} from 'utils/constants.jsx';
 
 import PostList from './post_list.jsx';
 
-// This function is added as a fail safe for the channel sync issue we have.
-// When the user switches to a team for the first time we show the channel of previous team and then settle for the right channel after that
-// This causes the scroll correction etc an issue because post_list is not mounted for new channel instead it is updated
-const isChannelLoading = (params, channel, team, teammate) => {
-    if (params.postid) {
-        return false;
-    }
-
-    if (channel && team) {
-        if (channel.type !== Constants.DM_CHANNEL && channel.name !== params.identifier) {
-            return true;
-        } else if (channel.type === Constants.DM_CHANNEL && teammate && params.identifier !== `@${teammate.username}`) {
-            return true;
-        }
-
-        if (channel.team_id && channel.team_id !== team.id) {
-            return true;
-        }
-
-        return false;
-    }
-
-    return true;
-};
-
 function makeMapStateToProps() {
     const getPostsInChannel = makeGetPostsInChannel();
     const getPostsAroundPost = makeGetPostsAroundPost();
-    const preparePostIdsForPostList = makePreparePostIdsForPostList();
 
     return function mapStateToProps(state, ownProps) {
         const postVisibility = state.views.channel.postVisibility[ownProps.channelId];
@@ -58,28 +29,15 @@ function makeMapStateToProps() {
             posts = getPostsInChannel(state, ownProps.channelId, postVisibility);
         }
 
-        const channel = getChannel(state, ownProps.channelId);
-        const team = getTeamByName(state, ownProps.match.params.team);
-        let teammate;
-        if (channel && channel.type === Constants.DM_CHANNEL && channel.teammate_id) {
-            teammate = getUser(state, channel.teammate_id);
-        }
-
-        const channelLoading = isChannelLoading(ownProps.match.params, channel, team, teammate);
-        const lastViewedAt = state.views.channel.lastChannelViewTime[ownProps.channelId];
-        const {postIds, postsObjById} = preparePostIdsForPostList(state, {posts, lastViewedAt, indicateNewMessages: true});
-
         return {
-            channel,
-            lastViewedAt,
+            channel: getChannel(state, ownProps.channelId) || {},
+            lastViewedAt: state.views.channel.lastChannelViewTime[ownProps.channelId],
             posts,
-            postsObjById,
             postVisibility,
-            postListIds: postIds,
             loadingPosts: state.views.channel.loadingPosts[ownProps.channelId],
             focusedPostId: ownProps.focusedPostId,
             currentUserId: getCurrentUserId(state),
-            channelLoading,
+            fullWidth: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
         };
     };
 }
@@ -97,4 +55,4 @@ function mapDispatchToProps(dispatch) {
     };
 }
 
-export default withRouter(connect(makeMapStateToProps, mapDispatchToProps)(PostList));
+export default connect(makeMapStateToProps, mapDispatchToProps)(PostList);
diff --git a/components/post_view/message_attachments/message_attachment/message_attachment.jsx b/components/post_view/message_attachments/message_attachment/message_attachment.jsx
@@ -4,6 +4,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import {postListScrollChange} from 'actions/global_actions';
+
 import {getImageSrc} from 'utils/post_utils';
 import {isUrlSafe} from 'utils/url';
 import {handleFormattedTextClick} from 'utils/utils';
@@ -97,6 +99,8 @@ export default class MessageAttachment extends React.PureComponent {
             this.setState((prevState) => {
                 return {checkOverflow: prevState.checkOverflow + 1};
             });
+
+            postListScrollChange();
         }
     };
 

diff --git a/components/post_view/message_attachments/message_attachment/message_attachment.test.jsx b/components/post_view/message_attachments/message_attachment/message_attachment.test.jsx
@@ -6,6 +6,11 @@ import {mount, shallow} from 'enzyme';
 
 import SizeAwareImage from 'components/size_aware_image';
 import MessageAttachment from 'components/post_view/message_attachments/message_attachment/message_attachment.jsx';
+import {postListScrollChange} from 'actions/global_actions';
+
+jest.mock('actions/global_actions.jsx', () => ({
+    postListScrollChange: jest.fn(),
+}));
 
 describe('components/post_view/MessageAttachment', () => {
     const attachment = {
@@ -43,16 +48,18 @@ describe('components/post_view/MessageAttachment', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
-    test('should change checkOverflow state on handleHeightReceived change', () => {
+    test('should match state and have called postListScrollChange on handleImageHeightReceived', () => {
         const wrapper = shallow(<MessageAttachment {...baseProps}/>);
         const instance = wrapper.instance();
         instance.checkAttachmentTextOverflow = jest.fn();
 
         wrapper.setState({checkOverflow: 0});
         instance.handleHeightReceived(1);
+        expect(postListScrollChange).toHaveBeenCalledTimes(1);
         expect(wrapper.state('checkOverflow')).toEqual(1);
 
         instance.handleHeightReceived(0);
+        expect(postListScrollChange).toHaveBeenCalledTimes(1);
         expect(wrapper.state('checkOverflow')).toEqual(1);
     });
 

diff --git a/components/post_view/new_message_separator/__snapshots__/new_message_separator.test.jsx.snap b/components/post_view/new_message_separator/__snapshots__/new_message_separator.test.jsx.snap
diff --git a/components/post_view/new_message_separator/new_message_separator.jsx b/components/post_view/new_message_separator/new_message_separator.jsx