Details

Reviewers

atul
inka

Commits

rCOMMc4c8db828ad9: [native] introduce UserProfileRelationshipButton

Summary

This diff introduces the UserProfileRelationshipButton component that will be rendered on a user profile. This button will be used to do relationship actions such as sending/withdrawing a friend request and accepting/rejecting a friend request between the viewer and the user of the profile

Figma designs:
Sending/withdrawing friend request:

Screenshot 2023-09-21 at 2.03.59 PM.png (1×1 px, 241 KB)

Accepting/rejecting friend request:

Screenshot 2023-09-21 at 2.02.28 PM.png (1×1 px, 183 KB)

Friends:

Screenshot 2023-09-21 at 2.04.07 PM.png (1×692 px, 109 KB)

block in either direction is active:

Screenshot 2023-09-22 at 4.25.11 PM.png (1×720 px, 124 KB)

Depends on D9252

Test Plan

Please see the demo videos/screenshots below:

Sending/withdrawing friend request:

Accepting/rejecting friend request/friends:

anonymous user:

Screenshot 2023-09-20 at 4.49.07 PM.png (1×1 px, 750 KB)

block in either direction is active:

Screenshot 2023-09-22 at 4.15.11 PM.png (1×1 px, 732 KB)

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.Sep 21 2023, 10:57 AM

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

ginsu edited the summary of this revision. (Show Details)Sep 21 2023, 11:12 AM

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

ginsu added reviewers: atul, inka.

ginsu added a parent revision: D9252: [lib/native] introduce UserProfileMessageButton.

Harbormaster completed remote builds in B22785: Diff 31348.Sep 21 2023, 11:14 AM

ginsu requested review of this revision.Sep 21 2023, 11:14 AM

ginsu added a subscriber: kamil.Sep 21 2023, 11:14 AM

ginsu added inline comments.

native/components/user-profile-relationship-button.react.js
21–22 ↗	(On Diff #31348)	I broke down the prop types down instead of using `PendingPersonalThreadUserInfo` here. This was some feedback I got from @kamil in an older diff. I also personally think it makes it more readable and super clear to any dev that this is exactly what is needed for this component, but happy to change this if others think otherwise
native/components/user-profile.react.js
87–89 ↗	(On Diff #31348)	This is for the case if we view an anonymous profile

ginsu edited the test plan for this revision. (Show Details)Sep 21 2023, 11:15 AM

ginsu attached a referenced file: F769117: Screenshot 2023-09-20 at 4.49.07 PM.png. (Show Details)

ginsu attached a referenced file: F769113: Screen Recording 2023-09-21 at 2.11.46 PM.mov. (Show Details)

ginsu attached a referenced file: F769112: Screen Recording 2023-09-21 at 2.10.10 PM.mov. (Show Details)

ginsu attached a referenced file: F769082: Screenshot 2023-09-21 at 2.04.07 PM.png. (Show Details)

ginsu attached a referenced file: F769081: Screenshot 2023-09-21 at 2.02.28 PM.png. (Show Details)

ginsu attached a referenced file: F769080: Screenshot 2023-09-21 at 2.03.59 PM.png. (Show Details)

ginsu added a child revision: D9260: [native] improve BottomSheet component close function.Sep 21 2023, 12:00 PM

fix icon

Harbormaster completed remote builds in B22794: Diff 31360.Sep 21 2023, 9:01 PM

rebase

ginsu added inline comments.Sep 22 2023, 1:22 PM

native/components/user-profile-relationship-button.react.js
20–23 ↗	(On Diff #31378)	I broke down the prop types down instead of using `PendingPersonalThreadUserInfo` here. This was some feedback I got from @kamil in an older diff. I also personally think it makes it more readable and super clear to any dev that this is exactly what is needed for this component, but happy to change this if others think otherwise
native/components/user-profile.react.js
93–95 ↗	(On Diff #31378)	This is for the case if we view an anonymous profile or there is block active in either direction

ginsu edited the test plan for this revision. (Show Details)Sep 22 2023, 1:23 PM

ginsu attached a referenced file: F770478: Screenshot 2023-09-22 at 4.15.11 PM.png. (Show Details)

ginsu edited the summary of this revision. (Show Details)Sep 22 2023, 1:33 PM

ginsu attached a referenced file: F770483: Screenshot 2023-09-22 at 4.25.11 PM.png. (Show Details)

Harbormaster completed remote builds in B22808: Diff 31378.Sep 22 2023, 1:35 PM

Looks good, only thing I'd change before landing is trying to avoid the one-off spacer.

native/components/user-profile-relationship-button.react.js
20–23 ↗	(On Diff #31378)	Makes sense, also allows for more fine-grained memoization in the future (if needed)
40–75 ↗	(On Diff #31378)	Given how much of the "volume" of this component is defining styles for `addFriendButton` and `withdrawFriendRequestButton`, might be worth factoring out into separate `RelationshipButton` component? Just a loose thought
83–143 ↗	(On Diff #31378)	Can we wrap in `useMemo` Also feedback above about separating common JSX into separate component would make this less verbose, could be something like:
102 ↗	(On Diff #31378)	Can we use flexbox/padding/margin/etc to avoid having a one-off spacer view here?