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

1 files changed, 91 insertions, 0 deletions

diff --git a/webapp/components/post_view/post_time.jsx b/webapp/components/post_view/post_time.jsx
new file mode 100644
index 000000000..133b6b5a3
--- /dev/null
+++ b/webapp/components/post_view/post_time.jsx
@@ -0,0 +1,91 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import Constants from 'utils/constants.jsx';
+import {getDateForUnixTicks, isMobile, updateWindowDimensions} from 'utils/utils.jsx';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Link} from 'react-router/es6';
+import TeamStore from 'stores/team_store.jsx';
+
+export default class PostTime extends React.PureComponent {
+    static propTypes = {
+
+        /*
+         * The time to display
+         */
+        eventTime: PropTypes.number.isRequired,
+
+        /*
+         * Set to display using 24 hour format
+         */
+        useMilitaryTime: PropTypes.bool,
+
+        /*
+         * The post id of posting being rendered
+         */
+        postId: PropTypes.string
+    }
+
+    static defaultProps = {
+        eventTime: 0,
+        useMilitaryTime: false
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            currentTeamDisplayName: TeamStore.getCurrent().name,
+            width: '',
+            height: ''
+        };
+    }
+
+    componentDidMount() {
+        this.intervalId = setInterval(() => {
+            this.forceUpdate();
+        }, Constants.TIME_SINCE_UPDATE_INTERVAL);
+        window.addEventListener('resize', () => {
+            updateWindowDimensions(this);
+        });
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.intervalId);
+        window.removeEventListener('resize', () => {
+            updateWindowDimensions(this);
+        });
+    }
+
+    renderTimeTag() {
+        const date = getDateForUnixTicks(this.props.eventTime);
+
+        return (
+            <time
+                className='post__time'
+                dateTime={date.toISOString()}
+                title={date}
+            >
+                {date.toLocaleString('en', {hour: '2-digit', minute: '2-digit', hour12: !this.props.useMilitaryTime})}
+            </time>
+        );
+    }
+
+    render() {
+        if (isMobile()) {
+            return this.renderTimeTag();
+        }
+
+        return (
+            <Link
+                to={`/${this.state.currentTeamDisplayName}/pl/${this.props.postId}`}
+                target='_blank'
+                className='post__permalink'
+            >
+                {this.renderTimeTag()}
+            </Link>
+        );
+    }
+}