refactor: stash long list updates

2022-06-01 10:59:41 +08:00
parent aa7c91416c
commit 5c6aed7165
12 changed files with 274 additions and 221 deletions
@@ -1,7 +1,7 @@
 // import { useRef } from "react";
 // import styled from "styled-components";
 import StyledMenu from "./styled/Menu";
-export default function ContextMenu({ items = [], hideMenu }) {
+export default function ContextMenu({ items = [], hideMenu = null }) {
  return (
    <StyledMenu>
      {items.map((item) => {
@@ -11,7 +11,9 @@ export default function ContextMenu({ items = [], hideMenu }) {
          icon = null,
          handler = (evt) => {
            evt.preventDefault();
-            hideMenu();
+            if (hideMenu) {
+              hideMenu();
+            }
          },
          underline = false,
          danger = false,
@@ -24,7 +26,9 @@ export default function ContextMenu({ items = [], hideMenu }) {
            key={title}
            onClick={(evt) => {
              handler(evt);
-              hideMenu();
+              if (hideMenu) {
+                hideMenu();
+              }
            }}
          >
            {icon}
@@ -87,8 +87,10 @@ function Message({

  const pinInfo = getPinInfo(mid);
  // return null;
+  const _key = properties?.local_id || mid;
  return (
    <StyledWrapper
+      key={_key}
      onContextMenu={handleContextMenuEvent}
      data-msg-mid={mid}
      ref={inviewRef}
@@ -97,6 +99,8 @@ function Message({
      } ${contextMenuVisible ? "contextVisible" : ""} `}
    >
      <Tippy
+        key={_key}
+        popperOptions={{ strategy: "fixed" }}
        disabled={readOnly}
        interactive
        placement="left"
@@ -1,6 +1,7 @@
 import styled from "styled-components";

 const StyledWrapper = styled.div`
+  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -1,127 +1,166 @@
 import { useEffect, useState, useRef } from "react";
 import { useSelector } from "react-redux";
+import { useLazyGetHistoryMessagesQuery } from "../../app/services/channel";
 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)
    return {
+      isFirst: true,
+      isLast: true,
      pageCount: 0,
      pageSize,
      pageNumber: 1,
      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 [loadMoreFromServer] = useLazyGetHistoryMessagesQuery();
  const listRef = useRef([]);
  const pageRef = useRef(null);
  const [hasMore, setHasMore] = useState(true);
-  const [appends, setAppends] = useState([]);
+  const [prepends, setPrepends] = useState([]);
+  // const [appends, setAppends] = useState([]);
  const [items, setItems] = useState([]);
-  const { mids, messageData } = useSelector((store) => {
+  const { mids } = useSelector((store) => {
    return {
      mids:
        context == "channel"
          ? store.channelMessage[id] || []
          : store.userMessage.byId[id] || [],
-      messageData: store.message,
+      // messageData: store.message,
    };
  });
  useEffect(() => {
    listRef.current = [];
    pageRef.current = [];
    setItems([]);
+    setPrepends([]);
    setHasMore(true);
-    setAppends([]);
+    // setAppends([]);
  }, [context, id]);
+  // useEffect(() => {
+  //   if (prepends.length) {
+  //     const feedsWrapperEle = document.querySelector(
+  //       `#RUSTCHAT_FEED_${context}_${id}`
+  //     );
+  //     const [newestId]=prepends;
+
+  //     if (feedsWrapperEle) {
+  //       feedsWrapperEle.scrollTop = feedsWrapperEle.scrollHeight;
+  //     }
+  //   }
+  // }, [prepends, context, id,messageData]);
  useEffect(() => {
-    if (appends.length) {
-      const feedsWrapperEle = document.querySelector(
-        `#RUSTCHAT_FEED_${context}_${id}`
-      );
-      if (feedsWrapperEle) {
-        feedsWrapperEle.scrollTop = feedsWrapperEle.scrollHeight;
+    const container = document.querySelector(`#RUSTCHAT_FEED_${context}_${id}`);
+    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 {
+        n = (-e.detail / 3) * 20;
      }
+      container.scrollTop += n;
+    };
+    if (container) {
+      container.addEventListener("wheel", handler);
    }
-  }, [appends, context, id]);
+    return () => {
+      if (container) {
+        container.removeEventListener("wheel", handler);
+      }
+    };
+  }, [context, id]);
+
  useEffect(() => {
-    if (listRef.current.length == 0) {
-      //   初次
-      const pageInfo = getFeedWithPagination({ mids, isLast: true });
-      console.log("pull up 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 sorteds = mids.slice(0).sort((a, b) => {
-        return Number(a) - Number(b);
-      });
-      const appends = sorteds.filter((s) => s > lastMid);
-      if (appends.length) {
-        setAppends(appends);
+    const fetchMore = () => {
+      if (listRef.current.length == 0 && mids.length) {
+        //   初次
+        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[0];
+        const sorteds = mids.slice(0).sort((a, b) => {
+          return Number(b) - Number(a);
+        });
+        const prepends = sorteds.filter((s) => s > lastMid);
+        if (prepends.length) {
+          setPrepends(prepends);
+        }
+        console.log("prepends", prepends, items);
      }
-      console.log("appends", appends);
-    }
+    };
+    fetchMore();
  }, [mids]);
-  const pullUp = () => {
+
+  const pullDown = async () => {
+    // 向下加载
    const currPageInfo = pageRef.current;
-    console.log("pull up", currPageInfo);
-    // 第一页
-    if (currPageInfo && currPageInfo.pageNumber == 1) {
-      setHasMore(false);
-      return;
+    console.log("pull down", currPageInfo);
+    // 最后一页
+    if (currPageInfo && currPageInfo.isLast) {
+      const [mid] = currPageInfo.ids.slice(-1);
+      const { data: newList } = await loadMoreFromServer({ mid, gid: id });
+      if (newList.length == 0) {
+        setHasMore(false);
+        return;
+      }
    }
    let pageInfo = null;
    if (!currPageInfo) {
      // 初始化
      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(() => {
+      setHasMore(!pageInfo.isLast);
      setItems(listRef.current);
-      console.log("pull up", currPageInfo, listRef.current);
-      setHasMore(pageInfo.pageNumber !== 1);
-    }, 800);
-  };
-  const pullDown = () => {
-    // 向下加载
+      console.log("pull down update", currPageInfo, listRef.current);
+    }, 1000);
  };

  return {
    mids,
-    appends,
+    prepends,
+    // appends,
    hasMore,
-    pullUp,
+    // pullUp,
    pullDown,
    list: items,
  };