BIG-71: localize moment date formats.

client/src/components/AppIntlLoader.js

@@ -5,7 +5,9 @@ import intl from 'react-intl-universal';
 import { find } from 'lodash';
 import rtlDetect from 'rtl-detect';
 import * as R from 'ramda';
+
 import { AppIntlProvider } from './AppIntlProvider';
+
 import withDashboardActions from '../containers/Dashboard/withDashboardActions';
 import withDashboard from '../containers/Dashboard/withDashboard';
 
@@ -56,6 +58,10 @@ function useDocumentDirectionModifier(locale, isRTL) {
   }, [isRTL, locale]);
 }
 
+function transformMomentLocale(currentLocale) {
+  return currentLocale === 'ar' ? 'ar-ly' : currentLocale;
+}
+
 /**
  * Application Intl loader.
  */
@@ -84,7 +90,7 @@ function AppIntlLoader({ appIntlIsLoading, setAppIntlIsLoading, children }) {
         });
       })
       .then(() => {
-        moment.locale(currentLocale);
+        moment.locale(transformMomentLocale(currentLocale));
         setIsLocalsLoading(false);
       });
   }, [currentLocale, setIsLocalsLoading]);

client/src/components/Utils/FormatDate.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+
+/**
+ * Format the given date.
+ */
+export function FormatDate({ value, format = 'YYYY MMM DD' }) {
+  const localizedFormat = intl.get(`date_format.${format}`);
+
+  return moment().format(localizedFormat);
+}
+
+/**
+ * Format date table cell.
+ */
+export function FormatDateCell({ value, column: { formatDate } }) {
+  return <FormatDate value={value} {...formatDate} />;
+}

client/src/components/Utils/index.js

@@ -1,3 +1,4 @@
 
 
-export * from './FormatNumber';
+export * from './FormatNumber';
+export * from './FormatDate';

client/src/components/index.js

@@ -79,6 +79,7 @@ export * from './Drawer';
 export * from './Forms';
 export * from './MultiSelectTaggable'
 export * from './Utils/FormatNumber';
+export * from './Utils/FormatDate';
 
 const Hint = FieldHint;