feat: topic 点击按钮加载更多

client/web/src/styles/antd/dark.less

@@ -49,6 +49,14 @@
 
     &.ant-btn-link {
       border-color: transparent;
+
+      &[disabled] {
+        &,&:hover, &:focus, &:active {
+          color: rgba(255, 255, 255, 0.25);
+          border-color: transparent;
+          background-color: transparent;
+        }
+      }
     }
   }
 

server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { TopicCard } from '../components/TopicCard';
 import {
   showSuccessToasts,
@@ -26,6 +26,8 @@ const Root = styled(LoadingOnFirst)({
   flexDirection: 'column',
   width: '100%',
   position: 'relative',
+  paddingTop: 10,
+  paddingBottom: 10,
 
   '.ant-empty': {
     paddingTop: 80,
@@ -42,33 +44,62 @@ const Root = styled(LoadingOnFirst)({
   },
 });
 
+const PAGE_SIZE = 20;
+
 const GroupTopicPanelRender: React.FC = React.memo(() => {
   const panelInfo = useGroupPanelContext();
   const { panelId, groupId } = panelInfo;
-  const { topicMap, addTopicPanel, addTopicItem, updateTopicItem } =
-    useTopicStore();
+  const {
+    topicMap,
+    addTopicPanel,
+    addTopicItem,
+    updateTopicItem,
+    resetTopicPanel,
+  } = useTopicStore();
   const topicList = topicMap[panelId];
+  const currentPageRef = useRef(1);
+  const [hasMore, setHasMore] = useState(true);
 
-  const [{ loading }, fetch] = useAsyncRequest(async () => {
-    if (!groupId || !panelId) {
-      return [];
-    }
+  const [{ loading }, fetch] = useAsyncRequest(
+    async (page = 1) => {
+      if (!groupId || !panelId) {
+        return [];
+      }
 
-    const { data } = await request.get('list', {
-      params: {
+      const { data: list } = await request.post('list', {
         groupId,
         panelId,
-      },
-    });
-
-    addTopicPanel(panelId, data);
-  }, [groupId, panelId, addTopicPanel]);
+        page,
+        size: PAGE_SIZE,
+      });
+
+      if (Array.isArray(list)) {
+        addTopicPanel(panelId, list);
+        if (list.length !== PAGE_SIZE) {
+          // 没有更多了
+          setHasMore(false);
+        }
+      }
+    },
+    [groupId, panelId, addTopicPanel]
+  );
 
   useEffect(() => {
     /**
      * 加载的时候获取列表
      */
     fetch();
+
+    return () => {
+      // 因为监听更新只在当前激活的面板中监听，还没添加到全局，因此为了保持面板状态需要清理面板状态
+      // TODO: 增加群组级别的更新监听新增后可以移除
+      resetTopicPanel(panelId);
+    };
+  }, []);
+
+  const handleLoadMore = useCallback(() => {
+    currentPageRef.current += 1;
+    fetch(currentPageRef.current);
   }, [fetch]);
 
   useGlobalSocketEvent(
@@ -115,7 +146,21 @@ const GroupTopicPanelRender: React.FC = React.memo(() => {
   return (
     <Root spinning={loading}>
       {Array.isArray(topicList) && topicList.length > 0 ? (
-        topicList.map((item, i) => <TopicCard key={i} topic={item} />)
+        <>
+          {topicList.map((item, i) => (
+            <TopicCard key={i} topic={item} />
+          ))}
+
+          {hasMore ? (
+            <Button type="link" disabled={loading} onClick={handleLoadMore}>
+              {loading ? Translate.loading : Translate.loadMore}
+            </Button>
+          ) : (
+            <Button type="link" disabled={true} onClick={handleLoadMore}>
+              {Translate.noMore}
+            </Button>
+          )}
+        </>
       ) : (
         <Empty description={Translate.noTopic}>
           <Button type="primary" onClick={handleCreateTopic}>

server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/store.ts

@@ -12,6 +12,7 @@ interface TopicStoreState {
   addTopicPanel: (panelId: string, topicList: GroupTopic[]) => void;
   addTopicItem: (panelId: string, topic: GroupTopic) => void;
   updateTopicItem: (panelId: string, topic: GroupTopic) => void;
+  resetTopicPanel: (panelId: string) => void;
 }
 
 export const useTopicStore = create<
@@ -22,7 +23,11 @@ export const useTopicStore = create<
     topicMap: {},
     addTopicPanel: (panelId, topicList) => {
       set((state) => {
-        state.topicMap[panelId] = topicList;
+        if (state.topicMap[panelId]) {
+          state.topicMap[panelId].push(...topicList);
+        } else {
+          state.topicMap[panelId] = topicList;
+        }
       });
     },
     addTopicItem: (panelId, topic) => {
@@ -44,5 +49,10 @@ export const useTopicStore = create<
         }
       });
     },
+    resetTopicPanel: (panelId) => {
+      set((state) => {
+        delete state.topicMap[panelId];
+      });
+    },
   }))
 );

server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/translate.ts

@@ -9,4 +9,16 @@ export const Translate = {
     'zh-CN': '回复该话题',
     'en-US': 'Reply this topic',
   }),
+  loadMore: localTrans({
+    'zh-CN': '加载更多',
+    'en-US': 'Load More',
+  }),
+  noMore: localTrans({
+    'zh-CN': '没有更多了',
+    'en-US': 'No More',
+  }),
+  loading: localTrans({
+    'zh-CN': '加载中...',
+    'en-US': 'Loading...',
+  }),
 };