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

@@ -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
 };

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
 };

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
 };

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
 };

webapp/components/post_view/components/post_time.jsx

@@ -1,42 +1,52 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import Constants from 'utils/constants.jsx';
-import * as Utils from 'utils/utils.jsx';
-
 import React from 'react';
+
+import Constants from 'utils/constants.jsx';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
-export default class TimeSince extends React.Component {
+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'>
-                {Utils.displayTimeFormatted(this.props.eventTime)}
+                <FormattedTime
+                    value={this.props.eventTime}
+                    hour='2-digit'
+                    minute='2-digit'
+                    hour12={!this.props.useMilitaryTime}
+                />
             </time>
         );
     }
 }
 
-TimeSince.defaultProps = {
+PostTime.defaultProps = {
     eventTime: 0,
     sameUser: false
 };
 
-TimeSince.propTypes = {
+PostTime.propTypes = {
     eventTime: React.PropTypes.number.isRequired,
     sameUser: React.PropTypes.bool,
-    compactDisplay: React.PropTypes.bool
+    compactDisplay: React.PropTypes.bool,
+    useMilitaryTime: React.PropTypes.bool.isRequired
 };

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}
                 />
             );

webapp/components/rhs_comment.jsx

@@ -38,6 +38,11 @@ export default class RhsComment extends React.Component {
         if (nextProps.compactDisplay !== this.props.compactDisplay) {
             return true;
         }
+
+        if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) {
+            return true;
+        }
+
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
         }
@@ -231,7 +236,7 @@ export default class RhsComment extends React.Component {
                                         day='numeric'
                                         month='long'
                                         year='numeric'
-                                        hour12={!Utils.isMilitaryTime()}
+                                        hour12={!this.props.useMilitaryTime}
                                         hour='2-digit'
                                         minute='2-digit'
                                     />
@@ -259,5 +264,6 @@ RhsComment.propTypes = {
     post: React.PropTypes.object,
     user: React.PropTypes.object.isRequired,
     currentUser: React.PropTypes.object.isRequired,
-    compactDisplay: React.PropTypes.bool
+    compactDisplay: React.PropTypes.bool,
+    useMilitaryTime: React.PropTypes.bool.isRequired
 };

webapp/components/rhs_root_post.jsx

@@ -35,6 +35,11 @@ export default class RhsRootPost extends React.Component {
         if (nextProps.compactDisplay !== this.props.compactDisplay) {
             return true;
         }
+
+        if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) {
+            return true;
+        }
+
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
         }
@@ -255,7 +260,7 @@ export default class RhsRootPost extends React.Component {
                                         day='numeric'
                                         month='long'
                                         year='numeric'
-                                        hour12={!Utils.isMilitaryTime()}
+                                        hour12={!this.props.useMilitaryTime}
                                         hour='2-digit'
                                         minute='2-digit'
                                     />
@@ -289,5 +294,6 @@ RhsRootPost.propTypes = {
     user: React.PropTypes.object.isRequired,
     currentUser: React.PropTypes.object.isRequired,
     commentCount: React.PropTypes.number,
-    compactDisplay: React.PropTypes.bool
+    compactDisplay: React.PropTypes.bool,
+    useMilitaryTime: React.PropTypes.bool.isRequired
 };

webapp/components/rhs_thread.jsx

@@ -112,6 +112,10 @@ export default class RhsThread extends React.Component {
             return true;
         }
 
+        if (nextProps.useMilitaryTime !== this.props.useMilitaryTime) {
+            return true;
+        }
+
         if (!Utils.areObjectsEqual(nextState.profiles, this.state.profiles)) {
             return true;
         }
@@ -243,6 +247,7 @@ export default class RhsThread extends React.Component {
                                 user={profile}
                                 currentUser={this.props.currentUser}
                                 compactDisplay={this.state.compactDisplay}
+                                useMilitaryTime={this.props.useMilitaryTime}
                             />
                             <div className='post-right-comments-container'>
                                 {postsArray.map((comPost) => {
@@ -260,6 +265,7 @@ export default class RhsThread extends React.Component {
                                             user={p}
                                             currentUser={this.props.currentUser}
                                             compactDisplay={this.state.compactDisplay}
+                                            useMilitaryTime={this.props.useMilitaryTime}
                                         />
                                     );
                                 })}
@@ -286,5 +292,6 @@ RhsThread.defaultProps = {
 RhsThread.propTypes = {
     fromSearch: React.PropTypes.string,
     isMentionSearch: React.PropTypes.bool,
-    currentUser: React.PropTypes.object.isRequired
+    currentUser: React.PropTypes.object.isRequired,
+    useMilitaryTime: React.PropTypes.bool.isRequired
 };

webapp/components/search_results.jsx

@@ -170,6 +170,7 @@ export default class SearchResults extends React.Component {
                         user={profile}
                         term={searchTerm}
                         isMentionSearch={this.props.isMentionSearch}
+                        useMilitaryTime={this.props.useMilitaryTime}
                     />
                 );
             }, this);
@@ -193,5 +194,6 @@ export default class SearchResults extends React.Component {
 }
 
 SearchResults.propTypes = {
-    isMentionSearch: React.PropTypes.bool
+    isMentionSearch: React.PropTypes.bool,
+    useMilitaryTime: React.PropTypes.bool.isRequired
 };

webapp/components/search_results_item.jsx

@@ -113,7 +113,7 @@ export default class SearchResultsItem extends React.Component {
                                     <time className='search-item-time'>
                                         <FormattedDate
                                             value={post.create_at}
-                                            hour12={!Utils.isMilitaryTime()}
+                                            hour12={!this.props.useMilitaryTime}
                                             hour='2-digit'
                                             minute='2-digit'
                                         />
@@ -186,5 +186,6 @@ SearchResultsItem.propTypes = {
     user: React.PropTypes.object,
     channel: React.PropTypes.object,
     isMentionSearch: React.PropTypes.bool,
-    term: React.PropTypes.string
+    term: React.PropTypes.string,
+    useMilitaryTime: React.PropTypes.bool.isRequired
 };

webapp/components/sidebar_right.jsx

@@ -8,6 +8,8 @@ import RhsThread from './rhs_thread.jsx';
 import SearchStore from 'stores/search_store.jsx';
 import PostStore from 'stores/post_store.jsx';
 import UserStore from 'stores/user_store.jsx';
+import PreferenceStore from 'stores/preference_store.jsx';
+import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
@@ -18,6 +20,7 @@ export default class SidebarRight extends React.Component {
 
         this.plScrolledToBottom = true;
 
+        this.onPreferenceChange = this.onPreferenceChange.bind(this);
         this.onSelectedChange = this.onSelectedChange.bind(this);
         this.onSearchChange = this.onSearchChange.bind(this);
         this.onUserChange = this.onUserChange.bind(this);
@@ -30,25 +33,32 @@ export default class SidebarRight extends React.Component {
             isMentionSearch: SearchStore.getIsMentionSearch(),
             postRightVisible: !!PostStore.getSelectedPost(),
             fromSearch: false,
-            currentUser: UserStore.getCurrentUser()
+            currentUser: UserStore.getCurrentUser(),
+            useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Constants.Preferences.USE_MILITARY_TIME, false)
         };
     }
+
     componentDidMount() {
         SearchStore.addSearchChangeListener(this.onSearchChange);
         PostStore.addSelectedPostChangeListener(this.onSelectedChange);
         SearchStore.addShowSearchListener(this.onShowSearch);
         UserStore.addChangeListener(this.onUserChange);
+        PreferenceStore.addChangeListener(this.onPreferenceChange);
         this.doStrangeThings();
     }
+
     componentWillUnmount() {
         SearchStore.removeSearchChangeListener(this.onSearchChange);
         PostStore.removeSelectedPostChangeListener(this.onSelectedChange);
         SearchStore.removeShowSearchListener(this.onShowSearch);
         UserStore.removeChangeListener(this.onUserChange);
+        PreferenceStore.removeChangeListener(this.onPreferenceChange);
     }
+
     shouldComponentUpdate(nextProps, nextState) {
         return !Utils.areObjectsEqual(nextState, this.state);
     }
+
     componentWillUpdate(nextProps, nextState) {
         const isOpen = this.state.searchVisible || this.state.postRightVisible;
         const willOpen = nextState.searchVisible || nextState.postRightVisible;
@@ -57,6 +67,7 @@ export default class SidebarRight extends React.Component {
             PostStore.jumpPostsViewSidebarOpen();
         }
     }
+
     doStrangeThings() {
         // We should have a better way to do this stuff
         // Hence the function name.
@@ -81,26 +92,37 @@ export default class SidebarRight extends React.Component {
             }, 500);*/
         return null;
     }
+
     componentDidUpdate() {
         this.doStrangeThings();
     }
+
+    onPreferenceChange() {
+        this.setState({
+            useMilitaryTime: PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Constants.Preferences.USE_MILITARY_TIME, false)
+        });
+    }
+
     onSelectedChange(fromSearch) {
         this.setState({
             postRightVisible: !!PostStore.getSelectedPost(),
             fromSearch
         });
     }
+
     onSearchChange() {
         this.setState({
             searchVisible: SearchStore.getSearchResults() !== null,
             isMentionSearch: SearchStore.getIsMentionSearch()
         });
     }
+
     onUserChange() {
         this.setState({
             currentUser: UserStore.getCurrentUser()
         });
     }
+
     onShowSearch() {
         if (!this.state.searchVisible) {
             this.setState({
@@ -108,17 +130,24 @@ export default class SidebarRight extends React.Component {
             });
         }
     }
+
     render() {
         let content = null;
 
         if (this.state.searchVisible) {
-            content = <SearchResults isMentionSearch={this.state.isMentionSearch}/>;
+            content = (
+                <SearchResults
+                    isMentionSearch={this.state.isMentionSearch}
+                    useMilitaryTime={this.state.useMilitaryTime}
+                />
+            );
         } else if (this.state.postRightVisible) {
             content = (
                 <RhsThread
                     fromSearch={this.state.fromSearch}
                     isMentionSearch={this.state.isMentionSearch}
                     currentUser={this.state.currentUser}
+                    useMilitaryTime={this.state.useMilitaryTime}
                 />
             );
         }

webapp/components/user_settings/user_settings_security.jsx

@@ -8,6 +8,7 @@ import AccessHistoryModal from '../access_history_modal.jsx';
 import ActivityLogModal from '../activity_log_modal.jsx';
 import ToggleModalButton from '../toggle_modal_button.jsx';
 
+import PreferenceStore from 'stores/preference_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
 import Client from 'utils/web_client.jsx';
@@ -471,7 +472,7 @@ class SecurityTab extends React.Component {
 
         if (this.props.user.auth_service === '') {
             const d = new Date(this.props.user.last_password_update);
-            const hours12 = !Utils.isMilitaryTime();
+            const hours12 = !PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, Constants.Preferences.USE_MILITARY_TIME, false);
 
             describe = (
                 <FormattedMessage

webapp/utils/constants.jsx

@@ -551,7 +551,8 @@ export default {
         MESSAGE_DISPLAY_COMPACT: 'compact',
         MESSAGE_DISPLAY_DEFAULT: 'clean',
         COLLAPSE_DISPLAY: 'collapse_previews',
-        COLLAPSE_DISPLAY_DEFAULT: 'false'
+        COLLAPSE_DISPLAY_DEFAULT: 'false',
+        USE_MILITARY_TIME: 'use_military_time'
     },
     TutorialSteps: {
         INTRO_SCREENS: 0,

webapp/utils/utils.jsx

@@ -13,9 +13,7 @@ var ActionTypes = Constants.ActionTypes;
 import * as AsyncClient from './async_client.jsx';
 import Client from './web_client.jsx';
 
-import React from 'react';
 import {browserHistory} from 'react-router';
-import {FormattedTime} from 'react-intl';
 
 import icon50 from 'images/icon50x50.png';
 import bing from 'images/bing.mp3';
@@ -225,56 +223,6 @@ export function displayTime(ticks, utc) {
     return hours + ':' + minutes + ampm + timezone;
 }
 
-export function displayTimeFormatted(ticks) {
-    const useMilitaryTime = PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time');
-
-    return (
-        <FormattedTime
-            value={ticks}
-            hour='2-digit'
-            minute='2-digit'
-            hour12={!useMilitaryTime}
-        />
-    );
-}
-
-export function isMilitaryTime() {
-    return PreferenceStore.getBool(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time');
-}
-
-export function displayDateTime(ticks) {
-    var seconds = Math.floor((Date.now() - ticks) / 1000);
-
-    var interval = Math.floor(seconds / 3600);
-
-    if (interval > 24) {
-        return this.displayTime(ticks);
-    }
-
-    if (interval > 1) {
-        return interval + ' hours ago';
-    }
-
-    if (interval === 1) {
-        return interval + ' hour ago';
-    }
-
-    interval = Math.floor(seconds / 60);
-    if (interval >= 2) {
-        return interval + ' minutes ago';
-    }
-
-    if (interval >= 1) {
-        return '1 minute ago';
-    }
-
-    return 'just now';
-}
-
-export function displayCommentDateTime(ticks) {
-    return displayDate(ticks) + ' ' + displayTime(ticks);
-}
-
 // returns Unix timestamp in milliseconds
 export function getTimestamp() {
     return Date.now();