51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import React, { ReactNode, useMemo } from 'react';
|
|
import { useAppSelector } from '../stores/hooks';
|
|
import UserAvatar from './UserAvatar';
|
|
|
|
type Props = {
|
|
className?: string;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
export default function UserAvatarCurrentUser({
|
|
className = '',
|
|
children,
|
|
}: Props) {
|
|
// Get user data from authSlice.currentUser (single source of truth)
|
|
const { currentUser } = useAppSelector((state) => state.auth);
|
|
|
|
// Derive display values from currentUser
|
|
const userName = useMemo(() => {
|
|
if (!currentUser) return '';
|
|
const firstName = currentUser.firstName || '';
|
|
const lastName = currentUser.lastName || '';
|
|
return `${firstName} ${lastName}`.trim() || currentUser.email || '';
|
|
}, [currentUser]);
|
|
|
|
const userAvatar = useMemo(() => {
|
|
if (!currentUser?.avatar) return null;
|
|
// avatar can be an array with publicUrl or a direct URL string
|
|
if (Array.isArray(currentUser.avatar) && currentUser.avatar[0]?.publicUrl) {
|
|
return currentUser.avatar[0].publicUrl;
|
|
}
|
|
if (typeof currentUser.avatar === 'string') {
|
|
return currentUser.avatar;
|
|
}
|
|
return null;
|
|
}, [currentUser]);
|
|
|
|
// Convert string avatar to array format expected by UserAvatar.image prop
|
|
const imageArray = userAvatar ? [{ publicUrl: userAvatar }] : null;
|
|
|
|
return (
|
|
<UserAvatar
|
|
username={userName}
|
|
avatar={userAvatar}
|
|
className={className}
|
|
image={imageArray}
|
|
>
|
|
{children}
|
|
</UserAvatar>
|
|
);
|
|
}
|