From c3fe8152f8c9a4db3aa12d0a44d8989ea2d78769 Mon Sep 17 00:00:00 2001
From: zerosoul <yanggc888@163.com>
Date: Wed, 8 Jun 2022 22:00:51 +0800
Subject: [PATCH] fix: can not send new message at new channel

---
 src/common/hook/useChatScroll.js      | 59 +++++++++++----------------
 src/common/hook/useMessageFeed.js     | 15 +++++--
 src/routes/chat/ChannelChat/index.js  |  8 +++-
 src/routes/chat/ChannelChat/styled.js |  2 +-
 4 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/src/common/hook/useChatScroll.js b/src/common/hook/useChatScroll.js
index f32d9d11..23b730e0 100644
--- a/src/common/hook/useChatScroll.js
+++ b/src/common/hook/useChatScroll.js
@@ -1,46 +1,33 @@
 import { useRef, useEffect } from "react";
 // import { useDebounce } from "rooks";
-function useChatScroll(dep) {
+function useChatScroll(deps = []) {
   const ref = useRef();
-  // const updateScrollTop = useDebounce(() => {
-  //   console.log("chat scroll", ref);
-  //   if (ref.current) {
-  //     setTimeout(() => {
-  //       ref.current.scrollTop = ref.current.scrollHeight;
-  //     }, 50);
-  //   }
-  // }, 100);
-  // const updateScrollTop = () => {
-  //   console.log("chat scroll", ref);
-  //   if (ref.current) {
-  //     setTimeout(() => {
-  //       ref.current.scrollTop = ref.current.scrollHeight;
-  //     }, 100);
-  //   }
-  // };
-  useEffect(() => {
-    console.log("chat scroll", ref);
-    if (ref.current) {
-      // setTimeout(() => {
-      if (ref.current) {
-        ref.current.scrollTop = ref.current.scrollHeight;
-      }
-      // }, 20);
-    }
-  }, [dep]);
   // useEffect(() => {
   //   console.log("chat scroll", ref);
   //   if (ref.current) {
-  //     const ele = ref.current;
-  //     const resizeObserver = new ResizeObserver((entries) => {
-  //       for (let entry of entries) {
-  //         entry.target.scrollTop = entry.target.scrollHeight;
-  //       }
-  //     });
-
-  //     resizeObserver.observe(ele);
+  //     // setTimeout(() => {
+  //     if (ref.current) {
+  //       setTimeout(() => {
+  //         ref.current.scrollTop = ref.current.scrollHeight;
+  //       }, 500);
+  //     }
+  //     // }, 20);
   //   }
-  // }, []);
+  // }, [...deps]);
+  useEffect(() => {
+    if (ref.current) {
+      console.log("chat scroll", ref);
+      const ele = ref.current;
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+          console.log("update scroll top");
+          entry.target.scrollTop = entry.target.scrollHeight;
+        }
+      });
+
+      resizeObserver.observe(ele);
+    }
+  }, []);
   return ref;
 }
 
diff --git a/src/common/hook/useMessageFeed.js b/src/common/hook/useMessageFeed.js
index dbec42f3..9e88a18a 100644
--- a/src/common/hook/useMessageFeed.js
+++ b/src/common/hook/useMessageFeed.js
@@ -76,18 +76,25 @@ export default function useMessageFeed({ context = "channel", id = null }) {
     }
   }, [items, context, id]);
   useEffect(() => {
-    if (listRef.current.length == 0 && mids.length) {
+    const serverMids = mids.filter((id) => {
+      const ts = new Date().getTime();
+      return Math.abs(ts - id) > 5 * 1000;
+    });
+    if (listRef.current.length == 0 && serverMids.length) {
       //   初次
-      const pageInfo = getFeedWithPagination({ mids, isLast: true });
+      const pageInfo = getFeedWithPagination({
+        mids: serverMids,
+        isLast: true,
+      });
       console.log("pull up 2", pageInfo);
       pageRef.current = pageInfo;
       listRef.current = pageInfo.ids;
       setItems(listRef.current);
-      console.log("message pageInfo", mids, pageInfo);
+      console.log("message pageInfo", serverMids, pageInfo);
     } else {
       //   追加
       const lastMid = listRef.current.slice(-1);
-      const sorteds = mids.slice(0).sort((a, b) => {
+      const sorteds = serverMids.slice(0).sort((a, b) => {
         return Number(a) - Number(b);
       });
       const appends = sorteds.filter((s) => s > lastMid);
diff --git a/src/routes/chat/ChannelChat/index.js b/src/routes/chat/ChannelChat/index.js
index dc6b9dc0..1c7f2977 100644
--- a/src/routes/chat/ChannelChat/index.js
+++ b/src/routes/chat/ChannelChat/index.js
@@ -8,7 +8,6 @@ import FavList from "../FavList";
 import { useReadMessageMutation } from "../../../app/services/message";
 import { updateRemeberedNavs } from "../../../app/slices/ui";
 import useMessageFeed from "../../../common/hook/useMessageFeed";
-
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import Tooltip from "../../../common/component/Tooltip";
 import Contact from "../../../common/component/Contact";
@@ -32,12 +31,14 @@ import {
 } from "./styled";
 import InviteModal from "../../../common/component/InviteModal";
 import LoadMore from "./LoadMore";
+// import useChatScroll from "../../../common/hook/useChatScroll";
 
 export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const { list: msgIds, appends, hasMore, pullUp } = useMessageFeed({
     context: "channel",
     id: cid,
   });
+  // const scrollObserveRef = useChatScroll([msgIds, appends]);
   const [toolVisible, setToolVisible] = useState("");
   const { pathname } = useLocation();
   const dispatch = useDispatch();
@@ -230,7 +231,10 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
           ) : null
         }
       >
-        <StyledChannelChat id={`RUSTCHAT_FEED_channel_${cid}`}>
+        <StyledChannelChat
+          // ref={scrollObserveRef}
+          id={`RUSTCHAT_FEED_channel_${cid}`}
+        >
           {/* <div className="anchor"></div> */}
           {hasMore ? (
             <LoadMore pullUp={pullUp} />
diff --git a/src/routes/chat/ChannelChat/styled.js b/src/routes/chat/ChannelChat/styled.js
index c5c55970..a3f8d6db 100644
--- a/src/routes/chat/ChannelChat/styled.js
+++ b/src/routes/chat/ChannelChat/styled.js
@@ -88,7 +88,7 @@ export const StyledChannelChat = styled.article`
   height: -webkit-fill-available;
   overflow-x: hidden;
   overflow-y: auto;
-  /* overflow-anchor: none; */
+  overflow-anchor: auto;
   /* pagination start */
   /* transform: rotate(180deg);
   direction: rtl;