ui: switch to locale-aware date time formatting

app/components/Transactions/Transaction/index.js

@@ -3,14 +3,14 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { withRouter } from 'react-router';
-import createAMPMTimeStamp from '../../../utils/timeConverter';
+import { dateTimeFormatters } from '../../../utils/timeConverter';
 import '../index.scss';
 import { displayBalance } from '../../../utils/balances';
 import ellipsify from '../../../utils/ellipsify';
 import { formatName } from '../../../utils/nameHelpers';
 import Tooltipable from '../../Tooltipable';
 import { shell } from 'electron';
-import {I18nContext} from "../../../utils/i18n";
+import { I18nContext } from "../../../utils/i18n";
 
 const RECEIVE = 'RECEIVE';
 const SEND = 'SEND';
@@ -87,13 +87,15 @@ class Transaction extends Component {
     });
 
   renderTimestamp = tx => {
-    const {year, month, day, time} = createAMPMTimeStamp(tx.date);
+    const date = new Date(tx.date);
+    const formattedDate = dateTimeFormatters.date.format(date);
+    const formattedTime = dateTimeFormatters.time.format(date);
 
     return (
       <div className="transaction__tx-timestamp">
         <div className={this.titleStyling(tx)}>
-          <Tooltipable tooltipContent={time} width={'4rem'} textAlign={'center'}>
-            {month}/{day}/{year}
+          <Tooltipable tooltipContent={formattedTime} width={'4rem'} textAlign={'center'}>
+            {formattedDate}
           </Tooltipable>
         </div>
       </div>
@@ -176,21 +178,21 @@ class Transaction extends Component {
         {
           [RECEIVE, COINBASE, REDEEM, REVEAL, REGISTER].includes(tx.type)
             ? '+'
-            : [UPDATE,  RENEW,  OPEN,  FINALIZE,  CLAIM].includes(tx.type)
+            : [UPDATE, RENEW, OPEN, FINALIZE, CLAIM].includes(tx.type)
               ? ''
               : [SEND, BID].includes(tx.type)
                 ? '-'
                 : ''
         }
-        { (tx.type === FINALIZE && tx.value > 0) ? '+': '' }
-        { (tx.type === TRANSFER && tx.value > 0) ? '+': '' }
+        {(tx.type === FINALIZE && tx.value > 0) ? '+' : ''}
+        {(tx.type === TRANSFER && tx.value > 0) ? '+' : ''}
         {displayBalance(tx.value)} HNS
       </div>
     </div>
   );
 
   render() {
-    const {transaction} = this.props;
+    const { transaction } = this.props;
 
     return (
       <div className="transaction">
@@ -202,15 +204,15 @@ class Transaction extends Component {
   }
 
   formatDomains(tx) {
-    const {t} = this.context;
-    const {id, domains} = tx;
+    const { t } = this.context;
+    const { id, domains } = tx;
 
     if (!domains?.length) {
       return `(${this.context.t('unknown')})`;
     }
 
     const expanded = this.state.isExpanded[id]
-    const domainsToDisplay = expanded ? domains : domains.slice(0,1);
+    const domainsToDisplay = expanded ? domains : domains.slice(0, 1);
 
     return (
       <div

app/pages/Auction/BidHistory.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import c from 'classnames';
-import createAMPMTimeStamp from '../../utils/timeConverter';
+import {dateTimeFormatters} from '../../utils/timeConverter';
 import { displayBalance } from '../../utils/balances';
 import ellipsify from '../../utils/ellipsify';
 import RepairBid from './RepairBid';
@@ -35,9 +35,12 @@ export default class BidHistory extends Component {
     bids.forEach(bid => {
       order.push(bid.from);
 
-      const {month, day, year} = createAMPMTimeStamp(bid.date);
+      const formattedDate = bid.date ?
+        dateTimeFormatters.date.format(new Date(bid.date))
+        : '(pending)';
+
       map[bid.from] = {
-        date: bid.date ? `${month}/${day}/${year}` : '(pending)',
+        date: formattedDate,
         bid: bid.bid.value,
         mask: bid.bid.lockup,
         own: bid.bid.own,

app/utils/timeConverter.js

@@ -1,33 +1,4 @@
-const createAMPMTimeStamp = timestamp => {
-  const date = new Date(timestamp);
-  const year = date
-    .getFullYear()
-    .toString()
-    .slice(2);
-  const month = pad(date.getMonth() + 1);
-  const day = pad(date.getDate());
-  let h = date.getHours();
-  const m = date.getMinutes();
-  const ampm = h >= 12 ? 'pm' : 'am';
-  h = h % 12;
-  h = h ? h : 12; // the hour '0' should be '12'
-  const mm = m < 10 ? '0'+m : m;
-  const time = h + ':' + mm + ' ' + ampm;
-  return {
-    year,
-    month,
-    day,
-    time
-  };
-};
-
-function pad(num) {
-  if (num < 10) {
-    return `0${num}`
-  }
-
-  return num.toString();
-}
+import { app } from '@electron/remote';
 
 export function hoursToNow(hoursUntil) {
   if (!hoursUntil) {
@@ -46,4 +17,15 @@ export function hoursToNow(hoursUntil) {
   return `~${days}d ${hours}h ${mins}m`
 }
 
-export default createAMPMTimeStamp;
+// TODO: remove before merge
+console.warn('locale:', {
+  locale: app.getLocale(),
+  systemLocale: app.getSystemLocale(),
+  preferredSystemLanguages: app.getPreferredSystemLanguages(),
+});
+
+const locale = app.getLocale();
+export const dateTimeFormatters = {
+  date: new Intl.DateTimeFormat(locale, { dateStyle: 'short' }),
+  time: new Intl.DateTimeFormat(locale, { timeStyle: 'short' }),
+}