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,190 @@ +// @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 || + otherUserInfo.relationshipStatus === userRelationshipStatus.BOTH_BLOCKED || + otherUserInfo.relationshipStatus === + userRelationshipStatus.BLOCKED_VIEWER || + otherUserInfo.relationshipStatus === + userRelationshipStatus.BLOCKED_BY_VIEWER + ) { + return null; + } + + if ( + otherUserInfo.relationshipStatus === userRelationshipStatus.REQUEST_RECEIVED + ) { + return ( + + + Incoming friend request + + + + + + + + ); + } + + if ( + otherUserInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT + ) { + return ( + + ); + } + + return ( + + ); +} + +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 @@ -11,6 +11,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'; @@ -82,6 +83,20 @@ ); }, [userProfileThreadInfo]); + const relationshipButton = React.useMemo(() => { + if (!userProfileThreadInfo) { + return null; + } + + const { threadInfo, pendingPersonalThreadUserInfo } = userProfileThreadInfo; + return ( + + ); + }, [userProfileThreadInfo]); + return ( @@ -93,6 +108,7 @@ {messageButton} + {relationshipButton} ); }