Page MenuHomePhabricator
Files F3366025

D9252.id31560.diff
No OneTemporary
Actions

D9252.id31560.diff
View Options

diff --git a/lib/shared/relationship-utils.js b/lib/shared/relationship-utils.js
--- a/lib/shared/relationship-utils.js
+++ b/lib/shared/relationship-utils.js
@@ -46,7 +46,7 @@
}
function relationshipBlockedInEitherDirection(
- relationshipStatus: UserRelationshipStatus,
+ relationshipStatus: ?UserRelationshipStatus,
): boolean {
return (
relationshipStatus === userRelationshipStatus.BLOCKED_VIEWER ||
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,69 @@
+// @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: dismissBottomSheetModal } = useBottomSheetModal();
+
+ const styles = useStyles(unboundStyles);
+
+ const navigateToThread = useNavigateToThread();
+
+ const onPressMessage = React.useCallback(() => {
+ dismissBottomSheetModal();
+ navigateToThread({
+ threadInfo,
+ pendingPersonalThreadUserInfo,
+ });
+ }, [
+ dismissBottomSheetModal,
+ navigateToThread,
+ pendingPersonalThreadUserInfo,
+ threadInfo,
+ ]);
+
+ return (
+ <Button style={styles.messageButtonContainer} onPress={onPressMessage}>
+ <SWMansionIcon name="send-2" size={22} style={styles.messageButtonIcon} />
+ <Text style={styles.messageButtonText}>Message</Text>
+ </Button>
+ );
+}
+
+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 { 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 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,8 @@
function UserProfile(props: Props): React.Node {
const { userInfo } = props;
+ const userProfileThreadInfo = useUserProfileThreadInfo(userInfo);
+
const usernameText = stringForUserExplicit(userInfo);
const [usernameCopied, setUsernameCopied] = React.useState<boolean>(false);
@@ -64,6 +69,23 @@
usernameCopied,
]);
+ const messageButton = React.useMemo(() => {
+ if (
+ !userProfileThreadInfo ||
+ relationshipBlockedInEitherDirection(userInfo?.relationshipStatus)
+ ) {
+ return null;
+ }
+
+ const { threadInfo, pendingPersonalThreadUserInfo } = userProfileThreadInfo;
+ return (
+ <UserProfileMessageButton
+ threadInfo={threadInfo}
+ pendingPersonalThreadUserInfo={pendingPersonalThreadUserInfo}
+ />
+ );
+ }, [userInfo?.relationshipStatus, userProfileThreadInfo]);
+
return (
<View style={styles.container}>
<SWMansionIcon name="menu-vertical" size={24} style={styles.moreIcon} />
@@ -74,6 +96,7 @@
{copyUsernameButton}
</View>
</View>
+ {messageButton}
</View>
);
}
@@ -113,6 +136,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;

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 9:09 AM (20 h, 26 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2584013
Default Alt Text
D9252.id31560.diff (4 KB)

Event Timeline