diff options
Diffstat (limited to 'src/components/dms')
-rw-r--r-- | src/components/dms/ActionsWrapper.tsx | 16 | ||||
-rw-r--r-- | src/components/dms/ChatEmptyPill.tsx | 6 | ||||
-rw-r--r-- | src/components/dms/ConvoMenu.tsx | 2 | ||||
-rw-r--r-- | src/components/dms/LeaveConvoPrompt.tsx | 1 | ||||
-rw-r--r-- | src/components/dms/MessageItem.tsx | 3 | ||||
-rw-r--r-- | src/components/dms/MessageMenu.tsx | 2 | ||||
-rw-r--r-- | src/components/dms/MessageProfileButton.tsx | 56 | ||||
-rw-r--r-- | src/components/dms/NewMessagesPill.tsx | 6 | ||||
-rw-r--r-- | src/components/dms/ReportConversationPrompt.tsx | 1 | ||||
-rw-r--r-- | src/components/dms/dialogs/NewChatDialog.tsx | 22 | ||||
-rw-r--r-- | src/components/dms/dialogs/SearchablePeopleList.tsx | 3 | ||||
-rw-r--r-- | src/components/dms/dialogs/ShareViaChatDialog.tsx | 2 |
12 files changed, 83 insertions, 37 deletions
diff --git a/src/components/dms/ActionsWrapper.tsx b/src/components/dms/ActionsWrapper.tsx index b77516e7b..a087fed3f 100644 --- a/src/components/dms/ActionsWrapper.tsx +++ b/src/components/dms/ActionsWrapper.tsx @@ -34,7 +34,7 @@ export function ActionsWrapper({ const scale = useSharedValue(1) const animatedStyle = useAnimatedStyle(() => ({ - transform: [{scale: scale.value}], + transform: [{scale: scale.get()}], })) const open = React.useCallback(() => { @@ -46,7 +46,7 @@ export function ActionsWrapper({ const shrink = React.useCallback(() => { 'worklet' cancelAnimation(scale) - scale.value = withTiming(1, {duration: 200}) + scale.set(() => withTiming(1, {duration: 200})) }, [scale]) const doubleTapGesture = Gesture.Tap() @@ -58,11 +58,13 @@ export function ActionsWrapper({ const pressAndHoldGesture = Gesture.LongPress() .onStart(() => { 'worklet' - scale.value = withTiming(1.05, {duration: 200}, finished => { - if (!finished) return - runOnJS(open)() - shrink() - }) + scale.set(() => + withTiming(1.05, {duration: 200}, finished => { + if (!finished) return + runOnJS(open)() + shrink() + }), + ) }) .onTouchesUp(shrink) .onTouchesMove(shrink) diff --git a/src/components/dms/ChatEmptyPill.tsx b/src/components/dms/ChatEmptyPill.tsx index ffd022f56..042c3ad76 100644 --- a/src/components/dms/ChatEmptyPill.tsx +++ b/src/components/dms/ChatEmptyPill.tsx @@ -42,12 +42,12 @@ export function ChatEmptyPill() { const onPressIn = React.useCallback(() => { if (isWeb) return - scale.value = withTiming(1.075, {duration: 100}) + scale.set(() => withTiming(1.075, {duration: 100})) }, [scale]) const onPressOut = React.useCallback(() => { if (isWeb) return - scale.value = withTiming(1, {duration: 100}) + scale.set(() => withTiming(1, {duration: 100})) }, [scale]) const onPress = React.useCallback(() => { @@ -61,7 +61,7 @@ export function ChatEmptyPill() { }, [playHaptic, prompts.length]) const animatedStyle = useAnimatedStyle(() => ({ - transform: [{scale: scale.value}], + transform: [{scale: scale.get()}], })) return ( diff --git a/src/components/dms/ConvoMenu.tsx b/src/components/dms/ConvoMenu.tsx index affc292c1..e1f8df10b 100644 --- a/src/components/dms/ConvoMenu.tsx +++ b/src/components/dms/ConvoMenu.tsx @@ -115,7 +115,7 @@ let ConvoMenu = ({ {...props} onPress={() => { Keyboard.dismiss() - // eslint-disable-next-line react/prop-types -- eslint is confused by the name `props` + props.onPress() }} style={[ diff --git a/src/components/dms/LeaveConvoPrompt.tsx b/src/components/dms/LeaveConvoPrompt.tsx index 2baa07b46..cc18c1ab4 100644 --- a/src/components/dms/LeaveConvoPrompt.tsx +++ b/src/components/dms/LeaveConvoPrompt.tsx @@ -1,4 +1,3 @@ -import React from 'react' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index 52220e2ca..79f0997fd 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -19,10 +19,11 @@ import {ConvoItem} from '#/state/messages/convo/types' import {useSession} from '#/state/session' import {TimeElapsed} from '#/view/com/util/TimeElapsed' import {atoms as a, useTheme} from '#/alf' +import {isOnlyEmoji} from '#/alf/typography' import {ActionsWrapper} from '#/components/dms/ActionsWrapper' import {InlineLinkText} from '#/components/Link' import {Text} from '#/components/Typography' -import {isOnlyEmoji, RichText} from '../RichText' +import {RichText} from '../RichText' import {DateDivider} from './DateDivider' import {MessageItemEmbed} from './MessageItemEmbed' import {localDateString} from './util' diff --git a/src/components/dms/MessageMenu.tsx b/src/components/dms/MessageMenu.tsx index c1867e727..90ee5b979 100644 --- a/src/components/dms/MessageMenu.tsx +++ b/src/components/dms/MessageMenu.tsx @@ -62,7 +62,7 @@ export let MessageMenu = ({ message.text, langPrefs.primaryLanguage, ) - openLink(translatorUrl) + openLink(translatorUrl, true) }, [langPrefs.primaryLanguage, message.text, openLink]) const onDelete = React.useCallback(() => { diff --git a/src/components/dms/MessageProfileButton.tsx b/src/components/dms/MessageProfileButton.tsx index 932982d05..22936b4c0 100644 --- a/src/components/dms/MessageProfileButton.tsx +++ b/src/components/dms/MessageProfileButton.tsx @@ -3,14 +3,18 @@ import {View} from 'react-native' import {AppBskyActorDefs} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' +import {useEmail} from '#/lib/hooks/useEmail' +import {NavigationProp} from '#/lib/routes/types' import {logEvent} from '#/lib/statsig/statsig' import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members' import {atoms as a, useTheme} from '#/alf' -import {ButtonIcon} from '#/components/Button' +import {Button, ButtonIcon} from '#/components/Button' import {canBeMessaged} from '#/components/dms/util' import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message' -import {Link} from '#/components/Link' +import {useDialogControl} from '../Dialog' +import {VerifyEmailDialog} from '../dialogs/VerifyEmailDialog' export function MessageProfileButton({ profile, @@ -19,15 +23,29 @@ export function MessageProfileButton({ }) { const {_} = useLingui() const t = useTheme() + const navigation = useNavigation<NavigationProp>() + const {needsEmailVerification} = useEmail() + const verifyEmailControl = useDialogControl() const {data: convo, isPending} = useMaybeConvoForUser(profile.did) const onPress = React.useCallback(() => { + if (!convo?.id) { + return + } + + if (needsEmailVerification) { + verifyEmailControl.open() + return + } + if (convo && !convo.lastMessage) { logEvent('chat:create', {logContext: 'ProfileHeader'}) } logEvent('chat:open', {logContext: 'ProfileHeader'}) - }, [convo]) + + navigation.navigate('MessagesConversation', {conversation: convo.id}) + }, [needsEmailVerification, verifyEmailControl, convo, navigation]) if (isPending) { // show pending state based on declaration @@ -53,18 +71,26 @@ export function MessageProfileButton({ if (convo) { return ( - <Link - testID="dmBtn" - size="small" - color="secondary" - variant="solid" - shape="round" - label={_(msg`Message ${profile.handle}`)} - to={`/messages/${convo.id}`} - style={[a.justify_center]} - onPress={onPress}> - <ButtonIcon icon={Message} size="md" /> - </Link> + <> + <Button + accessibilityRole="button" + testID="dmBtn" + size="small" + color="secondary" + variant="solid" + shape="round" + label={_(msg`Message ${profile.handle}`)} + style={[a.justify_center]} + onPress={onPress}> + <ButtonIcon icon={Message} size="md" /> + </Button> + <VerifyEmailDialog + reasonText={_( + msg`Before you may message another user, you must first verify your email.`, + )} + control={verifyEmailControl} + /> + </> ) } else { return null diff --git a/src/components/dms/NewMessagesPill.tsx b/src/components/dms/NewMessagesPill.tsx index 2f7ff8f4b..e3bc0c1f8 100644 --- a/src/components/dms/NewMessagesPill.tsx +++ b/src/components/dms/NewMessagesPill.tsx @@ -35,12 +35,12 @@ export function NewMessagesPill({ const onPressIn = React.useCallback(() => { if (isWeb) return - scale.value = withTiming(1.075, {duration: 100}) + scale.set(() => withTiming(1.075, {duration: 100})) }, [scale]) const onPressOut = React.useCallback(() => { if (isWeb) return - scale.value = withTiming(1, {duration: 100}) + scale.set(() => withTiming(1, {duration: 100})) }, [scale]) const onPress = React.useCallback(() => { @@ -49,7 +49,7 @@ export function NewMessagesPill({ }, [onPressInner, playHaptic]) const animatedStyle = useAnimatedStyle(() => ({ - transform: [{scale: scale.value}], + transform: [{scale: scale.get()}], })) return ( diff --git a/src/components/dms/ReportConversationPrompt.tsx b/src/components/dms/ReportConversationPrompt.tsx index 610cfbcf9..6bb26a60f 100644 --- a/src/components/dms/ReportConversationPrompt.tsx +++ b/src/components/dms/ReportConversationPrompt.tsx @@ -1,4 +1,3 @@ -import React from 'react' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' diff --git a/src/components/dms/dialogs/NewChatDialog.tsx b/src/components/dms/dialogs/NewChatDialog.tsx index e80fef2d7..c7fedb488 100644 --- a/src/components/dms/dialogs/NewChatDialog.tsx +++ b/src/components/dms/dialogs/NewChatDialog.tsx @@ -1,7 +1,8 @@ -import React, {useCallback} from 'react' +import {useCallback} from 'react' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useEmail} from '#/lib/hooks/useEmail' import {logEvent} from '#/lib/statsig/statsig' import {logger} from '#/logger' import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members' @@ -9,6 +10,8 @@ import {FAB} from '#/view/com/util/fab/FAB' import * as Toast from '#/view/com/util/Toast' import {useTheme} from '#/alf' import * as Dialog from '#/components/Dialog' +import {useDialogControl} from '#/components/Dialog' +import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog' import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' import {SearchablePeopleList} from './SearchablePeopleList' @@ -21,6 +24,8 @@ export function NewChat({ }) { const t = useTheme() const {_} = useLingui() + const {needsEmailVerification} = useEmail() + const verifyEmailControl = useDialogControl() const {mutate: createChat} = useGetConvoForMembers({ onSuccess: data => { @@ -48,7 +53,13 @@ export function NewChat({ <> <FAB testID="newChatFAB" - onPress={control.open} + onPress={() => { + if (needsEmailVerification) { + verifyEmailControl.open() + } else { + control.open() + } + }} icon={<Plus size="lg" fill={t.palette.white} />} accessibilityRole="button" accessibilityLabel={_(msg`New chat`)} @@ -62,6 +73,13 @@ export function NewChat({ onSelectChat={onCreateChat} /> </Dialog.Outer> + + <VerifyEmailDialog + reasonText={_( + msg`Before you may message another user, you must first verify your email.`, + )} + control={verifyEmailControl} + /> </> ) } diff --git a/src/components/dms/dialogs/SearchablePeopleList.tsx b/src/components/dms/dialogs/SearchablePeopleList.tsx index a5687a096..bc7fcbe56 100644 --- a/src/components/dms/dialogs/SearchablePeopleList.tsx +++ b/src/components/dms/dialogs/SearchablePeopleList.tsx @@ -278,7 +278,7 @@ export function SearchablePeopleList({ ) : null} </View> - <View style={[, web([a.pt_xs])]}> + <View style={web([a.pt_xs])}> <SearchInput inputRef={inputRef} value={searchText} @@ -313,6 +313,7 @@ export function SearchablePeopleList({ web([a.py_0, {height: '100vh', maxHeight: 600}, a.px_0]), native({height: '100%'}), ]} + webInnerContentContainerStyle={a.py_0} webInnerStyle={[a.py_0, {maxWidth: 500, minWidth: 200}]} keyboardDismissMode="on-drag" /> diff --git a/src/components/dms/dialogs/ShareViaChatDialog.tsx b/src/components/dms/dialogs/ShareViaChatDialog.tsx index 38b558343..4bb27ae69 100644 --- a/src/components/dms/dialogs/ShareViaChatDialog.tsx +++ b/src/components/dms/dialogs/ShareViaChatDialog.tsx @@ -1,4 +1,4 @@ -import React, {useCallback} from 'react' +import {useCallback} from 'react' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' |