feat(ui): use date formatting component for rendering date

fix #3600

renderer/components/Activity/Invoice/Invoice.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { Text } from 'components/UI'
 import Zap from 'components/Icon/Zap'
-import { CryptoValue, FiatValue } from 'containers/UI'
+import { CryptoValue, FiatValue, FormattedDateTime } from 'containers/UI'
 import messages from './messages'
 import Clock from 'components/Icon/Clock'
 
@@ -33,7 +33,8 @@ const Invoice = ({ activity, showActivityModal, cryptoUnitName, intl, ...rest })
         <FormattedMessage {...messages[activity.isSettled ? 'received' : 'requested']} />
       </Text>
       <Text color="gray" fontSize="xs" fontWeight="normal">
-        <FormattedTime
+        <FormattedDateTime
+          format="time"
           value={activity.isSettled ? activity.settleDate * 1000 : activity.creationDate * 1000}
         />
       </Text>

renderer/components/Activity/Payment/Payment.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedMessage, FormattedTime, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { getDisplayNodeName } from 'reducers/payment/utils'
 import { Message, Text } from 'components/UI'
 import Zap from 'components/Icon/Zap'
-import { CryptoValue, FiatValue } from 'containers/UI'
+import { CryptoValue, FiatValue, FormattedDateTime } from 'containers/UI'
 import ErrorLink from '../ErrorLink'
 import messages from './messages'
 
@@ -57,7 +57,7 @@ const Payment = ({
           </>
         ) : (
           <Text color="gray" fontSize="xs" fontWeight="normal">
-            <FormattedTime value={activity.creationDate * 1000} />
+            <FormattedDateTime format="time" value={activity.creationDate * 1000} />
           </Text>
         )}
       </Box>

renderer/components/Activity/PaymentModal/PaymentModal.js

@@ -1,12 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedDate, FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { getDisplayNodeName } from 'reducers/payment/utils'
 import { Bar, DataRow, Header, Panel, Text } from 'components/UI'
 import { getTag } from '@zap/utils/crypto'
-import { CopyButton, CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'
+import {
+  CopyButton,
+  CryptoSelector,
+  CryptoValue,
+  FiatSelector,
+  FiatValue,
+  FormattedDateTime,
+} from 'containers/UI'
 import { Truncate } from 'components/Util'
 import Lightning from 'components/Icon/Lightning'
 import Route from './Route'
@@ -78,15 +85,10 @@ class PaymentModal extends React.PureComponent {
             right={
               <>
                 <Text>
-                  <FormattedDate
-                    day="2-digit"
-                    month="long"
-                    value={item.creationDate * 1000}
-                    year="numeric"
-                  />
+                  <FormattedDateTime format="date" month="long" value={item.creationDate * 1000} />
                 </Text>
                 <Text>
-                  <FormattedTime value={item.creationDate * 1000} />
+                  <FormattedDateTime format="time" value={item.creationDate * 1000} />
                 </Text>
               </>
             }

renderer/components/Activity/Row.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedDate } from 'react-intl'
 import { Box } from 'rebass/styled-components'
 import { Bar, Heading } from 'components/UI'
+import { FormattedDateTime } from 'containers/UI'
 
 const Row = ({ style, item, RowComponent }) => (
   <div style={style}>
     {item.title ? (
       <Box mt={4} pl={4}>
         <Heading.H4 fontWeight="normal">
-          <FormattedDate day="2-digit" month="short" value={item.title} year="numeric" />
+          <FormattedDateTime format="date" month="short" value={item.title} />
         </Heading.H4>
         <Bar my={1} />
       </Box>

renderer/components/Activity/Transaction/Transaction.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import findLast from 'lodash/findLast'
-import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
 import config from 'config'
 import { intlShape } from '@zap/i18n'
 import { CoinBig } from '@zap/utils/coin'
 import { Message, Text } from 'components/UI'
 import ChainLink from 'components/Icon/ChainLink'
-import { CryptoValue, FiatValue } from 'containers/UI'
+import { CryptoValue, FiatValue, FormattedDateTime } from 'containers/UI'
 import ErrorLink from '../ErrorLink'
 import messages from './messages'
 
@@ -45,7 +45,7 @@ const Transaction = ({
     if (CoinBig(numConfirmations).gt(confirmed)) {
       return (
         <Text color="gray" fontSize="xs" fontWeight="normal">
-          <FormattedTime value={activity.timeStamp * 1000} />
+          <FormattedDateTime format="time" value={activity.timeStamp * 1000} />
         </Text>
       )
     }

renderer/components/Activity/TransactionModal/TransactionModal.js

@@ -1,19 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import get from 'lodash/get'
-import {
-  FormattedDate,
-  FormattedTime,
-  FormattedMessage,
-  FormattedNumber,
-  injectIntl,
-} from 'react-intl'
+import { FormattedMessage, FormattedNumber, injectIntl } from 'react-intl'
 import { Flex } from 'rebass/styled-components'
 import { CoinBig } from '@zap/utils/coin'
 import { intlShape } from '@zap/i18n'
 import blockExplorer from '@zap/utils/blockExplorer'
 import { Bar, DataRow, Header, Link, Panel, Span, Text, Button } from 'components/UI'
-import { CopyButton, CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'
+import {
+  CopyButton,
+  CryptoSelector,
+  CryptoValue,
+  FiatSelector,
+  FiatValue,
+  FormattedDateTime,
+} from 'containers/UI'
 import { Truncate } from 'components/Util'
 import Onchain from 'components/Icon/Onchain'
 import Padlock from 'components/Icon/Padlock'
@@ -127,15 +128,14 @@ class TransactionModal extends React.PureComponent {
                   item.numConfirmations ? (
                     <>
                       <Text>
-                        <FormattedDate
-                          day="2-digit"
+                        <FormattedDateTime
+                          format="date"
                           month="long"
                           value={item.timeStamp * 1000}
-                          year="numeric"
                         />
                       </Text>
                       <Text>
-                        <FormattedTime value={item.timeStamp * 1000} />
+                        <FormattedDateTime format="time" value={item.timeStamp * 1000} />
                       </Text>
                     </>
                   ) : (

renderer/components/Channels/ChannelData.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedDate, FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import styled from 'styled-components'
 import { opacity } from 'styled-system'
 import { Box as BaseBox, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import blockExplorer from '@zap/utils/blockExplorer'
 import { Bar, DataRow, Link, Text } from 'components/UI'
 import { Truncate } from 'components/Util'
-import { CopyButton, CryptoValue } from 'containers/UI'
+import { CopyButton, CryptoValue, FormattedDateTime } from 'containers/UI'
 import { CHANNEL_DATA_VIEW_MODE_BASIC, CHANNEL_DATA_VIEW_MODE_FULL } from './constants'
 import messages from './messages'
 
@@ -62,13 +62,7 @@ const ChannelData = ({ channel, cryptoUnitName, intl, networkInfo, viewMode, ...
       body: <FormattedMessage {...messages.funding_date_description} />,
       value: (
         <Text>
-          <FormattedDate
-            day="2-digit"
-            month="short"
-            value={fundingTxTimestamp * 1000}
-            year="numeric"
-          />{' '}
-          <FormattedTime value={fundingTxTimestamp * 1000} />
+          <FormattedDateTime month="short" value={fundingTxTimestamp * 1000} />
         </Text>
       ),
     }),

renderer/components/Request/RequestSummary.js

@@ -1,10 +1,16 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { Box, Flex } from 'rebass/styled-components'
-import { FormattedMessage, FormattedTime, useIntl } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import copy from 'copy-to-clipboard'
 import { Bar, DataRow, Button, QRCode, Text, Countdown } from 'components/UI'
-import { CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'
+import {
+  CryptoSelector,
+  CryptoValue,
+  FiatSelector,
+  FiatValue,
+  FormattedDateTime,
+} from 'containers/UI'
 import { Truncate } from 'components/Util'
 import RequestSettlePrompt from './RequestSettlePrompt'
 import messages from './messages'
@@ -99,9 +105,7 @@ const RequestSummary = ({
 
       <DataRow
         left={<FormattedMessage {...messages.created} />}
-        right={
-          <FormattedTime day="2-digit" month="long" value={creationDate * 1000} year="numeric" />
-        }
+        right={<FormattedDateTime month="long" value={creationDate * 1000} />}
       />
 
       <Bar variant="light" />
@@ -213,12 +217,7 @@ const RequestSummary = ({
                 >
                   <FormattedMessage {...messages.paid} />
                   <br />
-                  <FormattedTime
-                    day="2-digit"
-                    month="long"
-                    value={settleDate * 1000}
-                    year="numeric"
-                  />
+                  <FormattedDateTime month="long" value={settleDate * 1000} />
                 </Text>
               ) : (
                 <Text color={getStatusColor()} fontWeight="light">

renderer/containers/UI/FormattedDateTime.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { FormattedDate, FormattedTime } from 'react-intl'
+import { settingsSelectors } from 'reducers/settings'
+
+const mapStateToProps = state => ({
+  timeDisplayMode: settingsSelectors.currentConfig(state).timeDisplayMode,
+})
+
+const FormattedDateTime = ({ timeDisplayMode = '12hour', format, month = 'long', value }) => {
+  const is12Hour = timeDisplayMode === '12hour'
+
+  switch (format) {
+    case 'date':
+      return <FormattedDate day="2-digit" month={month} value={value} year="numeric" />
+    case 'time':
+      return <FormattedTime hour12={is12Hour} value={value} />
+    default:
+      return (
+        <FormattedDate
+          day="2-digit"
+          hour="numeric"
+          hour12={is12Hour}
+          minute="numeric"
+          month={month}
+          value={value}
+          year="numeric"
+        />
+      )
+  }
+}
+
+FormattedDateTime.propTypes = {
+  format: PropTypes.oneOf(['date', 'time']),
+  month: PropTypes.string,
+  timeDisplayMode: PropTypes.oneOf(['12hour', '24hour']),
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])
+    .isRequired,
+}
+
+export default connect(mapStateToProps)(FormattedDateTime)

renderer/containers/UI/index.js

@@ -1,6 +1,7 @@
 export CopyButton from './CopyButton'
 export CryptoSelector from './CryptoSelector'
 export CryptoValue from './CryptoValue'
+export FormattedDateTime from './FormattedDateTime'
 export FiatSelector from './FiatSelector'
 export FiatValue from './FiatValue'
 export CryptoValueSelector from './CryptoValueSelector'