refactor: virtual message feed

src/routes/chat/Layout/NewMessageBottomTip.tsx

@@ -1,17 +1,16 @@
 import clsx from 'clsx';
-import { useState, useEffect } from 'react';
+// import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppSelector } from '../../../app/store';
 import getUnreadCount from '../utils';
-import { triggerScrollHeight } from './MessageFeed';
 
 type Props = {
     context: "channel" | "user",
-    id: number
+    id: number,
+    scrollToBottom?: () => void
 }
 // linear-gradient(135deg,_#3C8CE7_0%,_#00EAFF_100%)
-const NewMessageBottomTip = ({ context, id }: Props) => {
-    const [visible, setVisible] = useState(false);
+const NewMessageBottomTip = ({ context, id, scrollToBottom }: Props) => {
     const { t } = useTranslation("chat");
     const {
         readIndex,
@@ -34,33 +33,16 @@ const NewMessageBottomTip = ({ context, id }: Props) => {
         messageData,
         loginUid
     });
-    useEffect(() => {
-        const container = document.querySelector(`#VOCECHAT_FEED_${context}_${id}`) as HTMLElement;
-        if (container) {
-            const { scrollHeight, scrollTop, offsetHeight } = container;
-            const deltaNum = scrollHeight - scrollTop - offsetHeight;
-            const showTheTip = deltaNum > triggerScrollHeight && unreads > 0;
-            console.log("show the tip", showTheTip);
-            setVisible(showTheTip);
-        }
-    }, [context, id, unreads]);
-    const handleMarkRead = () => {
-        const container = document.querySelector(`#VOCECHAT_FEED_${context}_${id}`) as HTMLElement;
-        if (container) {
-            // scroll to bottom
-            container.classList.add("scroll-smooth");
-            container.scrollTop = container.scrollHeight;
-            container.classList.remove("scroll-smooth");
-            setVisible(false);
-        }
-    };
+    console.log("unreads", unreads);
+
+
     return (
-        <aside className={clsx(`absolute -top-2 right-4 -translate-y-full
+        <aside className={clsx(`z-[999] absolute bottom-20 right-4
                                 justify-between text-xs
-                                rounded-full py-1 px-3 text-white z-10 
+                                rounded-full py-1 px-3 text-white
                                 bg-gradient-to-tl from-[#3C8CE7] to-[#00EAFF]`,
-            visible ? "flex" : "hidden")}>
-            <button onClick={handleMarkRead}>{t("new_msg", { num: unreads })}</button>
+            unreads > 0 ? "flex" : "hidden")}>
+            <button onClick={scrollToBottom}>{t("new_msg", { num: unreads })}</button>
             <span className='absolute -left-1 -translate-x-full'>👇</span>
         </aside>
     );