Internationalize date formatting

Author: andrewn

client/i18n.js

@@ -2,6 +2,7 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
+import { enUS, es } from 'date-fns/locale';
 
 const fallbackLng = ['en-US'];
 const availableLanguages = ['en-US', 'es-419'];
@@ -14,6 +15,18 @@ export function languageKeyToLabel(lang) {
   return languageMap[lang];
 }
 
+export function languageKeyToDateLocale(lang) {
+  const languageMap = {
+    'en-US': enUS,
+    'es-419': es
+  };
+  return languageMap[lang];
+}
+
+export function currentDateLocale() {
+  return languageKeyToDateLocale(i18n.language);
+}
+
 const options = {
   loadPath: '/locales/{{lng}}/translations.json',
   requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })

client/utils/formatDate.js

@@ -5,6 +5,8 @@ import isValid from 'date-fns/isValid';
 import parseISO from 'date-fns/parseISO';
 import i18next from 'i18next';
 
+import { currentDateLocale } from '../i18n';
+
 function parse(maybeDate) {
   const date = maybeDate instanceof Date ? maybeDate : parseISO(maybeDate);
 
@@ -34,7 +36,8 @@ export default {
       }
 
       const timeAgo = formatDistanceToNow(parsed, {
-        includeSeconds: false
+        includeSeconds: false,
+        locale: currentDateLocale()
       });
       return i18next.t('formatDate.Ago', { timeAgo });
     }
@@ -46,7 +49,7 @@ export default {
     const formatType = showTime ? 'PPpp' : 'PP';
 
     if (parsed) {
-      return format(parsed, formatType);
+      return format(parsed, formatType, { locale: currentDateLocale() });
     }
 
     return '';