Add permalink to timestamp (#5206)

* Add permalink to timestamp

* Add permalink to timestamp

* Add permalink to timestamp

* Add permalink to timestamp

* fix error with duplicated import

* underline permalink on hover

2 files changed, 33 insertions, 3 deletions

diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index 3f38bdffe..e368e65f4 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -376,6 +376,7 @@ export default class PostInfo extends React.Component {
                         sameUser={this.props.sameUser}
                         compactDisplay={this.props.compactDisplay}
                         useMilitaryTime={this.props.useMilitaryTime}
+                        postId={post.id}
                     />
                     {flagTrigger}
                 </li>
diff --git a/webapp/components/post_view/components/post_time.jsx b/webapp/components/post_view/components/post_time.jsx
index caad12d4a..25d533e0a 100644
--- a/webapp/components/post_view/components/post_time.jsx
+++ b/webapp/components/post_view/components/post_time.jsx
@@ -6,26 +6,40 @@ import React from 'react';
 import Constants from 'utils/constants.jsx';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
-import {getDateForUnixTicks} from 'utils/utils.jsx';
+import {getDateForUnixTicks, isMobile, updateWindowDimensions} from 'utils/utils.jsx';
+
+import {Link} from 'react-router/es6';
+import TeamStore from 'stores/team_store.jsx';
 
 export default class PostTime extends React.Component {
     constructor(props) {
         super(props);
 
         this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+        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);
+        });
     }
 
-    render() {
+    renderTimeTag() {
         return (
             <time
                 className='post__time'
@@ -35,6 +49,20 @@ export default class PostTime extends React.Component {
             </time>
         );
     }
+
+    render() {
+        return isMobile() ?
+            this.renderTimeTag() :
+            (
+                <Link
+                    to={`/${this.state.currentTeamDisplayName}/pl/${this.props.postId}`}
+                    target='_blank'
+                    className='post__permalink'
+                >
+                    {this.renderTimeTag()}
+                </Link>
+            );
+    }
 }
 
 PostTime.defaultProps = {
@@ -46,5 +74,6 @@ PostTime.propTypes = {
     eventTime: React.PropTypes.number.isRequired,
     sameUser: React.PropTypes.bool,
     compactDisplay: React.PropTypes.bool,
-    useMilitaryTime: React.PropTypes.bool.isRequired
+    useMilitaryTime: React.PropTypes.bool.isRequired,
+    postId: React.PropTypes.string
 };