Paths

Table of Contentst

-
native/components/
-
components/
-
user-profile.react.js

[native] use stringForUserExplicit function to determine username text for profiles
ClosedPublic
Actions

Authored by ginsu on Sep 10 2023, 10:57 PM.

Details

Reviewers

atul
inka

Commits

rCOMMdf8e1881cd14: [native] use stringForUserExplicit function to determine username text for…

Summary

At this point the UserProfile component needed a userInfo of type AccountUserInfo to render. However, we need to consider the case when we view a profile and we don't know the username on the client (an anonymous user). stringForUserExplicit is a function that handles this case for us and this also allows us to switch the userInfo prop type to be the more permissive UserInfo type

Depends on D9094

Test Plan

Please see screenshot below, and confirmed that UserInfos with known usernames still show the correct username

Screenshot 2023-09-11 at 1.52.35 AM.png (1×1 px, 810 KB)

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.Sep 10 2023, 10:57 PM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptSep 10 2023, 10:57 PM

ginsu edited the summary of this revision. (Show Details)Sep 10 2023, 11:00 PM

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

ginsu added reviewers: atul, inka.

ginsu added a parent revision: D9094: [native] move BottomSheetModalProvider to inside NavigationContainer.

ginsu attached a referenced file: F751982: Screenshot 2023-09-11 at 1.52.35 AM.png. (Show Details)

ginsu mentioned this in D9120: [native] update UserProfileBottomSheet to get a userInfo from a userID.Sep 10 2023, 11:08 PM

ginsu added a child revision: D9120: [native] update UserProfileBottomSheet to get a userInfo from a userID.Sep 10 2023, 11:12 PM

Harbormaster completed remote builds in B22478: Diff 30909.Sep 10 2023, 11:15 PM

ginsu requested review of this revision.Sep 10 2023, 11:15 PM

inka accepted this revision.Sep 12 2023, 5:44 AM

This revision is now accepted and ready to land.Sep 12 2023, 5:44 AM

rebase before landing

Harbormaster completed remote builds in B22557: Diff 31004.Sep 12 2023, 2:42 PM

Closed by commit rCOMMdf8e1881cd14: [native] use stringForUserExplicit function to determine username text for… (authored by ginsu). · Explain WhySep 13 2023, 3:02 PM

This revision was automatically updated to reflect the committed changes.

ginsu added a commit: rCOMMdf8e1881cd14: [native] use stringForUserExplicit function to determine username text for….

Revision Contents
Changeset List

Path

Size

native/

components/

user-profile.react.js

15 lines

Diff 31108

View Options

native/components/user-profile.react.js

// @flow		// @flow

import Icon from '@expo/vector-icons/Feather.js';		import Icon from '@expo/vector-icons/Feather.js';
import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { StyleSheet, View } from 'react-native';		import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated';		import Animated, {
		useDerivedValue,
		withTiming,
		interpolateColor,
		useAnimatedStyle,
		} from 'react-native-reanimated';

import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';		import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js';		import { createMessageReply } from 'lib/shared/message-utils.js';
import { assertComposableMessageType } from 'lib/types/message-types.js';		import { assertComposableMessageType } from 'lib/types/message-types.js';

import {		import {
clusterEndHeight,		clusterEndHeight,
composedMessageStyle,		composedMessageStyle,
Show All 34 Lines	type Props = {
+composedMessageMaxWidth: number,		+composedMessageMaxWidth: number,
+colors: Colors,		+colors: Colors,
+contentAndHeaderOpacity: number \| Node,		+contentAndHeaderOpacity: number \| Node,
+deliveryIconOpacity: number \| Node,		+deliveryIconOpacity: number \| Node,
// withInputState		// withInputState
+inputState: ?InputState,		+inputState: ?InputState,
+navigateToSidebar: () => mixed,		+navigateToSidebar: () => mixed,
+shouldRenderAvatars: boolean,		+shouldRenderAvatars: boolean,
		+editedMessageStyle: AnimatedStyleObj,
};		};
class ComposedMessage extends React.PureComponent<Props> {		class ComposedMessage extends React.PureComponent<Props> {
render() {		render() {
assertComposableMessageType(this.props.item.messageInfo.type);		assertComposableMessageType(this.props.item.messageInfo.type);
const {		const {
item,		item,
sendFailed,		sendFailed,
focused,		focused,
swipeOptions,		swipeOptions,
shouldDisplayPinIndicator,		shouldDisplayPinIndicator,
children,		children,
composedMessageMaxWidth,		composedMessageMaxWidth,
colors,		colors,
inputState,		inputState,
navigateToSidebar,		navigateToSidebar,
contentAndHeaderOpacity,		contentAndHeaderOpacity,
deliveryIconOpacity,		deliveryIconOpacity,
shouldRenderAvatars,		shouldRenderAvatars,
		editedMessageStyle,
...viewProps		...viewProps
} = this.props;		} = this.props;
const { id, creator } = item.messageInfo;		const { id, creator } = item.messageInfo;
const { hasBeenEdited, isPinned } = item;		const { hasBeenEdited, isPinned } = item;

const { isViewer } = creator;		const { isViewer } = creator;
const alignStyle = isViewer		const alignStyle = isViewer
? styles.rightChatBubble		? styles.rightChatBubble
: styles.leftChatBubble;		: styles.leftChatBubble;

let containerMarginBottom = 5;		let containerMarginBottom = 5;
if (item.endsCluster) {		if (item.endsCluster) {
containerMarginBottom += clusterEndHeight;		containerMarginBottom += clusterEndHeight;
}		}
		const containerStyle = { marginBottom: containerMarginBottom };
const highlightStyle =
id && this.props.inputState?.editState.editedMessage?.id === id
? { backgroundColor: `#${item.threadInfo.color}40` }
: null;

const containerStyle = [
{ marginBottom: containerMarginBottom },
highlightStyle,
];

const messageBoxContainerStyle = [styles.messageBoxContainer];		const messageBoxContainerStyle = [styles.messageBoxContainer];
const positioningStyle = isViewer		const positioningStyle = isViewer
? styles.rightChatContainer		? styles.rightChatContainer
: styles.leftChatContainer;		: styles.leftChatContainer;
messageBoxContainerStyle.push(positioningStyle);		messageBoxContainerStyle.push(positioningStyle);

let deliveryIcon = null;		let deliveryIcon = null;
▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines	) {
);		);
}		}

return (		return (
<View {...viewProps}>		<View {...viewProps}>
<AnimatedView style={{ opacity: contentAndHeaderOpacity }}>		<AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
<MessageHeader item={item} focused={focused} display="lowContrast" />		<MessageHeader item={item} focused={focused} display="lowContrast" />
</AnimatedView>		</AnimatedView>
<View style={containerStyle}>		<AnimatedView style={[containerStyle, editedMessageStyle]}>
<View style={styles.alignment}>		<View style={styles.alignment}>
<View style={[styles.content, alignStyle]}>		<View style={[styles.content, alignStyle]}>
{deliveryIcon}		{deliveryIcon}
{messageBox}		{messageBox}
</View>		</View>
{failedSendInfo}		{failedSendInfo}
{inlineEngagement}		{inlineEngagement}
</View>		</View>
</View>		</AnimatedView>
</View>		</View>
);		);
}		}

reply = () => {		reply = () => {
const { inputState, item } = this.props;		const { inputState, item } = this.props;
invariant(inputState, 'inputState should be set in reply');		invariant(inputState, 'inputState should be set in reply');
invariant(item.messageInfo.text, 'text should be set in reply');		invariant(item.messageInfo.text, 'text should be set in reply');
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Lines	const ConnectedComposedMessage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {		React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {
const composedMessageMaxWidth = useComposedMessageMaxWidth();		const composedMessageMaxWidth = useComposedMessageMaxWidth();
const colors = useColors();		const colors = useColors();
const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);
const navigateToSidebar = useNavigateToSidebar(props.item);		const navigateToSidebar = useNavigateToSidebar(props.item);
const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);		const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
const deliveryIconOpacity = useDeliveryIconOpacity(props.item);		const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
const shouldRenderAvatars = useShouldRenderAvatars();		const shouldRenderAvatars = useShouldRenderAvatars();
		const progress = useDerivedValue(() => {
		const isHighlighted =
		inputState?.editState.editedMessage?.id === props.item.messageInfo.id;
		return withTiming(isHighlighted ? 1 : 0);
		});
		const editedMessageStyle = useAnimatedStyle(() => {
		const backgroundColor = interpolateColor(
		progress.value,
		[0, 1],
		['transparent', `#${props.item.threadInfo.color}40`],
		);
		return {
		backgroundColor,
		};
		});

return (		return (
<ComposedMessage		<ComposedMessage
{...props}		{...props}
composedMessageMaxWidth={composedMessageMaxWidth}		composedMessageMaxWidth={composedMessageMaxWidth}
colors={colors}		colors={colors}
inputState={inputState}		inputState={inputState}
navigateToSidebar={navigateToSidebar}		navigateToSidebar={navigateToSidebar}
contentAndHeaderOpacity={contentAndHeaderOpacity}		contentAndHeaderOpacity={contentAndHeaderOpacity}
deliveryIconOpacity={deliveryIconOpacity}		deliveryIconOpacity={deliveryIconOpacity}
shouldRenderAvatars={shouldRenderAvatars}		shouldRenderAvatars={shouldRenderAvatars}
		editedMessageStyle={editedMessageStyle}
/>		/>
);		);
});		});

export default ConnectedComposedMessage;		export default ConnectedComposedMessage;

[native] use stringForUserExplicit function to determine username text for profilesClosedPublicActions