diff --git a/native/components/user-profile-message-button.react.js b/native/components/user-profile-message-button.react.js new file mode 100644 --- /dev/null +++ b/native/components/user-profile-message-button.react.js @@ -0,0 +1,64 @@ +// @flow + +import { useBottomSheetModal } from '@gorhom/bottom-sheet'; +import * as React from 'react'; +import { Text } from 'react-native'; + +import type { ThreadInfo } from 'lib/types/thread-types.js'; +import type { UserInfo } from 'lib/types/user-types'; + +import Button from './button.react.js'; +import SWMansionIcon from './swmansion-icon.react.js'; +import { useNavigateToThread } from '../chat/message-list-types.js'; +import { useStyles } from '../themes/colors.js'; + +type Props = { + +threadInfo: ThreadInfo, + +pendingPersonalThreadUserInfo?: UserInfo, +}; + +function UserProfileMessageButton(props: Props): React.Node { + const { threadInfo, pendingPersonalThreadUserInfo } = props; + + const { dismiss } = useBottomSheetModal(); + + const styles = useStyles(unboundStyles); + + const navigateToThread = useNavigateToThread(); + + const onPressMessage = React.useCallback(() => { + dismiss(); + navigateToThread({ + threadInfo, + pendingPersonalThreadUserInfo, + }); + }, [dismiss, navigateToThread, pendingPersonalThreadUserInfo, threadInfo]); + + return ( + + ); +} + +const unboundStyles = { + messageButtonContainer: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'purpleButton', + paddingVertical: 8, + marginTop: 16, + borderRadius: 8, + }, + messageButtonIcon: { + color: 'floatingButtonLabel', + paddingRight: 8, + }, + messageButtonText: { + color: 'floatingButtonLabel', + }, +}; + +export default UserProfileMessageButton; diff --git a/native/components/user-profile.react.js b/native/components/user-profile.react.js --- a/native/components/user-profile.react.js +++ b/native/components/user-profile.react.js @@ -4,11 +4,14 @@ import * as React from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; +import { useUserProfileThreadInfo } from 'lib/shared/thread-utils.js'; import { stringForUserExplicit } from 'lib/shared/user-utils.js'; +import { userRelationshipStatus } from 'lib/types/relationship-types.js'; import type { UserInfo } from 'lib/types/user-types'; import sleep from 'lib/utils/sleep.js'; import SWMansionIcon from './swmansion-icon.react.js'; +import UserProfileMessageButton from './user-profile-message-button.react.js'; import UserAvatar from '../avatars/user-avatar.react.js'; import SingleLine from '../components/single-line.react.js'; import { useStyles } from '../themes/colors.js'; @@ -20,6 +23,13 @@ function UserProfile(props: Props): React.Node { const { userInfo } = props; + const userBlockIsActive = + userInfo?.relationshipStatus === userRelationshipStatus.BOTH_BLOCKED || + userInfo?.relationshipStatus === userRelationshipStatus.BLOCKED_VIEWER || + userInfo?.relationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER; + + const userProfileThreadInfo = useUserProfileThreadInfo(userInfo); + const usernameText = stringForUserExplicit(userInfo); const [usernameCopied, setUsernameCopied] = React.useState(false); @@ -64,6 +74,20 @@ usernameCopied, ]); + const messageButton = React.useMemo(() => { + if (!userProfileThreadInfo || userBlockIsActive) { + return null; + } + + const { threadInfo, pendingPersonalThreadUserInfo } = userProfileThreadInfo; + return ( + + ); + }, [userBlockIsActive, userProfileThreadInfo]); + return ( @@ -74,6 +98,7 @@ {copyUsernameButton} + {messageButton} ); } @@ -113,6 +138,22 @@ color: 'purpleLink', fontSize: 12, }, + messageButtonContainer: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'purpleButton', + paddingVertical: 8, + marginTop: 16, + borderRadius: 8, + }, + messageButtonIcon: { + color: 'floatingButtonLabel', + paddingRight: 8, + }, + messageButtonText: { + color: 'floatingButtonLabel', + }, }; export default UserProfile;