From 77bc14d842911c19d3d7f19ceff601274ce693a8 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Mon, 24 Feb 2025 18:25:49 +0100
Subject: [PATCH] refactor: Improve UserAvatar component with more robust
 avatar URL handling

---
 apps/web/components/Objects/UserAvatar.tsx | 94 +++++++++++-----------
 1 file changed, 46 insertions(+), 48 deletions(-)

diff --git a/apps/web/components/Objects/UserAvatar.tsx b/apps/web/components/Objects/UserAvatar.tsx
index 62d38ffc..f7abe357 100644
--- a/apps/web/components/Objects/UserAvatar.tsx
+++ b/apps/web/components/Objects/UserAvatar.tsx
@@ -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')
+  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
     }
-    if (props.predefined_avatar === 'empty') {
-      return getUriWithOrg(params.orgslug, '/empty_avatar.png')
+
+    // 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
     }
-    return null
-  }
 
-  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
-  )
-
-  const useAvatar = () => {
+    // If predefined avatar is specified
     if (props.predefined_avatar) {
-      return predefinedAvatar
-    } else {
-      if (props.avatar_url) {
-        return props.avatar_url
-      } else {
-        if (session?.data?.user?.avatar_image) {
-          return uploadedAvatar
-        } else {
-          return emptyAvatar
-        }
-      }
+      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
+    }
+
+    // If user has an avatar in session but not a URL, process it
+    if (session?.data?.user?.avatar_image) {
+      return getUserAvatarMediaDirectory(session.data.user.user_uuid, session.data.user.avatar_image)
+    }
+
+    // Fallback to empty avatar
+    return getUriWithOrg(params.orgslug, '/empty_avatar.png')
   }
 
-  useEffect(() => {
-
-    
-
-  }, [session.status])
-
   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'}
+      `}
     />
   )
 }