From 6fc856926634be8eeb1e27b246b133158fa1c47b Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Sat, 14 Sep 2019 06:02:51 -0400 Subject: [PATCH] MM-18466 Change recent date separators to yesterday/today (#3245) * MM-18466 Change recent date separators to yesterday/today * Add i18n strings --- .../__snapshots__/date_header.test.js.snap | 9 +- .../post_list/date_header/date_header.js | 4 +- app/components/recent_date.js | 68 ++++++++++ app/components/recent_date.test.js | 123 ++++++++++++++++++ assets/base/i18n/en.json | 2 + 5 files changed, 198 insertions(+), 8 deletions(-) create mode 100644 app/components/recent_date.js create mode 100644 app/components/recent_date.test.js 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 8cfd45d08..abea260df 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 @@ -31,8 +31,7 @@ exports[`DateHeader component should match snapshot when timezone is set 1`] = ` } } > - - - - + ); + } else if (isYesterday(date)) { + return ( + + ); + } + + return ( + + ); + } +} + +export function isSameDay(a, b) { + return a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear(); +} + +export function isToday(date) { + const now = new Date(); + + return isSameDay(date, now); +} + +export function isYesterday(date) { + const yesterday = new Date(); + yesterday.setDate(yesterday.getDate() - 1); + + return isSameDay(date, yesterday); +} diff --git a/app/components/recent_date.test.js b/app/components/recent_date.test.js new file mode 100644 index 000000000..8f92bcd1c --- /dev/null +++ b/app/components/recent_date.test.js @@ -0,0 +1,123 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; + +import FormattedDate from 'app/components/formatted_date'; +import FormattedText from 'app/components/formatted_text'; + +import {shallowWithIntl} from 'test/intl-test-helper.js'; + +import RecentDate, { + isToday, + isYesterday, +} from './recent_date'; + +describe('RecentDate', () => { + test('should render "Today" today', () => { + const today = new Date(); + + const props = { + value: today, + }; + + const wrapper = shallowWithIntl(); + + expect(wrapper.find(FormattedText).exists()).toBe(true); + expect(wrapper.find(FormattedText).prop('id')).toBe('date_separator.today'); + }); + + test('should render "Yesterday" yesterday', () => { + const yesterday = new Date(); + yesterday.setDate(yesterday.getDate() - 1); + + const props = { + value: yesterday, + }; + + const wrapper = shallowWithIntl(); + + expect(wrapper.find(FormattedText).exists()).toBe(true); + expect(wrapper.find(FormattedText).prop('id')).toBe('date_separator.yesterday'); + }); + + test('should render date two days ago', () => { + const twoDaysAgo = new Date(); + twoDaysAgo.setDate(twoDaysAgo.getDate() - 2); + + const props = { + value: twoDaysAgo, + }; + + const wrapper = shallowWithIntl(); + + expect(wrapper.find(FormattedDate).exists()).toBe(true); + }); +}); + +describe('isToday and isYesterday', () => { + test('tomorrow at 12am', () => { + const date = new Date(); + date.setDate(date.getDate() + 1); + date.setHours(0); + date.setMinutes(0); + + expect(isToday(date)).toBe(false); + expect(isYesterday(date)).toBe(false); + }); + + test('now', () => { + const date = new Date(); + + expect(isToday(date)).toBe(true); + expect(isYesterday(date)).toBe(false); + }); + + test('today at 12am', () => { + const date = new Date(); + date.setHours(0); + date.setMinutes(0); + + expect(isToday(date)).toBe(true); + expect(isYesterday(date)).toBe(false); + }); + + test('today at 11:59pm', () => { + const date = new Date(); + date.setHours(23); + date.setMinutes(59); + + expect(isToday(date)).toBe(true); + expect(isYesterday(date)).toBe(false); + }); + + test('yesterday at 11:59pm', () => { + const date = new Date(); + date.setDate(date.getDate() - 1); + date.setHours(23); + date.setMinutes(59); + + expect(isToday(date)).toBe(false); + expect(isYesterday(date)).toBe(true); + }); + + test('yesterday at 12am', () => { + const date = new Date(); + date.setDate(date.getDate() - 1); + date.setHours(0); + date.setMinutes(0); + + expect(isToday(date)).toBe(false); + expect(isYesterday(date)).toBe(true); + }); + + test('two days ago at 11:59pm', () => { + const date = new Date(); + date.setDate(date.getDate() - 2); + date.setHours(23); + date.setMinutes(59); + + expect(isToday(date)).toBe(false); + expect(isYesterday(date)).toBe(false); + }); +}); diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index 7ed809399..e5bc7d6ee 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -74,6 +74,8 @@ "create_comment.addComment": "Add a comment...", "create_post.deactivated": "You are viewing an archived channel with a deactivated user.", "create_post.write": "Write to {channelDisplayName}", + "date_separator.today": "Today", + "date_separator.yesterday": "Yesterday", "edit_post.editPost": "Edit the post...", "edit_post.save": "Save", "file_attachment.download": "Download",