feat: deleted user

src/common/component/Avatar.tsx

@@ -9,7 +9,7 @@ interface Props {
   type?: "user" | "channel";
 }
 
-const Avatar: FC<Props> = ({ url = "", name = "unknown name", type = "user", ...rest }) => {
+const Avatar: FC<Props> = ({ url = "", name = "Deleted User", type = "user", ...rest }) => {
   const [src, setSrc] = useState("");
 
   const handleError = (err: SyntheticEvent<HTMLImageElement>) => {

src/common/component/Message/FavoredMessage.tsx

@@ -38,7 +38,7 @@ const FavoredMessage: FC<Props> = ({ id = "" }) => {
                 )}
                 <div className="details">
                   <div className="up">
-                    <span className="name">{user?.name}</span>
+                    <span className="name">{user?.name || "Deleted User"}</span>
                   </div>
                   <div className="down">
                     {renderContent({

src/common/component/Message/ForwardedMessage.tsx

@@ -66,7 +66,7 @@ const ForwardedMessage: FC<Props> = ({ context, to, from_uid, id }) => {
                   )}
                   <div className="details">
                     <div className="up">
-                      <span className="name">{user?.name}</span>
+                      <span className="name">{user?.name || "Deleted User"}</span>
                     </div>
                     <div className="down">
                       {renderContent({

src/common/component/Message/PreviewMessage.tsx

@@ -15,7 +15,7 @@ const PreviewMessage: FC<Props> = ({ mid = 0 }) => {
   });
   if (!msg) return null;
   const { from_uid, created_at, content_type, content, thumbnail = "", properties } = msg;
-  const { name, avatar } = usersData[from_uid] || {};
+  const { name, avatar } = usersData[from_uid || 0] || {};
   return (
     <StyledWrapper className={`preview`}>
       <div className="avatar">

src/common/component/Message/Reply.tsx

@@ -169,14 +169,14 @@ const Reply: FC<ReplyProps> = ({ mid, interactive = true }) => {
     }
   };
   if (!data) return null;
-  const currUser = users[data.from_uid];
+  const currUser = users[data.from_uid || 0];
   if (!currUser) return null;
   return (
     <Styled
       key={mid}
       data-mid={mid}
       className={`reply ${interactive ? "clickable" : ""}`}
-      onClick={interactive ? handleClick : null}
+      onClick={interactive ? handleClick : undefined}
     >
       <div className="user">
         <Avatar className="avatar" url={currUser.avatar} name={currUser.name} />

src/common/component/Message/index.tsx

@@ -74,7 +74,7 @@ const Message: FC<IProps> = ({
   }, [mid, read]);
 
   const reactions = reactionMessageData[mid];
-  const currUser = usersData[fromUid];
+  const currUser = usersData[fromUid || 0];
   // if (!message) return null;
   let timePrefix = null;
   const dayjsTime = dayjs(time);
@@ -121,7 +121,7 @@ const Message: FC<IProps> = ({
           }`}
         >
           <div className="up">
-            <span className="name">{currUser?.name}</span>
+            <span className="name">{currUser?.name || "Deleted User"}</span>
             <Tooltip
               delay={200}
               disabled={!timePrefix || readOnly}