An ATproto social media client -- with an independent Appview.
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
authored by
Eric Bailey
and committed by
GitHub
983d8538
fb76265f
+15
-19
+4
-3
src/components/NewskieDialog.tsx
+4
-3
src/components/NewskieDialog.tsx
···
30
30
const moderation = moderateProfile(profile, moderationOpts)
31
31
return sanitizeDisplayName(name, moderation.ui('displayName'))
32
32
}, [moderationOpts, profile])
33
+
const [now] = React.useState(Date.now())
33
34
const timeAgo = useGetTimeAgo()
34
35
const createdAt = profile.createdAt as string | undefined
35
36
const daysOld = React.useMemo(() => {
36
37
if (!createdAt) return Infinity
37
-
return differenceInSeconds(new Date(), new Date(createdAt)) / 86400
38
-
}, [createdAt])
38
+
return differenceInSeconds(now, new Date(createdAt)) / 86400
39
+
}, [createdAt, now])
39
40
40
41
if (!createdAt || daysOld > 7) return null
41
42
···
70
71
<Text style={[a.text_md]}>
71
72
<Trans>
72
73
{profileName} joined Bluesky{' '}
73
-
{timeAgo(createdAt, {format: 'long'})} ago
74
+
{timeAgo(createdAt, now, {format: 'long'})} ago
74
75
</Trans>
75
76
</Text>
76
77
</View>
+4
-13
src/lib/hooks/useTimeAgo.ts
+4
-13
src/lib/hooks/useTimeAgo.ts
···
1
-
import {useCallback, useMemo} from 'react'
1
+
import {useCallback} from 'react'
2
2
import {msg, plural} from '@lingui/macro'
3
3
import {I18nContext, useLingui} from '@lingui/react'
4
4
import {differenceInSeconds} from 'date-fns'
···
12
12
const {_} = useLingui()
13
13
return useCallback(
14
14
(
15
-
date: number | string | Date,
15
+
earlier: number | string | Date,
16
+
later: number | string | Date,
16
17
options?: Omit<TimeAgoOptions, 'lingui'>,
17
18
) => {
18
-
return dateDiff(date, Date.now(), {lingui: _, format: options?.format})
19
+
return dateDiff(earlier, later, {lingui: _, format: options?.format})
19
20
},
20
21
[_],
21
22
)
22
-
}
23
-
24
-
export function useTimeAgo(
25
-
date: number | string | Date,
26
-
options?: Omit<TimeAgoOptions, 'lingui'>,
27
-
): string {
28
-
const timeAgo = useGetTimeAgo()
29
-
return useMemo(() => {
30
-
return timeAgo(date, {...options})
31
-
}, [date, options, timeAgo])
32
23
}
33
24
34
25
const NOW = 5
+4
-2
src/view/com/util/TimeElapsed.tsx
+4
-2
src/view/com/util/TimeElapsed.tsx
···
15
15
const ago = useGetTimeAgo()
16
16
const format = timeToString ?? ago
17
17
const tick = useTickEveryMinute()
18
-
const [timeElapsed, setTimeAgo] = React.useState(() => format(timestamp))
18
+
const [timeElapsed, setTimeAgo] = React.useState(() =>
19
+
format(timestamp, tick),
20
+
)
19
21
20
22
const [prevTick, setPrevTick] = React.useState(tick)
21
23
if (prevTick !== tick) {
22
24
setPrevTick(tick)
23
-
setTimeAgo(format(timestamp))
25
+
setTimeAgo(format(timestamp, tick))
24
26
}
25
27
26
28
return children({timeElapsed})
+3
-1
src/view/screens/Log.tsx
+3
-1
src/view/screens/Log.tsx
···
7
7
8
8
import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
9
9
import {getEntries} from '#/logger/logDump'
10
+
import {useTickEveryMinute} from '#/state/shell'
10
11
import {useSetMinimalShellMode} from '#/state/shell'
11
12
import {usePalette} from 'lib/hooks/usePalette'
12
13
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
···
24
25
const setMinimalShellMode = useSetMinimalShellMode()
25
26
const [expanded, setExpanded] = React.useState<string[]>([])
26
27
const timeAgo = useGetTimeAgo()
28
+
const tick = useTickEveryMinute()
27
29
28
30
useFocusEffect(
29
31
React.useCallback(() => {
···
72
74
/>
73
75
) : undefined}
74
76
<Text type="sm" style={[styles.ts, pal.textLight]}>
75
-
{timeAgo(entry.timestamp)}
77
+
{timeAgo(entry.timestamp, tick)}
76
78
</Text>
77
79
</TouchableOpacity>
78
80
{expanded.includes(entry.id) ? (