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({ {profileName} joined Bluesky{' '} - {timeAgo(createdAt, {format: 'long'})} ago + {timeAgo(createdAt, now, {format: 'long'})} ago 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, ) => { - 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, -): 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([]) const timeAgo = useGetTimeAgo() + const tick = useTickEveryMinute() useFocusEffect( React.useCallback(() => { @@ -72,7 +74,7 @@ export function LogScreen({}: NativeStackScreenProps< /> ) : undefined} - {timeAgo(entry.timestamp)} + {timeAgo(entry.timestamp, tick)} {expanded.includes(entry.id) ? (