#984 Updating indexedAt timestamps (#1024)

* add TimeElapsed util component, integrate into PostThreadItem

* integrate into posts

* use consistent naming

* use mobx and single interval for TimeElapsed

src/view/com/util/PostMeta.tsx

@@ -2,12 +2,13 @@ import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {Text} from './text/Text'
 import {DesktopWebTextLink} from './Link'
-import {ago, niceDate} from 'lib/strings/time'
+import {niceDate} from 'lib/strings/time'
 import {usePalette} from 'lib/hooks/usePalette'
 import {UserAvatar} from './UserAvatar'
 import {observer} from 'mobx-react-lite'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {isAndroid} from 'platform/detection'
+import {TimeElapsed} from './TimeElapsed'
 
 interface PostMetaOpts {
   authorAvatar?: string
@@ -64,15 +65,19 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
           ·
         </Text>
       )}
-      <DesktopWebTextLink
-        type="md"
-        style={pal.textLight}
-        lineHeight={1.2}
-        text={ago(opts.timestamp)}
-        accessibilityLabel={niceDate(opts.timestamp)}
-        accessibilityHint=""
-        href={opts.postHref}
-      />
+      <TimeElapsed timestamp={opts.timestamp}>
+        {({timeElapsed}) => (
+          <DesktopWebTextLink
+            type="md"
+            style={pal.textLight}
+            lineHeight={1.2}
+            text={timeElapsed}
+            accessibilityLabel={niceDate(opts.timestamp)}
+            accessibilityHint=""
+            href={opts.postHref}
+          />
+        )}
+      </TimeElapsed>
     </View>
   )
 })

src/view/com/util/TimeElapsed.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {observer} from 'mobx-react-lite'
+import {ago} from 'lib/strings/time'
+import {useStores} from 'state/index'
+
+export const TimeElapsed = observer(function TimeElapsed({
+  timestamp,
+  children,
+}: {
+  timestamp: string
+  children: ({timeElapsed}: {timeElapsed: string}) => JSX.Element
+}) {
+  const stores = useStores()
+  const [timeElapsed, setTimeAgo] = React.useState(ago(timestamp))
+
+  React.useEffect(() => {
+    setTimeAgo(ago(timestamp))
+  }, [timestamp, setTimeAgo, stores.shell.tickEveryMinute])
+
+  return children({timeElapsed})
+})