chore: update left nav icons

src/common/component/Avatar.js

@@ -1,11 +1,6 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, memo } from "react";
 import { getInitials, getInitialsAvatar } from "../utils";
-export default function Avatar({
-  url = "",
-  name = "unkonw name",
-  type = "user",
-  ...rest
-}) {
+const Avatar = ({ url = "", name = "unkonw name", type = "user", ...rest }) => {
   // console.log("avatar url", url);
   const [src, setSrc] = useState("");
   const handleError = (err) => {
@@ -31,4 +26,11 @@ export default function Avatar({
   }, [url, name]);
   if (!src) return null;
   return <img src={src} onError={handleError} {...rest} />;
-}
+};
+
+export default memo(Avatar, (prevs, nexts) => {
+  // const prevKey = prevs.url + prevs.name;
+  // const nextKey = nexts.url + nexts.name;
+  // return prevKey == nextKey;
+  return prevs.url == nexts.url;
+});

src/common/component/Message/Reply.js

@@ -1,4 +1,4 @@
-// import React from "react";
+import React from "react";
 import styled from "styled-components";
 import { useSelector } from "react-redux";
 import reactStringReplace from "react-string-replace";
@@ -137,7 +137,7 @@ const renderContent = (data) => {
   }
   return res;
 };
-export default function Reply({ mid, interactive = true }) {
+const Reply = ({ mid, interactive = true }) => {
   const { data, users } = useSelector((store) => {
     return { data: store.message[mid], users: store.contacts.byId };
   });
@@ -158,6 +158,7 @@ export default function Reply({ mid, interactive = true }) {
   if (!currUser) return null;
   return (
     <Styled
+      key={mid}
       data-mid={mid}
       className={`reply ${interactive ? "clickable" : ""}`}
       onClick={interactive ? handleClick : null}
@@ -169,4 +170,8 @@ export default function Reply({ mid, interactive = true }) {
       <div className="content">{renderContent(data)}</div>
     </Styled>
   );
-}
+};
+
+export default React.memo(Reply, (prevs, nexts) => {
+  return prevs.mid == nexts.mid;
+});

src/common/component/Message/index.js

@@ -135,7 +135,7 @@ function Message({
             </Tooltip>
           </div>
           <div className={`down ${sending ? "sending" : ""}`}>
-            {reply_mid && <Reply mid={reply_mid} />}
+            {reply_mid && <Reply key={reply_mid} mid={reply_mid} />}
             {edit ? (
               <EditMessage mid={mid} cancelEdit={toggleEditMessage} />
             ) : (