rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: Improve UserAvatar component with more robust avatar URL handling

Browse source
This commit is contained in:
swve 2025-02-24 18:25:49 +01:00
parent 96a86d929c
commit 77bc14d842
1 changed files with 46 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

88
apps/web/components/Objects/UserAvatar.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect } from 'react'
import React from 'react'
import { getUriWithOrg } from '@services/config/config'
import { useParams } from 'next/navigation'
import { getUserAvatarMediaDirectory } from '@services/media/media'
@ -8,12 +8,7 @@ type UserAvatarProps = {
width?: number
avatar_url?: string
use_with_session?: boolean
rounded?:
| 'rounded-md'
| 'rounded-xl'
| 'rounded-lg'
| 'rounded-full'
| 'rounded'
rounded?: 'rounded-md' | 'rounded-xl' | 'rounded-lg' | 'rounded-full' | 'rounded'
border?: 'border-2' | 'border-4' | 'border-8'
borderColor?: string
predefined_avatar?: 'ai' | 'empty'
@ -23,59 +18,62 @@ function UserAvatar(props: UserAvatarProps) {
const session = useLHSession() as any
const params = useParams() as any
function checkUrlProtocol(url: string): boolean {
return url.startsWith('https://') || url.startsWith('http://');
const isValidUrl = (url: string): boolean => {
try {
new URL(url)
return true
} catch {
return false
}
}
const predefinedAvatarFunc = () => {
if (props.predefined_avatar === 'ai') {
return getUriWithOrg(params.orgslug, '/ai_avatar.png')
}
if (props.predefined_avatar === 'empty') {
return getUriWithOrg(params.orgslug, '/empty_avatar.png')
}
return null
const getAvatarUrl = (): string => {
// If avatar_url prop is provided and is a valid URL, use it directly
if (props.avatar_url && isValidUrl(props.avatar_url)) {
return props.avatar_url
}
const predefinedAvatar = predefinedAvatarFunc()
const emptyAvatar = getUriWithOrg(params.orgslug, '/empty_avatar.png') as any
const uploadedAvatar = (session.status == 'authenticated') && (checkUrlProtocol(session?.data?.user?.avatar_image)) ? session?.data?.user?.avatar_image : getUserAvatarMediaDirectory(
session?.data?.user?.user_uuid,
session?.data?.user?.avatar_image
)
// If user has an avatar in session and it's a valid URL, use it directly
if (session?.data?.user?.avatar_image && isValidUrl(session.data.user.avatar_image)) {
return session.data.user.avatar_image
}
const useAvatar = () => {
// If predefined avatar is specified
if (props.predefined_avatar) {
return predefinedAvatar
} else {
const avatarType = props.predefined_avatar === 'ai' ? 'ai_avatar.png' : 'empty_avatar.png'
return getUriWithOrg(params.orgslug, `/${avatarType}`)
}
// If avatar_url prop is provided but not a URL, process it
if (props.avatar_url) {
return props.avatar_url
} else {
}
// If user has an avatar in session but not a URL, process it
if (session?.data?.user?.avatar_image) {
return uploadedAvatar
} else {
return emptyAvatar
}
}
}
return getUserAvatarMediaDirectory(session.data.user.user_uuid, session.data.user.avatar_image)
}
useEffect(() => {
}, [session.status])
// Fallback to empty avatar
return getUriWithOrg(params.orgslug, '/empty_avatar.png')
}
return (
<img
alt="User Avatar"
width={props.width ? props.width : 50}
height={props.width ? props.width : 50}
src={useAvatar()}
className={`${props.avatar_url && session?.data?.user?.avatar_image ? '' : 'bg-gray-700'
} ${props.border ? 'border ' + props.border : ''} ${props.borderColor ? props.borderColor : 'border-white'
} shadow-xl aspect-square w-[${props.width ? props.width : 50}px] h-[${props.width ? props.width : 50
}px] ${props.rounded ? props.rounded : 'rounded-xl'}`}
width={props.width ?? 50}
height={props.width ?? 50}
src={getAvatarUrl()}
className={`
${props.avatar_url && session?.data?.user?.avatar_image ? '' : 'bg-gray-700'}
${props.border ? `border ${props.border}` : ''}
${props.borderColor ?? 'border-white'}
shadow-xl
aspect-square
w-[${props.width ?? 50}px]
h-[${props.width ?? 50}px]
${props.rounded ?? 'rounded-xl'}
`}
/>
)
}