From 983d85384b9e736193e6c89107df5ced447a056a Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 18 Jun 2024 13:50:07 -0500
Subject: [PATCH] Force callers of `getTimeAgo` to pass in the value for "now"
 (#4560)

* Remove icky hook for now

* Force callers of getTimeAgo to pass in the 'now' value

* Update usage in Newskie dialog
---
 src/components/NewskieDialog.tsx  |  7 ++++---
 src/lib/hooks/useTimeAgo.ts       | 17 ++++-------------
 src/view/com/util/TimeElapsed.tsx |  6 ++++--
 src/view/screens/Log.tsx          |  4 +++-
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/NewskieDialog.tsx b/src/components/NewskieDialog.tsx
index fcdae0da..789a42d5 100644
--- a/src/components/NewskieDialog.tsx
+++ b/src/components/NewskieDialog.tsx
@@ -30,12 +30,13 @@ export function NewskieDialog({
     const moderation = moderateProfile(profile, moderationOpts)
     return sanitizeDisplayName(name, moderation.ui('displayName'))
   }, [moderationOpts, profile])
+  const [now] = React.useState(Date.now())
   const timeAgo = useGetTimeAgo()
   const createdAt = profile.createdAt as string | undefined
   const daysOld = React.useMemo(() => {
     if (!createdAt) return Infinity
-    return differenceInSeconds(new Date(), new Date(createdAt)) / 86400
-  }, [createdAt])
+    return differenceInSeconds(now, new Date(createdAt)) / 86400
+  }, [createdAt, now])
 
   if (!createdAt || daysOld > 7) return null
 
@@ -70,7 +71,7 @@ export function NewskieDialog({
             <Text style={[a.text_md]}>
               <Trans>
                 {profileName} joined Bluesky{' '}
-                {timeAgo(createdAt, {format: 'long'})} ago
+                {timeAgo(createdAt, now, {format: 'long'})} ago
               </Trans>
             </Text>
           </View>
diff --git a/src/lib/hooks/useTimeAgo.ts b/src/lib/hooks/useTimeAgo.ts
index 5f0782f9..efcb4754 100644
--- a/src/lib/hooks/useTimeAgo.ts
+++ b/src/lib/hooks/useTimeAgo.ts
@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from 'react'
+import {useCallback} from 'react'
 import {msg, plural} from '@lingui/macro'
 import {I18nContext, useLingui} from '@lingui/react'
 import {differenceInSeconds} from 'date-fns'
@@ -12,25 +12,16 @@ export function useGetTimeAgo() {
   const {_} = useLingui()
   return useCallback(
     (
-      date: number | string | Date,
+      earlier: number | string | Date,
+      later: number | string | Date,
       options?: Omit<TimeAgoOptions, 'lingui'>,
     ) => {
-      return dateDiff(date, Date.now(), {lingui: _, format: options?.format})
+      return dateDiff(earlier, later, {lingui: _, format: options?.format})
     },
     [_],
   )
 }
 
-export function useTimeAgo(
-  date: number | string | Date,
-  options?: Omit<TimeAgoOptions, 'lingui'>,
-): string {
-  const timeAgo = useGetTimeAgo()
-  return useMemo(() => {
-    return timeAgo(date, {...options})
-  }, [date, options, timeAgo])
-}
-
 const NOW = 5
 const MINUTE = 60
 const HOUR = MINUTE * 60
diff --git a/src/view/com/util/TimeElapsed.tsx b/src/view/com/util/TimeElapsed.tsx
index d939b316..a4958518 100644
--- a/src/view/com/util/TimeElapsed.tsx
+++ b/src/view/com/util/TimeElapsed.tsx
@@ -15,12 +15,14 @@ export function TimeElapsed({
   const ago = useGetTimeAgo()
   const format = timeToString ?? ago
   const tick = useTickEveryMinute()
-  const [timeElapsed, setTimeAgo] = React.useState(() => format(timestamp))
+  const [timeElapsed, setTimeAgo] = React.useState(() =>
+    format(timestamp, tick),
+  )
 
   const [prevTick, setPrevTick] = React.useState(tick)
   if (prevTick !== tick) {
     setPrevTick(tick)
-    setTimeAgo(format(timestamp))
+    setTimeAgo(format(timestamp, tick))
   }
 
   return children({timeElapsed})
diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx
index e10aa83a..e6040b77 100644
--- a/src/view/screens/Log.tsx
+++ b/src/view/screens/Log.tsx
@@ -7,6 +7,7 @@ import {useFocusEffect} from '@react-navigation/native'
 
 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
 import {getEntries} from '#/logger/logDump'
+import {useTickEveryMinute} from '#/state/shell'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {usePalette} from 'lib/hooks/usePalette'
 import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
@@ -24,6 +25,7 @@ export function LogScreen({}: NativeStackScreenProps<
   const setMinimalShellMode = useSetMinimalShellMode()
   const [expanded, setExpanded] = React.useState<string[]>([])
   const timeAgo = useGetTimeAgo()
+  const tick = useTickEveryMinute()
 
   useFocusEffect(
     React.useCallback(() => {
@@ -72,7 +74,7 @@ export function LogScreen({}: NativeStackScreenProps<
                     />
                   ) : undefined}
                   <Text type="sm" style={[styles.ts, pal.textLight]}>
-                    {timeAgo(entry.timestamp)}
+                    {timeAgo(entry.timestamp, tick)}
                   </Text>
                 </TouchableOpacity>
                 {expanded.includes(entry.id) ? (