PLT-6215 Major post list refactor (#6501)

* Major post list refactor

* Fix post and thread deletion

* Fix preferences not selecting correctly

* Fix military time displaying

* Fix UP key for editing posts

* Fix ESLint error

* Various fixes and updates per feedback

* Fix for permalink view

* Revert to old scrolling method and various fixes

* Add floating timestamp, new message indicator, scroll arrows

* Update post loading for focus mode and add visibility limit

* Fix pinning posts and a react warning

* Add loading UI updates from Asaad

* Fix refreshing loop

* Temporarily bump post visibility limit

* Update infinite scrolling

* Remove infinite scrolling

4 files changed, 91 insertions, 9 deletions

diff --git a/webapp/components/dot_menu/dot_menu.jsx b/webapp/components/dot_menu/dot_menu.jsx
index b5f9fde45..eb6a6c005 100644
--- a/webapp/components/dot_menu/dot_menu.jsx
+++ b/webapp/components/dot_menu/dot_menu.jsx
@@ -22,7 +22,30 @@ export default class DotMenu extends Component {
         commentCount: PropTypes.number,
         isFlagged: PropTypes.bool,
         handleCommentClick: PropTypes.func,
-        handleDropdownOpened: PropTypes.func
+        handleDropdownOpened: PropTypes.func,
+
+        actions: PropTypes.shape({
+
+            /*
+             * Function flag the post
+             */
+            flagPost: PropTypes.func.isRequired,
+
+            /*
+             * Function to unflag the post
+             */
+            unflagPost: PropTypes.func.isRequired,
+
+            /*
+             * Function to pin the post
+             */
+            pinPost: PropTypes.func.isRequired,
+
+            /*
+             * Function to unpin the post
+             */
+            unpinPost: PropTypes.func.isRequired
+        }).isRequired
     }
 
     static defaultProps = {
@@ -90,6 +113,10 @@ export default class DotMenu extends Component {
                     idCount={this.props.idCount}
                     postId={this.props.post.id}
                     isFlagged={this.props.isFlagged}
+                    actions={{
+                        flagPost: this.props.actions.flagPost,
+                        unflagPost: this.props.actions.unflagPost
+                    }}
                 />
             );
         }
@@ -121,6 +148,10 @@ export default class DotMenu extends Component {
                     idPrefix={idPrefix + 'Pin'}
                     idCount={this.props.idCount}
                     post={this.props.post}
+                    actions={{
+                        pinPost: this.props.actions.pinPost,
+                        unpinPost: this.props.actions.unpinPost
+                    }}
                 />
             );
         }
diff --git a/webapp/components/dot_menu/dot_menu_flag.jsx b/webapp/components/dot_menu/dot_menu_flag.jsx
index 105363211..11546ee79 100644
--- a/webapp/components/dot_menu/dot_menu_flag.jsx
+++ b/webapp/components/dot_menu/dot_menu_flag.jsx
@@ -5,7 +5,6 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import PropTypes from 'prop-types';
 
-import {flagPost, unflagPost} from 'actions/post_actions.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 
@@ -21,12 +20,12 @@ function formatMessage(isFlagged) {
 export default function DotMenuFlag(props) {
     function onFlagPost(e) {
         e.preventDefault();
-        flagPost(props.postId);
+        props.actions.flagPost(props.postId);
     }
 
     function onUnflagPost(e) {
         e.preventDefault();
-        unflagPost(props.postId);
+        props.actions.unflagPost(props.postId);
     }
 
     const flagFunc = props.isFlagged ? onUnflagPost : onFlagPost;
@@ -60,7 +59,21 @@ DotMenuFlag.propTypes = {
     idCount: PropTypes.number,
     idPrefix: PropTypes.string.isRequired,
     postId: PropTypes.string.isRequired,
-    isFlagged: PropTypes.bool.isRequired
+    isFlagged: PropTypes.bool.isRequired,
+
+    actions: PropTypes.shape({
+
+        /*
+         * Function flag the post
+         */
+        flagPost: PropTypes.func.isRequired,
+
+        /*
+         * Function to unflag the post
+         */
+        unflagPost: PropTypes.func.isRequired
+
+    }).isRequired
 };
 
 DotMenuFlag.defaultProps = {
diff --git a/webapp/components/dot_menu/dot_menu_item.jsx b/webapp/components/dot_menu/dot_menu_item.jsx
index ceda0a1a4..6411beafb 100644
--- a/webapp/components/dot_menu/dot_menu_item.jsx
+++ b/webapp/components/dot_menu/dot_menu_item.jsx
@@ -5,7 +5,6 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import PropTypes from 'prop-types';
 
-import {unpinPost, pinPost} from 'actions/post_actions.jsx';
 import {showGetPostLinkModal, showDeletePostModal} from 'actions/global_actions.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
@@ -18,12 +17,12 @@ export default function DotMenuItem(props) {
 
     function handleUnpinPost(e) {
         e.preventDefault();
-        unpinPost(props.post.channel_id, props.post.id);
+        props.actions.unpinPost(props.post.id);
     }
 
     function handlePinPost(e) {
         e.preventDefault();
-        pinPost(props.post.channel_id, props.post.id);
+        props.actions.pinPost(props.post.id);
     }
 
     function handleDeletePost(e) {
@@ -98,7 +97,20 @@ DotMenuItem.propTypes = {
     post: PropTypes.object,
     handleOnClick: PropTypes.func,
     type: PropTypes.string,
-    commentCount: PropTypes.number
+    commentCount: PropTypes.number,
+
+    actions: PropTypes.shape({
+
+        /*
+         * Function to pin the post
+         */
+        pinPost: PropTypes.func,
+
+        /*
+         * Function to unpin the post
+         */
+        unpinPost: PropTypes.func
+    })
 };
 
 DotMenuItem.defaultProps = {
diff --git a/webapp/components/dot_menu/index.js b/webapp/components/dot_menu/index.js
new file mode 100644
index 000000000..eaa1e8d2c
--- /dev/null
+++ b/webapp/components/dot_menu/index.js
@@ -0,0 +1,26 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {flagPost, unflagPost, pinPost, unpinPost} from 'mattermost-redux/actions/posts';
+
+import DotMenu from './dot_menu.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return ownProps;
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            flagPost,
+            unflagPost,
+            pinPost,
+            unpinPost
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DotMenu);
+