Paths

Table of Contentst

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

[native] make user profiles accessible from RelationshipListItem
ClosedPublic
Actions

Authored by ginsu on Sep 25 2023, 7:04 AM.

Details

Reviewers

atul
inka

Commits

rCOMM0900e7074de9: [native] make user profiles accessible from RelationshipListItem

Summary

This diff adds a TouchableOpacity to the RelationshipListItem component and navigates to the user profile bottom sheet whenever the onPress is triggered

Depends on D9285

Test Plan

Please see the demo video below

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.Sep 25 2023, 7:04 AM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptSep 25 2023, 7:04 AM

ginsu edited the summary of this revision. (Show Details)Sep 25 2023, 7:11 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, inka.

ginsu added a parent revision: D9285: [native] simplify RelationshipListItem jsx.

ginsu added inline comments.Sep 25 2023, 7:15 AM

native/profile/relationship-list-item.react.js
172 ↗	(On Diff #31400)	The red background shows the `TouchableOpacity`: 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 attached a referenced file: F773403: Screenshot 2023-09-25 at 10.10.09 AM.png. (Show Details)Sep 25 2023, 7:15 AM

Harbormaster completed remote builds in B22829: Diff 31400.Sep 25 2023, 7:22 AM

ginsu requested review of this revision.Sep 25 2023, 7:22 AM

ginsu added a child revision: D9289: [native] make user profile accessible from message author avatar.Sep 25 2023, 7:23 AM

atul accepted this revision.Sep 26 2023, 12:54 PM

atul added a subscriber: • ted.

atul added inline comments.

native/profile/relationship-list-item.react.js
172 ↗	(On Diff #31400)	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: or

This revision is now accepted and ready to land.Sep 26 2023, 12:54 PM

atul attached a referenced file: F774976: 1181e5.png. (Show Details)Sep 26 2023, 12:54 PM

atul attached a referenced file: F774975: 684a67.png. (Show Details)

ashoat added inline comments.Sep 27 2023, 6:10 AM

native/profile/relationship-list-item.react.js
172 ↗	(On Diff #31400)	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

• ted added inline comments.Sep 27 2023, 10:59 AM

native/profile/relationship-list-item.react.js
172 ↗	(On Diff #31400)	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 attached a referenced file: F776853: RPReplay_Final1695836467.MP4. (Show Details)Sep 27 2023, 10:59 AM

ginsu added inline comments.Sep 27 2023, 11:06 AM

native/profile/relationship-list-item.react.js
172 ↗	(On Diff #31400)	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

address feedback

Harbormaster completed remote builds in B23042: Diff 31731.Oct 6 2023, 4:09 AM

rebase before landing

Harbormaster completed remote builds in B23157: Diff 31888.Oct 11 2023, 1:48 AM

Closed by commit rCOMM0900e7074de9: [native] make user profiles accessible from RelationshipListItem (authored by ginsu). · Explain WhyOct 11 2023, 2:38 AM

This revision was automatically updated to reflect the committed changes.

ginsu added a commit: rCOMM0900e7074de9: [native] make user profiles accessible from RelationshipListItem.

Revision Contents
Changeset List

Path

Size

native/

profile/

relationship-list-item.react.js

17 lines

Diff 31731

View Options

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

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
import { Text } from 'react-native';		import { Text } from 'react-native';

import { oldValidUsernameRegexString } from 'lib/shared/account-utils.js';		import { oldValidUsernameRegexString } from 'lib/shared/account-utils.js';
import {		import {
getNewTextAndSelection,		getNewTextAndSelection,
encodeChatMentionText,		encodeChatMentionText,
type Selection,		type Selection,
type TypeaheadTooltipActionItem,		type TypeaheadTooltipActionItem,
type MentionTypeaheadSuggestionItem,		type MentionTypeaheadSuggestionItem,
} from 'lib/shared/mention-utils.js';		} from 'lib/shared/mention-utils.js';
		import { validChatNameRegexString } from 'lib/shared/thread-utils.js';
import { stringForUserExplicit } from 'lib/shared/user-utils.js';		import { stringForUserExplicit } from 'lib/shared/user-utils.js';

		import ThreadAvatar from '../avatars/thread-avatar.react.js';
import UserAvatar from '../avatars/user-avatar.react.js';		import UserAvatar from '../avatars/user-avatar.react.js';
import type { TypeaheadTooltipStyles } from '../chat/typeahead-tooltip.react.js';		import type { TypeaheadTooltipStyles } from '../chat/typeahead-tooltip.react.js';

// Native regex is a little bit different than web one as		// Native regex is a little bit different than web one as
// there are no named capturing groups yet on native.		// there are no named capturing groups yet on native.
const nativeMentionTypeaheadRegex: RegExp = new RegExp(		const nativeMentionTypeaheadRegex: RegExp = new RegExp(
`((^(.\|\n)*\\s+)\|^)@(${oldValidUsernameRegexString})?$`,		`((^(.\|\n)*\\s+)\|^)@(${oldValidUsernameRegexString}\|${validChatNameRegexString})?$`,
);		);

export type TypeaheadTooltipActionsParams<SuggestionType> = {		export type TypeaheadTooltipActionsParams<SuggestionType> = {
+suggestions: $ReadOnlyArray<SuggestionType>,		+suggestions: $ReadOnlyArray<SuggestionType>,
+textBeforeAtSymbol: string,		+textBeforeAtSymbol: string,
+text: string,		+text: string,
+textPrefix: string,		+textPrefix: string,
+focusAndUpdateTextAndSelection: (text: string, selection: Selection) => void,		+focusAndUpdateTextAndSelection: (text: string, selection: Selection) => void,
Show All 31 Lines	if (suggestion.type === 'user') {
});		});
},		},
actionButtonContent: {		actionButtonContent: {
type: 'user',		type: 'user',
userInfo,		userInfo,
},		},
});		});
} else if (suggestion.type === 'chat') {		} else if (suggestion.type === 'chat') {
const { chat } = suggestion;		const { threadInfo } = suggestion;
const mentionText = `@[[${chat.id}:${encodeChatMentionText(		const mentionText = `@[[${threadInfo.id}:${encodeChatMentionText(
chat.uiName,		threadInfo.uiName,
)}]]`;		)}]]`;
actions.push({		actions.push({
key: chat.id,		key: threadInfo.id,
execute: () => {		execute: () => {
const { newText, newSelectionStart } = getNewTextAndSelection(		const { newText, newSelectionStart } = getNewTextAndSelection(
textBeforeAtSymbol,		textBeforeAtSymbol,
text,		text,
textPrefix,		textPrefix,
mentionText,		mentionText,
);		);
focusAndUpdateTextAndSelection(newText, {		focusAndUpdateTextAndSelection(newText, {
start: newSelectionStart,		start: newSelectionStart,
end: newSelectionStart,		end: newSelectionStart,
});		});
},		},
actionButtonContent: {		actionButtonContent: {
type: 'chat',		type: 'chat',
chat,		threadInfo,
},		},
});		});
}		}
}		}
return actions;		return actions;
}		}

export type TypeaheadTooltipButtonRendererParams<SuggestionItemType> = {		export type TypeaheadTooltipButtonRendererParams<SuggestionItemType> = {
+item: TypeaheadTooltipActionItem<SuggestionItemType>,		+item: TypeaheadTooltipActionItem<SuggestionItemType>,
+styles: TypeaheadTooltipStyles,		+styles: TypeaheadTooltipStyles,
};		};
function mentionTypeaheadTooltipButtonRenderer({		function mentionTypeaheadTooltipButtonRenderer({
item,		item,
styles,		styles,
}: TypeaheadTooltipButtonRendererParams<MentionTypeaheadSuggestionItem>): React.Node {		}: TypeaheadTooltipButtonRendererParams<MentionTypeaheadSuggestionItem>): React.Node {
let avatarComponent = null;		let avatarComponent = null;
let typeaheadTooltipButtonText = null;		let typeaheadTooltipButtonText = null;
if (item.actionButtonContent.type === 'user') {		if (item.actionButtonContent.type === 'user') {
avatarComponent = (		avatarComponent = (
<UserAvatar size="small" userID={item.actionButtonContent.userInfo.id} />		<UserAvatar size="small" userID={item.actionButtonContent.userInfo.id} />
);		);
typeaheadTooltipButtonText = item.actionButtonContent.userInfo.username;		typeaheadTooltipButtonText = item.actionButtonContent.userInfo.username;
		} else if (item.actionButtonContent.type === 'chat') {
		typeaheadTooltipButtonText = item.actionButtonContent.threadInfo.uiName;
		avatarComponent = (
		<ThreadAvatar
		size="small"
		threadInfo={item.actionButtonContent.threadInfo}
		/>
		);
}		}
return (		return (
<>		<>
{avatarComponent}		{avatarComponent}
<Text style={styles.buttonLabel} numberOfLines={1}>		<Text style={styles.buttonLabel} numberOfLines={1}>
{typeaheadTooltipButtonText}		{typeaheadTooltipButtonText}
</Text>		</Text>
</>		</>
);		);
}		}

export {		export {
nativeMentionTypeaheadRegex,		nativeMentionTypeaheadRegex,
mentionTypeaheadTooltipActions,		mentionTypeaheadTooltipActions,
mentionTypeaheadTooltipButtonRenderer,		mentionTypeaheadTooltipButtonRenderer,
};		};

[native] make user profiles accessible from RelationshipListItemClosedPublicActions