Fix 3279: Relative timestamp showing date before yesterday should not error out (#3282)

* Fix relative timestamp on date before yesterday

* Add test

* Update entry

Author: compulim

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixes
 
 -  Fixes [#3265](https://github.com/microsoft/BotFramework-WebChat/issues/3265). Fix styling specificity regression on microphone button, by [@corinagum](https://github.com/corinagum) in PR [#3276](https://github.com/microsoft/BotFramework-WebChat/pull/3276)
+-  Fixes [#3279](https://github.com/microsoft/BotFramework-WebChat/issues/3279). Fix relative timestamp errored out when showing a time before yesterday, by [@compulim](https://github.com/compulim) in PR [#3282](https://github.com/microsoft/BotFramework-WebChat/pull/3282)
 
 ### Samples
 
@@ -109,7 +110,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  After stripping Markdown syntax for accessibility labels, cache the result to improve rendering performance.
    -  Skip stripping Markdown for non-Markdown text content.
 -  Fixes [#3155](https://github.com/microsoft/BotFramework-WebChat/issues/3155). Patch incoming activities with null fields, by [@compulim](https://github.com/compulim) in PR [#3154](https://github.com/microsoft/BotFramework-WebChat/pull/3154)
--  Fixes [#2669](https://github.com/microsoft/BotFramework-WebChat/issues/2669) and [[#3136](https://github.com/microsoft/BotFramework-WebChat/issues/3136). The "New messages" button will be accessible through <kbd>TAB</kbd> key, inbetween the last read and first unread activity, by [@compulim](https://github.com/compulim) in PR [#3150](https://github.com/microsoft/BotFramework-WebChat/issues/3150).
+-  Fixes [#2669](https://github.com/microsoft/BotFramework-WebChat/issues/2669) and [#3136](https://github.com/microsoft/BotFramework-WebChat/issues/3136). The "New messages" button will be accessible through <kbd>TAB</kbd> key, inbetween the last read and first unread activity, by [@compulim](https://github.com/compulim) in PR [#3150](https://github.com/microsoft/BotFramework-WebChat/issues/3150).
    -  After the "New message" button is clicked, focus will be moved to the first interactive UI of unread activity or the send box.
 -  Fixes [#3135](https://github.com/microsoft/BotFramework-WebChat/issues/3135). If the current widget is disabled, it will keep focus until the next <kbd>TAB</kbd> key is pressed, by [@compulim](https://github.com/compulim) in PR [#3150](https://github.com/microsoft/BotFramework-WebChat/pull/3150)
 
@@ -186,11 +187,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Fixed
 
--  Fixes [#3075](https://github.com/microsoft/BotFramework-WebChat/issues/3075). Fix usability issues around accessibility, by [@compulim](https://github.com/compulim) in PR [#3076](https://github.com/microsoft/BotFramework-WebChat/issue/3076)
+-  Fixes [#3075](https://github.com/microsoft/BotFramework-WebChat/issues/3075). Fix usability issues around accessibility, by [@compulim](https://github.com/compulim) in PR [#3076](https://github.com/microsoft/BotFramework-WebChat/pull/3076)
    -  Fix timestamp should not be narrated more than once.
    -  Associate the activity text with its attachments, by adding a `role="region"` to the activity DOM element.
--  Fixes [#3074](https://github.com/microsoft/BotFramework-WebChat/issues/3074). Keep `props.locale` when sending to the bot, by [@compulim](https://github.com/compulim) in PR [#3095](https://github.com/microsoft/BotFramework-WebChat/issue/3095)
--  Fixes [#3096](https://github.com/microsoft/BotFramework-WebChat/issues/3096). Use `<ScreenReaderText>` instead of `aria-label` for message bubbles, by [@compulim](https://github.com/compulim) in PR [#3097](https://github.com/microsoft/BotFramework-WebChat/issue/3097)
+-  Fixes [#3074](https://github.com/microsoft/BotFramework-WebChat/issues/3074). Keep `props.locale` when sending to the bot, by [@compulim](https://github.com/compulim) in PR [#3095](https://github.com/microsoft/BotFramework-WebChat/pull/3095)
+-  Fixes [#3096](https://github.com/microsoft/BotFramework-WebChat/issues/3096). Use `<ScreenReaderText>` instead of `aria-label` for message bubbles, by [@compulim](https://github.com/compulim) in PR [#3097](https://github.com/microsoft/BotFramework-WebChat/pull/3097)
 
 ## [4.8.0] - 2020-03-05
 

__tests__/html/timestamp.beforeYesterday.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const { conditions, createStore, expect, host, pageObjects, timeouts, token, updateIn } = window.WebChatTest;
+
+      function mapObservable(observable, { next }) {
+        return new Observable(observer => {
+          const subscription = observable.subscribe({
+            complete: observer.complete.bind(observer),
+            error: observer.error.bind(observable),
+            next: value => observer.next(next(value))
+          });
+
+          return subscription.unsubscribe.bind(subscription);
+        });
+      }
+
+      (async function() {
+        function createDirectLineForTest(options) {
+          const workingDirectLine = window.WebChat.createDirectLine(options);
+
+          return {
+            ...workingDirectLine,
+            activity$: mapObservable(workingDirectLine.activity$, {
+              next: value => ({
+                ...value,
+
+                // Substract 3 days from the timestamp
+                timestamp: new Date(new Date(value.timestamp).getTime() - 86400000 * 3).toISOString()
+              })
+            }),
+            postActivity: workingDirectLine.postActivity.bind(workingDirectLine)
+          };
+        }
+
+        window.WebChat.renderWebChat(
+          {
+            directLine: createDirectLineForTest({ token: await token.fetchDirectLineToken() }),
+            store: createStore(),
+            styleOptions: {
+              sendTimeout: 5000
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.sendMessageViaSendBox('echo Hello, World!', { waitForSend: false });
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>

__tests__/html/timestamp.beforeYesterday.js

@@ -0,0 +1,7 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('timestamp', () => {
+  test('showing date before yesterday', () => runHTMLTest('timestamp.beforeYesterday.html'));
+});

packages/component/src/hooks/useLocalizeDate.js

@@ -2,7 +2,17 @@ import useLanguage from './useLanguage';
 
 import getLocaleString from '../Localization/getLocaleString';
 
+let deprecationNotesShown;
+
 export default function useLocalizeDate(date) {
+  if (!deprecationNotesShown) {
+    console.warn(
+      'botframework-webchat: useLocalizeDate() is deprecated. Please use the useDateFormatter() hooks instead. This function will be removed on or after 2022-02-12.'
+    );
+
+    deprecationNotesShown = true;
+  }
+
   const [language] = useLanguage();
 
   return getLocaleString(date, language);

packages/component/src/hooks/useRelativeTimeFormatter.js

@@ -2,11 +2,12 @@
 
 import { useMemo } from 'react';
 
-import getLocaleString from '../Localization/getLocaleString';
+import useDateFormatter from './useDateFormatter';
 import useLocalizedGlobalize from './internal/useLocalizedGlobalize';
 import useLocalizer from './useLocalizer';
 
 export default function useRelativeTimeFormatter() {
+  const formatDate = useDateFormatter();
   const localize = useLocalizer();
   const [globalize] = useLocalizedGlobalize();
 
@@ -42,7 +43,7 @@ export default function useRelativeTimeFormatter() {
         return localize('ACTIVITY_STATUS_TIMESTAMP_YESTERDAY');
       }
 
-      return getLocaleString(date, 'en-US');
+      return formatDate(date);
     };
   }, [localize, globalize]);
 }