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} />
             ) : (

src/common/hook/useMessageFeed.js

@@ -1,8 +1,7 @@
 import { useEffect, useState, useRef } from "react";
 import { useSelector } from "react-redux";
 const getFeedWithPagination = (config) => {
-  const { pageNumber = 1, pageSize = 10, mids = [], isLast = false } =
-    config || {};
+  const { pageNumber = 1, pageSize = 20, mids = [] } = config || {};
   const shadowMids = mids.slice(0);
 
   if (shadowMids.length == 0)
@@ -13,27 +12,30 @@ const getFeedWithPagination = (config) => {
       ids: [],
     };
   shadowMids.sort((a, b) => {
-    return Number(a) - Number(b);
+    return Number(b) - Number(a);
   });
   console.log("message pagination", shadowMids);
   const pageCount = Math.ceil(shadowMids.length / pageSize);
-  const computedPageNumber = isLast ? pageCount : pageNumber;
   const ids = shadowMids.slice(
-    (computedPageNumber - 1) * pageSize,
-    computedPageNumber * pageSize
+    (pageNumber - 1) * pageSize,
+    pageNumber * pageSize
   );
-  return {
+  const info = {
+    isFirst: pageNumber == 1,
+    isLast: pageNumber == pageCount,
     pageCount,
     pageSize,
-    pageNumber: computedPageNumber,
+    pageNumber,
     ids,
   };
+  console.log("get page Info", info);
+  return info;
 };
 export default function useMessageFeed({ context = "channel", id = null }) {
   const listRef = useRef([]);
   const pageRef = useRef(null);
   const [hasMore, setHasMore] = useState(true);
-  const [appends, setAppends] = useState([]);
+  // const [appends, setAppends] = useState([]);
   const [items, setItems] = useState([]);
   const { mids, messageData } = useSelector((store) => {
     return {
@@ -49,46 +51,72 @@ export default function useMessageFeed({ context = "channel", id = null }) {
     pageRef.current = [];
     setItems([]);
     setHasMore(true);
-    setAppends([]);
+    // setAppends([]);
   }, [context, id]);
+  // useEffect(() => {
+  //   if (appends.length) {
+  //     const feedsWrapperEle = document.querySelector(
+  //       `#RUSTCHAT_FEED_${context}_${id}`
+  //     );
+  //     if (feedsWrapperEle) {
+  //       feedsWrapperEle.scrollTop = feedsWrapperEle.scrollHeight;
+  //     }
+  //   }
+  // }, [appends, context, id]);
   useEffect(() => {
-    if (appends.length) {
-      const feedsWrapperEle = document.querySelector(
-        `#RUSTCHAT_FEED_${context}_${id}`
-      );
-      if (feedsWrapperEle) {
-        feedsWrapperEle.scrollTop = feedsWrapperEle.scrollHeight;
+    const container = document.querySelector("#ScrollFeedWrapper");
+    const handler = (e) => {
+      e.preventDefault();
+      var n = 0;
+      if ("deltaY" in e) n = 1 === e.deltaMode ? 20 * -e.deltaY : -e.deltaY;
+      else if ("wheelDeltaY" in e) n = (e.wheelDeltaY / 120) * 20;
+      else if ("wheelDelta" in e) n = (e.wheelDelta / 120) * 20;
+      else {
+        // if (!("detail"in e))
+        //     return void a.v(e, "invalid wheel event: ");
+        n = (-e.detail / 3) * 20;
       }
+      container.scrollTop += n;
+    };
+    if (container) {
+      container.addEventListener("wheel", handler);
     }
-  }, [appends, context, id]);
+    return () => {
+      if (container) {
+        container.removeEventListener("wheel", handler);
+      }
+    };
+  }, []);
+
   useEffect(() => {
     if (listRef.current.length == 0) {
       //   初次
-      const pageInfo = getFeedWithPagination({ mids, isLast: true });
-      console.log("pull up 2", pageInfo);
+      const pageInfo = getFeedWithPagination({ mids });
+      console.log("pull down 2", pageInfo);
       pageRef.current = pageInfo;
       listRef.current = pageInfo.ids;
       setItems(listRef.current);
       console.log("message pageInfo", mids, pageInfo);
     } else {
       //   追加
-      const lastMid = listRef.current.slice(-1);
+      const lastMid = listRef.current[0];
       const sorteds = mids.slice(0).sort((a, b) => {
-        return Number(a) - Number(b);
+        return Number(b) - Number(a);
       });
-      const appends = sorteds.filter((s) => s > lastMid);
-      if (appends.length) {
-        setAppends(appends);
+      const prepends = sorteds.filter((s) => s > lastMid);
+      if (prepends.length) {
+        setItems((prevs) => [...prepends, ...prevs]);
       }
-      console.log("appends", appends);
+      console.log("prepends", prepends, items);
     }
   }, [mids]);
-  const pullUp = () => {
+  const pullDown = () => {
+    // 向下加载
     const currPageInfo = pageRef.current;
-    console.log("pull up", currPageInfo);
-    // 第一页
-    if (currPageInfo && currPageInfo.pageNumber == 1) {
-      setHasMore(false);
+    console.log("pull down", currPageInfo);
+    // 最后一页
+    if (currPageInfo && currPageInfo.isLast) {
+      setHasMore(true);
       return;
     }
     let pageInfo = null;
@@ -96,32 +124,28 @@ export default function useMessageFeed({ context = "channel", id = null }) {
       // 初始化
       pageInfo = getFeedWithPagination({
         mids,
-        isLast: true,
       });
     } else {
-      const prevPageNumber = currPageInfo.pageNumber - 1;
+      const nextPageNumber = currPageInfo.pageNumber + 1;
       pageInfo = getFeedWithPagination({
         mids,
-        pageNumber: prevPageNumber,
+        pageNumber: nextPageNumber,
       });
     }
     pageRef.current = pageInfo;
-    listRef.current = [...pageInfo.ids, ...listRef.current];
+    listRef.current = [...listRef.current, ...pageInfo.ids];
     setTimeout(() => {
       setItems(listRef.current);
       console.log("pull up", currPageInfo, listRef.current);
-      setHasMore(pageInfo.pageNumber !== 1);
-    }, 800);
-  };
-  const pullDown = () => {
-    // 向下加载
+      setHasMore(!pageInfo.isLast);
+    }, 1000);
   };
 
   return {
     mids,
-    appends,
+    // appends,
     hasMore,
-    pullUp,
+    // pullUp,
     pullDown,
     list: items,
   };