Page MenuHomePhabricator
Differential D9327

[lib] Add hash functions to state sync spec
ClosedPublic
Actions

Authored by michal on Sep 29 2023, 5:20 AM.
Tags
None
Referenced Files
Unknown Object (File)
Feb 16 2025, 1:56 AM
Unknown Object (File)
Feb 16 2025, 1:56 AM
Unknown Object (File)
Feb 16 2025, 1:56 AM
Unknown Object (File)
Feb 16 2025, 1:56 AM
Unknown Object (File)
Feb 16 2025, 1:56 AM
Unknown Object (File)
Feb 16 2025, 1:51 AM
Unknown Object (File)
Feb 11 2025, 2:39 AM
Unknown Object (File)
Jan 27 2025, 12:21 AM
View All Files
Subscribers
ashoat

Details

Reviewers
tomek
inka
kamil
Commits
rCOMMe919581da2fb: [lib] Add hash functions to state sync spec
Summary

Part of ENG-4959
Depends on D9267

Introduces new function to the sync spec: selector. It returns the spec with functions responsible for returning hashes for whole store, individual infos, and to return the list of all ids, using the current redux state. They will be used in the future diff instead of using the convertClientToServerInfos and hash.

Test Plan

yarn flow-all. Correctness of hashing is tested in the next diff.

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

michal created this revision.Sep 29 2023, 5:20 AM
Herald added a subscriber: ashoat. · View Herald TranscriptSep 29 2023, 5:20 AM
michal added a child revision: D9328: [lib] Use new hashing functions in state check.Sep 29 2023, 5:35 AM
Harbormaster completed remote builds in B22911: Diff 31544.Sep 29 2023, 5:38 AM
michal requested review of this revision.Sep 29 2023, 5:38 AM
tomek accepted this revision.Oct 3 2023, 3:25 AM
tomek added inline comments.
lib/shared/state-sync/entries-state-sync-spec.js
45–53

Do we have a plan on how it will look with multiple keyservers?

lib/shared/state-sync/state-sync-spec.js
30

Why do we include StateSyncSpec inside the returned value?

This revision is now accepted and ready to land.Oct 3 2023, 3:25 AM
michal updated this revision to Diff 31630.Oct 4 2023, 6:02 AM

Update to new threadHashingStatus

lib/shared/state-sync/entries-state-sync-spec.js
45–53

There's a few options:

  • just pass keyserver id as an argument to these functions
  • make the selector field be a function that takes a keyserver id and returns a selector for this specific keyserver

Probably depends on how we structure the websocket code around multiple keyservers

lib/shared/state-sync/state-sync-spec.js
30

We still use the the hashKey, innerHashSpec fields in socket selector. Keeping them together with the hashing functions simplifies the code (see the next diff)

Harbormaster completed remote builds in B22966: Diff 31630.Oct 4 2023, 6:23 AM
michal updated this revision to Diff 31808.Oct 9 2023, 7:24 AM

Rebase

Harbormaster completed remote builds in B23106: Diff 31808.Oct 9 2023, 7:43 AM
Closed by commit rCOMMe919581da2fb: [lib] Add hash functions to state sync spec (authored by Michal Gniadek <michal.gniadek@swmansion.com>). · Explain WhyOct 10 2023, 2:30 AM
This revision was automatically updated to reflect the committed changes.
Michal Gniadek <michal.gniadek@swmansion.com> added a commit: rCOMMe919581da2fb: [lib] Add hash functions to state sync spec.

Revision Contents
Changeset List

Diff 31544

View Options

lib/shared/state-sync/current-user-state-sync-spec.js

Show First 20 Lines • Show All 42 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 { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
import Alert from '../utils/alert.js'; import Alert from '../utils/alert.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,
Show All 10 Linestype 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,
+navigateToUserProfileBottomSheet: (userID: string) => mixed,
}; };
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 77 Lines • ▼ Show 20 Lines ) {
> >
<Text style={this.props.styles.blueAction}>Add</Text> <Text style={this.props.styles.blueAction}>Add</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }
return ( return (
<View style={[this.props.styles.container, borderBottom]}> <View style={[this.props.styles.container, borderBottom]}>
<TouchableOpacity
ginsuAuthorUnsubmitted
Done
Inline Actions

The red background shows the TouchableOpacity:

Screenshot 2023-09-25 at 10.10.09 AM.png (1×1 px, 711 KB)

I think it would be a be a better user experience if we had the entire item be a touchable instead of just the avatar/username

ginsu: The red background shows the `TouchableOpacity`: {F773403} I think it would be a be a better…
atulUnsubmitted
Not Done
Inline Actions

What surfaces should be "touchable" is probably something we should consider as part of the Design System (at some point) CC @ashoat @ted

In this particular case, it feels a little weird that we're extending so far to the right, but on the left we go just until the left edge.

I guess this is a new scenario, because previously we were just listing "static" avatars/usernames and left all the interaction to the right-justified icon.

Unsolicited, but if it were up to me I think it'd make sense to give the avatar/username some sort of inset to make it clear that

A. the element is interactive
B. the bounds of the tap target

Something like:

684a67.png (1×2 px, 418 KB)

or

1181e5.png (1×1 px, 309 KB)

atul: What surfaces should be "touchable" is probably something we should consider as part of the…
ashoatUnsubmitted
Not Done
Inline Actions

I like @atul's idea. Curious for @ted's thoughts, both on Atul's idea and also on how we can include touchable surface / interaction design of touchables in the design system

ashoat: I like @atul's idea. Curious for @ted's thoughts, both on Atul's idea and also on how we can…
tedUnsubmitted
Not Done
Inline Actions

In this particular case, it feels a little weird that we're extending so far to the right, but on the left we go just until the left edge.

I think the touch point can extend more on the left, to where Search starts at the input field above.

@atul @ashoat I think adding touch points to the design system makes perfect sense and can be included for both web and mobile components. Each design system component lives on its own page in Figma, which will also include small documents to specifically point out the interactive touch points. These documents can point out other component rules such as places to use this component, certain rules of how to use this component, etc.

For the concepts you shared, I don't think that adding an inset is necessary to point out that the element is interactive. Adding an inset feels a bit cluttered to the overall list layout. If we do want to use an inset container for the avatar and username, then reducing the separator lines (smaller, more subtle) will help with over-cluttering.

I took a quick look at Discord's username touchpoints in their list. In the video, I am tapping as far right as I can before the two action buttons. The entire width seems tappable except for the two buttons. Not saying we need to do exactly how Discord handles this interaction, I wanted to see how other apps were handling this.

With that, I think the UI is fine how it is, but always open if more people think we should add an inset or interactive indicator. Thank you!

ted: > In this particular case, it feels a little weird that we're extending so far to the right…
ginsuAuthorUnsubmitted
Done
Inline Actions

For the concepts you shared, I don't think that adding an inset is necessary to point out that the element is interactive. Adding an inset feels a bit cluttered to the overall list layout. If we do want to use an inset container for the avatar and username, then reducing the separator lines (smaller, more subtle) will help with over-cluttering.

I agree with this point, I think especially since we have the edit (pencil) icon to the right it would feel strange if that didn't have an inset/obvious indicator that the icon is touchable but the avatar/username does.

To polish this up, I can make the entire container a touchable or at the very least, also extend the touchable to be touching the left side of this container

ginsu: > For the concepts you shared, I don't think that adding an inset is necessary to point out…
onPress={this.onPressUser}
style={this.props.styles.userInfoContainer}
>
<UserAvatar size="small" userID={this.props.userInfo.id} /> <UserAvatar size="small" userID={this.props.userInfo.id} />
<SingleLine style={this.props.styles.username}> <SingleLine style={this.props.styles.username}>
{this.props.userInfo.username} {this.props.userInfo.username}
</SingleLine> </SingleLine>
</TouchableOpacity>
{editButton} {editButton}
</View> </View>
); );
} }
onPressUser = () => {
this.props.navigateToUserProfileBottomSheet(this.props.userInfo.id);
};
onSelect = () => { onSelect = () => {
const { id, username } = this.props.userInfo; const { id, username } = this.props.userInfo;
this.props.onSelect({ id, username }); this.props.onSelect({ id, username });
}; };
visibleEntryIDs() { visibleEntryIDs() {
const { relationshipListRoute } = this.props; const { relationshipListRoute } = this.props;
const id = { const id = {
▲ Show 20 Lines • Show All 85 Lines • ▼ Show 20 Lines container: {
paddingHorizontal: 24, paddingHorizontal: 24,
paddingVertical: 10, paddingVertical: 10,
backgroundColor: 'panelForeground', backgroundColor: 'panelForeground',
borderColor: 'panelForegroundBorder', borderColor: 'panelForegroundBorder',
}, },
borderBottom: { borderBottom: {
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
userInfoContainer: {
flex: 1,
flexDirection: 'row',
},
buttonContainer: { buttonContainer: {
flexDirection: 'row', flexDirection: 'row',
}, },
editButtonWithMargin: { editButtonWithMargin: {
marginLeft: 15, marginLeft: 15,
}, },
username: { username: {
color: 'panelForegroundSecondaryLabel', color: 'panelForegroundSecondaryLabel',
Show All 29 Lines ) {
); );
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 navigateToUserProfileBottomSheet =
useNavigateToUserProfileBottomSheet();
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}
navigateToUserProfileBottomSheet={navigateToUserProfileBottomSheet}
/> />
); );
}); });
export default ConnectedRelationshipListItem; export default ConnectedRelationshipListItem;
View Options

lib/shared/state-sync/entries-state-sync-spec.js

Show First 20 Lines • Show All 42 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 { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
import Alert from '../utils/alert.js'; import Alert from '../utils/alert.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,
Show All 10 Linestype 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,
+navigateToUserProfileBottomSheet: (userID: string) => mixed,
}; };
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 77 Lines • ▼ Show 20 Lines ) {
> >
<Text style={this.props.styles.blueAction}>Add</Text> <Text style={this.props.styles.blueAction}>Add</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }
return ( return (
<View style={[this.props.styles.container, borderBottom]}> <View style={[this.props.styles.container, borderBottom]}>
<TouchableOpacity
ginsuAuthorUnsubmitted
Done
Inline Actions

The red background shows the TouchableOpacity:

Screenshot 2023-09-25 at 10.10.09 AM.png (1×1 px, 711 KB)

I think it would be a be a better user experience if we had the entire item be a touchable instead of just the avatar/username

ginsu: The red background shows the `TouchableOpacity`: {F773403} I think it would be a be a better…
atulUnsubmitted
Not Done
Inline Actions

What surfaces should be "touchable" is probably something we should consider as part of the Design System (at some point) CC @ashoat @ted

In this particular case, it feels a little weird that we're extending so far to the right, but on the left we go just until the left edge.

I guess this is a new scenario, because previously we were just listing "static" avatars/usernames and left all the interaction to the right-justified icon.

Unsolicited, but if it were up to me I think it'd make sense to give the avatar/username some sort of inset to make it clear that

A. the element is interactive
B. the bounds of the tap target

Something like:

684a67.png (1×2 px, 418 KB)

or

1181e5.png (1×1 px, 309 KB)

atul: What surfaces should be "touchable" is probably something we should consider as part of the…
ashoatUnsubmitted
Not Done
Inline Actions

I like @atul's idea. Curious for @ted's thoughts, both on Atul's idea and also on how we can include touchable surface / interaction design of touchables in the design system

ashoat: I like @atul's idea. Curious for @ted's thoughts, both on Atul's idea and also on how we can…
tedUnsubmitted
Not Done
Inline Actions

In this particular case, it feels a little weird that we're extending so far to the right, but on the left we go just until the left edge.

I think the touch point can extend more on the left, to where Search starts at the input field above.

@atul @ashoat I think adding touch points to the design system makes perfect sense and can be included for both web and mobile components. Each design system component lives on its own page in Figma, which will also include small documents to specifically point out the interactive touch points. These documents can point out other component rules such as places to use this component, certain rules of how to use this component, etc.

For the concepts you shared, I don't think that adding an inset is necessary to point out that the element is interactive. Adding an inset feels a bit cluttered to the overall list layout. If we do want to use an inset container for the avatar and username, then reducing the separator lines (smaller, more subtle) will help with over-cluttering.

I took a quick look at Discord's username touchpoints in their list. In the video, I am tapping as far right as I can before the two action buttons. The entire width seems tappable except for the two buttons. Not saying we need to do exactly how Discord handles this interaction, I wanted to see how other apps were handling this.

With that, I think the UI is fine how it is, but always open if more people think we should add an inset or interactive indicator. Thank you!

ted: > In this particular case, it feels a little weird that we're extending so far to the right…
ginsuAuthorUnsubmitted
Done
Inline Actions

For the concepts you shared, I don't think that adding an inset is necessary to point out that the element is interactive. Adding an inset feels a bit cluttered to the overall list layout. If we do want to use an inset container for the avatar and username, then reducing the separator lines (smaller, more subtle) will help with over-cluttering.

I agree with this point, I think especially since we have the edit (pencil) icon to the right it would feel strange if that didn't have an inset/obvious indicator that the icon is touchable but the avatar/username does.

To polish this up, I can make the entire container a touchable or at the very least, also extend the touchable to be touching the left side of this container

ginsu: > For the concepts you shared, I don't think that adding an inset is necessary to point out…
onPress={this.onPressUser}
style={this.props.styles.userInfoContainer}
>
<UserAvatar size="small" userID={this.props.userInfo.id} /> <UserAvatar size="small" userID={this.props.userInfo.id} />
<SingleLine style={this.props.styles.username}> <SingleLine style={this.props.styles.username}>
{this.props.userInfo.username} {this.props.userInfo.username}
</SingleLine> </SingleLine>
</TouchableOpacity>
{editButton} {editButton}
</View> </View>
); );
} }
onPressUser = () => {
this.props.navigateToUserProfileBottomSheet(this.props.userInfo.id);
};
onSelect = () => { onSelect = () => {
const { id, username } = this.props.userInfo; const { id, username } = this.props.userInfo;
this.props.onSelect({ id, username }); this.props.onSelect({ id, username });
}; };
visibleEntryIDs() { visibleEntryIDs() {
const { relationshipListRoute } = this.props; const { relationshipListRoute } = this.props;
const id = { const id = {
▲ Show 20 Lines • Show All 85 Lines • ▼ Show 20 Lines container: {
paddingHorizontal: 24, paddingHorizontal: 24,
paddingVertical: 10, paddingVertical: 10,
backgroundColor: 'panelForeground', backgroundColor: 'panelForeground',
borderColor: 'panelForegroundBorder', borderColor: 'panelForegroundBorder',
}, },
borderBottom: { borderBottom: {
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
userInfoContainer: {
flex: 1,
flexDirection: 'row',
},
buttonContainer: { buttonContainer: {
flexDirection: 'row', flexDirection: 'row',
}, },
editButtonWithMargin: { editButtonWithMargin: {
marginLeft: 15, marginLeft: 15,
}, },
username: { username: {
color: 'panelForegroundSecondaryLabel', color: 'panelForegroundSecondaryLabel',
Show All 29 Lines ) {
); );
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 navigateToUserProfileBottomSheet =
useNavigateToUserProfileBottomSheet();
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}
navigateToUserProfileBottomSheet={navigateToUserProfileBottomSheet}
/> />
); );
}); });
export default ConnectedRelationshipListItem; export default ConnectedRelationshipListItem;
View Options

lib/shared/state-sync/state-sync-spec.js

Show First 20 Lines • Show All 42 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 { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
import Alert from '../utils/alert.js'; import Alert from '../utils/alert.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,
Show All 10 Linestype 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,
+navigateToUserProfileBottomSheet: (userID: string) => mixed,
}; };
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 77 Lines • ▼ Show 20 Lines ) {
> >
<Text style={this.props.styles.blueAction}>Add</Text> <Text style={this.props.styles.blueAction}>Add</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }
return ( return (
<View style={[this.props.styles.container, borderBottom]}> <View style={[this.props.styles.container, borderBottom]}>
<TouchableOpacity
ginsuAuthorUnsubmitted
Done
Inline Actions

The red background shows the TouchableOpacity:

Screenshot 2023-09-25 at 10.10.09 AM.png (1×1 px, 711 KB)

I think it would be a be a better user experience if we had the entire item be a touchable instead of just the avatar/username

ginsu: The red background shows the `TouchableOpacity`: {F773403} I think it would be a be a better…
atulUnsubmitted
Not Done
Inline Actions

What surfaces should be "touchable" is probably something we should consider as part of the Design System (at some point) CC @ashoat @ted

In this particular case, it feels a little weird that we're extending so far to the right, but on the left we go just until the left edge.

I guess this is a new scenario, because previously we were just listing "static" avatars/usernames and left all the interaction to the right-justified icon.

Unsolicited, but if it were up to me I think it'd make sense to give the avatar/username some sort of inset to make it clear that

A. the element is interactive
B. the bounds of the tap target

Something like:

684a67.png (1×2 px, 418 KB)

or

1181e5.png (1×1 px, 309 KB)

atul: What surfaces should be "touchable" is probably something we should consider as part of the…
ashoatUnsubmitted
Not Done
Inline Actions

I like @atul's idea. Curious for @ted's thoughts, both on Atul's idea and also on how we can include touchable surface / interaction design of touchables in the design system

ashoat: I like @atul's idea. Curious for @ted's thoughts, both on Atul's idea and also on how we can…
tedUnsubmitted
Not Done
Inline Actions

In this particular case, it feels a little weird that we're extending so far to the right, but on the left we go just until the left edge.

I think the touch point can extend more on the left, to where Search starts at the input field above.

@atul @ashoat I think adding touch points to the design system makes perfect sense and can be included for both web and mobile components. Each design system component lives on its own page in Figma, which will also include small documents to specifically point out the interactive touch points. These documents can point out other component rules such as places to use this component, certain rules of how to use this component, etc.

For the concepts you shared, I don't think that adding an inset is necessary to point out that the element is interactive. Adding an inset feels a bit cluttered to the overall list layout. If we do want to use an inset container for the avatar and username, then reducing the separator lines (smaller, more subtle) will help with over-cluttering.

I took a quick look at Discord's username touchpoints in their list. In the video, I am tapping as far right as I can before the two action buttons. The entire width seems tappable except for the two buttons. Not saying we need to do exactly how Discord handles this interaction, I wanted to see how other apps were handling this.

With that, I think the UI is fine how it is, but always open if more people think we should add an inset or interactive indicator. Thank you!

ted: > In this particular case, it feels a little weird that we're extending so far to the right…
ginsuAuthorUnsubmitted
Done
Inline Actions

For the concepts you shared, I don't think that adding an inset is necessary to point out that the element is interactive. Adding an inset feels a bit cluttered to the overall list layout. If we do want to use an inset container for the avatar and username, then reducing the separator lines (smaller, more subtle) will help with over-cluttering.

I agree with this point, I think especially since we have the edit (pencil) icon to the right it would feel strange if that didn't have an inset/obvious indicator that the icon is touchable but the avatar/username does.

To polish this up, I can make the entire container a touchable or at the very least, also extend the touchable to be touching the left side of this container

ginsu: > For the concepts you shared, I don't think that adding an inset is necessary to point out…
onPress={this.onPressUser}
style={this.props.styles.userInfoContainer}
>
<UserAvatar size="small" userID={this.props.userInfo.id} /> <UserAvatar size="small" userID={this.props.userInfo.id} />
<SingleLine style={this.props.styles.username}> <SingleLine style={this.props.styles.username}>
{this.props.userInfo.username} {this.props.userInfo.username}
</SingleLine> </SingleLine>
</TouchableOpacity>
{editButton} {editButton}
</View> </View>
); );
} }
onPressUser = () => {
this.props.navigateToUserProfileBottomSheet(this.props.userInfo.id);
};
onSelect = () => { onSelect = () => {
const { id, username } = this.props.userInfo; const { id, username } = this.props.userInfo;
this.props.onSelect({ id, username }); this.props.onSelect({ id, username });
}; };
visibleEntryIDs() { visibleEntryIDs() {
const { relationshipListRoute } = this.props; const { relationshipListRoute } = this.props;
const id = { const id = {
▲ Show 20 Lines • Show All 85 Lines • ▼ Show 20 Lines container: {
paddingHorizontal: 24, paddingHorizontal: 24,
paddingVertical: 10, paddingVertical: 10,
backgroundColor: 'panelForeground', backgroundColor: 'panelForeground',
borderColor: 'panelForegroundBorder', borderColor: 'panelForegroundBorder',
}, },
borderBottom: { borderBottom: {
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
userInfoContainer: {
flex: 1,
flexDirection: 'row',
},
buttonContainer: { buttonContainer: {
flexDirection: 'row', flexDirection: 'row',
}, },
editButtonWithMargin: { editButtonWithMargin: {
marginLeft: 15, marginLeft: 15,
}, },
username: { username: {
color: 'panelForegroundSecondaryLabel', color: 'panelForegroundSecondaryLabel',
Show All 29 Lines ) {
); );
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 navigateToUserProfileBottomSheet =
useNavigateToUserProfileBottomSheet();
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}
navigateToUserProfileBottomSheet={navigateToUserProfileBottomSheet}
/> />
); );
}); });
export default ConnectedRelationshipListItem; export default ConnectedRelationshipListItem;
View Options

lib/shared/state-sync/threads-state-sync-spec.js

Show First 20 Lines • Show All 42 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 { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
import Alert from '../utils/alert.js'; import Alert from '../utils/alert.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,
Show All 10 Linestype 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,
+navigateToUserProfileBottomSheet: (userID: string) => mixed,
}; };
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 77 Lines • ▼ Show 20 Lines ) {
> >
<Text style={this.props.styles.blueAction}>Add</Text> <Text style={this.props.styles.blueAction}>Add</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }
return ( return (
<View style={[this.props.styles.container, borderBottom]}> <View style={[this.props.styles.container, borderBottom]}>
<TouchableOpacity
ginsuAuthorUnsubmitted
Done
Inline Actions

The red background shows the TouchableOpacity:

Screenshot 2023-09-25 at 10.10.09 AM.png (1×1 px, 711 KB)

I think it would be a be a better user experience if we had the entire item be a touchable instead of just the avatar/username

ginsu: The red background shows the `TouchableOpacity`: {F773403} I think it would be a be a better…
atulUnsubmitted
Not Done
Inline Actions

What surfaces should be "touchable" is probably something we should consider as part of the Design System (at some point) CC @ashoat @ted

In this particular case, it feels a little weird that we're extending so far to the right, but on the left we go just until the left edge.

I guess this is a new scenario, because previously we were just listing "static" avatars/usernames and left all the interaction to the right-justified icon.

Unsolicited, but if it were up to me I think it'd make sense to give the avatar/username some sort of inset to make it clear that

A. the element is interactive
B. the bounds of the tap target

Something like:

684a67.png (1×2 px, 418 KB)

or

1181e5.png (1×1 px, 309 KB)

atul: What surfaces should be "touchable" is probably something we should consider as part of the…
ashoatUnsubmitted
Not Done
Inline Actions

I like @atul's idea. Curious for @ted's thoughts, both on Atul's idea and also on how we can include touchable surface / interaction design of touchables in the design system

ashoat: I like @atul's idea. Curious for @ted's thoughts, both on Atul's idea and also on how we can…
tedUnsubmitted
Not Done
Inline Actions

In this particular case, it feels a little weird that we're extending so far to the right, but on the left we go just until the left edge.

I think the touch point can extend more on the left, to where Search starts at the input field above.

@atul @ashoat I think adding touch points to the design system makes perfect sense and can be included for both web and mobile components. Each design system component lives on its own page in Figma, which will also include small documents to specifically point out the interactive touch points. These documents can point out other component rules such as places to use this component, certain rules of how to use this component, etc.

For the concepts you shared, I don't think that adding an inset is necessary to point out that the element is interactive. Adding an inset feels a bit cluttered to the overall list layout. If we do want to use an inset container for the avatar and username, then reducing the separator lines (smaller, more subtle) will help with over-cluttering.

I took a quick look at Discord's username touchpoints in their list. In the video, I am tapping as far right as I can before the two action buttons. The entire width seems tappable except for the two buttons. Not saying we need to do exactly how Discord handles this interaction, I wanted to see how other apps were handling this.

With that, I think the UI is fine how it is, but always open if more people think we should add an inset or interactive indicator. Thank you!

ted: > In this particular case, it feels a little weird that we're extending so far to the right…
ginsuAuthorUnsubmitted
Done
Inline Actions

For the concepts you shared, I don't think that adding an inset is necessary to point out that the element is interactive. Adding an inset feels a bit cluttered to the overall list layout. If we do want to use an inset container for the avatar and username, then reducing the separator lines (smaller, more subtle) will help with over-cluttering.

I agree with this point, I think especially since we have the edit (pencil) icon to the right it would feel strange if that didn't have an inset/obvious indicator that the icon is touchable but the avatar/username does.

To polish this up, I can make the entire container a touchable or at the very least, also extend the touchable to be touching the left side of this container

ginsu: > For the concepts you shared, I don't think that adding an inset is necessary to point out…
onPress={this.onPressUser}
style={this.props.styles.userInfoContainer}
>
<UserAvatar size="small" userID={this.props.userInfo.id} /> <UserAvatar size="small" userID={this.props.userInfo.id} />
<SingleLine style={this.props.styles.username}> <SingleLine style={this.props.styles.username}>
{this.props.userInfo.username} {this.props.userInfo.username}
</SingleLine> </SingleLine>
</TouchableOpacity>
{editButton} {editButton}
</View> </View>
); );
} }
onPressUser = () => {
this.props.navigateToUserProfileBottomSheet(this.props.userInfo.id);
};
onSelect = () => { onSelect = () => {
const { id, username } = this.props.userInfo; const { id, username } = this.props.userInfo;
this.props.onSelect({ id, username }); this.props.onSelect({ id, username });
}; };
visibleEntryIDs() { visibleEntryIDs() {
const { relationshipListRoute } = this.props; const { relationshipListRoute } = this.props;
const id = { const id = {
▲ Show 20 Lines • Show All 85 Lines • ▼ Show 20 Lines container: {
paddingHorizontal: 24, paddingHorizontal: 24,
paddingVertical: 10, paddingVertical: 10,
backgroundColor: 'panelForeground', backgroundColor: 'panelForeground',
borderColor: 'panelForegroundBorder', borderColor: 'panelForegroundBorder',
}, },
borderBottom: { borderBottom: {
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
userInfoContainer: {
flex: 1,
flexDirection: 'row',
},
buttonContainer: { buttonContainer: {
flexDirection: 'row', flexDirection: 'row',
}, },
editButtonWithMargin: { editButtonWithMargin: {
marginLeft: 15, marginLeft: 15,
}, },
username: { username: {
color: 'panelForegroundSecondaryLabel', color: 'panelForegroundSecondaryLabel',
Show All 29 Lines ) {
); );
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 navigateToUserProfileBottomSheet =
useNavigateToUserProfileBottomSheet();
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}
navigateToUserProfileBottomSheet={navigateToUserProfileBottomSheet}
/> />
); );
}); });
export default ConnectedRelationshipListItem; export default ConnectedRelationshipListItem;
View Options

lib/shared/state-sync/users-state-sync-spec.js

Show First 20 Lines • Show All 42 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 { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
import Alert from '../utils/alert.js'; import Alert from '../utils/alert.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,
Show All 10 Linestype 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,
+navigateToUserProfileBottomSheet: (userID: string) => mixed,
}; };
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 77 Lines • ▼ Show 20 Lines ) {
> >
<Text style={this.props.styles.blueAction}>Add</Text> <Text style={this.props.styles.blueAction}>Add</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }
return ( return (
<View style={[this.props.styles.container, borderBottom]}> <View style={[this.props.styles.container, borderBottom]}>
<TouchableOpacity
ginsuAuthorUnsubmitted
Done
Inline Actions

The red background shows the TouchableOpacity:

Screenshot 2023-09-25 at 10.10.09 AM.png (1×1 px, 711 KB)

I think it would be a be a better user experience if we had the entire item be a touchable instead of just the avatar/username

ginsu: The red background shows the `TouchableOpacity`: {F773403} I think it would be a be a better…
atulUnsubmitted
Not Done
Inline Actions

What surfaces should be "touchable" is probably something we should consider as part of the Design System (at some point) CC @ashoat @ted

In this particular case, it feels a little weird that we're extending so far to the right, but on the left we go just until the left edge.

I guess this is a new scenario, because previously we were just listing "static" avatars/usernames and left all the interaction to the right-justified icon.

Unsolicited, but if it were up to me I think it'd make sense to give the avatar/username some sort of inset to make it clear that

A. the element is interactive
B. the bounds of the tap target

Something like:

684a67.png (1×2 px, 418 KB)

or

1181e5.png (1×1 px, 309 KB)

atul: What surfaces should be "touchable" is probably something we should consider as part of the…
ashoatUnsubmitted
Not Done
Inline Actions

I like @atul's idea. Curious for @ted's thoughts, both on Atul's idea and also on how we can include touchable surface / interaction design of touchables in the design system

ashoat: I like @atul's idea. Curious for @ted's thoughts, both on Atul's idea and also on how we can…
tedUnsubmitted
Not Done
Inline Actions

In this particular case, it feels a little weird that we're extending so far to the right, but on the left we go just until the left edge.

I think the touch point can extend more on the left, to where Search starts at the input field above.

@atul @ashoat I think adding touch points to the design system makes perfect sense and can be included for both web and mobile components. Each design system component lives on its own page in Figma, which will also include small documents to specifically point out the interactive touch points. These documents can point out other component rules such as places to use this component, certain rules of how to use this component, etc.

For the concepts you shared, I don't think that adding an inset is necessary to point out that the element is interactive. Adding an inset feels a bit cluttered to the overall list layout. If we do want to use an inset container for the avatar and username, then reducing the separator lines (smaller, more subtle) will help with over-cluttering.

I took a quick look at Discord's username touchpoints in their list. In the video, I am tapping as far right as I can before the two action buttons. The entire width seems tappable except for the two buttons. Not saying we need to do exactly how Discord handles this interaction, I wanted to see how other apps were handling this.

With that, I think the UI is fine how it is, but always open if more people think we should add an inset or interactive indicator. Thank you!

ted: > In this particular case, it feels a little weird that we're extending so far to the right…
ginsuAuthorUnsubmitted
Done
Inline Actions

For the concepts you shared, I don't think that adding an inset is necessary to point out that the element is interactive. Adding an inset feels a bit cluttered to the overall list layout. If we do want to use an inset container for the avatar and username, then reducing the separator lines (smaller, more subtle) will help with over-cluttering.

I agree with this point, I think especially since we have the edit (pencil) icon to the right it would feel strange if that didn't have an inset/obvious indicator that the icon is touchable but the avatar/username does.

To polish this up, I can make the entire container a touchable or at the very least, also extend the touchable to be touching the left side of this container

ginsu: > For the concepts you shared, I don't think that adding an inset is necessary to point out…
onPress={this.onPressUser}
style={this.props.styles.userInfoContainer}
>
<UserAvatar size="small" userID={this.props.userInfo.id} /> <UserAvatar size="small" userID={this.props.userInfo.id} />
<SingleLine style={this.props.styles.username}> <SingleLine style={this.props.styles.username}>
{this.props.userInfo.username} {this.props.userInfo.username}
</SingleLine> </SingleLine>
</TouchableOpacity>
{editButton} {editButton}
</View> </View>
); );
} }
onPressUser = () => {
this.props.navigateToUserProfileBottomSheet(this.props.userInfo.id);
};
onSelect = () => { onSelect = () => {
const { id, username } = this.props.userInfo; const { id, username } = this.props.userInfo;
this.props.onSelect({ id, username }); this.props.onSelect({ id, username });
}; };
visibleEntryIDs() { visibleEntryIDs() {
const { relationshipListRoute } = this.props; const { relationshipListRoute } = this.props;
const id = { const id = {
▲ Show 20 Lines • Show All 85 Lines • ▼ Show 20 Lines container: {
paddingHorizontal: 24, paddingHorizontal: 24,
paddingVertical: 10, paddingVertical: 10,
backgroundColor: 'panelForeground', backgroundColor: 'panelForeground',
borderColor: 'panelForegroundBorder', borderColor: 'panelForegroundBorder',
}, },
borderBottom: { borderBottom: {
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
userInfoContainer: {
flex: 1,
flexDirection: 'row',
},
buttonContainer: { buttonContainer: {
flexDirection: 'row', flexDirection: 'row',
}, },
editButtonWithMargin: { editButtonWithMargin: {
marginLeft: 15, marginLeft: 15,
}, },
username: { username: {
color: 'panelForegroundSecondaryLabel', color: 'panelForegroundSecondaryLabel',
Show All 29 Lines ) {
); );
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 navigateToUserProfileBottomSheet =
useNavigateToUserProfileBottomSheet();
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}
navigateToUserProfileBottomSheet={navigateToUserProfileBottomSheet}
/> />
); );
}); });
export default ConnectedRelationshipListItem; export default ConnectedRelationshipListItem;