From 667f5f91fe5ff048628d91a7295108b3c390669b Mon Sep 17 00:00:00 2001
From: ilsubyeega <ilsubyeega@outlook.com>
Date: Thu, 25 Apr 2024 01:34:01 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=A4=20fix:=20Use=20`user=3F.username`?=
 =?UTF-8?q?=20if=20`user=3F.name`=20is=20undefined=20(#2511)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Use `user?.username` if `user?.name` is undefined

* Add useLocalize hook to Icon component
---
 client/src/components/Chat/Messages/Message.tsx | 2 +-
 client/src/components/Endpoints/Icon.tsx        | 4 +++-
 client/src/components/Nav/NavLinks.tsx          | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Chat/Messages/Message.tsx b/client/src/components/Chat/Messages/Message.tsx
index 41923138a0..0332b8f0ec 100644
--- a/client/src/components/Chat/Messages/Message.tsx
+++ b/client/src/components/Chat/Messages/Message.tsx
@@ -42,7 +42,7 @@ export default function Message(props: TMessageProps) {
 
   let messageLabel = '';
   if (isCreatedByUser) {
-    messageLabel = UsernameDisplay ? user?.name : localize('com_user_message');
+    messageLabel = UsernameDisplay ? user?.name || user?.username : localize('com_user_message');
   } else {
     messageLabel = message.sender;
   }
diff --git a/client/src/components/Endpoints/Icon.tsx b/client/src/components/Endpoints/Icon.tsx
index 4d2ec9ae0b..9a0801966a 100644
--- a/client/src/components/Endpoints/Icon.tsx
+++ b/client/src/components/Endpoints/Icon.tsx
@@ -14,6 +14,7 @@ import {
 } from '~/components/svg';
 import { useAuthContext } from '~/hooks/AuthContext';
 import useAvatar from '~/hooks/Messages/useAvatar';
+import useLocalize from '~/hooks/useLocalize';
 import { IconProps } from '~/common';
 import { cn } from '~/utils';
 
@@ -31,9 +32,10 @@ const Icon: React.FC<IconProps> = (props) => {
   } = props;
 
   const avatarSrc = useAvatar(user);
+  const localize = useLocalize();
 
   if (isCreatedByUser) {
-    const username = user?.name || 'User';
+    const username = user?.name || user?.username || localize('com_nav_user');
 
     return (
       <div
diff --git a/client/src/components/Nav/NavLinks.tsx b/client/src/components/Nav/NavLinks.tsx
index 54e70a9370..ffd7c8bb3b 100644
--- a/client/src/components/Nav/NavLinks.tsx
+++ b/client/src/components/Nav/NavLinks.tsx
@@ -96,7 +96,7 @@ function NavLinks() {
                 className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-black dark:text-white"
                 style={{ marginTop: '0', marginLeft: '0' }}
               >
-                {user?.name || localize('com_nav_user')}
+                {user?.name || user?.username || localize('com_nav_user')}
               </div>
             </Menu.Button>