[MM-19533] Add toasts feature (mattermost#4628)

* [MM-19533] working unread toast
   * Fix unread count
   * For channels which have more than 30 posts
   * Add toast for channel marked as read
   * Update atBottom logic
   * Dont show tooltip if action cannot be taken
   * Update remove toast logic to not compare old bottom state
   * Update redux hash
   * Update tests
   * Change new message since i18 string formats
   * Update react-window hash
   * Update time to use LocalDateTime
   * Use lastViewAt instead of lastViewBottom at for showing time in toast

actions/global_actions.jsx

@@ -107,6 +107,14 @@ export function emitChannelClickEvent(channel) {
  }
 }
 
+export function updateNewMessagesAtInChannel(channelId, last_viewed_at = Date.now()) {
+ return {
+ type: ActionTypes.UPDATE_CHANNEL_LAST_VIEWED_AT,
+ channel_id: channelId,
+ last_viewed_at,
+ };
+}
+
 export function emitCloseRightHandSide() {
  dispatch(closeRightHandSide());
 }

components/post_view/floating_timestamp/floating_timestamp.jsx

@@ -15,6 +15,7 @@ export default class FloatingTimestamp extends React.PureComponent {
  PropTypes.number,
  ]).isRequired,
  isRhsPost: PropTypes.bool,
+ stylesOverride: PropTypes.object,
  }
 
  render() {
@@ -48,6 +49,7 @@ export default class FloatingTimestamp extends React.PureComponent {
  return (
  <div
  className={className}
+ style={this.props.stylesOverride}
  data-testid='floatingTimestamp'
  >
  <div>

components/post_view/post_list/__snapshots__/post_list.test.jsx.snap

@@ -20,6 +20,7 @@ exports[`components/post_view/post_list snapshot for loading when there are no p
  "checkAndSetMobileView": [MockFunction],
  "loadNewerPosts": [Function],
  "loadOlderPosts": [Function],
+ "updateNewMessagesAtInChannel": [MockFunction],
  }
  }
  atLatestPost={false}
@@ -54,6 +55,7 @@ exports[`components/post_view/post_list snapshot with couple of posts 1`] = `
  "checkAndSetMobileView": [MockFunction],
  "loadNewerPosts": [Function],
  "loadOlderPosts": [Function],
+ "updateNewMessagesAtInChannel": [MockFunction],
  }
  }
  atLatestPost={false}

components/post_view/post_list/index.js

@@ -9,6 +9,7 @@ import {memoizeResult} from 'mattermost-redux/utils/helpers';
 import {markChannelAsRead, markChannelAsViewed} from 'mattermost-redux/actions/channels';
 import {makePreparePostIdsForPostList} from 'mattermost-redux/utils/post_list';
 
+import {updateNewMessagesAtInChannel} from 'actions/global_actions.jsx';
 import {getLatestPostId, makeCreateAriaLabelForPost} from 'utils/post_utils.jsx';
 import {
  checkAndSetMobileView,
@@ -92,6 +93,7 @@ function mapDispatchToProps(dispatch) {
  syncPostsInChannel,
  markChannelAsViewed,
  markChannelAsRead,
+ updateNewMessagesAtInChannel,
  }, dispatch),
  };
 }

components/post_view/post_list/post_list.jsx

@@ -9,7 +9,7 @@ import {PostRequestTypes} from 'utils/constants';
 
 import {getOldestPostId, getLatestPostId} from 'utils/post_utils.jsx';
 
-import VirtPostList from './post_list_virtualized.jsx';
+import VirtPostList from 'components/post_view/post_list_virtualized/post_list_virtualized';
 
 const MAX_NUMBER_OF_AUTO_RETRIES = 3;
 export const MAX_EXTRA_PAGES_LOADED = 10;
@@ -100,9 +100,11 @@ export default class PostList extends React.PureComponent {
  */
  loadLatestPosts: PropTypes.func.isRequired,
 
- markChannelAsViewed: PropTypes.func.isRequred,
+ markChannelAsViewed: PropTypes.func.isRequired,
+
+ markChannelAsRead: PropTypes.func.isRequired,
+ updateNewMessagesAtInChannel: PropTypes.func.isRequired,
 
- markChannelAsRead: PropTypes.func.isRequred,
  }).isRequired,
  }
 
@@ -122,6 +124,7 @@ export default class PostList extends React.PureComponent {
  checkAndSetMobileView: props.actions.checkAndSetMobileView,
  canLoadMorePosts: this.canLoadMorePosts,
  changeUnreadChunkTimeStamp: props.changeUnreadChunkTimeStamp,
+ updateNewMessagesAtInChannel: this.props.actions.updateNewMessagesAtInChannel,
  };
  }
 

components/post_view/post_list/post_list.test.jsx

@@ -4,10 +4,11 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
+import VirtPostList from 'components/post_view/post_list_virtualized/post_list_virtualized';
+
 import {PostRequestTypes} from 'utils/constants';
 
 import PostList, {MAX_EXTRA_PAGES_LOADED} from './post_list.jsx';
-import VirtPostList from './post_list_virtualized.jsx';
 
 const actionsProp = {
  loadPostsAround: jest.fn().mockImplementation(() => Promise.resolve({atLatestMessage: true, atOldestmessage: true})),
@@ -18,6 +19,7 @@ const actionsProp = {
  checkAndSetMobileView: jest.fn(),
  markChannelAsViewed: jest.fn(),
  markChannelAsRead: jest.fn(),
+ updateNewMessagesAtInChannel: jest.fn(),
 };
 
 const lastViewedAt = 1532345226632;