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