#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

4 files changed, 51 insertions, 12 deletions

diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index a0e0cd7b2..1c069232c 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -224,6 +224,7 @@ export class ShellUiModel {
   activeLightbox: ProfileImageLightbox | ImagesLightbox | null = null
   isComposerActive = false
   composerOpts: ComposerOpts | undefined
+  tickEveryMinute = Date.now()
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(this, {
@@ -231,6 +232,8 @@ export class ShellUiModel {
       rootStore: false,
       hydrate: false,
     })
+
+    this.setupClock()
   }
 
   serialize(): unknown {
@@ -341,4 +344,10 @@ export class ShellUiModel {
     this.isComposerActive = false
     this.composerOpts = undefined
   }
+
+  setupClock() {
+    setInterval(() => {
+      this.tickEveryMinute = Date.now()
+    }, 60_000)
+  }
 }
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 133d38421..efc9fe694 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -15,7 +15,7 @@ import {PostDropdownBtn} from '../util/forms/DropdownButton'
 import * as Toast from '../util/Toast'
 import {PreviewableUserAvatar} from '../util/UserAvatar'
 import {s} from 'lib/styles'
-import {ago, niceDate} from 'lib/strings/time'
+import {niceDate} from 'lib/strings/time'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {pluralize} from 'lib/strings/helpers'
 import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
@@ -30,6 +30,7 @@ import {PostSandboxWarning} from '../util/PostSandboxWarning'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {usePalette} from 'lib/hooks/usePalette'
 import {formatCount} from '../util/numeric/format'
+import {TimeElapsed} from 'view/com/util/TimeElapsed'
 
 const PARENT_REPLY_LINE_LENGTH = 8
 
@@ -189,7 +190,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                   </Text>
                 </Link>
                 <Text type="md" style={[styles.metaItem, pal.textLight]}>
-                  &middot; {ago(item.post.indexedAt)}
+                  &middot;&nbsp;
+                  <TimeElapsed timestamp={item.post.indexedAt}>
+                    {({timeElapsed}) => <>{timeElapsed}</>}
+                  </TimeElapsed>
                 </Text>
               </View>
               <View style={s.flex1} />
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 7f8abebd7..5df6b3983 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/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) {
           &middot;
         </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>
   )
 })
diff --git a/src/view/com/util/TimeElapsed.tsx b/src/view/com/util/TimeElapsed.tsx
new file mode 100644
index 000000000..7b2dd61f3
--- /dev/null
+++ b/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})
+})