Differential D7099 Diff 23900 native/profile/relationship-list-item.react.js

Changeset View

Standalone View

native/profile/relationship-list-item.react.js

Show First 20 Lines • Show All 49 Lines • ▼ Show 20 Lines
import {		import {
RelationshipListItemTooltipModalRouteName,		RelationshipListItemTooltipModalRouteName,
FriendListRouteName,		FriendListRouteName,
BlockListRouteName,		BlockListRouteName,
} from '../navigation/route-names.js';		} from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { type Colors, useColors, useStyles } from '../themes/colors.js';		import { type Colors, useColors, useStyles } from '../themes/colors.js';
import type { VerticalBounds } from '../types/layout-types.js';		import type { VerticalBounds } from '../types/layout-types.js';
		import { useShouldRenderAvatars } from '../utils/avatar-utils.js';

type BaseProps = {		type BaseProps = {
+userInfo: AccountUserInfo,		+userInfo: AccountUserInfo,
+lastListItem: boolean,		+lastListItem: boolean,
+verticalBounds: ?VerticalBounds,		+verticalBounds: ?VerticalBounds,
+relationshipListRoute: NavigationRoute<'FriendList' \| 'BlockList'>,		+relationshipListRoute: NavigationRoute<'FriendList' \| 'BlockList'>,
+navigate: RelationshipListNavigate,		+navigate: RelationshipListNavigate,
+onSelect: (selectedUser: GlobalAccountUserInfo) => void,		+onSelect: (selectedUser: GlobalAccountUserInfo) => void,
Show All 9 Lines	type Props = {
// async functions that hit server APIs		// async functions that hit server APIs
+updateRelationships: (		+updateRelationships: (
request: RelationshipRequest,		request: RelationshipRequest,
) => Promise<RelationshipErrors>,		) => Promise<RelationshipErrors>,
// withOverlayContext		// withOverlayContext
+overlayContext: ?OverlayContextType,		+overlayContext: ?OverlayContextType,
// withKeyboardState		// withKeyboardState
+keyboardState: ?KeyboardState,		+keyboardState: ?KeyboardState,
		+shouldRenderAvatars: boolean,
};		};
class RelationshipListItem extends React.PureComponent<Props> {		class RelationshipListItem extends React.PureComponent<Props> {
editButton = React.createRef<React.ElementRef<typeof View>>();		editButton = React.createRef<React.ElementRef<typeof View>>();

render() {		render() {
const {		const {
lastListItem,		lastListItem,
removeUserLoadingStatus,		removeUserLoadingStatus,
▲ Show 20 Lines • Show All 75 Lines • ▼ Show 20 Lines	) {
onPress={this.onSelect}		onPress={this.onSelect}
style={this.props.styles.editButton}		style={this.props.styles.editButton}
>		>
<Text style={this.props.styles.blueAction}>Add</Text>		<Text style={this.props.styles.blueAction}>Add</Text>
</TouchableOpacity>		</TouchableOpacity>
);		);
}		}

		const marginLeftStyle = {
		marginLeft: this.props.shouldRenderAvatars ? 8 : 0,
		};

const avatarInfo = getAvatarForUser(this.props.userInfo);		const avatarInfo = getAvatarForUser(this.props.userInfo);

return (		return (
<View style={this.props.styles.container}>		<View style={this.props.styles.container}>
<View style={[this.props.styles.innerContainer, borderBottom]}>		<View style={[this.props.styles.innerContainer, borderBottom]}>
<Avatar size="small" avatarInfo={avatarInfo} />		<Avatar size="small" avatarInfo={avatarInfo} />
<SingleLine style={this.props.styles.username}>		<SingleLine style={[this.props.styles.username, marginLeftStyle]}>
{this.props.userInfo.username}		{this.props.userInfo.username}
</SingleLine>		</SingleLine>
{editButton}		{editButton}
</View>		</View>
</View>		</View>
);		);
}		}

▲ Show 20 Lines • Show All 140 Lines • ▼ Show 20 Lines	const removeUserLoadingStatus = useSelector(state =>
)(state),		)(state),
);		);
const colors = useColors();		const colors = useColors();
const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const boundUpdateRelationships = useServerCall(updateRelationships);		const boundUpdateRelationships = useServerCall(updateRelationships);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);
const keyboardState = React.useContext(KeyboardContext);		const keyboardState = React.useContext(KeyboardContext);
		const shouldRenderAvatars = useShouldRenderAvatars();

return (		return (
<RelationshipListItem		<RelationshipListItem
{...props}		{...props}
removeUserLoadingStatus={removeUserLoadingStatus}		removeUserLoadingStatus={removeUserLoadingStatus}
colors={colors}		colors={colors}
styles={styles}		styles={styles}
dispatchActionPromise={dispatchActionPromise}		dispatchActionPromise={dispatchActionPromise}
updateRelationships={boundUpdateRelationships}		updateRelationships={boundUpdateRelationships}
overlayContext={overlayContext}		overlayContext={overlayContext}
keyboardState={keyboardState}		keyboardState={keyboardState}
		shouldRenderAvatars={shouldRenderAvatars}
/>		/>
);		);
});		});

export default ConnectedRelationshipListItem;		export default ConnectedRelationshipListItem;