fix: Use timeZone in translation function from useTranslations (#45)

amannn · Aug 2, 2021 · ebf75f2 · ebf75f2
1 parent 8042211
commit ebf75f2
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 11 deletions.
diff --git a/packages/example/public/favicon.ico b/packages/example/public/favicon.ico
diff --git a/packages/use-intl/src/convertFormatsToIntlMessageFormat.tsx b/packages/use-intl/src/convertFormatsToIntlMessageFormat.tsx
@@ -1,6 +1,27 @@
 import {Formats as IntlFormats} from 'intl-messageformat';
+import DateTimeFormatOptions from './DateTimeFormatOptions';
 import Formats from './Formats';
 
+function setTimeZoneInFormats(
+  formats: Record<string, DateTimeFormatOptions> | undefined,
+  timeZone: string
+) {
+  if (!formats) return formats;
+
+  // The only way to set a time zone with `intl-messageformat` is to merge it into the formats
+  // https://github.com/formatjs/formatjs/blob/8256c5271505cf2606e48e3c97ecdd16ede4f1b5/packages/intl/src/message.ts#L15
+  return Object.keys(formats).reduce(
+    (acc: Record<string, DateTimeFormatOptions>, key) => {
+      acc[key] = {
+        timeZone,
+        ...formats[key]
+      };
+      return acc;
+    },
+    {}
+  );
+}
+
 /**
  * `intl-messageformat` uses separate keys for `date` and `time`, but there's
  * only one native API: `Intl.DateTimeFormat`. Additionally you might want to
@@ -9,11 +30,16 @@ import Formats from './Formats';
  * to convert the format before `intl-messageformat` can be used.
  */
 export default function convertFormatsToIntlMessageFormat(
-  formats: Partial<Formats>
+  formats: Partial<Formats>,
+  timeZone?: string
 ): Partial<IntlFormats> {
+  const formatsWithTimeZone = timeZone
+    ? {...formats, dateTime: setTimeZoneInFormats(formats.dateTime, timeZone)}
+    : formats;
+
   return {
-    ...formats,
-    date: formats?.dateTime,
-    time: formats?.dateTime
+    ...formatsWithTimeZone,
+    date: formatsWithTimeZone?.dateTime,
+    time: formatsWithTimeZone?.dateTime
   };
 }
diff --git a/packages/use-intl/src/useTranslations.tsx b/packages/use-intl/src/useTranslations.tsx
@@ -91,7 +91,8 @@ export default function useTranslations(namespace?: string) {
     getMessageFallback,
     locale,
     messages: allMessages,
-    onError
+    onError,
+    timeZone
   } = useIntlContext();
 
   const cachedFormatsByLocaleRef = useRef<
@@ -177,7 +178,10 @@ export default function useTranslations(namespace?: string) {
           messageFormat = new IntlMessageFormat(
             message,
             locale,
-            convertFormatsToIntlMessageFormat({...globalFormats, ...formats})
+            convertFormatsToIntlMessageFormat(
+              {...globalFormats, ...formats},
+              timeZone
+            )
           );
         } catch (error) {
           return getFallbackFromError(
@@ -225,7 +229,8 @@ export default function useTranslations(namespace?: string) {
       locale,
       messagesOrError,
       namespace,
-      onError
+      onError,
+      timeZone
     ]
   );
 

diff --git a/packages/use-intl/test/useTranslations.test.tsx b/packages/use-intl/test/useTranslations.test.tsx
@@ -23,7 +23,12 @@ function renderMessage(
   }
 
   return render(
-    <IntlProvider locale="en" messages={{message}}>
+    <IntlProvider
+      formats={{dateTime: {time: {hour: 'numeric', minute: '2-digit'}}}}
+      locale="en"
+      messages={{message}}
+      timeZone="Europe/London"
+    >
       <Component />
     </IntlProvider>
   );
@@ -74,11 +79,11 @@ it('handles date formatting', () => {
   screen.getByText('Nov 19, 2020');
 });
 
-it('handles time formatting', () => {
-  renderMessage('{now, time, short}', {
+it('applies a time zone for provided formats', () => {
+  renderMessage('{now, time, time}', {
     now: parseISO('2020-11-19T15:38:43.700Z')
   });
-  screen.getByText('4:38 PM');
+  screen.getByText('3:38 PM');
 });
 
 it('handles pluralisation', () => {