Changeset View
Changeset View
Standalone 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; |