Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 witchsky.app
bluesky fork client
Something went wrong. Try again.
3.7 kB · 113 lines
TSX
at prod
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114import {useCallback} from 'react'import {View} from 'react-native'import {msg} from '@lingui/core/macro'import {useLingui} from '@lingui/react'import {Trans} from '@lingui/react/macro'import {useNavigation} from '@react-navigation/native'
import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification'import {type NavigationProp} from '#/lib/routes/types'import {getShapeStyle} from '#/lib/shapes'import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'import {useGetConvoAvailabilityQuery} from '#/state/queries/messages/get-convo-availability'import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'import {atoms as a, useTheme} from '#/alf'import {Button, ButtonIcon} from '#/components/Button'import {canBeMessaged} from '#/components/dms/util'import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'import * as Toast from '#/components/Toast'import {useAnalytics} from '#/analytics'import {type app} from '#/lexicons'
export function MessageProfileButton({ profile,}: { profile: app.bsky.actor.defs.ProfileViewDetailed}) { const {_} = useLingui() const t = useTheme() const ax = useAnalytics() const navigation = useNavigation<NavigationProp>() const requireEmailVerification = useRequireEmailVerification()
const enableSquareButtons = useEnableSquareButtons()
const {data: convoAvailability} = useGetConvoAvailabilityQuery(profile.did) const {mutate: initiateConvo} = useGetConvoForMembers({ onSuccess: ({convo}) => { ax.metric('chat:open', {logContext: 'ProfileHeader'}) navigation.navigate('MessagesConversation', {conversation: convo.id}) }, onError: () => { Toast.show(_(msg`Failed to create conversation`)) }, })
const onPress = useCallback(() => { if (!convoAvailability?.canChat) { return }
if (convoAvailability.convo) { ax.metric('chat:open', {logContext: 'ProfileHeader'}) navigation.navigate('MessagesConversation', { conversation: convoAvailability.convo.id, }) } else { ax.metric('chat:create', {logContext: 'ProfileHeader'}) initiateConvo([profile.did]) } }, [ax, navigation, profile.did, initiateConvo, convoAvailability])
const wrappedOnPress = requireEmailVerification(onPress, { instructions: [ <Trans key="message"> Before you can message another user, you must first verify your email. </Trans>, ], })
if (!convoAvailability) { // show pending state based on declaration if (canBeMessaged(profile)) { return ( <View testID="dmBtnLoading" aria-hidden={true} style={[ a.justify_center, a.align_center, t.atoms.bg_contrast_25, getShapeStyle(enableSquareButtons, a.rounded_sm, a.rounded_full), // Matches size of button below to avoid layout shift {width: 33, height: 33}, ]}> <Message style={[t.atoms.text, {opacity: 0.3}]} size="md" /> </View> ) } else { return null } }
if (convoAvailability.canChat) { return ( <> <Button accessibilityRole="button" testID="dmBtn" size="small" color="secondary" variant="solid" shape={enableSquareButtons ? 'square' : 'round'} label={_(msg`Message ${profile.handle}`)} style={[a.justify_center]} onPress={wrappedOnPress}> <ButtonIcon icon={Message} size="md" /> </Button> </> ) } else { return null }}