diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js index 351fa6f8b..3c291e3cd 100644 --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -1,327 +1,328 @@ // @flow import type { RouteProp } from '@react-navigation/native'; import type { ActionResultModalParams } from './action-result-modal.react.js'; import type { InviteLinkModalParams } from './invite-link-modal.react'; import type { AvatarSelectionParams } from '../account/registration/avatar-selection.react.js'; import type { ConnectEthereumParams } from '../account/registration/connect-ethereum.react.js'; import type { EmojiAvatarSelectionParams } from '../account/registration/emoji-avatar-selection.react.js'; import type { ExistingEthereumAccountParams } from '../account/registration/existing-ethereum-account.react.js'; import type { KeyserverSelectionParams } from '../account/registration/keyserver-selection.react.js'; import type { PasswordSelectionParams } from '../account/registration/password-selection.react.js'; import type { RegistrationTermsParams } from '../account/registration/registration-terms.react.js'; import type { UsernameSelectionParams } from '../account/registration/username-selection.react.js'; import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js'; import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js'; import type { ComposeSubchannelParams } from '../chat/compose-subchannel.react.js'; import type { FullScreenThreadMediaGalleryParams } from '../chat/fullscreen-thread-media-gallery.react.js'; import type { ImagePasteModalParams } from '../chat/image-paste-modal.react.js'; import type { MessageListParams } from '../chat/message-list-types.js'; import type { MessageReactionsModalParams } from '../chat/message-reactions-modal.react.js'; import type { MessageResultsScreenParams } from '../chat/message-results-screen.react.js'; import type { MultimediaMessageTooltipModalParams } from '../chat/multimedia-message-tooltip-modal.react.js'; import type { RobotextMessageTooltipModalParams } from '../chat/robotext-message-tooltip-modal.react.js'; import type { AddUsersModalParams } from '../chat/settings/add-users-modal.react.js'; import type { ColorSelectorModalParams } from '../chat/settings/color-selector-modal.react.js'; import type { ComposeSubchannelModalParams } from '../chat/settings/compose-subchannel-modal.react.js'; import type { DeleteThreadParams } from '../chat/settings/delete-thread.react.js'; import type { EmojiThreadAvatarCreationParams } from '../chat/settings/emoji-thread-avatar-creation.react.js'; import type { ThreadSettingsMemberTooltipModalParams } from '../chat/settings/thread-settings-member-tooltip-modal.react.js'; import type { ThreadSettingsParams } from '../chat/settings/thread-settings.react.js'; import type { SidebarListModalParams } from '../chat/sidebar-list-modal.react.js'; import type { SubchannelListModalParams } from '../chat/subchannels-list-modal.react.js'; import type { TextMessageTooltipModalParams } from '../chat/text-message-tooltip-modal.react.js'; import type { TogglePinModalParams } from '../chat/toggle-pin-modal.react.js'; import type { CommunityCreationMembersScreenParams } from '../community-creation/community-creation-members.react.js'; import type { ManagePublicLinkScreenParams } from '../invite-links/manage-public-link-screen.react.js'; import type { ViewInviteLinksScreenParams } from '../invite-links/view-invite-links-screen.react.js'; import type { ChatCameraModalParams } from '../media/chat-camera-modal.react.js'; import type { ImageModalParams } from '../media/image-modal.react.js'; import type { ThreadAvatarCameraModalParams } from '../media/thread-avatar-camera-modal.react.js'; import type { VideoPlaybackModalParams } from '../media/video-playback-modal.react.js'; import type { CustomServerModalParams } from '../profile/custom-server-modal.react.js'; import type { UserRelationshipTooltipModalParams } from '../profile/user-relationship-tooltip-modal.react.js'; import type { ChangeRolesScreenParams } from '../roles/change-roles-screen.react.js'; import type { CommunityRolesScreenParams } from '../roles/community-roles-screen.react.js'; import type { CreateRolesScreenParams } from '../roles/create-roles-screen.react.js'; import type { MessageSearchParams } from '../search/message-search.react.js'; import type { UserProfileAvatarModalParams } from '../user-profile/user-profile-avatar-modal.react.js'; import type { UserProfileBottomSheetParams } from '../user-profile/user-profile-bottom-sheet.react.js'; export const ActionResultModalRouteName = 'ActionResultModal'; export const AddUsersModalRouteName = 'AddUsersModal'; export const AppearancePreferencesRouteName = 'AppearancePreferences'; export const AppRouteName = 'App'; export const AppsRouteName = 'Apps'; export const BackgroundChatThreadListRouteName = 'BackgroundChatThreadList'; export const BackupMenuRouteName = 'BackupMenu'; export const BlockListRouteName = 'BlockList'; export const BuildInfoRouteName = 'BuildInfo'; export const CalendarRouteName = 'Calendar'; export const ChangeRolesScreenRouteName = 'ChangeRolesScreen'; export const ChatCameraModalRouteName = 'ChatCameraModal'; export const ChatRouteName = 'Chat'; export const ChatThreadListRouteName = 'ChatThreadList'; export const ColorSelectorModalRouteName = 'ColorSelectorModal'; export const ComposeSubchannelModalRouteName = 'ComposeSubchannelModal'; export const ComposeSubchannelRouteName = 'ComposeSubchannel'; export const CommunityDrawerNavigatorRouteName = 'CommunityDrawerNavigator'; export const CustomServerModalRouteName = 'CustomServerModal'; export const DefaultNotificationsPreferencesRouteName = 'DefaultNotifications'; export const DeleteAccountRouteName = 'DeleteAccount'; export const DeleteThreadRouteName = 'DeleteThread'; export const DevToolsRouteName = 'DevTools'; export const EditPasswordRouteName = 'EditPassword'; export const EmojiThreadAvatarCreationRouteName = 'EmojiThreadAvatarCreation'; export const EmojiUserAvatarCreationRouteName = 'EmojiUserAvatarCreation'; export const FriendListRouteName = 'FriendList'; export const FullScreenThreadMediaGalleryRouteName = 'FullScreenThreadMediaGallery'; export const HomeChatThreadListRouteName = 'HomeChatThreadList'; export const ImageModalRouteName = 'ImageModal'; export const ImagePasteModalRouteName = 'ImagePasteModal'; export const InviteLinkModalRouteName = 'InviteLinkModal'; export const InviteLinkNavigatorRouteName = 'InviteLinkNavigator'; export const LinkedDevicesRouteName = 'LinkedDevices'; export const LoggedOutModalRouteName = 'LoggedOutModal'; export const ManagePublicLinkRouteName = 'ManagePublicLink'; export const MessageListRouteName = 'MessageList'; export const MessageReactionsModalRouteName = 'MessageReactionsModal'; export const MessageResultsScreenRouteName = 'MessageResultsScreen'; export const MultimediaMessageTooltipModalRouteName = 'MultimediaMessageTooltipModal'; export const PrivacyPreferencesRouteName = 'PrivacyPreferences'; export const ProfileRouteName = 'Profile'; export const ProfileScreenRouteName = 'ProfileScreen'; export const UserRelationshipTooltipModalRouteName = 'UserRelationshipTooltipModal'; export const RobotextMessageTooltipModalRouteName = 'RobotextMessageTooltipModal'; export const SecondaryDeviceQRCodeScannerRouteName = 'SecondaryDeviceQRCodeScanner'; export const SidebarListModalRouteName = 'SidebarListModal'; export const SubchannelsListModalRouteName = 'SubchannelsListModal'; export const TabNavigatorRouteName = 'TabNavigator'; export const TextMessageTooltipModalRouteName = 'TextMessageTooltipModal'; export const ThreadAvatarCameraModalRouteName = 'ThreadAvatarCameraModal'; export const ThreadPickerModalRouteName = 'ThreadPickerModal'; export const ThreadSettingsMemberTooltipModalRouteName = 'ThreadSettingsMemberTooltipModal'; export const ThreadSettingsRouteName = 'ThreadSettings'; export const UserAvatarCameraModalRouteName = 'UserAvatarCameraModal'; export const TogglePinModalRouteName = 'TogglePinModal'; export const VideoPlaybackModalRouteName = 'VideoPlaybackModal'; export const ViewInviteLinksRouteName = 'ViewInviteLinks'; export const TermsAndPrivacyRouteName = 'TermsAndPrivacyModal'; export const RegistrationRouteName = 'Registration'; export const KeyserverSelectionRouteName = 'KeyserverSelection'; export const CoolOrNerdModeSelectionRouteName = 'CoolOrNerdModeSelection'; export const ConnectEthereumRouteName = 'ConnectEthereum'; export const ExistingEthereumAccountRouteName = 'ExistingEthereumAccount'; export const UsernameSelectionRouteName = 'UsernameSelection'; export const CommunityCreationRouteName = 'CommunityCreation'; export const CommunityConfigurationRouteName = 'CommunityConfiguration'; export const CommunityCreationMembersRouteName = 'CommunityCreationMembers'; export const MessageSearchRouteName = 'MessageSearch'; export const PasswordSelectionRouteName = 'PasswordSelection'; export const AvatarSelectionRouteName = 'AvatarSelection'; export const EmojiAvatarSelectionRouteName = 'EmojiAvatarSelection'; export const RegistrationUserAvatarCameraModalRouteName = 'RegistrationUserAvatarCameraModal'; export const RegistrationTermsRouteName = 'RegistrationTerms'; export const RolesNavigatorRouteName = 'RolesNavigator'; export const CommunityRolesScreenRouteName = 'CommunityRolesScreen'; export const CreateRolesScreenRouteName = 'CreateRolesScreen'; export const QRCodeSignInNavigatorRouteName = 'QRCodeSignInNavigator'; export const QRCodeScreenRouteName = 'QRCodeScreen'; export const UserProfileBottomSheetNavigatorRouteName = 'UserProfileBottomSheetNavigator'; export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet'; export const UserProfileAvatarModalRouteName = 'UserProfileAvatarModal'; export type RootParamList = { +LoggedOutModal: void, +App: void, +ThreadPickerModal: ThreadPickerModalParams, +AddUsersModal: AddUsersModalParams, +CustomServerModal: CustomServerModalParams, +ColorSelectorModal: ColorSelectorModalParams, +ComposeSubchannelModal: ComposeSubchannelModalParams, +SidebarListModal: SidebarListModalParams, +ImagePasteModal: ImagePasteModalParams, +TermsAndPrivacyModal: TermsAndPrivacyModalParams, +SubchannelsListModal: SubchannelListModalParams, +MessageReactionsModal: MessageReactionsModalParams, +Registration: void, +CommunityCreation: void, +InviteLinkModal: InviteLinkModalParams, +InviteLinkNavigator: void, +RolesNavigator: void, +QRCodeSignInNavigator: void, +UserProfileBottomSheetNavigator: void, }; export type MessageTooltipRouteNames = | typeof RobotextMessageTooltipModalRouteName | typeof MultimediaMessageTooltipModalRouteName | typeof TextMessageTooltipModalRouteName; export const PinnableMessageTooltipRouteNames = [ TextMessageTooltipModalRouteName, MultimediaMessageTooltipModalRouteName, ]; export type TooltipModalParamList = { +MultimediaMessageTooltipModal: MultimediaMessageTooltipModalParams, +TextMessageTooltipModal: TextMessageTooltipModalParams, +ThreadSettingsMemberTooltipModal: ThreadSettingsMemberTooltipModalParams, +UserRelationshipTooltipModal: UserRelationshipTooltipModalParams, +RobotextMessageTooltipModal: RobotextMessageTooltipModalParams, }; export type OverlayParamList = { +CommunityDrawerNavigator: void, +ImageModal: ImageModalParams, +ActionResultModal: ActionResultModalParams, +ChatCameraModal: ChatCameraModalParams, +UserAvatarCameraModal: void, +ThreadAvatarCameraModal: ThreadAvatarCameraModalParams, +VideoPlaybackModal: VideoPlaybackModalParams, +TogglePinModal: TogglePinModalParams, ...TooltipModalParamList, }; export type TabParamList = { +Calendar: void, +Chat: void, +Profile: void, +Apps: void, }; export type ChatParamList = { +ChatThreadList: void, +MessageList: MessageListParams, +ComposeSubchannel: ComposeSubchannelParams, +ThreadSettings: ThreadSettingsParams, +EmojiThreadAvatarCreation: EmojiThreadAvatarCreationParams, +DeleteThread: DeleteThreadParams, +FullScreenThreadMediaGallery: FullScreenThreadMediaGalleryParams, +MessageResultsScreen: MessageResultsScreenParams, +MessageSearch: MessageSearchParams, +ChangeRolesScreen: ChangeRolesScreenParams, }; export type ChatTopTabsParamList = { +HomeChatThreadList: void, +BackgroundChatThreadList: void, }; export type ProfileParamList = { +ProfileScreen: void, +EmojiUserAvatarCreation: void, +EditPassword: void, +DeleteAccount: void, +BuildInfo: void, +DevTools: void, +AppearancePreferences: void, +PrivacyPreferences: void, +DefaultNotifications: void, +FriendList: void, +BlockList: void, +LinkedDevices: void, +SecondaryDeviceQRCodeScanner: void, +BackupMenu: void, }; export type CommunityDrawerParamList = { +TabNavigator: void }; export type RegistrationParamList = { +CoolOrNerdModeSelection: void, +KeyserverSelection: KeyserverSelectionParams, +ConnectEthereum: ConnectEthereumParams, +ExistingEthereumAccount: ExistingEthereumAccountParams, +UsernameSelection: UsernameSelectionParams, +PasswordSelection: PasswordSelectionParams, +AvatarSelection: AvatarSelectionParams, +EmojiAvatarSelection: EmojiAvatarSelectionParams, +RegistrationUserAvatarCameraModal: void, +RegistrationTerms: RegistrationTermsParams, }; export type InviteLinkParamList = { +ViewInviteLinks: ViewInviteLinksScreenParams, +ManagePublicLink: ManagePublicLinkScreenParams, }; export type CommunityCreationParamList = { +CommunityConfiguration: void, +CommunityCreationMembers: CommunityCreationMembersScreenParams, }; export type RolesParamList = { +CommunityRolesScreen: CommunityRolesScreenParams, +CreateRolesScreen: CreateRolesScreenParams, }; export type QRCodeSignInParamList = { +QRCodeScreen: void, }; export type UserProfileBottomSheetParamList = { +UserProfileBottomSheet: UserProfileBottomSheetParams, +UserProfileAvatarModal: UserProfileAvatarModalParams, + +UserRelationshipTooltipModal: UserRelationshipTooltipModalParams, }; export type ScreenParamList = { ...RootParamList, ...OverlayParamList, ...TabParamList, ...ChatParamList, ...ChatTopTabsParamList, ...ProfileParamList, ...CommunityDrawerParamList, ...RegistrationParamList, ...InviteLinkParamList, ...CommunityCreationParamList, ...RolesParamList, ...QRCodeSignInParamList, ...UserProfileBottomSheetParamList, }; export type NavigationRoute> = RouteProp; export const accountModals = [ LoggedOutModalRouteName, RegistrationRouteName, QRCodeSignInNavigatorRouteName, ]; export const scrollBlockingModals = [ ImageModalRouteName, MultimediaMessageTooltipModalRouteName, TextMessageTooltipModalRouteName, ThreadSettingsMemberTooltipModalRouteName, UserRelationshipTooltipModalRouteName, RobotextMessageTooltipModalRouteName, VideoPlaybackModalRouteName, ]; export const chatRootModals = [ AddUsersModalRouteName, ColorSelectorModalRouteName, ComposeSubchannelModalRouteName, ]; export const threadRoutes = [ MessageListRouteName, ThreadSettingsRouteName, DeleteThreadRouteName, ComposeSubchannelRouteName, FullScreenThreadMediaGalleryRouteName, MessageResultsScreenRouteName, MessageSearchRouteName, EmojiThreadAvatarCreationRouteName, CommunityRolesScreenRouteName, ]; diff --git a/native/user-profile/user-profile-bottom-sheet-navigator.react.js b/native/user-profile/user-profile-bottom-sheet-navigator.react.js index 781e441dc..b69391d70 100644 --- a/native/user-profile/user-profile-bottom-sheet-navigator.react.js +++ b/native/user-profile/user-profile-bottom-sheet-navigator.react.js @@ -1,51 +1,57 @@ // @flow import * as React from 'react'; import UserProfileAvatarModal from './user-profile-avatar-modal.react.js'; import UserProfileBottomSheet from './user-profile-bottom-sheet.react.js'; import { createOverlayNavigator } from '../navigation/overlay-navigator.react.js'; import type { OverlayNavigationProp, OverlayNavigationHelpers, } from '../navigation/overlay-navigator.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import { UserProfileBottomSheetRouteName, UserProfileAvatarModalRouteName, + UserRelationshipTooltipModalRouteName, type ScreenParamList, type UserProfileBottomSheetParamList, } from '../navigation/route-names.js'; +import UserRelationshipTooltipModal from '../profile/user-relationship-tooltip-modal.react.js'; export type UserProfileBottomSheetNavigationProp< RouteName: $Keys, > = OverlayNavigationProp; const UserProfileBottomSheetOverlayNavigator = createOverlayNavigator< ScreenParamList, UserProfileBottomSheetParamList, OverlayNavigationHelpers, >(); type Props = { +navigation: RootNavigationProp<'UserProfileBottomSheet'>, ... }; // eslint-disable-next-line no-unused-vars function UserProfileBottomSheetNavigator(props: Props): React.Node { return ( + ); } export default UserProfileBottomSheetNavigator; diff --git a/native/user-profile/user-profile-menu-button.react.js b/native/user-profile/user-profile-menu-button.react.js new file mode 100644 index 000000000..b9dfc2052 --- /dev/null +++ b/native/user-profile/user-profile-menu-button.react.js @@ -0,0 +1,147 @@ +// @flow + +import { useNavigation, useRoute } from '@react-navigation/native'; +import invariant from 'invariant'; +import * as React from 'react'; +import { View, TouchableOpacity } from 'react-native'; + +import { useRelationshipPrompt } from 'lib/hooks/relationship-prompt.js'; +import { userRelationshipStatus } from 'lib/types/relationship-types.js'; +import type { ThreadInfo } from 'lib/types/thread-types.js'; +import type { UserInfo } from 'lib/types/user-types'; + +import { userProfileMenuButtonHeight } from './user-profile-constants.js'; +import SWMansionIcon from '../components/swmansion-icon.react.js'; +import { OverlayContext } from '../navigation/overlay-context.js'; +import { UserRelationshipTooltipModalRouteName } from '../navigation/route-names.js'; +import { useStyles } from '../themes/colors.js'; + +// We need to set onMenuButtonLayout in order to allow .measure() +// to be on the ref +const onMenuButtonLayout = () => {}; + +type Props = { + +threadInfo: ThreadInfo, + +pendingPersonalThreadUserInfo: ?UserInfo, +}; + +function UserProfileMenuButton(props: Props): React.Node { + const { threadInfo, pendingPersonalThreadUserInfo } = props; + + const { otherUserInfo } = useRelationshipPrompt( + threadInfo, + undefined, + pendingPersonalThreadUserInfo, + ); + + const { navigate } = useNavigation(); + const route = useRoute(); + + const styles = useStyles(unboundStyles); + + const overlayContext = React.useContext(OverlayContext); + + const menuButtonRef = React.useRef(); + + const visibleTooltipActionEntryIDs = React.useMemo(() => { + const result = []; + + if (otherUserInfo?.relationshipStatus === userRelationshipStatus.FRIEND) { + result.push('unfriend'); + result.push('block'); + } else if ( + otherUserInfo?.relationshipStatus === + userRelationshipStatus.BOTH_BLOCKED || + otherUserInfo?.relationshipStatus === + userRelationshipStatus.BLOCKED_BY_VIEWER + ) { + result.push('unblock'); + } else { + result.push('block'); + } + + return result; + }, [otherUserInfo?.relationshipStatus]); + + const onPressMenuButton = React.useCallback(() => { + invariant( + overlayContext, + 'UserProfileMenuButton should have OverlayContext', + ); + overlayContext.setScrollBlockingModalStatus('open'); + + const currentMenuButtonRef = menuButtonRef.current; + if (!currentMenuButtonRef || !otherUserInfo) { + return; + } + + currentMenuButtonRef.measure((x, y, width, height, pageX, pageY) => { + const coordinates = { + x: pageX, + y: pageY, + width, + height, + }; + + const verticalBounds = { + height: userProfileMenuButtonHeight, + y: pageY, + }; + + const { relationshipStatus, ...restUserInfo } = otherUserInfo; + const relativeUserInfo = { + ...restUserInfo, + isViewer: false, + }; + navigate<'UserRelationshipTooltipModal'>({ + name: UserRelationshipTooltipModalRouteName, + params: { + presentedFrom: route.key, + initialCoordinates: coordinates, + verticalBounds, + visibleEntryIDs: visibleTooltipActionEntryIDs, + relativeUserInfo, + tooltipButtonIcon: 'menu', + }, + }); + }); + }, [ + navigate, + otherUserInfo, + overlayContext, + route.key, + visibleTooltipActionEntryIDs, + ]); + + const userProfileMenuButton = React.useMemo( + () => ( + + + + + + ), + [onPressMenuButton, styles.iconContainer, styles.moreIcon], + ); + + return userProfileMenuButton; +} + +const unboundStyles = { + iconContainer: { + alignSelf: 'flex-end', + }, + moreIcon: { + color: 'modalButtonLabel', + alignSelf: 'flex-end', + }, +}; + +export default UserProfileMenuButton; diff --git a/native/user-profile/user-profile.react.js b/native/user-profile/user-profile.react.js index 7582a2c7d..b91463f45 100644 --- a/native/user-profile/user-profile.react.js +++ b/native/user-profile/user-profile.react.js @@ -1,228 +1,239 @@ // @flow import Clipboard from '@react-native-clipboard/clipboard'; import invariant from 'invariant'; import * as React from 'react'; import { View, Text, TouchableOpacity } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { relationshipBlockedInEitherDirection } from 'lib/shared/relationship-utils.js'; import { useUserProfileThreadInfo } from 'lib/shared/thread-utils.js'; import { stringForUserExplicit } from 'lib/shared/user-utils.js'; import type { UserInfo } from 'lib/types/user-types'; import sleep from 'lib/utils/sleep.js'; import UserProfileAvatar from './user-profile-avatar.react.js'; import { userProfileUserInfoContainerHeight, userProfileBottomPadding, userProfileMenuButtonHeight, userProfileActionButtonHeight, } from './user-profile-constants.js'; +import UserProfileMenuButton from './user-profile-menu-button.react.js'; import UserProfileMessageButton from './user-profile-message-button.react.js'; import UserProfileRelationshipButton from './user-profile-relationship-button.react.js'; import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-provider.react.js'; import SingleLine from '../components/single-line.react.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; import { useStyles } from '../themes/colors.js'; type Props = { +userInfo: ?UserInfo, }; function UserProfile(props: Props): React.Node { const { userInfo } = props; const userProfileThreadInfo = useUserProfileThreadInfo(userInfo); const usernameText = stringForUserExplicit(userInfo); const [usernameCopied, setUsernameCopied] = React.useState(false); const [ userProfileRelationshipButtonHeight, setUserProfileRelationshipButtonHeight, ] = React.useState(0); const bottomSheetContext = React.useContext(BottomSheetContext); invariant(bottomSheetContext, 'bottomSheetContext should be set'); const { setContentHeight } = bottomSheetContext; const insets = useSafeAreaInsets(); React.useLayoutEffect(() => { let height = insets.bottom + userProfileUserInfoContainerHeight + userProfileBottomPadding; if (userProfileThreadInfo) { height += userProfileMenuButtonHeight; } if ( userProfileThreadInfo && !relationshipBlockedInEitherDirection(userInfo?.relationshipStatus) ) { // message button height + relationship button height height += userProfileActionButtonHeight + userProfileRelationshipButtonHeight; } setContentHeight(height); }, [ insets.bottom, setContentHeight, userInfo?.relationshipStatus, userProfileRelationshipButtonHeight, userProfileThreadInfo, ]); const styles = useStyles(unboundStyles); + const menuButton = React.useMemo(() => { + if (!userProfileThreadInfo) { + return null; + } + + const { threadInfo, pendingPersonalThreadUserInfo } = userProfileThreadInfo; + return ( + + ); + }, [userProfileThreadInfo]); + const onPressCopyUsername = React.useCallback(async () => { Clipboard.setString(usernameText); setUsernameCopied(true); await sleep(3000); setUsernameCopied(false); }, [usernameText]); const copyUsernameButton = React.useMemo(() => { if (usernameCopied) { return ( Username copied! ); } return ( Copy username ); }, [ onPressCopyUsername, styles.copyUsernameContainer, styles.copyUsernameIcon, styles.copyUsernameText, usernameCopied, ]); const messageButton = React.useMemo(() => { if ( !userProfileThreadInfo || relationshipBlockedInEitherDirection(userInfo?.relationshipStatus) ) { return null; } const { threadInfo, pendingPersonalThreadUserInfo } = userProfileThreadInfo; return ( ); }, [userInfo?.relationshipStatus, userProfileThreadInfo]); const relationshipButton = React.useMemo(() => { if ( !userProfileThreadInfo || relationshipBlockedInEitherDirection(userInfo?.relationshipStatus) ) { return null; } const { threadInfo, pendingPersonalThreadUserInfo } = userProfileThreadInfo; return ( ); }, [userInfo?.relationshipStatus, userProfileThreadInfo]); return ( - + {menuButton} {usernameText} {copyUsernameButton} {messageButton} {relationshipButton} ); } const unboundStyles = { container: { paddingHorizontal: 16, }, - moreIcon: { - color: 'modalButtonLabel', - alignSelf: 'flex-end', - }, userInfoContainer: { flexDirection: 'row', }, usernameContainer: { flex: 1, justifyContent: 'center', alignItems: 'flex-start', paddingLeft: 16, }, usernameText: { color: 'modalForegroundLabel', fontSize: 18, fontWeight: '500', }, copyUsernameContainer: { flexDirection: 'row', justifyContent: 'center', paddingTop: 8, }, copyUsernameIcon: { color: 'purpleLink', marginRight: 4, }, copyUsernameText: { 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;