zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Add useGetTimeAgo and utils (#4556)

Browse source 
* Create a testable version of ago() and re-enable the disabled test (#4364)

* Enable the test of ago()

* Use test cases

This puts the input and the expected values next to each other.

* Create dateDiff function

This is a copy of ago(), but with the ability to specify the second date instead of using Date.now().

* Let ago() use dateDiff()

* Move constants close to usage

* Test dateDiff instead of ago

This makes it possible to test the dates without being forced to rely on what the current date is.

The commented out tests do not yet pass. This is fixed in later commits.

* Update dateDiff and enable the remaining tests

* Split up tests, use date-fns as helpers

* Remove old test

* Add long format

* Add hook

* Migrate to hooks

* Delete old code

* Or equal to

* Update comment

---------

Co-authored-by: Jan Aagaard <jan@aagaard.net>
This commit is contained in:
Eric Bailey 2024-06-18 10:55:02 -05:00 • committed by GitHub
parent 08cfb09589
commit 443beda741
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 216 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/view/com/util/TimeElapsed.tsx
View file

@ -1,26 +1,26 @@
import React from 'react'
import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
import {useTickEveryMinute} from '#/state/shell'
import {ago} from 'lib/strings/time'
export function TimeElapsed({
timestamp,
children,
timeToString = ago,
timeToString,
}: {
timestamp: string
children: ({timeElapsed}: {timeElapsed: string}) => JSX.Element
timeToString?: (timeElapsed: string) => string
}) {
const ago = useGetTimeAgo()
const format = timeToString ?? ago
const tick = useTickEveryMinute()
const [timeElapsed, setTimeAgo] = React.useState(() =>
timeToString(timestamp),
)
const [timeElapsed, setTimeAgo] = React.useState(() => format(timestamp))
const [prevTick, setPrevTick] = React.useState(tick)
if (prevTick !== tick) {
setPrevTick(tick)
setTimeAgo(timeToString(timestamp))
setTimeAgo(format(timestamp))
}
return children({timeElapsed})

24
src/view/screens/Log.tsx
View file

@ -1,18 +1,19 @@
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ScrollView} from '../com/util/Views'
import {s} from 'lib/styles'
import {ViewHeader} from '../com/util/ViewHeader'
import {Text} from '../com/util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {getEntries} from '#/logger/logDump'
import {ago} from 'lib/strings/time'
import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useFocusEffect} from '@react-navigation/native'
import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
import {getEntries} from '#/logger/logDump'
import {useSetMinimalShellMode} from '#/state/shell'
import {usePalette} from 'lib/hooks/usePalette'
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
import {s} from 'lib/styles'
import {Text} from '../com/util/text/Text'
import {ViewHeader} from '../com/util/ViewHeader'
import {ScrollView} from '../com/util/Views'
export function LogScreen({}: NativeStackScreenProps<
CommonNavigatorParams,
@ -22,6 +23,7 @@ export function LogScreen({}: NativeStackScreenProps<
const {_} = useLingui()
const setMinimalShellMode = useSetMinimalShellMode()
const [expanded, setExpanded] = React.useState<string[]>([])
const timeAgo = useGetTimeAgo()
useFocusEffect(
React.useCallback(() => {
@ -70,7 +72,7 @@ export function LogScreen({}: NativeStackScreenProps<
/>
) : undefined}
<Text type="sm" style={[styles.ts, pal.textLight]}>
{ago(entry.timestamp)}
{timeAgo(entry.timestamp)}
</Text>
</TouchableOpacity>
{expanded.includes(entry.id) ? (