Page MenuHomePhabricator

[native] introduce UserProfileMenuButton
ClosedPublic

Authored by ginsu on Oct 5 2023, 4:05 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Oct 31, 12:36 AM
Unknown Object (File)
Sat, Oct 26, 1:12 AM
Unknown Object (File)
Sun, Oct 20, 3:42 PM
Unknown Object (File)
Sun, Oct 20, 3:42 PM
Unknown Object (File)
Sun, Oct 20, 3:42 PM
Unknown Object (File)
Sun, Oct 20, 3:42 PM
Unknown Object (File)
Sun, Oct 20, 3:42 PM
Unknown Object (File)
Sun, Oct 20, 3:41 PM
Subscribers

Details

Summary

The last step here is to make this menu button a touchable and to navigate to UserRelationshipTooltipModal whenever the menu button gets pressed.

Initially I had all this logic living in UserProfile; however, I didn't want to overcrowd this component, so I created a separate UserProfileMenuButton component to keep things better organized

Here are the figma designs showing which options should be shown in different states:

When user is a friend:
{F792574}

When viewer is blocked (couldn't find native designs but the concept is the same here):
{F792580}

When user is blocked by viewer:

Screenshot 2023-10-05 at 7.22.40 PM.png (1×1 px, 259 KB)

When there is no relationship status between user/viewer, or there is a pending friend request in either direction:

Screenshot 2023-10-05 at 7.23.51 PM.png (1×1 px, 223 KB)

This is step 5 in the list below
Outlined below are the steps I will take to update RelationshipListItemTooltipModal:

  1. Add the block action to relationship list item tooltip menu (RelationshipListItem won't need this option, but User profiles will. This is shown in the figma screenshot above)
  2. Rename RelationshipListItemTooltipModal to something more generic like UserRelationshipTooltipModal
  3. Make UserRelationshipTooltipButton into a functional component (We need to use the useColors hook in a subsequent diff)
  4. Introduce the tooltipButtonIcon as a param to RelationshipListItemTooltipModal (RelationshipListItem will use a pencil icon and user profiles will use a kebab menu icon)
  5. Introduce UserProfileMenuButton (This component will handle navigating to RelationshipListItemTooltipModal

Depends on D9381

Test Plan

Please see the demo videos below

When user is a friend:

Screenshot 2023-10-05 at 7.26.07 PM.png (1×1 px, 531 KB)

When viewer is blocked:

Screenshot 2023-10-05 at 7.27.29 PM.png (1×1 px, 715 KB)

When user is blocked by viewer:

Screenshot 2023-10-05 at 7.27.40 PM.png (1×1 px, 716 KB)

When there is no relationship status between user/viewer, or there is a pending friend request in either direction:

Screenshot 2023-10-05 at 7.27.52 PM.png (1×1 px, 727 KB)

Screenshot 2023-10-05 at 7.30.22 PM.png (1×1 px, 742 KB)

Screenshot 2023-10-05 at 7.30.12 PM.png (1×1 px, 734 KB)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu requested review of this revision.Oct 5 2023, 4:28 PM
atul added inline comments.
native/user-profile/user-profile-menu-button.react.js
46 ↗(On Diff #31704)

Could we come up with a clearer name for this? It looks like we're pushing a list of possible actions based on relationshipStatus, which visibleEntryIDs doesn't capture super well?

Just given EntryIDs, I'd expect this to have been an array of IDs?

110–116 ↗(On Diff #31704)

Wouldn't hurt to memoize since we have an SVG here

This revision is now accepted and ready to land.Oct 9 2023, 12:36 PM
ginsu edited the test plan for this revision. (Show Details)

address comments

This revision was automatically updated to reflect the committed changes.