An ATproto social media client -- with an independent Appview.
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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
··· 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
··· 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) ? (