[native] introduce MarkdownUserMention component
ClosedPublic
Actions

Authored by ginsu on Oct 6 2023, 5:18 AM.

Details

Reviewers

atul
inka

Commits

rCOMMd41f80f39730: [native] introduce MarkdownUserMention component

Summary

The last step here is to render a Text component that has an onPress event that will navigate to a user profile whenever that callback is called. Building this component, I took some inspiration from @patryk's work with the MarkdownChatMention component.

https://github.com/CommE2E/comm/blob/master/native/markdown/markdown-chat-mention.react.js

This is step 4 in the list below
Outlined below are the steps I will take to make @metion of a user into a touchable

Introduce createMemberMapForUserMentions function (Right now we only store a set of usernames but we also will want to know the id of the user based on the username)
Introduce parseUserMentions function (We will use this function to get and return a userID from the membersMap)
Introduce userProfileBottomSheetActive state to the markdown context (This will be used for disabling the press to focus on a message functionality)
Introduce MarkdownUserMention component (this will render the touchable that will navigate to the user profile)

Depends on D9393

Test Plan

Please see the demo video below

Testing the onLongPress callback:

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.Oct 6 2023, 5:18 AM

Herald added subscribers: will, tomek, ashoat. · View Herald TranscriptOct 6 2023, 5:18 AM

ginsu edited the summary of this revision. (Show Details)Oct 6 2023, 5:30 AM

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

ginsu added reviewers: atul, inka.

ginsu added a parent revision: D9393: [native] introduce userProfileBottomSheetActive state to markdown context.

ginsu attached a referenced file: F794509: Screen Recording 2023-10-06 at 8.28.56 AM.mov. (Show Details)

ginsu attached a referenced file: F794502: Screen Recording 2023-10-06 at 8.19.43 AM.mov. (Show Details)

ginsu added a subscriber: • patryk.

ginsu added inline comments.Oct 6 2023, 5:36 AM

native/markdown/markdown-user-mention.react.js
32–40 ↗	(On Diff #31741)	`useFocusEffect` is a hook from react-navigation. This allows us to run side-effects (in this case setting the `userProfileBottomSheetActive` state back to `false`) as the `MessageList` screen comes into focus again (this would happen whenever we close out and navigate away from the user profile bottom sheet) https://reactnavigation.org/docs/use-focus-effect/
47 ↗	(On Diff #31741)	We set `userProfileBottomSheetActive` for this particular message to `true` here so that it disables the press to focus on the message functionality

Harbormaster completed remote builds in B23052: Diff 31741.Oct 6 2023, 5:37 AM

ginsu requested review of this revision.Oct 6 2023, 5:37 AM

ginsu added a child revision: D9395: [native] fix viewer user profile bototm sheet snap point.Oct 6 2023, 5:41 AM

ashoat added inline comments.Oct 9 2023, 1:42 PM

native/markdown/markdown-user-mention.react.js
33 ↗	(On Diff #31741)	Let's keep all hook usages as top-level declarations or assignments. This is the same thing we tend to ask for `await` calls – we want to make sure hooks are clearly visible at the top level

Requesting changes for @ashoat's suggestion

This revision now requires changes to proceed.Oct 9 2023, 1:45 PM

address @ashoat's feedback

Harbormaster completed remote builds in B23152: Diff 31880.Oct 10 2023, 10:31 AM

atul accepted this revision.Oct 10 2023, 2:58 PM

atul added inline comments.

native/markdown/markdown-user-mention.react.js
25 ↗	(On Diff #31880)	Wonder if we should have a hook for this?
40 ↗	(On Diff #31880)	Haven't used `useFocusEffect`, do we need a dependency list passed as second arg, or is this sufficient?
56–63 ↗	(On Diff #31880)	Doesn't hurt to memoize

This revision is now accepted and ready to land.Oct 10 2023, 2:58 PM

ginsu added inline comments.Oct 11 2023, 2:11 AM

native/markdown/markdown-user-mention.react.js
25 ↗	(On Diff #31880)	We use `getMarkdownStyles` in rules.react.js: https://github.com/CommE2E/comm/blob/master/native/markdown/rules.react.js#L122 https://github.com/CommE2E/comm/blob/master/native/markdown/rules.react.js#L379 I will go ahead and memoize this tho
40 ↗	(On Diff #31880)	Sorry forgot to copy over my inline comment from earlier: `useFocusEffect` is a hook from react-navigation. This allows us to run side-effects (in this case setting the `userProfileBottomSheetActive` state back to `false`) as the `MessageList` screen comes into focus again (this would happen whenever we close out and navigate away from the user profile bottom sheet) https://reactnavigation.org/docs/use-focus-effect/