Revert "MM-14196 Add virtualised list for posts (#2447)"

This reverts commit ec5c279.

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() {

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', () => ({

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();
  };
 }
 

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"
  />

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,
  }
 

components/post_view/index.js

@@ -3,49 +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 {get} from 'mattermost-redux/selectors/entities/preferences';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
-import {getTeamByName} from 'mattermost-redux/selectors/entities/teams';
 
 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) => {
- if (params.postid) {
- return false;
- }
-
- if (channel && team) {
- if (channel.type !== Constants.DM_CHANNEL && channel.type !== Constants.GM_CHANNEL) {
- if (channel.name !== params.identifier) {
- 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];
@@ -57,24 +29,15 @@ function makeMapStateToProps() {
  posts = getPostsInChannel(state, ownProps.channelId, postVisibility);
  }
 
- const channel = getChannel(state, ownProps.channelId);
- const team = getTeamByName(state, ownProps.match.params.team);
-
- const channelLoading = isChannelLoading(ownProps.match.params, channel, team);
- 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,
  };
  };
 }
@@ -92,4 +55,4 @@ function mapDispatchToProps(dispatch) {
  };
 }
 
-export default withRouter(connect(makeMapStateToProps, mapDispatchToProps)(PostList));
+export default connect(makeMapStateToProps, mapDispatchToProps)(PostList);

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();
  }
  };
 

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);
  });
 

components/post_view/post/index.js

@@ -19,6 +19,7 @@ function mapStateToProps(state, ownProps) {
  post: getPost(state, detailedPost.id),
  currentUserId: getCurrentUserId(state),
  isFirstReply: Boolean(detailedPost.isFirstReply && detailedPost.commentedOnPost),
+ highlight: detailedPost.highlight,
  consecutivePostByUser: detailedPost.consecutivePostByUser,
  previousPostIsComment: detailedPost.previousPostIsComment,
  replyCount: detailedPost.replyCount,

components/post_view/post/post.jsx

@@ -41,7 +41,7 @@ export default class Post extends React.PureComponent {
  /**
  * Set to highlight the background of the post
  */
- shouldHighlight: PropTypes.bool,
+ highlight: PropTypes.bool,
 
  /**
  * Set to render this post as if it was attached to the previous post
@@ -63,6 +63,11 @@ export default class Post extends React.PureComponent {
  */
  replyCount: PropTypes.number,
 
+ /**
+ * Function to get the post list HTML element
+ */
+ getPostList: PropTypes.func.isRequired,
+
  actions: PropTypes.shape({
  selectPost: PropTypes.func.isRequired,
  }).isRequired,
@@ -124,7 +129,7 @@ export default class Post extends React.PureComponent {
  className += ' post--hide-controls';
  }
 
- if (this.props.shouldHighlight) {
+ if (this.props.highlight) {
  className += ' post--highlight';
  }
 
@@ -250,6 +255,7 @@ export default class Post extends React.PureComponent {
  isFirstReply={this.props.isFirstReply}
  replyCount={this.props.replyCount}
  showTimeWithoutHover={!hideProfilePicture}
+ getPostList={this.props.getPostList}
  hover={this.state.hover}
  />
  <PostBody

components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import SizeAwareImage from 'components/size_aware_image';
+import {postListScrollChange} from 'actions/global_actions.jsx';
 import * as CommonUtils from 'utils/commons.jsx';
 import {PostTypes} from 'utils/constants.jsx';
 import {useSafeUrl} from 'utils/url';
@@ -138,6 +139,7 @@ export default class PostAttachmentOpenGraph extends React.PureComponent {
  this.setState({
  hasLargeImage,
  });
+ postListScrollChange();
  }
 
  imageToggleAnchorTag(imageUrl) {

components/post_view/post_header/post_header.jsx

@@ -43,6 +43,11 @@ export default class PostHeader extends React.PureComponent {
  */
  isFirstReply: PropTypes.bool,
 
+ /**
+ * Function to get the post list HTML element
+ */
+ getPostList: PropTypes.func.isRequired,
+
  /**
  * Set to mark post as being hovered over
  */
@@ -154,6 +159,7 @@ export default class PostHeader extends React.PureComponent {
  replyCount={this.props.replyCount}
  isFirstReply={this.props.isFirstReply}
  showTimeWithoutHover={this.props.showTimeWithoutHover}
+ getPostList={this.props.getPostList}
  hover={this.props.hover}
  />
  </div>

components/post_view/post_image/post_image.jsx

@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import {postListScrollChange} from 'actions/global_actions';
 import SizeAwareImage from 'components/size_aware_image';
 import * as PostUtils from 'utils/post_utils.jsx';
 
@@ -49,6 +50,9 @@ export default class PostImage extends React.PureComponent {
  return;
  }
 
+ if (!this.props.dimensions) {
+ postListScrollChange();
+ }
  if (this.props.onLinkLoaded) {
  this.props.onLinkLoaded();
  }