Page MenuHomePhorge
Files F32632692

D12596.1767486903.diff
No OneTemporary
Actions

Size
6 KB
Referenced Files
None
Subscribers
None

D12596.1767486903.diff
View Options

diff --git a/native/components/relationship-button.react.js b/native/components/relationship-button.react.js
--- a/native/components/relationship-button.react.js
+++ b/native/components/relationship-button.react.js
@@ -2,11 +2,13 @@
import Icon from '@expo/vector-icons/FontAwesome5.js';
import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, ActivityIndicator } from 'react-native';
import Button from './button.react.js';
import { useStyles, useColors } from '../themes/colors.js';
+type ButtonSize = 'S';
+
type RelationshipButtonType =
| 'add'
| 'withdraw'
@@ -18,10 +20,12 @@
type Props = {
+type: RelationshipButtonType,
+onPress: () => mixed,
+ +isLoading: boolean,
+ +size?: ButtonSize,
};
function RelationshipButton(props: Props): React.Node {
- const { type, onPress } = props;
+ const { type, onPress, isLoading, size } = props;
const styles = useStyles(unboundStyles);
const colors = useColors();
@@ -29,6 +33,10 @@
const buttonStyle = React.useMemo(() => {
const result = [styles.buttonContainer];
+ if (size === 'S') {
+ result.push(styles.smallButtonContainer);
+ }
+
if (type === 'add' || type === 'accept' || type === 'unblock') {
result.push(styles.greenButton);
} else {
@@ -36,35 +44,72 @@
}
return result;
- }, [styles.buttonContainer, styles.greenButton, styles.redButton, type]);
+ }, [
+ size,
+ styles.buttonContainer,
+ styles.greenButton,
+ styles.redButton,
+ styles.smallButtonContainer,
+ type,
+ ]);
+
+ const buttonTextStyle = React.useMemo(() => {
+ const result = [styles.buttonText];
+
+ if (size === 'S') {
+ result.push(styles.smallButtonText);
+ }
+
+ return result;
+ }, [size, styles.buttonText, styles.smallButtonText]);
- let buttonText = 'Add Friend';
+ let buttonText = 'Add friend';
let icon = 'user-plus';
if (type === 'withdraw') {
- buttonText = 'Withdraw Friend Request';
+ buttonText = 'Withdraw friend request';
icon = 'user-minus';
} else if (type === 'accept') {
- buttonText = 'Accept';
+ buttonText = 'Accept friend request';
} else if (type === 'reject') {
- buttonText = 'Reject';
+ buttonText = 'Reject friend request';
icon = 'user-minus';
} else if (type === 'block') {
- buttonText = 'Block User';
+ buttonText = 'Block user';
icon = 'user-shield';
} else if (type === 'unblock') {
- buttonText = 'Unblock User';
+ buttonText = 'Unblock user';
icon = 'user-shield';
}
+ const buttonContent = React.useMemo(() => {
+ if (isLoading) {
+ return <ActivityIndicator size="small" color={colors.whiteText} />;
+ }
+
+ return (
+ <>
+ <Icon
+ name={icon}
+ size={16}
+ color={colors.floatingButtonLabel}
+ style={styles.buttonIcon}
+ />
+ <Text style={buttonTextStyle}>{buttonText}</Text>
+ </>
+ );
+ }, [
+ buttonText,
+ buttonTextStyle,
+ colors.floatingButtonLabel,
+ colors.whiteText,
+ icon,
+ isLoading,
+ styles.buttonIcon,
+ ]);
+
return (
- <Button style={buttonStyle} onPress={onPress}>
- <Icon
- name={icon}
- size={22}
- color={colors.floatingButtonLabel}
- style={styles.buttonIcon}
- />
- <Text style={styles.buttonText}>{buttonText}</Text>
+ <Button style={buttonStyle} onPress={onPress} disabled={isLoading}>
+ {buttonContent}
</Button>
);
}
@@ -74,7 +119,7 @@
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
- paddingVertical: 8,
+ paddingVertical: 10,
borderRadius: 8,
},
buttonIcon: {
@@ -89,6 +134,12 @@
redButton: {
backgroundColor: 'vibrantRedButton',
},
+ smallButtonContainer: {
+ paddingVertical: 8,
+ },
+ smallButtonText: {
+ fontSize: 11,
+ },
};
export default RelationshipButton;
diff --git a/native/user-profile/user-profile-relationship-button.react.js b/native/user-profile/user-profile-relationship-button.react.js
--- a/native/user-profile/user-profile-relationship-button.react.js
+++ b/native/user-profile/user-profile-relationship-button.react.js
@@ -39,6 +39,7 @@
const {
otherUserInfo,
callbacks: { friendUser, unfriendUser },
+ loaders: { isLoadingFriendUser, isLoadingUnfriendUser },
} = useRelationshipPrompt(
threadInfo,
onErrorCallback,
@@ -91,10 +92,20 @@
</Text>
<View style={styles.incomingFriendRequestButtonsContainer}>
<View style={styles.acceptFriendRequestButtonContainer}>
- <RelationshipButton type="accept" onPress={friendUser} />
+ <RelationshipButton
+ type="accept"
+ onPress={friendUser}
+ isLoading={isLoadingFriendUser}
+ size="S"
+ />
</View>
<View style={styles.rejectFriendRequestButtonContainer}>
- <RelationshipButton type="reject" onPress={unfriendUser} />
+ <RelationshipButton
+ type="reject"
+ onPress={unfriendUser}
+ isLoading={isLoadingUnfriendUser}
+ size="S"
+ />
</View>
</View>
</View>
@@ -106,18 +117,28 @@
) {
return (
<View style={styles.singleButtonContainer}>
- <RelationshipButton type="withdraw" onPress={unfriendUser} />
+ <RelationshipButton
+ type="withdraw"
+ onPress={unfriendUser}
+ isLoading={isLoadingUnfriendUser}
+ />
</View>
);
}
return (
<View style={styles.singleButtonContainer}>
- <RelationshipButton type="add" onPress={friendUser} />
+ <RelationshipButton
+ type="add"
+ onPress={friendUser}
+ isLoading={isLoadingFriendUser}
+ />
</View>
);
}, [
friendUser,
+ isLoadingFriendUser,
+ isLoadingUnfriendUser,
otherUserInfo,
styles.acceptFriendRequestButtonContainer,
styles.incomingFriendRequestButtonsContainer,
@@ -134,6 +155,7 @@
const unboundStyles = {
singleButtonContainer: {
marginTop: 16,
+ height: 38,
},
incomingFriendRequestContainer: {
marginTop: 24,
@@ -144,6 +166,7 @@
incomingFriendRequestButtonsContainer: {
flexDirection: 'row',
marginTop: 8,
+ height: 32,
},
acceptFriendRequestButtonContainer: {
flex: 1,

File Metadata

Mime Type
text/plain
Expires
Sun, Jan 4, 12:35 AM (14 h, 34 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5891567
Default Alt Text
D12596.1767486903.diff (6 KB)

Event Timeline