diff --git a/native/chat/message-header.react.js b/native/chat/message-header.react.js
index c730a7bad..3e0943168 100644
--- a/native/chat/message-header.react.js
+++ b/native/chat/message-header.react.js
@@ -1,123 +1,137 @@
// @flow
import { useRoute } from '@react-navigation/native';
import * as React from 'react';
-import { View } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
import { useStringForUser } from 'lib/hooks/ens-cache.js';
import { clusterEndHeight, avatarOffset } from './chat-constants.js';
import type { DisplayType } from './timestamp.react.js';
import { Timestamp, timestampHeight } from './timestamp.react.js';
import SingleLine from '../components/single-line.react.js';
import { MessageListRouteName } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';
import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
+import { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
type Props = {
+item: ChatMessageInfoItemWithHeight,
+focused: boolean,
+display: DisplayType,
};
function MessageHeader(props: Props): React.Node {
const styles = useStyles(unboundStyles);
const { item, focused, display } = props;
const { creator, time } = item.messageInfo;
const { isViewer } = creator;
+
const route = useRoute();
const modalDisplay = display === 'modal';
const shouldShowUsername = !isViewer && (modalDisplay || item.startsCluster);
const stringForUser = useStringForUser(shouldShowUsername ? creator : null);
+ const navigateToUserProfileBottomSheet =
+ useNavigateToUserProfileBottomSheet();
+
+ const onPressAuthorName = React.useCallback(
+ () => navigateToUserProfileBottomSheet(item.messageInfo.creator.id),
+ [item.messageInfo.creator.id, navigateToUserProfileBottomSheet],
+ );
+
const authorNameStyle = React.useMemo(() => {
const style = [styles.authorName];
if (modalDisplay) {
style.push(styles.modal);
}
return style;
}, [modalDisplay, styles.authorName, styles.modal]);
const authorName = React.useMemo(() => {
if (!stringForUser) {
return null;
}
- return {stringForUser};
- }, [authorNameStyle, stringForUser]);
+ return (
+
+ {stringForUser}
+
+ );
+ }, [authorNameStyle, onPressAuthorName, stringForUser]);
// We only want to render the top-placed timestamp for a message if it's
// rendered in the message list, and not any separate screens (i.e.
// the MessageResultsScreen).
const presentedFromMessageList =
typeof route.params?.presentedFrom === 'string' &&
route.params.presentedFrom.startsWith(MessageListRouteName);
const messageInMessageList =
route.name === MessageListRouteName || presentedFromMessageList;
const timestamp = React.useMemo(() => {
if (!messageInMessageList || (!modalDisplay && !item.startsConversation)) {
return null;
}
return ;
}, [
display,
item.startsConversation,
messageInMessageList,
modalDisplay,
time,
]);
const containerStyle = React.useMemo(() => {
if (!focused || modalDisplay) {
return null;
}
let topMargin = 0;
if (!item.startsCluster && !item.messageInfo.creator.isViewer) {
topMargin += authorNameHeight + clusterEndHeight;
}
if (!item.startsConversation) {
topMargin += timestampHeight;
}
return { marginTop: topMargin };
}, [
focused,
item.messageInfo.creator.isViewer,
item.startsCluster,
item.startsConversation,
modalDisplay,
]);
return (
{timestamp}
{authorName}
);
}
const authorNameHeight = 25;
const unboundStyles = {
authorName: {
bottom: 0,
color: 'listBackgroundSecondaryLabel',
fontSize: 14,
height: authorNameHeight,
marginRight: 7,
paddingHorizontal: 12,
paddingVertical: 4,
marginLeft: 12 + avatarOffset,
},
modal: {
// high contrast framed against OverlayNavigator-dimmed background
color: 'white',
},
};
export { MessageHeader, authorNameHeight };