[frontend] image を設定していない時もuserlist にavatar (profile + online status)…

… が表示される
usatie · Feb 26, 2024 · 76e7c75 · 76e7c75
1 parent 3cd525d
commit 76e7c75
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/backend/src/chat/chat.gateway.ts b/backend/src/chat/chat.gateway.ts
@@ -174,9 +174,8 @@ export class ChatGateway {
     @MessageBody() data: { deniedUserId: number },
     @ConnectedSocket() client: Socket,
   ) {
-    const deniedUserWsId = this.chatService.getWsFromUserId(
-      data.deniedUserId,
-    )?.id;
+    const deniedUserWsId = this.chatService.getWsFromUserId(data.deniedUserId)
+      ?.id;
     if (!deniedUserWsId) {
       return;
     } else {

diff --git a/frontend/app/ui/user/avatar.tsx b/frontend/app/ui/user/avatar.tsx
@@ -25,9 +25,6 @@ export function Avatar({ avatarURL, size, href, alt, id }: Props) {
   const onlineStatuses = useContext(OnlineContext);
   const online = id ? onlineStatuses[id] : false;
   let sizeClass = "";
-  if (!avatarURL) {
-    return <Skeleton className={`flex-none rounded-full ${sizeClass}`} />;
-  }
   let onlineStatusClass = online ? "bg-green-500 " : "bg-gray-500 ";
   switch (size) {
     case "small":
@@ -45,9 +42,17 @@ export function Avatar({ avatarURL, size, href, alt, id }: Props) {
     default:
       throw new Error("Invalid size");
   }
-  if (!avatarURL) {
-    return <Skeleton className={`flex-none rounded-full ${sizeClass}`} />;
-  }
+  const icon = avatarURL ? (
+    <img
+      className={`rounded-full object-cover ${sizeClass}`}
+      src={avatarURL}
+      alt={alt}
+    />
+  ) : (
+    <div>
+      <Skeleton className={`flex-none rounded-full ${sizeClass}`} />
+    </div>
+  );
   const TooltipWrapper = ({ children }: { children: React.ReactNode }) =>
     alt !== undefined ? (
       <Tooltip>
@@ -63,13 +68,7 @@ export function Avatar({ avatarURL, size, href, alt, id }: Props) {
     <LinkWrapper>
       <div className={`relative flex-none ${sizeClass}`}>
         <TooltipProvider delayDuration={0}>
-          <TooltipWrapper>
-            <img
-              className={`rounded-full object-cover ${sizeClass}`}
-              src={avatarURL}
-              alt={alt}
-            />
-          </TooltipWrapper>
+          <TooltipWrapper>{icon}</TooltipWrapper>
           <Tooltip>
             <TooltipTrigger asChild>
               <div