UIDEXP-175: Fix date and time display in Safary (#98)

CHANGELOG.md

@@ -10,6 +10,7 @@
 * Add `OverlayView` component and extend JobLogs API. UIDEXP-18.
 * Extend `SortAndSearchPane` to accept `excludedSortColumns` and `shouldSetInitialSortOnMount` prop. UIDEXP-142.
 * Update `react-intl` to v5.7.0. STDTC-15.
+* Fix date and time display in Safari. UIDEXP-175.
 
 ## [2.0.1](https://github.com/folio-org/stripes-data-transfer-components/tree/v2.0.1) (2020-07-09)
 [Full Changelog](https://github.com/folio-org/stripes-data-transfer-components/tree/v2.0.0...v2.0.1)

lib/JobLogs/useJobLogsListFormatter.js

@@ -1,5 +1,5 @@
-import { useIntl } from 'react-intl';
 import { useListFormatter } from '../ListFormatter';
+import { useTimeFormatter } from '../utils';
 
 const runBy = record => {
   if (!record.runBy) {
@@ -32,11 +32,11 @@ const totalRecords = record => {
 const fileName = record => record.fileName;
 const hrId = record => record.hrId;
 
-const getCompletedDateFormatter = intl => {
+const getCompletedDateFormatter = formatTime => {
   return record => {
     const { completedDate } = record;
 
-    return intl.formatTime(
+    return formatTime(
       completedDate,
       {
         day: 'numeric',
@@ -48,15 +48,15 @@ const getCompletedDateFormatter = intl => {
 };
 
 export const useJobLogsListFormatter = (customFormatters = {}) => {
-  const intl = useIntl();
+  const formatTime = useTimeFormatter();
 
   const jobLogsFormatters = {
     runBy,
     jobProfileName,
     totalRecords,
     fileName,
     hrId,
-    completedDate: getCompletedDateFormatter(intl),
+    completedDate: getCompletedDateFormatter(formatTime),
   };
 
   return useListFormatter({

lib/ListFormatter/useListFormatter.js

@@ -1,14 +1,14 @@
-import { useIntl } from 'react-intl';
+import { useDateFormatter } from '../utils';
 
 export const useListFormatter = (customFormatters = {}) => {
-  const intl = useIntl();
+  const formatDate = useDateFormatter();
 
   return {
     name: record => record.name,
     updated: record => {
       const { metadata: { updatedDate } } = record;
 
-      return intl.formatDate(updatedDate);
+      return formatDate(updatedDate);
     },
     updatedBy: record => {
       if (!record.userInfo) {

lib/utils/index.js

@@ -10,3 +10,5 @@ export * from './constants';
 export * from './folioRecordTypes';
 export * from './useFormattedMCLProps';
 export * from './formatTranslationChunks';
+export * from './useTimeFormatter';
+export * from './useDateFormatter';

lib/utils/iso8601Timestamp.js

@@ -0,0 +1,18 @@
+/**
+  This is temp solution because stripes-components was released.
+  TODO: Update solution during the next release: Move useDateFormatter
+  and useTimeFormatter to stripes-components and remove them here.
+ */
+export const iso8601Timestamp = value => {
+  let tweakedValue = value;
+
+  if (typeof value !== 'string') {
+    return tweakedValue;
+  }
+
+  if (value.length === 28 && (value[23] === '+' || value[23] === '-')) {
+    tweakedValue = `${value.substring(0, 26)}:${value.substring(26, 28)}`;
+  }
+
+  return tweakedValue;
+};

lib/utils/useDateFormatter.js

@@ -0,0 +1,9 @@
+import { useIntl } from 'react-intl';
+
+import { iso8601Timestamp } from './iso8601Timestamp';
+
+export const useDateFormatter = () => {
+  const intl = useIntl();
+
+  return date => intl.formatDate(iso8601Timestamp(date));
+};

lib/utils/useTimeFormatter.js

@@ -0,0 +1,9 @@
+import { useIntl } from 'react-intl';
+
+import { iso8601Timestamp } from './iso8601Timestamp';
+
+export const useTimeFormatter = () => {
+  const intl = useIntl();
+
+  return (time, options) => intl.formatTime(iso8601Timestamp(time), options);
+};