[web] introduce UserAvatar component
ClosedPublic
Actions

Authored by ginsu on Apr 2 2023, 10:58 PM.

Details

Reviewers

ashoat
atul

Commits

rCOMM8e566ad207f3: [web] introduce UserAvatar component

Summary

After some discussion with @ashoat and @atul about how to fetch the ens uri for ens avatars we decided to have two separate components to render avatars: UserAvatar and ThreadAvatar this diff handles UserAvatar

This is also pretty much a copy from D7246

Depends on D7192

Test Plan

I was able to render all three avatar types: Emoji, Image, and ENS

Emoji:

Screenshot 2023-04-03 at 2.03.30 AM.png (2×3 px, 782 KB)

Image (by hardcoding const avatarInfo = { type: 'image', uri: 'https://picsum.photos/200' }):

Screenshot 2023-04-03 at 2.02.52 AM.png (2×3 px, 821 KB)

ENS (by hardcoding const avatarInfo = { type: 'ens' } and the same ensAvatarURI I tested with in D7246):

Screenshot 2023-04-03 at 2.03.52 AM.png (2×3 px, 747 KB)

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.Apr 2 2023, 10:58 PM

Herald added a subscriber: tomek. · View Herald TranscriptApr 2 2023, 10:58 PM

ginsu edited the summary of this revision. (Show Details)Apr 2 2023, 11:09 PM

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

ginsu added reviewers: ashoat, atul.

ginsu added a parent revision: D7192: [web] introduce avatar component.

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

ginsu attached a referenced file: F459436: Screenshot 2023-04-03 at 2.03.52 AM.png. (Show Details)

ginsu attached a referenced file: F459434: Screenshot 2023-04-03 at 2.02.52 AM.png. (Show Details)

ginsu attached a referenced file: F459432: Screenshot 2023-04-03 at 2.03.30 AM.png. (Show Details)

Harbormaster completed remote builds in B17905: Diff 24531.Apr 2 2023, 11:13 PM

ginsu requested review of this revision.Apr 2 2023, 11:13 PM

ginsu edited the summary of this revision. (Show Details)Apr 2 2023, 11:23 PM

ginsu added a child revision: D7274: [web] introduce ThreadAvatar component.Apr 2 2023, 11:37 PM

Thanks for testing all those scenarios in the Test Plan. Two questions inline.

web/components/user-avatar.react.js
14	In what scenario do we expect `userID` to be `null`/`undefined`?
20–23	Can't we just query for `ClientAvatar` directly?

This revision is now accepted and ready to land.Apr 3 2023, 10:34 AM

ginsu added inline comments.Apr 4 2023, 10:59 AM

web/components/user-avatar.react.js
14	The `currentUserInfo` in the profile screen is of type `?CurrentUserInfo`. On the chance that the user experience this case, `getAvatarForUser` will handle this by returning an anonymous avatar (👤)
20–23	We want `userInfo` so that we can use `getAvatarForUser` and handle cases where the user does not have an avatar already set or they are an anonymous user, but they can still get a `ClientAvatar`. `getAvatarForUser` returns a `ClientAvatar`