Page MenuHomePhabricator
Files F3511036

D9258.id31464.diff
No OneTemporary
Actions

D9258.id31464.diff
View Options

diff --git a/native/components/user-profile-relationship-button.react.js b/native/components/user-profile-relationship-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/user-profile-relationship-button.react.js
@@ -0,0 +1,185 @@
+// @flow
+
+import Icon from '@expo/vector-icons/FontAwesome5.js';
+import * as React from 'react';
+import { View, Text } 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 Button from './button.react.js';
+import { useStyles, useColors } from '../themes/colors.js';
+import Alert from '../utils/alert.js';
+
+const onErrorCallback = () => {
+ Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }]);
+};
+
+type Props = {
+ +threadInfo: ThreadInfo,
+ +pendingPersonalThreadUserInfo?: UserInfo,
+};
+
+function UserProfileRelationshipButton(props: Props): React.Node {
+ const { threadInfo, pendingPersonalThreadUserInfo } = props;
+
+ const {
+ otherUserInfo,
+ callbacks: { friendUser, unfriendUser },
+ } = useRelationshipPrompt(
+ threadInfo,
+ onErrorCallback,
+ pendingPersonalThreadUserInfo,
+ );
+
+ const styles = useStyles(unboundStyles);
+ const colors = useColors();
+
+ const acceptFriendRequestButtonStyle = React.useMemo(
+ () => [
+ styles.buttonContainer,
+ styles.greenButton,
+ styles.incomingFriendRequestButton,
+ ],
+ [
+ styles.buttonContainer,
+ styles.greenButton,
+ styles.incomingFriendRequestButton,
+ ],
+ );
+
+ const rejectFriendRequestButtonStyle = React.useMemo(
+ () => [
+ styles.buttonContainer,
+ styles.redButton,
+ styles.incomingFriendRequestButton,
+ ],
+ [
+ styles.buttonContainer,
+ styles.incomingFriendRequestButton,
+ styles.redButton,
+ ],
+ );
+
+ const withdrawFriendRequestButtonStyle = React.useMemo(
+ () => [styles.buttonContainer, styles.redButton],
+ [styles.buttonContainer, styles.redButton],
+ );
+
+ const addFriendButtonStyle = React.useMemo(
+ () => [styles.buttonContainer, styles.greenButton],
+ [styles.buttonContainer, styles.greenButton],
+ );
+
+ if (
+ !otherUserInfo ||
+ !otherUserInfo.username ||
+ otherUserInfo.relationshipStatus === userRelationshipStatus.FRIEND
+ ) {
+ return null;
+ }
+
+ if (
+ otherUserInfo.relationshipStatus === userRelationshipStatus.REQUEST_RECEIVED
+ ) {
+ return (
+ <View style={styles.incomingFriendRequestContainer}>
+ <Text style={styles.incomingFriendRequestLabel}>
+ Incoming friend request
+ </Text>
+ <View style={styles.incomingFriendRequestButtonsContainer}>
+ <Button style={acceptFriendRequestButtonStyle} onPress={friendUser}>
+ <Icon
+ name="user-plus"
+ size={22}
+ color={colors.floatingButtonLabel}
+ style={styles.buttonIcon}
+ />
+ <Text style={styles.buttonText}>Accept</Text>
+ </Button>
+ <View style={styles.incomingFriendRequestButtonGap} />
+ <Button style={rejectFriendRequestButtonStyle} onPress={unfriendUser}>
+ <Icon
+ name="user-minus"
+ size={22}
+ color={colors.floatingButtonLabel}
+ style={styles.buttonIcon}
+ />
+ <Text style={styles.buttonText}>Reject</Text>
+ </Button>
+ </View>
+ </View>
+ );
+ }
+
+ if (
+ otherUserInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT
+ ) {
+ return (
+ <Button style={withdrawFriendRequestButtonStyle} onPress={unfriendUser}>
+ <Icon
+ name="user-minus"
+ size={22}
+ color={colors.floatingButtonLabel}
+ style={styles.buttonIcon}
+ />
+ <Text style={styles.buttonText}>Withdraw Friend Request</Text>
+ </Button>
+ );
+ }
+
+ return (
+ <Button style={addFriendButtonStyle} onPress={friendUser}>
+ <Icon
+ name="user-plus"
+ size={22}
+ color={colors.floatingButtonLabel}
+ style={styles.buttonIcon}
+ />
+ <Text style={styles.buttonText}>Add Friend</Text>
+ </Button>
+ );
+}
+
+const unboundStyles = {
+ buttonContainer: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ paddingVertical: 8,
+ marginTop: 16,
+ borderRadius: 8,
+ },
+ buttonIcon: {
+ paddingRight: 8,
+ },
+ buttonText: {
+ color: 'floatingButtonLabel',
+ },
+ redButton: {
+ backgroundColor: 'vibrantRedButton',
+ },
+ greenButton: {
+ backgroundColor: 'vibrantGreenButton',
+ },
+ incomingFriendRequestContainer: {
+ marginTop: 24,
+ },
+ incomingFriendRequestLabel: {
+ color: 'modalForegroundLabel',
+ },
+ incomingFriendRequestButtonsContainer: {
+ flexDirection: 'row',
+ },
+ incomingFriendRequestButton: {
+ marginTop: 8,
+ flex: 1,
+ },
+ incomingFriendRequestButtonGap: {
+ width: 8,
+ },
+};
+
+export default UserProfileRelationshipButton;
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
@@ -12,6 +12,7 @@
import SWMansionIcon from './swmansion-icon.react.js';
import UserProfileMessageButton from './user-profile-message-button.react.js';
+import UserProfileRelationshipButton from './user-profile-relationship-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';
@@ -86,6 +87,23 @@
);
}, [userInfo?.relationshipStatus, userProfileThreadInfo]);
+ const relationshipButton = React.useMemo(() => {
+ if (
+ !userProfileThreadInfo ||
+ relationshipBlockedInEitherDirection(userInfo?.relationshipStatus)
+ ) {
+ return null;
+ }
+
+ const { threadInfo, pendingPersonalThreadUserInfo } = userProfileThreadInfo;
+ return (
+ <UserProfileRelationshipButton
+ threadInfo={threadInfo}
+ pendingPersonalThreadUserInfo={pendingPersonalThreadUserInfo}
+ />
+ );
+ }, [userInfo?.relationshipStatus, userProfileThreadInfo]);
+
return (
<View style={styles.container}>
<SWMansionIcon name="menu-vertical" size={24} style={styles.moreIcon} />
@@ -97,6 +115,7 @@
</View>
</View>
{messageButton}
+ {relationshipButton}
</View>
);
}

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 22, 1:17 PM (10 h, 1 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2691456
Default Alt Text
D9258.id31464.diff (6 KB)

Event Timeline