feat: deleted user

package.json

@@ -9,16 +9,16 @@
     "@microsoft/fetch-event-source": "^2.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@react-oauth/google": "^0.2.6",
-    "@reduxjs/toolkit": "^1.8.4",
+    "@reduxjs/toolkit": "^1.8.5",
     "@svgr/webpack": "^6.3.1",
     "@tippyjs/react": "^4.2.6",
     "@toast-ui/editor": "^3.2.0",
     "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
     "@toast-ui/react-editor": "^3.2.0",
-    "@types/node": "^18.7.3",
+    "@types/node": "^18.7.11",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@udecode/plate": "^16.2.3",
+    "@udecode/plate": "^16.4.1",
     "@uiball/loaders": "^1.2.6",
     "animate.css": "^4.1.1",
     "bfj": "^7.0.2",
@@ -33,7 +33,7 @@
     "emoji-mart": "3.0.1",
     "eslint": "^8.22.0",
     "file-loader": "^6.2.0",
-    "firebase": "^9.9.2",
+    "firebase": "^9.9.3",
     "fs-extra": "^10.1.0",
     "html-webpack-plugin": "^5.5.0",
     "linkify-it": "3.0.3",
@@ -62,17 +62,17 @@
     "react-string-replace": "^1.1.0",
     "react-textarea-autosize": "^8.3.4",
     "resolve": "^1.22.1",
-    "rooks": "^6.4.2",
+    "rooks": "^6.4.3",
     "semver": "^7.3.7",
-    "slate": "^0.82.0",
+    "slate": "^0.82.1",
     "slate-history": "^0.66.0",
-    "slate-react": "^0.82.0",
+    "slate-react": "^0.82.1",
     "source-map-loader": "^4.0.0",
     "style-loader": "^3.3.1",
     "styled-components": "^5.3.5",
     "styled-reset": "^4.4.2",
     "swiper": "^8.3.2",
-    "terser-webpack-plugin": "^5.3.4",
+    "terser-webpack-plugin": "^5.3.5",
     "tippy.js": "^6.3.7",
     "typescript": "^4.7.4",
     "webpack": "^5.74.0",
@@ -121,7 +121,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.13",
     "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
@@ -130,8 +130,8 @@
     "@types/react-helmet": "^6.1.5",
     "@types/react-linkify": "^1.0.1",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.34.0",
+    "@typescript-eslint/parser": "^5.34.0",
     "babel-loader": "^8.2.5",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",

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}