fix merge error
This commit is contained in:
@@ -1,88 +1,85 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import {Pressable, View} from 'react-native'
|
import {View} from 'react-native'
|
||||||
import {AppBskyActorDefs, AppBskyGraphStarterpack} from '@atproto/api'
|
import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
|
||||||
import {msg, Trans} from '@lingui/macro'
|
import {msg, Trans} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
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 {HITSLOP_10} from 'lib/constants'
|
||||||
import {useTimeAgo} from 'lib/hooks/useTimeAgo'
|
import {sanitizeDisplayName} from 'lib/strings/display-names'
|
||||||
import {isNative} from 'platform/detection'
|
import {atoms as a} from '#/alf'
|
||||||
import {useSession} from 'state/session'
|
import {Button} from '#/components/Button'
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
|
||||||
import * as Dialog from '#/components/Dialog'
|
import * as Dialog from '#/components/Dialog'
|
||||||
import {useDialogControl} from '#/components/Dialog'
|
import {useDialogControl} from '#/components/Dialog'
|
||||||
import {Newskie} from '#/components/icons/Newskie'
|
import {Newskie} from '#/components/icons/Newskie'
|
||||||
import {Default as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
|
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
|
|
||||||
export function NewskieDialog({
|
export function NewskieDialog({
|
||||||
profile,
|
profile,
|
||||||
|
disabled,
|
||||||
}: {
|
}: {
|
||||||
profile: AppBskyActorDefs.ProfileViewDetailed
|
profile: AppBskyActorDefs.ProfileViewDetailed
|
||||||
|
disabled?: boolean
|
||||||
}) {
|
}) {
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const {currentAccount} = useSession()
|
const moderationOpts = useModerationOpts()
|
||||||
const t = useTheme()
|
|
||||||
const control = useDialogControl()
|
const control = useDialogControl()
|
||||||
const {joinedViaStarterPack} = profile
|
const profileName = React.useMemo(() => {
|
||||||
const profileName = profile.displayName || `@${profile.handle}`
|
const name = profile.displayName || profile.handle
|
||||||
const createdAt = profile.createdAt ?? 0
|
if (!moderationOpts) return name
|
||||||
const timeAgo = useTimeAgo(createdAt, {format: 'long'})
|
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 (
|
return (
|
||||||
<>
|
<View style={[a.pr_2xs]}>
|
||||||
<Pressable
|
<Button
|
||||||
accessibilityRole="button"
|
disabled={disabled}
|
||||||
accessibilityLabel={_(msg`Open new user info dialog`)}
|
label={_(
|
||||||
accessibilityHint={_(
|
msg`This user is new here. Press for more info about when they joined.`,
|
||||||
msg`Opens a dialog with information about the new user`,
|
|
||||||
)}
|
)}
|
||||||
hitSlop={HITSLOP_10}
|
hitSlop={HITSLOP_10}
|
||||||
onPress={control.open}>
|
onPress={control.open}>
|
||||||
<Newskie size={22} />
|
{({hovered, pressed}) => (
|
||||||
</Pressable>
|
<Newskie
|
||||||
|
size="lg"
|
||||||
|
fill="#FFC404"
|
||||||
|
style={{
|
||||||
|
opacity: hovered || pressed ? 0.5 : 1,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Dialog.Outer control={control}>
|
<Dialog.Outer control={control}>
|
||||||
<Dialog.Handle />
|
<Dialog.Handle />
|
||||||
<Dialog.ScrollableInner label={_(msg`New user info dialog`)}>
|
<Dialog.ScrollableInner
|
||||||
<View style={[a.gap_md, isNative && {marginBottom: 40}]}>
|
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]}>
|
<Text style={[a.font_bold, a.text_xl]}>
|
||||||
<Trans>Say hello!</Trans>
|
<Trans>Say hello!</Trans>
|
||||||
</Text>
|
</Text>
|
||||||
<Text style={[a.text_md]}>
|
<Text style={[a.text_md]}>
|
||||||
{AppBskyGraphStarterpack.isRecord(
|
|
||||||
joinedViaStarterPack?.record,
|
|
||||||
) ? (
|
|
||||||
<Trans>
|
<Trans>
|
||||||
{profileName} joined Bluesky {timeAgo} ago with{' '}
|
{profileName} joined Bluesky{' '}
|
||||||
{joinedViaStarterPack?.creator.did === currentAccount?.did
|
{timeAgo(createdAt, now, {format: 'long'})} ago
|
||||||
? 'your'
|
|
||||||
: `${joinedViaStarterPack?.creator.displayName}'s` ||
|
|
||||||
`@${joinedViaStarterPack?.creator.handle}'s`}{' '}
|
|
||||||
starter pack.
|
|
||||||
</Trans>
|
</Trans>
|
||||||
) : (
|
|
||||||
<Trans>
|
|
||||||
<Text style={[a.font_bold, a.text_md]}>{profileName}</Text>{' '}
|
|
||||||
recently joined Bluesky {timeAgo} ago
|
|
||||||
</Trans>
|
|
||||||
)}
|
|
||||||
</Text>
|
</Text>
|
||||||
{joinedViaStarterPack && (
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
a.border,
|
|
||||||
a.rounded_sm,
|
|
||||||
t.atoms.border_contrast_low,
|
|
||||||
a.px_sm,
|
|
||||||
a.py_md,
|
|
||||||
]}>
|
|
||||||
<StarterPackCard starterPack={joinedViaStarterPack} />
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</View>
|
</View>
|
||||||
</Dialog.ScrollableInner>
|
</Dialog.ScrollableInner>
|
||||||
</Dialog.Outer>
|
</Dialog.Outer>
|
||||||
</>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user