refactor: message in view

src/common/component/Message/index.js

@@ -3,9 +3,8 @@ import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
 import isYesterday from "dayjs/plugin/isYesterday";
 import { useSelector } from "react-redux";
-import { useInViewRef } from "rooks";
+import useInView from "./useInView";
 import Tippy from "@tippyjs/react";
-import { useLazyGetHistoryMessagesQuery } from "../../../app/services/channel";
 import Reaction from "./Reaction";
 import Reply from "./Reply";
 import Profile from "../Profile";
@@ -18,16 +17,14 @@ import Tooltip from "../Tooltip";
 dayjs.extend(isToday);
 dayjs.extend(isYesterday);
 function Message({
-  isFirst = false,
   contextId = 0,
   mid = "",
   context = "user",
   updateReadIndex,
   read = true,
 }) {
-  const [myRef, inView] = useInViewRef();
+  const inviewRef = useInView();
   const [edit, setEdit] = useState(false);
-  const [fetchMoreChannelMessage] = useLazyGetHistoryMessagesQuery();
   const avatarRef = useRef(null);
   const { message = {}, reactionMessageData, contactsData } = useSelector(
     (store) => {
@@ -64,12 +61,6 @@ function Message({
       updateReadIndex(data);
     }
   }, [mid, read]);
-  useEffect(() => {
-    if (isFirst && inView && context == "channel") {
-      // fetch new message
-      fetchMoreChannelMessage({ gid: contextId, mid });
-    }
-  }, [inView, isFirst, mid, contextId, context]);
 
   const reactions = reactionMessageData[mid];
   const currUser = contactsData[fromUid] || {};
@@ -81,12 +72,11 @@ function Message({
     : dayjsTime.isYesterday()
     ? "Yesterday"
     : null;
+
+  console.log("render message");
+  // return null;
   return (
-    <StyledWrapper
-      data-msg-mid={mid}
-      ref={myRef}
-      className={`message ${inView ? "in_view" : ""}`}
-    >
+    <StyledWrapper data-msg-mid={mid} ref={inviewRef} className={`message`}>
       <Tippy
         duration={0}
         interactive

src/common/component/Message/useInView.js

@@ -0,0 +1,32 @@
+import { useRef, useEffect } from "react";
+
+export default function useInView() {
+  const ref = useRef(undefined);
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const intersecting = entry.isIntersecting;
+        const currEle = entry.target;
+        if (intersecting) {
+          currEle.classList.add("in_view");
+        } else {
+          currEle.classList.remove("in_view");
+        }
+      });
+    },
+    { threshold: 0 }
+  );
+  useEffect(() => {
+    const currEle = ref?.current;
+    if (currEle) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (currEle) {
+        observer.unobserve(currEle);
+      }
+    };
+  }, [ref]);
+
+  return ref;
+}

src/common/component/MixedInput/index.js

@@ -111,6 +111,7 @@ const Plugins = ({
     createImagePlugin({
       options: {
         uploadImage: async (dataUrl) => {
+          console.log("upload image", dataUrl);
           const resp = await fetch(dataUrl);
           const blob = await resp.blob();
           const { thumbnail, ...rest } = await uploadFile(blob);