DS Boyce
480 lines
16 KiB
TypeScript
480 lines
16 KiB
TypeScript
import {useEffect} from 'react'
|
||
import {View} from 'react-native'
|
||
import {
|
||
ChatBskyGroupDefs,
|
||
ChatBskyGroupRequestJoin,
|
||
ChatBskyGroupWithdrawJoinRequest,
|
||
moderateProfile,
|
||
} from '@atproto/api'
|
||
import {Trans, useLingui} from '@lingui/react/macro'
|
||
import {useNavigation} from '@react-navigation/native'
|
||
import {useQueryClient} from '@tanstack/react-query'
|
||
|
||
import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
|
||
import {useCallOnce} from '#/lib/once'
|
||
import {makeProfileLink} from '#/lib/routes/links'
|
||
import {type NavigationProp} from '#/lib/routes/types'
|
||
import {isNetworkError} from '#/lib/strings/errors'
|
||
import {sanitizeHandle} from '#/lib/strings/handles'
|
||
import {logger} from '#/logger'
|
||
import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
||
import {
|
||
invalidateJoinLinkPreviewsForCode,
|
||
setJoinLinkPreviewRequestedForCode,
|
||
useJoinLinkPreviewsQuery,
|
||
} from '#/state/queries/join-links'
|
||
import {useRequestJoinGroupChat} from '#/state/queries/messages/request-join-group-chat'
|
||
import {useWithdrawJoinGroupChatRequest} from '#/state/queries/messages/withdraw-join-group-chat'
|
||
import {useSession} from '#/state/session'
|
||
import {atoms as a, useTheme, web} from '#/alf'
|
||
import {AvatarBubbles} from '#/components/AvatarBubbles'
|
||
import {
|
||
Button,
|
||
type ButtonColor,
|
||
ButtonIcon,
|
||
ButtonText,
|
||
} from '#/components/Button'
|
||
import * as Dialog from '#/components/Dialog'
|
||
import {useInteractionState} from '#/components/hooks/useInteractionState'
|
||
import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow'
|
||
import {ArrowBoxRight_Stroke2_Corner3_Rounded as JoinIcon} from '#/components/icons/ArrowBoxRight'
|
||
import {ChainLinkBroken_Stroke2_Corner0_Rounded as ChainLinkBrokenIcon} from '#/components/icons/ChainLink'
|
||
import {PersonGroup_Stroke2_Corner2_Rounded as PersonGroupIcon} from '#/components/icons/Person'
|
||
import {RaisingHand4Finger_Stroke2_Corner2_Rounded as HandIcon} from '#/components/icons/RaisingHand'
|
||
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
|
||
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
|
||
import {useIntentDialogs} from '#/components/intents/IntentDialogs'
|
||
import {InlineLinkText} from '#/components/Link'
|
||
import {Loader} from '#/components/Loader'
|
||
import * as Toast from '#/components/Toast'
|
||
import {Text} from '#/components/Typography'
|
||
import {useAnalytics} from '#/analytics'
|
||
import {ProfileBadges} from '../ProfileBadges'
|
||
|
||
export function GroupChatJoinDialog() {
|
||
const {groupChatJoinDialogControl, groupChatJoinState} = useIntentDialogs()
|
||
|
||
return (
|
||
<Dialog.Outer
|
||
control={groupChatJoinDialogControl}
|
||
nativeOptions={{preventExpansion: true}}>
|
||
<Dialog.Handle />
|
||
<GroupChatJoinDialogInner code={groupChatJoinState?.code} />
|
||
</Dialog.Outer>
|
||
)
|
||
}
|
||
|
||
function GroupChatJoinDialogInner({code}: {code?: string}) {
|
||
const {t: l} = useLingui()
|
||
|
||
return (
|
||
<Dialog.ScrollableInner
|
||
label={l`Join group chat`}
|
||
style={[web({maxWidth: 400, borderRadius: 36})]}>
|
||
<View style={[a.gap_2xl, a.align_center]}>
|
||
<GroupChatJoinDialogContent code={code} />
|
||
</View>
|
||
<Dialog.Close />
|
||
</Dialog.ScrollableInner>
|
||
)
|
||
}
|
||
|
||
function GroupChatJoinDialogContent({code}: {code?: string}) {
|
||
const t = useTheme()
|
||
const {t: l} = useLingui()
|
||
const {groupChatJoinDialogControl: control} = useIntentDialogs()
|
||
const {hasSession} = useSession()
|
||
const moderationOpts = useModerationOpts()
|
||
const navigation = useNavigation<NavigationProp>()
|
||
const queryClient = useQueryClient()
|
||
const ax = useAnalytics()
|
||
|
||
const logViewOnce = useCallOnce()
|
||
useEffect(() => {
|
||
logViewOnce(() => {
|
||
ax.metric('groupchat:landingPage:view', {hasSession})
|
||
})
|
||
}, [ax, hasSession, logViewOnce])
|
||
|
||
const {data, error, isLoading} = useJoinLinkPreviewsQuery({
|
||
codes: code ? [code] : undefined,
|
||
hasSession,
|
||
staleTime: 0,
|
||
})
|
||
|
||
const {mutate: joinGroupChat, isPending: isJoinPending} =
|
||
useRequestJoinGroupChat({
|
||
onSuccess: data => {
|
||
switch (data.status) {
|
||
case 'pending':
|
||
// Optimistically mark the link as requested so any invite cards
|
||
// backed by the preview cache (e.g. the DM embed) flip to
|
||
// "Requested" right away, rather than waiting on a server refetch
|
||
// that can lag behind the write.
|
||
if (code)
|
||
setJoinLinkPreviewRequestedForCode(queryClient, code, true)
|
||
ax.metric('groupchat:inviteLink:redeem', {})
|
||
control.close(() => {
|
||
Toast.show(
|
||
l`Access requested! The group owner will review your request.`,
|
||
)
|
||
})
|
||
break
|
||
case 'joined': {
|
||
if (data.convo && data.convo.id) {
|
||
// Refetch so invite cards pick up the resolved convo and switch
|
||
// their action to "Open chat".
|
||
if (code)
|
||
void invalidateJoinLinkPreviewsForCode(queryClient, code)
|
||
ax.metric('groupchat:inviteLink:redeem', {})
|
||
control.close(() => {
|
||
Toast.show(l`Successfully joined the group chat!`)
|
||
navigation.navigate('MessagesConversation', {
|
||
conversation: data.convo!.id,
|
||
})
|
||
})
|
||
} else {
|
||
logger.warn('Request to join group chat returned no convo ID', {
|
||
status: data.status,
|
||
convoId: data.convo?.id,
|
||
})
|
||
}
|
||
break
|
||
}
|
||
}
|
||
},
|
||
onError: error => {
|
||
let errorMessage = l`Failed to join the group chat. Please try again.`
|
||
if (isNetworkError(error)) {
|
||
errorMessage = l`There was a problem with your internet connection, please try again`
|
||
} else if (error instanceof ChatBskyGroupRequestJoin.ConvoLockedError) {
|
||
errorMessage = l`This conversation is locked.`
|
||
} else if (
|
||
error instanceof ChatBskyGroupRequestJoin.FollowRequiredError
|
||
) {
|
||
errorMessage = l`Only followers can join this group chat.`
|
||
} else if (error instanceof ChatBskyGroupRequestJoin.InvalidCodeError) {
|
||
errorMessage = l`Invalid group chat code.`
|
||
} else if (
|
||
error instanceof ChatBskyGroupRequestJoin.LinkDisabledError
|
||
) {
|
||
errorMessage = l`This invite link has been disabled.`
|
||
} else if (
|
||
error instanceof ChatBskyGroupRequestJoin.MemberLimitReachedError
|
||
) {
|
||
errorMessage = l`The member limit has been reached.`
|
||
const preview = data?.joinLinkPreviews[0]
|
||
if (
|
||
ChatBskyGroupDefs.isJoinLinkPreviewView(preview) &&
|
||
preview.convo?.id
|
||
) {
|
||
ax.metric('groupchat:join:memberLimitReached', {
|
||
convoId: preview.convo.id,
|
||
})
|
||
}
|
||
} else if (error instanceof ChatBskyGroupRequestJoin.UserKickedError) {
|
||
errorMessage = l`You have been previously removed from this group and can’t join it using this link.`
|
||
}
|
||
Toast.show(errorMessage)
|
||
},
|
||
})
|
||
|
||
const {mutate: withdrawRequest, isPending: isWithdrawPending} =
|
||
useWithdrawJoinGroupChatRequest({
|
||
onSuccess: () => {
|
||
// Optimistically clear the requested state so invite cards backed by
|
||
// the preview cache flip back to "Request to join" right away.
|
||
if (code) setJoinLinkPreviewRequestedForCode(queryClient, code, false)
|
||
control.close(() => {
|
||
Toast.show(l`Join request rescinded.`)
|
||
})
|
||
},
|
||
onError: error => {
|
||
let errorMessage = l`Failed to rescind your request. Please try again.`
|
||
if (isNetworkError(error)) {
|
||
errorMessage = l`There was a problem with your internet connection, please try again`
|
||
} else if (
|
||
error instanceof
|
||
ChatBskyGroupWithdrawJoinRequest.InvalidJoinRequestError
|
||
) {
|
||
errorMessage = l`Invalid rescind request.`
|
||
}
|
||
Toast.show(errorMessage)
|
||
},
|
||
})
|
||
|
||
const {
|
||
state: interacted,
|
||
onIn: onInteract,
|
||
onOut: onInteractOut,
|
||
} = useInteractionState()
|
||
|
||
const handleJoin = () => {
|
||
if (!code) return
|
||
joinGroupChat({code})
|
||
}
|
||
|
||
const handleWithdraw = () => {
|
||
if (!convoId) return
|
||
withdrawRequest({convoId})
|
||
}
|
||
|
||
// Fallback if the prefetch exceeds the timeout
|
||
if (isLoading || !data || !moderationOpts) {
|
||
return (
|
||
<View style={[a.p_2xl]}>
|
||
<Loader size="xl" />
|
||
</View>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<>
|
||
<ChainLinkBrokenIcon fill={t.palette.primary_500} size="3xl" />
|
||
<Text style={[a.text_center, a.text_lg, a.font_semi_bold]}>
|
||
<Trans>This invite link is invalid</Trans>
|
||
</Text>
|
||
<Button
|
||
label={l`Close this dialog`}
|
||
accessibilityHint={l`Close this dialog`}
|
||
onPress={() => control.close()}
|
||
color="primary"
|
||
size="large"
|
||
style={[a.w_full]}>
|
||
<ButtonText>
|
||
<Trans>Close</Trans>
|
||
</ButtonText>
|
||
</Button>
|
||
</>
|
||
)
|
||
}
|
||
|
||
const joinLinkPreview = data.joinLinkPreviews[0]
|
||
|
||
if (!ChatBskyGroupDefs.isJoinLinkPreviewView(joinLinkPreview)) {
|
||
return (
|
||
<>
|
||
<View style={[a.py_lg, a.align_center]}>
|
||
<View style={[a.gap_sm, a.align_center, a.mt_lg]}>
|
||
<WarningIcon size="3xl" fill={t.atoms.text_contrast_high.color} />
|
||
<Text
|
||
style={[
|
||
a.mb_2xs,
|
||
a.text_center,
|
||
a.text_lg,
|
||
a.font_medium,
|
||
t.atoms.text_contrast_high,
|
||
]}>
|
||
<Trans>Chat invite link no longer available</Trans>
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<Button
|
||
testID="joinButton"
|
||
onPress={() => control.close()}
|
||
label={l`Close this dialog`}
|
||
accessibilityHint={l`Close this dialog`}
|
||
size="large"
|
||
color="secondary"
|
||
style={[a.w_full]}>
|
||
<ButtonText>{l`Close`}</ButtonText>
|
||
</Button>
|
||
</>
|
||
)
|
||
}
|
||
|
||
const convoId = joinLinkPreview.convoId
|
||
const isFollowing = joinLinkPreview.owner.viewer?.followedBy ?? false
|
||
const hasRequested =
|
||
!joinLinkPreview.convo && joinLinkPreview.viewer?.requestedAt != null
|
||
|
||
let canJoin = true
|
||
let ButtonIconImage = isJoinPending || isWithdrawPending ? Loader : JoinIcon
|
||
let buttonText = joinLinkPreview.requireApproval
|
||
? l`Request to join`
|
||
: l`Join`
|
||
let buttonColor: ButtonColor = 'primary'
|
||
if (joinLinkPreview.memberCount >= joinLinkPreview.memberLimit) {
|
||
canJoin = false
|
||
ButtonIconImage = HandIcon
|
||
buttonText = l`This chat is full`
|
||
buttonColor = 'secondary'
|
||
} else if (joinLinkPreview.joinRule === 'followedByOwner' && !isFollowing) {
|
||
canJoin = false
|
||
ButtonIconImage = HandIcon
|
||
buttonText = l`Only people the chat owner follows can join`
|
||
buttonColor = 'secondary'
|
||
} else if (hasRequested) {
|
||
ButtonIconImage = XIcon
|
||
buttonText = l`Rescind request`
|
||
buttonColor = 'secondary'
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<View style={[a.w_full, a.py_lg, a.align_center]}>
|
||
<AvatarBubbles
|
||
profiles={[
|
||
joinLinkPreview.owner,
|
||
...Array(joinLinkPreview.memberCount - 1).fill(undefined),
|
||
]}
|
||
self
|
||
size={135}
|
||
/>
|
||
<View style={[a.w_full, a.gap_sm, a.align_center, a.mt_lg]}>
|
||
<View>
|
||
<Text
|
||
style={[
|
||
a.mb_2xs,
|
||
a.text_center,
|
||
a.text_sm,
|
||
a.font_medium,
|
||
t.atoms.text_contrast_high,
|
||
]}>
|
||
<Trans>Group chat</Trans>
|
||
</Text>
|
||
<Text style={[a.text_center, a.text_3xl, a.font_bold]}>
|
||
{joinLinkPreview.name}
|
||
</Text>
|
||
</View>
|
||
<View style={[a.flex_row, a.align_center]}>
|
||
<Text style={[a.text_center, a.text_xs, a.leading_snug]}>
|
||
<Trans comment="The number of active group chat members out of the total number allowed.">
|
||
{joinLinkPreview.memberCount}/{joinLinkPreview.memberLimit}{' '}
|
||
members
|
||
</Trans>
|
||
</Text>
|
||
<View style={[a.flex_row, a.ml_md]}>
|
||
<PersonGroupIcon size="xs" style={[a.mr_xs, t.atoms.text]} />
|
||
</View>
|
||
<Text style={[a.text_center, a.text_xs, a.leading_snug]}>
|
||
{joinLinkPreview.joinRule === 'followedByOwner'
|
||
? l`Followers can join`
|
||
: l`Anyone can join`}
|
||
</Text>
|
||
</View>
|
||
<View
|
||
style={[
|
||
a.px_2xl,
|
||
a.w_full,
|
||
a.flex_row,
|
||
a.gap_xs,
|
||
a.align_center,
|
||
a.justify_center,
|
||
]}>
|
||
<Text
|
||
emoji
|
||
style={[
|
||
a.flex_shrink,
|
||
a.text_center,
|
||
a.text_sm,
|
||
a.leading_snug,
|
||
a.font_semi_bold,
|
||
web({minWidth: 0}),
|
||
]}
|
||
numberOfLines={1}>
|
||
<Trans comment="The group chat creator, in the format 'By {displayName}'.">
|
||
By{' '}
|
||
<InlineLinkText
|
||
label={`@${joinLinkPreview.owner.handle}`}
|
||
to={makeProfileLink(joinLinkPreview.owner)}
|
||
style={[
|
||
a.flex_shrink,
|
||
a.leading_snug,
|
||
a.text_sm,
|
||
a.font_semi_bold,
|
||
t.atoms.text,
|
||
interacted && {
|
||
...web({
|
||
outline: 0,
|
||
textDecorationLine: 'underline',
|
||
textDecorationColor: t.palette.contrast_1000,
|
||
}),
|
||
},
|
||
]}
|
||
{...web({
|
||
onMouseEnter: () => {
|
||
onInteract()
|
||
},
|
||
onMouseLeave: () => {
|
||
onInteractOut()
|
||
},
|
||
})}>
|
||
{createSanitizedDisplayName(
|
||
joinLinkPreview.owner,
|
||
true,
|
||
moderateProfile(joinLinkPreview.owner, moderationOpts).ui(
|
||
'displayName',
|
||
),
|
||
)}
|
||
</InlineLinkText>
|
||
</Trans>
|
||
</Text>
|
||
<ProfileBadges
|
||
profile={joinLinkPreview.owner}
|
||
size="sm"
|
||
style={{marginTop: -3}}
|
||
/>
|
||
<Text
|
||
style={[
|
||
a.flex_shrink,
|
||
a.text_center,
|
||
a.leading_snug,
|
||
a.text_sm,
|
||
t.atoms.text_contrast_high,
|
||
web({minWidth: 0}),
|
||
]}
|
||
numberOfLines={1}>
|
||
{sanitizeHandle(joinLinkPreview.owner.handle, '@')}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
{joinLinkPreview.convo ? (
|
||
<Button
|
||
testID="openButton"
|
||
onPress={() => {
|
||
control.close(() => {
|
||
navigation.navigate('MessagesConversation', {
|
||
conversation: convoId,
|
||
})
|
||
})
|
||
}}
|
||
label={l`Open group chat`}
|
||
accessibilityHint={l`Open this group chat`}
|
||
size="large"
|
||
color="primary"
|
||
disabled={!code}
|
||
style={[a.w_full]}>
|
||
<ButtonText>
|
||
<Trans>Open chat</Trans>
|
||
</ButtonText>
|
||
<ButtonIcon icon={ArrowRightIcon} />
|
||
</Button>
|
||
) : (
|
||
<Button
|
||
testID="joinButton"
|
||
onPress={hasRequested ? handleWithdraw : handleJoin}
|
||
label={
|
||
joinLinkPreview.requireApproval
|
||
? l`Request access to group chat`
|
||
: l`Join group chat`
|
||
}
|
||
accessibilityHint={
|
||
joinLinkPreview.requireApproval
|
||
? l`Tap to request access to join this group chat`
|
||
: l`Tap to join this group chat immediately`
|
||
}
|
||
size="large"
|
||
color={buttonColor}
|
||
disabled={isJoinPending || isWithdrawPending || !code || !canJoin}
|
||
style={[a.w_full]}>
|
||
<ButtonIcon icon={ButtonIconImage} />
|
||
<ButtonText>{buttonText}</ButtonText>
|
||
</Button>
|
||
)}
|
||
</>
|
||
)
|
||
}
|