Hailey
86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
import {differenceInSeconds} from 'date-fns'
|
|
|
|
import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
|
|
import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
|
import {HITSLOP_10} from 'lib/constants'
|
|
import {sanitizeDisplayName} from 'lib/strings/display-names'
|
|
import {atoms as a} from '#/alf'
|
|
import {Button} from '#/components/Button'
|
|
import * as Dialog from '#/components/Dialog'
|
|
import {useDialogControl} from '#/components/Dialog'
|
|
import {Newskie} from '#/components/icons/Newskie'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
export function NewskieDialog({
|
|
profile,
|
|
disabled,
|
|
}: {
|
|
profile: AppBskyActorDefs.ProfileViewDetailed
|
|
disabled?: boolean
|
|
}) {
|
|
const {_} = useLingui()
|
|
const moderationOpts = useModerationOpts()
|
|
const control = useDialogControl()
|
|
const profileName = React.useMemo(() => {
|
|
const name = profile.displayName || profile.handle
|
|
if (!moderationOpts) return name
|
|
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(now, new Date(createdAt)) / 86400
|
|
}, [createdAt, now])
|
|
|
|
if (!createdAt || daysOld > 7) return null
|
|
|
|
return (
|
|
<View style={[a.pr_2xs]}>
|
|
<Button
|
|
disabled={disabled}
|
|
label={_(
|
|
msg`This user is new here. Press for more info about when they joined.`,
|
|
)}
|
|
hitSlop={HITSLOP_10}
|
|
onPress={control.open}>
|
|
{({hovered, pressed}) => (
|
|
<Newskie
|
|
size="lg"
|
|
fill="#FFC404"
|
|
style={{
|
|
opacity: hovered || pressed ? 0.5 : 1,
|
|
}}
|
|
/>
|
|
)}
|
|
</Button>
|
|
|
|
<Dialog.Outer control={control}>
|
|
<Dialog.Handle />
|
|
<Dialog.ScrollableInner
|
|
label={_(msg`New user info dialog`)}
|
|
style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
|
|
<View style={[a.gap_sm]}>
|
|
<Text style={[a.font_bold, a.text_xl]}>
|
|
<Trans>Say hello!</Trans>
|
|
</Text>
|
|
<Text style={[a.text_md]}>
|
|
<Trans>
|
|
{profileName} joined Bluesky{' '}
|
|
{timeAgo(createdAt, now, {format: 'long'})} ago
|
|
</Trans>
|
|
</Text>
|
|
</View>
|
|
</Dialog.ScrollableInner>
|
|
</Dialog.Outer>
|
|
</View>
|
|
)
|
|
}
|