From 48609df9f6180ce1f64a6208cc45bb97f1459c76 Mon Sep 17 00:00:00 2001
From: rahulbile <rahul.rmcet@gmail.com>
Date: Mon, 9 Nov 2020 11:09:24 +0530
Subject: [PATCH] feat(ui): use date formatting component for rendering date
 [#3600]

---
 .../components/Activity/Invoice/Invoice.js    |  7 ++--
 .../components/Activity/Payment/Payment.js    |  6 +--
 .../Activity/PaymentModal/PaymentModal.js     | 20 +++++-----
 renderer/components/Activity/Row.js           |  4 +-
 .../Activity/Transaction/Transaction.js       |  6 +--
 .../TransactionModal/TransactionModal.js      | 24 +++++------
 renderer/components/Channels/ChannelData.js   | 12 ++----
 renderer/components/Request/RequestSummary.js | 21 +++++-----
 renderer/containers/UI/FormattedDateTime.js   | 40 +++++++++++++++++++
 renderer/containers/UI/index.js               |  1 +
 10 files changed, 89 insertions(+), 52 deletions(-)
 create mode 100644 renderer/containers/UI/FormattedDateTime.js

diff --git a/renderer/components/Activity/Invoice/Invoice.js b/renderer/components/Activity/Invoice/Invoice.js
index aac56f90e72..4c1cfa74246 100644
--- a/renderer/components/Activity/Invoice/Invoice.js
+++ b/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>
diff --git a/renderer/components/Activity/Payment/Payment.js b/renderer/components/Activity/Payment/Payment.js
index 6edcc84d257..fff7e392f98 100644
--- a/renderer/components/Activity/Payment/Payment.js
+++ b/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>
diff --git a/renderer/components/Activity/PaymentModal/PaymentModal.js b/renderer/components/Activity/PaymentModal/PaymentModal.js
index e0f8e8cdaec..649b45bd5cc 100644
--- a/renderer/components/Activity/PaymentModal/PaymentModal.js
+++ b/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>
               </>
             }
diff --git a/renderer/components/Activity/Row.js b/renderer/components/Activity/Row.js
index c1930ddcc74..09f6bbb1bba 100644
--- a/renderer/components/Activity/Row.js
+++ b/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>
diff --git a/renderer/components/Activity/Transaction/Transaction.js b/renderer/components/Activity/Transaction/Transaction.js
index cd6018f7c65..8018f1311af 100644
--- a/renderer/components/Activity/Transaction/Transaction.js
+++ b/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>
       )
     }
diff --git a/renderer/components/Activity/TransactionModal/TransactionModal.js b/renderer/components/Activity/TransactionModal/TransactionModal.js
index c1d97f577b1..8743de83154 100644
--- a/renderer/components/Activity/TransactionModal/TransactionModal.js
+++ b/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>
                     </>
                   ) : (
diff --git a/renderer/components/Channels/ChannelData.js b/renderer/components/Channels/ChannelData.js
index 9898878c69e..0dd2eb63e1f 100644
--- a/renderer/components/Channels/ChannelData.js
+++ b/renderer/components/Channels/ChannelData.js
@@ -1,6 +1,6 @@
 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'
@@ -8,7 +8,7 @@ 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>
       ),
     }),
diff --git a/renderer/components/Request/RequestSummary.js b/renderer/components/Request/RequestSummary.js
index 1dfcdb261f6..d9e1719b641 100644
--- a/renderer/components/Request/RequestSummary.js
+++ b/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">
diff --git a/renderer/containers/UI/FormattedDateTime.js b/renderer/containers/UI/FormattedDateTime.js
new file mode 100644
index 00000000000..ad94df427f8
--- /dev/null
+++ b/renderer/containers/UI/FormattedDateTime.js
@@ -0,0 +1,40 @@
+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, format, month = 'long', value }) => {
+  const hour12 = timeDisplayMode && timeDisplayMode === '12Hour' ? 1 : 0
+  switch (format) {
+    case 'date':
+      return <FormattedDate day="2-digit" month={month} value={value} year="numeric" />
+    case 'time':
+      return <FormattedTime hour12={hour12} value={value} />
+    default:
+      return (
+        <FormattedDate
+          day="2-digit"
+          hour="numeric"
+          hour12={hour12}
+          minute="numeric"
+          month={month}
+          value={value}
+          year="numeric"
+        />
+      )
+  }
+}
+
+FormattedDateTime.propTypes = {
+  format: PropTypes.string,
+  month: PropTypes.string,
+  timeDisplayMode: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
+}
+
+export default connect(mapStateToProps)(FormattedDateTime)
diff --git a/renderer/containers/UI/index.js b/renderer/containers/UI/index.js
index 80f04b19c4e..94fbc44910c 100644
--- a/renderer/containers/UI/index.js
+++ b/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'