From e594ac0ceb7f2ee5e3556c4414c420d2722a7c64 Mon Sep 17 00:00:00 2001
From: hyrious <hyrious@outlook.com>
Date: Mon, 15 Mar 2021 16:26:06 +0800
Subject: [PATCH] fix(classroom): show fallback avatar if the user's failed
 (#390)

---
 .../src/components/ChatPanel/ChatUser.tsx             | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/desktop/renderer-app/src/components/ChatPanel/ChatUser.tsx b/desktop/renderer-app/src/components/ChatPanel/ChatUser.tsx
index 182d2ecab8b..dbf5da29f0b 100644
--- a/desktop/renderer-app/src/components/ChatPanel/ChatUser.tsx
+++ b/desktop/renderer-app/src/components/ChatPanel/ChatUser.tsx
@@ -1,6 +1,7 @@
 import { observer } from "mobx-react-lite";
-import React from "react";
+import React, { useState } from "react";
 import { User } from "../../stores/ClassRoomStore";
+import { generateAvatar } from "../../utils/generateAvatar";
 import "./ChatUser.less";
 
 export type { User } from "../../stores/ClassRoomStore";
@@ -25,6 +26,7 @@ export const ChatUser = observer<ChatUserProps>(function ChatUser({
     onAcceptRaiseHand,
     onEndSpeaking,
 }) {
+    const [isAvatarLoadFailed, setAvatarLoadFailed] = useState(false);
     /** is current user the room owner */
     const isCreator = ownerUUID === userUUID;
     /** is this chat user element belongs to the current user */
@@ -32,7 +34,12 @@ export const ChatUser = observer<ChatUserProps>(function ChatUser({
 
     return (
         <div className="chat-user">
-            <img className="chat-user-avatar" src={user.avatar} alt={`User ${user.name}`} />
+            <img
+                className="chat-user-avatar"
+                src={isAvatarLoadFailed ? generateAvatar(userUUID) : user.avatar}
+                onError={() => setAvatarLoadFailed(true)}
+                alt={`User ${user.name}`}
+            />
             <span className="chat-user-name">{user.name}</span>
             {ownerUUID === user.userUUID ? (
                 <span className="chat-user-status is-teacher">(老师)</span>