Merge pull request #367 from shocknet/timestamps

better timestamp handling/rendering

app/components/UserDetail.js

@@ -1,17 +1,16 @@
-/**
- * @prettier
- */
 import React from 'react'
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
 
 import * as CSS from '../res/css'
 
 import { ConnectedShockAvatar } from './ShockAvatar'
+import TimeText from './time-text'
 
 /**
  * @typedef {object} Props
  * @prop {string=} alternateText
  * @prop {boolean=} alternateTextBold
+ * @prop {boolean=} alternateTextIsTimestamp
  * @prop {React.ReactNode} lowerText
  * @prop {import('react-native').TextInputProps['style']=} lowerTextStyle
  * @prop {string} id
@@ -33,13 +32,11 @@ export default class UserDetail extends React.PureComponent {
     onPress && onPress(id)
   }
 
-  /** @type {number|null} */
-  intervalID = 0
-
   render() {
     const {
       alternateText,
       alternateTextBold,
+      alternateTextIsTimestamp,
       nameBold,
       lowerText,
       lowerTextStyle,
@@ -65,15 +62,31 @@ export default class UserDetail extends React.PureComponent {
               style={nameBold ? styles.nameBold : styles.name}
             >
               {name}
-              <Text
-                style={
-                  alternateTextBold
-                    ? styles.alternateTextBold
-                    : styles.alternateText
-                }
-              >
-                {alternateText && ` ${alternateText}`}
-              </Text>
+              {alternateText && alternateTextIsTimestamp ? (
+                <Text>
+                  {' '}
+                  <TimeText
+                    style={
+                      alternateTextBold
+                        ? styles.alternateTextBold
+                        : styles.alternateText
+                    }
+                  >
+                    {Number(alternateText)}
+                  </TimeText>
+                </Text>
+              ) : null}
+              {!alternateTextIsTimestamp ? (
+                <Text
+                  style={
+                    alternateTextBold
+                      ? styles.alternateTextBold
+                      : styles.alternateText
+                  }
+                >
+                  {alternateText && ` ${alternateText}`}
+                </Text>
+              ) : null}
             </Text>
 
             {typeof lowerText === 'string' ? (

app/components/time-text.tsx

@@ -2,10 +2,40 @@ import React from 'react'
 import { Text, TextProps } from 'react-native'
 import Moment from 'moment'
 
-const TimeText: React.FC<TextProps & { children: number }> = React.memo(
-  ({ children: timestamp, ...props }) => {
-    return <Text {...props}>{Moment(timestamp).fromNow()}</Text>
-  },
-)
+import * as Services from '../services'
 
-export default TimeText
+interface Props extends TextProps {
+  children: number
+  displayHHMM?: boolean
+}
+
+export default class TimeText extends React.PureComponent<Props> {
+  intervalID: null | ReturnType<typeof setInterval> = null
+
+  componentDidMount() {
+    this.intervalID = setInterval(() => {
+      this.forceUpdate()
+    }, 60000)
+  }
+
+  componentWillUnmount() {
+    if (this.intervalID) {
+      clearInterval(this.intervalID)
+      this.intervalID = null
+    }
+  }
+
+  render() {
+    const { children: timestamp, displayHHMM, ...props } = this.props
+
+    const msTimestamp = Services.normalizeTimestampToMs(timestamp)
+
+    return (
+      <Text {...props}>
+        {displayHHMM
+          ? Moment(msTimestamp).format('hh:mm')
+          : Moment(msTimestamp).fromNow()}
+      </Text>
+    )
+  }
+}

app/screens/Advanced/Accordion/Invoice.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { View, Text, StyleSheet, Image } from 'react-native'
-import Moment from 'moment'
 
 import * as CSS from '../../../res/css'
+import TimeText from '../../../components/time-text'
 /**
  * @typedef {import('../../../services/wallet').Invoice} IInvoice
  */
@@ -38,9 +38,9 @@ const _Invoice = ({ data }) => ((
       </View>
     </View>
     <View>
-      <Text style={styles.transactionTime}>
-        {Moment(data.settle_date).fromNow()} ago
-      </Text>
+      <TimeText style={styles.transactionTime}>
+        {Number(data.settle_date)}
+      </TimeText>
       <Text style={styles.transactionValueText}>+{data.amt_paid_sat}</Text>
       <Text style={styles.transactionUSDText}>
         {(Number(data.amt_paid_sat) / 100).toFixed(4)} USD

app/screens/Advanced/Accordion/Transaction.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { View, Text, StyleSheet, Clipboard, ToastAndroid } from 'react-native'
-import Moment from 'moment'
 import EntypoIcons from 'react-native-vector-icons/Entypo'
 
 import * as CSS from '../../../res/css'
+import TimeText from '../../../components/time-text'
 /**
  * @typedef {import('../../../services/wallet').Transaction} ITransaction
  */
@@ -71,9 +71,9 @@ const _Transaction = ({ data }) => ((
       >
         {data.amount}
       </Text>
-      <Text style={styles.transactionTime}>
-        {Moment.utc(parseInt(data.time_stamp, 10) * 1000).fromNow()}
-      </Text>
+      <TimeText style={styles.transactionTime}>
+        {Number(data.time_stamp)}
+      </TimeText>
     </View>
   </View>
 ))

app/screens/Chat/ChatInvoice.js

@@ -36,19 +36,6 @@ import TXBase from './TXBase'
  * @augments React.PureComponent<Props>
  */
 export default class ChatInvoice extends React.PureComponent {
-  componentDidMount() {
-    /**
-     * Force-updates every minute so moment-formatted dates refresh.
-     */
-    this.intervalID = setInterval(() => {
-      this.forceUpdate()
-    }, 60000)
-  }
-
-  componentWillUnmount() {
-    typeof this.intervalID === 'number' && clearInterval(this.intervalID)
-  }
-
   onPress = () => {
     const { id, onPressUnpaidIncomingInvoice } = this.props
     const { paymentStatus } = this.props

app/screens/Chat/ChatMessage.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
-import moment from 'moment'
 import { Svg, Polygon } from 'react-native-svg'
 
 import { Colors, WIDTH } from '../../res/css'
 import Pad from '../../components/Pad'
+import TimeText from '../../components/time-text'
 
 import ChatAvatar from './ChatAvatar'
 
@@ -27,19 +27,6 @@ const BUBBLE_TRIANGLE_VERTICAL_OFFSET = 6
  * @augments React.PureComponent<Props>
  */
 export default class ChatMessage extends React.PureComponent {
-  componentDidMount() {
-    /**
-     * Force-updates every minute so moment-formatted dates refresh.
-     */
-    this.intervalID = setInterval(() => {
-      this.forceUpdate()
-    }, 60000)
-  }
-
-  componentWillUnmount() {
-    typeof this.intervalID === 'number' && clearInterval(this.intervalID)
-  }
-
   onPress = () => {
     const { id, onPress } = this.props
     onPress && onPress(id)
@@ -48,8 +35,6 @@ export default class ChatMessage extends React.PureComponent {
   render() {
     const { body, outgoing, timestamp } = this.props
 
-    const formattedTime = moment(timestamp).format('hh:mm')
-
     const SVG_EDGE = 25
     const UNIT = SVG_EDGE / 5
     const ZERO = UNIT * 0
@@ -74,7 +59,7 @@ export default class ChatMessage extends React.PureComponent {
 
         {outgoing && (
           <>
-            <Text style={styles.timestamp}>{formattedTime}</Text>
+            <TimeText style={styles.timestamp}>{timestamp}</TimeText>
             <Pad insideRow amount={12} />
           </>
         )}
@@ -106,7 +91,9 @@ export default class ChatMessage extends React.PureComponent {
         {!outgoing && (
           <>
             <Pad insideRow amount={12} />
-            <Text style={styles.timestamp}>{formattedTime}</Text>
+            <TimeText displayHHMM style={styles.timestamp}>
+              {timestamp}
+            </TimeText>
           </>
         )}
       </View>

app/screens/Chat/SpontPayment.js

@@ -20,19 +20,6 @@ import TXBase from './TXBase'
  * @augments React.PureComponent<Props>
  */
 export default class SpontPayment extends React.PureComponent {
-  componentDidMount() {
-    /**
-     * Force-updates every minute so moment-formatted dates refresh.
-     */
-    this.intervalID = setInterval(() => {
-      this.forceUpdate()
-    }, 60000)
-  }
-
-  componentWillUnmount() {
-    typeof this.intervalID === 'number' && clearInterval(this.intervalID)
-  }
-
   onPress = () => {
     const { onPress, id } = this.props
     onPress && onPress(id)

app/screens/Chat/TXBase.js

@@ -6,7 +6,6 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
-import moment from 'moment'
 import Octicons from 'react-native-vector-icons/Octicons'
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
@@ -15,6 +14,7 @@ import Feather from 'react-native-vector-icons/Feather'
 import * as CSS from '../../res/css'
 import * as RES from '../../res'
 import Pad from '../../components/Pad'
+import TimeText from '../../components/time-text'
 
 /**
  * @typedef {'payment-received'|'invoice'|'invoice-unk'|'invoice-settling'|'invoice-settled'|'invoice-err'|'payment-sending'|'payment-sent'|'payment-err'} Type
@@ -37,19 +37,6 @@ import Pad from '../../components/Pad'
  * @augments React.PureComponent<Props>
  */
 export default class TXBase extends React.PureComponent {
-  componentDidMount() {
-    /**
-     * Force-updates every minute so moment-formatted dates refresh.
-     */
-    this.intervalID = setInterval(() => {
-      this.forceUpdate()
-    }, 60000)
-  }
-
-  componentWillUnmount() {
-    typeof this.intervalID === 'number' && clearInterval(this.intervalID)
-  }
-
   render() {
     const {
       amt,
@@ -191,9 +178,9 @@ export default class TXBase extends React.PureComponent {
             <View>
               <Pad amount={14} />
 
-              <Text style={xStyles.timestamp}>
-                {moment(timestamp).format('hh:mm')}
-              </Text>
+              <TimeText displayHHMM style={xStyles.timestamp}>
+                {timestamp}
+              </TimeText>
 
               {typeof amt === 'number' && (
                 <Text style={xStyles.amt}>{`${amt.toString()} Sats`}</Text>

app/screens/Chats/View.js

@@ -6,7 +6,6 @@ import {
   StyleSheet,
   TouchableOpacity,
 } from 'react-native'
-import moment from 'moment'
 import { Divider, Icon } from 'react-native-elements'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import Logger from 'react-native-file-log'
@@ -165,7 +164,8 @@ export default class ChatsView extends React.PureComponent {
         <View style={styles.itemContainer}>
           <View style={styles.userDetailContainer}>
             <UserDetail
-              alternateText={`(${moment(lastMsgTimestamp).fromNow()})`}
+              alternateText={lastMsgTimestamp.toString()}
+              alternateTextIsTimestamp
               alternateTextBold={unread}
               id={chat.id}
               lowerText={(() => {
@@ -215,8 +215,9 @@ export default class ChatsView extends React.PureComponent {
       <View style={styles.itemContainer}>
         <View style={styles.userDetailContainer}>
           <UserDetail
-            alternateText={`(${moment(receivedRequest.timestamp).fromNow()})`}
+            alternateText={receivedRequest.timestamp.toString()}
             alternateTextBold
+            alternateTextIsTimestamp
             id={receivedRequest.id}
             lowerText="Wants to contact you"
             lowerTextStyle={styles.boldFont}
@@ -256,8 +257,9 @@ export default class ChatsView extends React.PureComponent {
       <View style={styles.itemContainer}>
         <View style={styles.userDetailContainer}>
           <UserDetail
-            alternateText={`(${moment(sentRequest.timestamp).fromNow()})`}
+            alternateText={sentRequest.timestamp.toString()}
             alternateTextBold
+            alternateTextIsTimestamp
             id={sentRequest.id}
             lowerText={(() => {
               if (isSending) {