refactor: message feed

src/routes/chat/SessionList/index.tsx

@@ -1,20 +1,21 @@
-import { FC } from "react";
+import { FC, useRef } from "react";
 import { useState, useEffect } from "react";
+import { ViewportList } from "react-viewport-list";
 import Session from "./Session";
 import DeleteChannelConfirmModal from "../../settingChannel/DeleteConfirmModal";
 import InviteModal from "../../../common/component/InviteModal";
 import { useAppSelector } from "../../../app/store";
 export interface ChatSession {
-  key: string;
   type: "user" | "channel";
   id: number;
-  mid?: number;
-  unread?: number;
+  mid: number;
+  unread: number;
 }
 type Props = {
   tempSession?: ChatSession;
 };
 const SessionList: FC<Props> = ({ tempSession }) => {
+  const ref = useRef<HTMLUListElement | null>(null);
   const [deleteId, setDeleteId] = useState<number>();
   const [inviteChannelId, setInviteChannelId] = useState<number>();
   const [sessions, setSessions] = useState<ChatSession[]>([]);
@@ -35,27 +36,31 @@ const SessionList: FC<Props> = ({ tempSession }) => {
     const cSessions = channelIDs.map((id) => {
       const mids = channelMessage[id];
       if (!mids || mids.length == 0) {
-        return { key: `channel_${id}`, unreads: 0, id, type: "channel" };
+        return { unreads: 0, id, type: "channel" };
       }
       // 先转换成数字，再排序
       const mid = [...mids].sort((a, b) => +a - +b).pop();
-      return { key: `channel_${id}`, id, mid, type: "channel" };
+      return { id, mid, type: "channel" };
     });
     const uSessions = DMs.map((id) => {
+      console.log("adddd", id);
       const mids = userMessage[id];
       if (!mids || mids.length == 0) {
-        return { key: `user_${id}`, unreads: 0, id, type: "user" };
+        return { unreads: 0, id, type: "user" };
       }
       // 先转换成数字，再排序
       const mid = [...mids].sort((a, b) => +a - +b).pop();
-      return { key: `user_${id}`, type: "user", id, mid };
+      return { type: "user", id, mid };
     });
     const temps = [...(cSessions as ChatSession[]), ...(uSessions as ChatSession[])].sort((a, b) => {
       const { mid: aMid = 0 } = a;
       const { mid: bMid = 0 } = b;
       return bMid - aMid;
     });
-    setSessions(tempSession ? [tempSession, ...temps] : temps);
+    console.log("before qqqq", temps);
+    const newSessions = tempSession ? [tempSession, ...temps] : temps;
+    console.log("qqqq", newSessions);
+    setSessions(newSessions);
   }, [
     channelIDs,
     DMs,
@@ -66,22 +71,31 @@ const SessionList: FC<Props> = ({ tempSession }) => {
     userMessage,
     tempSession
   ]);
+
   return (
     <>
-      <ul className="flex flex-col gap-0.5 p-2 overflow-auto">
-        {sessions.map((s) => {
-          const { key, type, id, mid = 0 } = s;
-          return (
-            <Session
-              key={key}
-              type={type}
-              id={id}
-              mid={mid}
-              setInviteChannelId={setInviteChannelId}
-              setDeleteChannelId={setDeleteId}
-            />
-          );
-        })}
+      <ul ref={ref} className="flex flex-col gap-0.5 p-2 overflow-auto">
+        <ViewportList
+          initialPrerender={10}
+          viewportRef={ref}
+          items={sessions}
+        >
+          {(s) => {
+            console.log("ssss", sessions);
+            const { type, id, mid = 0 } = s;
+            const key = `${type}_${id}`;
+            return (
+              <Session
+                key={key}
+                type={type}
+                id={id}
+                mid={mid}
+                setInviteChannelId={setInviteChannelId}
+                setDeleteChannelId={setDeleteId}
+              />
+            );
+          }}
+        </ViewportList>
       </ul>
       {!!deleteId && (
         <DeleteChannelConfirmModal