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