Refactor UserAvatar component to simplify image handling and remove error state management
This commit is contained in:
@@ -1,5 +1,4 @@
|
|||||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
type UserAvatarProps = {
|
type UserAvatarProps = {
|
||||||
src?: string | null;
|
src?: string | null;
|
||||||
@@ -22,25 +21,9 @@ export function UserAvatar({
|
|||||||
size = 'default',
|
size = 'default',
|
||||||
className,
|
className,
|
||||||
}: UserAvatarProps) {
|
}: UserAvatarProps) {
|
||||||
const [imageError, setImageError] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setImageError(false);
|
|
||||||
}, [src]);
|
|
||||||
|
|
||||||
const canShowImage = Boolean(src) && !imageError;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Avatar size={size} className={className}>
|
<Avatar size={size} className={className}>
|
||||||
{canShowImage && (
|
<AvatarImage src={src ?? undefined} alt={alt} />
|
||||||
<AvatarImage
|
|
||||||
src={src ?? undefined}
|
|
||||||
alt={alt}
|
|
||||||
onError={() => {
|
|
||||||
setImageError(true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<AvatarFallback>{getInitials(fallbackText)}</AvatarFallback>
|
<AvatarFallback>{getInitials(fallbackText)}</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user