From ba77aefe02159325752cfa79210f5e4b5fcef77e Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Wed, 15 Jun 2016 08:13:17 -0400
Subject: PLT-3202 Re-render timestamps when display settings switch between
 12h and 24h (#3337)

* Made post timestamp switch from 12h to 24h without refreshing

* Made RHS post timestamps switch from 12h to 24h without refreshing
---
 webapp/components/post_view/components/post.jsx    |  8 +++-
 .../post_view/components/post_header.jsx           |  4 +-
 .../components/post_view/components/post_info.jsx  |  8 ++--
 .../components/post_view/components/post_list.jsx  |  2 +
 .../components/post_view/components/post_time.jsx  | 52 ++++++++++++++++++++++
 .../components/post_view/post_view_controller.jsx  | 12 ++++-
 6 files changed, 79 insertions(+), 7 deletions(-)
 create mode 100644 webapp/components/post_view/components/post_time.jsx

(limited to 'webapp/components/post_view')

diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx
index d30216180..c445ad9f3 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -76,6 +76,10 @@ export default class Post extends React.Component {
             return true;
         }
 
+        if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) {
+            return true;
+        }
+
         if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
             return true;
         }
@@ -187,6 +191,7 @@ export default class Post extends React.Component {
                                 currentUser={this.props.currentUser}
                                 compactDisplay={this.props.compactDisplay}
                                 displayNameType={this.props.displayNameType}
+                                useMilitaryTime={this.props.useMilitaryTime}
                             />
                             <PostBody
                                 post={post}
@@ -219,5 +224,6 @@ Post.propTypes = {
     center: React.PropTypes.bool,
     compactDisplay: React.PropTypes.bool,
     previewCollapsed: React.PropTypes.string,
-    commentCount: React.PropTypes.number
+    commentCount: React.PropTypes.number,
+    useMilitaryTime: React.PropTypes.bool.isRequired
 };
diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx
index cc6bab852..3c94f0bcb 100644
--- a/webapp/components/post_view/components/post_header.jsx
+++ b/webapp/components/post_view/components/post_header.jsx
@@ -69,6 +69,7 @@ export default class PostHeader extends React.Component {
                         sameUser={this.props.sameUser}
                         currentUser={this.props.currentUser}
                         compactDisplay={this.props.compactDisplay}
+                        useMilitaryTime={this.props.useMilitaryTime}
                     />
                 </li>
             </ul>
@@ -91,5 +92,6 @@ PostHeader.propTypes = {
     handleCommentClick: React.PropTypes.func.isRequired,
     sameUser: React.PropTypes.bool.isRequired,
     compactDisplay: React.PropTypes.bool,
-    displayNameType: React.PropTypes.string
+    displayNameType: React.PropTypes.string,
+    useMilitaryTime: React.PropTypes.bool.isRequired
 };
diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index cc8c0a842..2a5ea6395 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -3,7 +3,7 @@
 
 import $ from 'jquery';
 import * as Utils from 'utils/utils.jsx';
-import TimeSince from 'components/time_since.jsx';
+import PostTime from './post_time.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -217,10 +217,11 @@ export default class PostInfo extends React.Component {
         return (
             <ul className='post__header--info'>
                 <li className='col'>
-                    <TimeSince
+                    <PostTime
                         eventTime={post.create_at}
                         sameUser={this.props.sameUser}
                         compactDisplay={this.props.compactDisplay}
+                        useMilitaryTime={this.props.useMilitaryTime}
                     />
                 </li>
                 <li className='col col__reply'>
@@ -253,5 +254,6 @@ PostInfo.propTypes = {
     handleCommentClick: React.PropTypes.func.isRequired,
     sameUser: React.PropTypes.bool.isRequired,
     currentUser: React.PropTypes.object.isRequired,
-    compactDisplay: React.PropTypes.bool
+    compactDisplay: React.PropTypes.bool,
+    useMilitaryTime: React.PropTypes.bool.isRequired
 };
diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx
index c23f785d9..288a2d5e0 100644
--- a/webapp/components/post_view/components/post_list.jsx
+++ b/webapp/components/post_view/components/post_list.jsx
@@ -264,6 +264,7 @@ export default class PostList extends React.Component {
                     commentCount={commentCount}
                     compactDisplay={this.props.compactDisplay}
                     previewCollapsed={this.props.previewsCollapsed}
+                    useMilitaryTime={this.props.useMilitaryTime}
                 />
             );
 
@@ -525,5 +526,6 @@ PostList.propTypes = {
     displayPostsInCenter: React.PropTypes.bool,
     compactDisplay: React.PropTypes.bool,
     previewsCollapsed: React.PropTypes.string,
+    useMilitaryTime: React.PropTypes.bool.isRequired,
     isFocusPost: React.PropTypes.bool
 };
diff --git a/webapp/components/post_view/components/post_time.jsx b/webapp/components/post_view/components/post_time.jsx
new file mode 100644
index 000000000..369a429a9
--- /dev/null
+++ b/webapp/components/post_view/components/post_time.jsx
@@ -0,0 +1,52 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import Constants from 'utils/constants.jsx';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+import {FormattedTime} from 'react-intl';
+
+export default class PostTime extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+    }
+
+    componentDidMount() {
+        this.intervalId = setInterval(() => {
+            this.forceUpdate();
+        }, Constants.TIME_SINCE_UPDATE_INTERVAL);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.intervalId);
+    }
+
+    render() {
+        return (
+            <time className='post__time'>
+                <FormattedTime
+                    value={this.props.eventTime}
+                    hour='2-digit'
+                    minute='2-digit'
+                    hour12={!this.props.useMilitaryTime}
+                />
+            </time>
+        );
+    }
+}
+
+PostTime.defaultProps = {
+    eventTime: 0,
+    sameUser: false
+};
+
+PostTime.propTypes = {
+    eventTime: React.PropTypes.number.isRequired,
+    sameUser: React.PropTypes.bool,
+    compactDisplay: React.PropTypes.bool,
+    useMilitaryTime: React.PropTypes.bool.isRequired
+};
diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx
index e5a14af36..6d724f659 100644
--- a/webapp/components/post_view/post_view_controller.jsx
+++ b/webapp/components/post_view/post_view_controller.jsx
@@ -52,7 +52,8 @@ export default class PostViewController extends React.Component {
             displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
             displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
             compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
-            previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false')
+            previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false'),
+            useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false)
         };
     }
 
@@ -80,7 +81,8 @@ export default class PostViewController extends React.Component {
             displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
             displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
             compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
-            previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false') + previewSuffix
+            previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false') + previewSuffix,
+            useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false)
         });
     }
 
@@ -142,6 +144,7 @@ export default class PostViewController extends React.Component {
                 displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
                 compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
                 previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false'),
+                useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false),
                 scrollType: ScrollTypes.NEW_MESSAGE
             });
         }
@@ -197,6 +200,10 @@ export default class PostViewController extends React.Component {
             return true;
         }
 
+        if (nextState.useMilitaryTime !== this.state.useMilitaryTime) {
+            return true;
+        }
+
         if (nextState.lastViewed !== this.state.lastViewed) {
             return true;
         }
@@ -256,6 +263,7 @@ export default class PostViewController extends React.Component {
                     displayPostsInCenter={this.state.displayPostsInCenter}
                     compactDisplay={this.state.compactDisplay}
                     previewsCollapsed={this.state.previewsCollapsed}
+                    useMilitaryTime={this.state.useMilitaryTime}
                     lastViewed={this.state.lastViewed}
                 />
             );
-- 
cgit v1.2.3-1-g7c22