ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import React from 'react'
2import {View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5import {subDays} from 'date-fns'
6
7import {atoms as a, useTheme} from '#/alf'
8import {Text} from '../Typography'
9import {localDateString} from './util'
10
11const timeFormatter = new Intl.DateTimeFormat(undefined, {
12 hour: 'numeric',
13 minute: 'numeric',
14})
15const weekdayFormatter = new Intl.DateTimeFormat(undefined, {
16 weekday: 'long',
17})
18const longDateFormatter = new Intl.DateTimeFormat(undefined, {
19 weekday: 'short',
20 month: 'long',
21 day: 'numeric',
22})
23const longDateFormatterWithYear = new Intl.DateTimeFormat(undefined, {
24 weekday: 'short',
25 month: 'long',
26 day: 'numeric',
27 year: 'numeric',
28})
29
30let DateDivider = ({date: dateStr}: {date: string}): React.ReactNode => {
31 const {_} = useLingui()
32 const t = useTheme()
33
34 let date: string
35 const time = timeFormatter.format(new Date(dateStr))
36
37 const timestamp = new Date(dateStr)
38
39 const today = new Date()
40 const yesterday = subDays(today, 1)
41 const oneWeekAgo = subDays(today, 7)
42
43 if (localDateString(today) === localDateString(timestamp)) {
44 date = _(msg`Today`)
45 } else if (localDateString(yesterday) === localDateString(timestamp)) {
46 date = _(msg`Yesterday`)
47 } else {
48 if (timestamp < oneWeekAgo) {
49 if (timestamp.getFullYear() === today.getFullYear()) {
50 date = longDateFormatter.format(timestamp)
51 } else {
52 date = longDateFormatterWithYear.format(timestamp)
53 }
54 } else {
55 date = weekdayFormatter.format(timestamp)
56 }
57 }
58
59 return (
60 <View style={[a.w_full, a.my_lg]}>
61 <Text
62 style={[
63 a.text_xs,
64 a.text_center,
65 t.atoms.bg,
66 t.atoms.text_contrast_medium,
67 a.px_md,
68 ]}>
69 <Trans>
70 <Text
71 style={[a.text_xs, t.atoms.text_contrast_medium, a.font_semi_bold]}>
72 {date}
73 </Text>{' '}
74 at {time}
75 </Trans>
76 </Text>
77 </View>
78 )
79}
80DateDivider = React.memo(DateDivider)
81export {DateDivider}