From 423ae63d60e87244ca13a5cbfd77bf29d40c70e1 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 13 Dec 2018 15:34:05 -0300
Subject: [PATCH] Update date separators when timezone changes (#2443)

* Update date separators when timezone changes

* Fix typo
---
 .../__snapshots__/date_header.test.js.snap    | 60 +++++++++++++++++++
 .../post_list/date_header/date_header.js      | 20 +++++--
 .../post_list/date_header/date_header.test.js | 16 +++++
 app/components/post_list/date_header/index.js | 13 ++++
 4 files changed, 103 insertions(+), 6 deletions(-)

diff --git a/app/components/post_list/date_header/__snapshots__/date_header.test.js.snap b/app/components/post_list/date_header/__snapshots__/date_header.test.js.snap
index 78bd0f2f1..2fe542634 100644
--- a/app/components/post_list/date_header/__snapshots__/date_header.test.js.snap
+++ b/app/components/post_list/date_header/__snapshots__/date_header.test.js.snap
@@ -1,5 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DateHeader component should match snapshot when timezone is set 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "height": 28,
+        "marginTop": 8,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#3d3c40",
+        "flex": 1,
+        "height": 1,
+        "opacity": 0.2,
+      }
+    }
+  />
+  <View
+    style={
+      Object {
+        "marginHorizontal": 15,
+      }
+    }
+  >
+    <InjectIntl(FormattedDate)
+      day="2-digit"
+      month="short"
+      style={
+        Object {
+          "color": "#3d3c40",
+          "fontSize": 14,
+          "fontWeight": "600",
+        }
+      }
+      timeZone="America/New_York"
+      value={1970-01-18T17:19:12.392Z}
+      weekday="short"
+      year="numeric"
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#3d3c40",
+        "flex": 1,
+        "height": 1,
+        "opacity": 0.2,
+      }
+    }
+  />
+</View>
+`;
+
 exports[`DateHeader component should match snapshot with suffix 1`] = `
 <View
   style={
diff --git a/app/components/post_list/date_header/date_header.js b/app/components/post_list/date_header/date_header.js
index 86395f242..65195988b 100644
--- a/app/components/post_list/date_header/date_header.js
+++ b/app/components/post_list/date_header/date_header.js
@@ -17,11 +17,12 @@ export default class DateHeader extends PureComponent {
     static propTypes = {
         dateLineString: PropTypes.string.isRequired,
         theme: PropTypes.object.isRequired,
+        timeZone: PropTypes.string,
         style: ViewPropTypes.style,
     };
 
     render() {
-        const {theme, dateLineString} = this.props;
+        const {theme, timeZone, dateLineString} = this.props;
         const style = getStyleSheet(theme);
         const indexSuffix = dateLineString.indexOf(DATE_LINE_SUFFIX);
 
@@ -31,6 +32,17 @@ export default class DateHeader extends PureComponent {
         } else {
             date = new Date(parseInt(dateLineString.substring(DATE_LINE.length), 10));
         }
+        const dateFormatProps = {
+            weekday: 'short',
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+            value: date,
+        };
+
+        if (timeZone) {
+            dateFormatProps.timeZone = timeZone;
+        }
 
         return (
             <View style={[style.container, this.props.style]}>
@@ -38,11 +50,7 @@ export default class DateHeader extends PureComponent {
                 <View style={style.dateContainer}>
                     <FormattedDate
                         style={style.date}
-                        value={date}
-                        weekday='short'
-                        day='2-digit'
-                        month='short'
-                        year='numeric'
+                        {...dateFormatProps}
                     />
                 </View>
                 <View style={style.line}/>
diff --git a/app/components/post_list/date_header/date_header.test.js b/app/components/post_list/date_header/date_header.test.js
index f3b79ba4e..e60e81e55 100644
--- a/app/components/post_list/date_header/date_header.test.js
+++ b/app/components/post_list/date_header/date_header.test.js
@@ -13,6 +13,7 @@ import DateHeader from './date_header.js';
 describe('DateHeader', () => {
     const baseProps = {
         theme: Preferences.THEMES.default,
+        timeZone: null,
     };
 
     describe('component should match snapshot', () => {
@@ -43,5 +44,20 @@ describe('DateHeader', () => {
 
             expect(wrapper.getElement()).toMatchSnapshot();
         });
+
+        it('when timezone is set', () => {
+            const props = {
+                ...baseProps,
+                dateLineString: 'date-1531152392-index-2',
+                timeZone: 'America/New_York',
+                index: 2,
+            };
+            const wrapper = shallow(
+                <DateHeader {...props}/>,
+                {context: {intl: {formatMessage: jest.fn()}}},
+            );
+
+            expect(wrapper.getElement()).toMatchSnapshot();
+        });
     });
 });
diff --git a/app/components/post_list/date_header/index.js b/app/components/post_list/date_header/index.js
index 84426808c..350b28044 100644
--- a/app/components/post_list/date_header/index.js
+++ b/app/components/post_list/date_header/index.js
@@ -3,13 +3,26 @@
 
 import {connect} from 'react-redux';
 
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
+import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils';
+
+import {isTimezoneEnabled} from 'app/utils/timezone';
 
 import DateHeader from './date_header';
 
 function mapStateToProps(state) {
+    const enableTimezone = isTimezoneEnabled(state);
+    const currentUser = getCurrentUser(state);
+    let timeZone = null;
+
+    if (enableTimezone) {
+        timeZone = getUserCurrentTimezone(currentUser.timezone);
+    }
+
     return {
         theme: getTheme(state),
+        timeZone,
     };
 }