fix: change usage of avatar component everywhere in the code #3349
Conversation
SDK Size
|
There was a problem hiding this comment.
Pull request overview
This pull request refactors the avatar component architecture throughout the codebase, introducing new specialized avatar components (Avatar, UserAvatar, ChannelAvatar) to replace the old generic Avatar component. The changes improve code organization by separating avatar concerns into dedicated components with clearer APIs.
Changes:
- Introduced new base Avatar component and specialized UserAvatar/ChannelAvatar components in the ui directory
- Added getInitialsFromName utility function to extract initials from names
- Updated all avatar usages throughout the package and example app to use the new components
- Removed old Avatar and ChannelAvatar components from legacy locations
- Updated tests and snapshots to reflect the new component structure
Reviewed changes
Copilot reviewed 35 out of 35 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| package/src/utils/utils.ts | Added getInitialsFromName utility function |
| package/src/components/ui/Avatar/* | New avatar components with specialized functionality |
| package/src/contexts/channelsContext/ChannelsContext.tsx | Updated PreviewAvatar type to be generic ComponentType |
| package/src/components/ThreadList/ThreadListItem.tsx | Updated to use UserAvatar component |
| package/src/components/Poll/components/* | Updated poll components to use UserAvatar |
| package/src/components/MessageMenu/* | Updated message menu components with new avatar system |
| package/src/components/Message/MessageSimple/* | Updated message components to use UserAvatar |
| package/src/components/ChannelPreview/* | Added ChannelPreviewAvatar, updated ChannelPreviewMessenger |
| package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx | Updated to use UserAvatar |
| examples/SampleApp/src/screens/* | Updated example screens to use new avatar components |
| examples/SampleApp/src/components/* | Updated example components to use new avatar components |
| package/src/components/Avatar/Avatar.tsx | Removed old Avatar component |
| package/src/components/ChannelPreview/ChannelAvatar.tsx | Removed old ChannelAvatar component |
Comments suppressed due to low confidence (4)
package/src/components/ui/Avatar/Avatar.tsx:41
- The text color and background color are hardcoded ('#3179' and '#D2E3FF'). These colors should ideally come from the theme system to maintain consistency and support theme customization. Consider using theme colors instead of hardcoded values.
package/src/components/ui/Avatar/UserAvatar.tsx:45 - The online indicator is always showing 'online={true}' regardless of the actual online status of the user. This should be 'online={user.online}' or similar to reflect the actual user status.
package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx:209 - The PreviewAvatar prop from ChannelsContext is not being extracted in useChannelsContext and passed to the MemoizedChannelPreviewMessengerWithContext. This means custom PreviewAvatar components provided through context will not be used. Add PreviewAvatar to the destructuring from useChannelsContext and pass it through to the memoized component.
export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) => {
const {
forceUpdate,
maxUnreadCount,
onSelect,
PreviewMessage,
PreviewMutedStatus,
PreviewStatus,
PreviewTitle,
PreviewUnreadCount,
} = useChannelsContext();
return (
<MemoizedChannelPreviewMessengerWithContext
{...{
forceUpdate,
maxUnreadCount,
onSelect,
PreviewMessage,
PreviewMutedStatus,
PreviewStatus,
PreviewTitle,
PreviewUnreadCount,
}}
{...props}
/>
);
package/src/components/index.ts:58
- The new ChannelPreviewAvatar component is not exported from the main components index.ts file. This component should be exported to make it available to library consumers, similar to other ChannelPreview components. Add "export * from './ChannelPreview/ChannelPreviewAvatar';" to the exports.
export * from './ChannelPreview/ChannelPreview';
export * from './ChannelPreview/ChannelPreviewMessenger';
export * from './ChannelPreview/ChannelPreviewMessage';
export * from './ChannelPreview/ChannelPreviewStatus';
export * from './ChannelPreview/ChannelPreviewTitle';
export * from './ChannelPreview/ChannelPreviewUnreadCount';
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return ( | ||
| <View style={[styles.container, mentionContainer]}> | ||
| <Avatar image={image} name={name} online={online} size={avatarSize} /> | ||
| <UserAvatar user={item} size='md' showOnlineIndicator={online} /> |
There was a problem hiding this comment.
The showOnlineIndicator prop is being set to the value of 'online' (a boolean), but it should control whether to show the indicator at all, not pass the online status. The UserAvatar component should determine the online status from the user object itself. Consider changing this to just 'showOnlineIndicator' without a value, or 'showOnlineIndicator={true}'.
| export * from './Avatar'; | ||
| export * from './ChannelAvatar'; | ||
| export * from './UserAvatar'; |
There was a problem hiding this comment.
The old Avatar component tests were deleted, but no new tests were added for the new Avatar, UserAvatar, and ChannelAvatar components. These new components should have unit tests to ensure they render correctly with various props, handle edge cases (missing user data, no image, etc.), and maintain expected behavior.
…ve into fix/change-avatar-component
No description provided.