diff --git a/lib/utils/entity-text.js b/lib/utils/entity-text.js
--- a/lib/utils/entity-text.js
+++ b/lib/utils/entity-text.js
@@ -365,6 +365,7 @@
type RenderFunctions = {
+renderText: ({ +text: string }) => React.Node,
+renderThread: ({ +id: string, +name: string }) => React.Node,
+ +renderUser: ({ +userID: string, usernameText: string }) => React.Node,
+renderColor: ({ +hex: string }) => React.Node,
};
function entityTextToReact(
@@ -372,7 +373,7 @@
threadID: string,
renderFuncs: RenderFunctions,
): React.Node {
- const { renderText, renderThread, renderColor } = renderFuncs;
+ const { renderText, renderThread, renderUser, renderColor } = renderFuncs;
// ESLint doesn't recognize that invariant always throws
// eslint-disable-next-line consistent-return
return entityText.map((entity, i) => {
@@ -402,7 +403,14 @@
);
} else if (entity.type === 'user') {
- return getNameForUserEntity(entity);
+ const userID = entity.id;
+ const usernameText = getNameForUserEntity(entity);
+
+ return (
+
+ {renderUser({ userID, usernameText })}
+
+ );
} else {
invariant(
false,
diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js
--- a/native/chat/inner-robotext-message.react.js
+++ b/native/chat/inner-robotext-message.react.js
@@ -21,6 +21,7 @@
import { useSelector } from '../redux/redux-utils.js';
import { useOverlayStyles } from '../themes/colors.js';
import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types.js';
+import { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js';
function dummyNodeForRobotextMessageHeightMeasurement(
robotext: EntityText,
@@ -75,6 +76,10 @@
// eslint-disable-next-line react/display-name
renderThread: ({ id, name }) => ,
// eslint-disable-next-line react/display-name
+ renderUser: ({ userID, usernameText }) => (
+
+ ),
+ // eslint-disable-next-line react/display-name
renderColor: ({ hex }) => ,
});
}, [robotextWithENSNames, activeTheme, threadID, styles.robotext]);
@@ -114,6 +119,30 @@
);
}
+type UserEntityProps = {
+ userID: string,
+ usernameText: string,
+};
+function UserEntity(props: UserEntityProps) {
+ const { userID, usernameText } = props;
+
+ const styles = useOverlayStyles(unboundStyles);
+
+ const navigateToUserProfileBottomSheet =
+ useNavigateToUserProfileBottomSheet();
+
+ const onPressUser = React.useCallback(
+ () => navigateToUserProfileBottomSheet(userID),
+ [navigateToUserProfileBottomSheet, userID],
+ );
+
+ return (
+
+ {usernameText}
+
+ );
+}
+
function ColorEntity(props: { +color: string }) {
const colorStyle = { color: props.color };
return {props.color};
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -69,6 +69,10 @@
// eslint-disable-next-line react/display-name
renderThread: ({ id, name }) => ,
// eslint-disable-next-line react/display-name
+ renderUser: ({ userID, usernameText }) => (
+
+ ),
+ // eslint-disable-next-line react/display-name
renderColor: ({ hex }) => ,
});
}, [robotextWithENSNames, threadID]);
@@ -134,6 +138,19 @@
},
);
+type UserEntityProps = {
+ userID: string,
+ usernameText: string,
+};
+// Since entityTextToReact lives in lib I created this dummy UserEntity
+// component for web that will be used temporarily to appease flow
+// https://phab.comm.dev/D9389
+function UserEntity(props: UserEntityProps) {
+ const { usernameText } = props;
+
+ return usernameText;
+}
+
function ColorEntity(props: { color: string }) {
const colorStyle = { color: props.color };
return {props.color};