fix: Fetch chunk list by @tanstack/react-query #1306 (#1738)

### What problem does this PR solve?

fix: Fetch chunk list by @tanstack/react-query #1306

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx

@@ -1,45 +1,46 @@
-import { useFetchChunkList } from '@/hooks/chunk-hooks';
+import { useFetchNextChunkList } from '@/hooks/chunk-hooks';
 import { useDeleteChunkByIds } from '@/hooks/knowledge-hooks';
 import type { PaginationProps } from 'antd';
 import { Divider, Flex, Pagination, Space, Spin, message } from 'antd';
 import classNames from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
-import { useDispatch, useSearchParams, useSelector } from 'umi';
+import { useDispatch, useSearchParams } from 'umi';
 import ChunkCard from './components/chunk-card';
 import CreatingModal from './components/chunk-creating-modal';
 import ChunkToolBar from './components/chunk-toolbar';
 import DocumentPreview from './components/document-preview/preview';
 import {
   useChangeChunkTextMode,
+  useGetChunkHighlights,
   useHandleChunkCardClick,
-  useSelectChunkListLoading,
-  useSelectDocumentInfo,
 } from './hooks';
-import { ChunkModelState } from './model';
 
 import { useTranslation } from 'react-i18next';
 import styles from './index.less';
 
 const Chunk = () => {
   const dispatch = useDispatch();
-  const chunkModel: ChunkModelState = useSelector(
-    (state: any) => state.chunkModel,
-  );
+
   const [selectedChunkIds, setSelectedChunkIds] = useState<string[]>([]);
   const [searchParams] = useSearchParams();
-  const { data = [], total, pagination } = chunkModel;
-  const loading = useSelectChunkListLoading();
+  // const loading = useSelectChunkListLoading();
   const documentId: string = searchParams.get('doc_id') || '';
   const [chunkId, setChunkId] = useState<string | undefined>();
   const { removeChunk } = useDeleteChunkByIds();
-  const documentInfo = useSelectDocumentInfo();
+  const {
+    data: { documentInfo, data = [], total },
+    pagination,
+    loading,
+    searchString,
+    handleInputChange,
+    available,
+    handleSetAvailable,
+  } = useFetchNextChunkList();
   const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
-  const isPdf = documentInfo.type === 'pdf';
+  const isPdf = documentInfo?.type === 'pdf';
   const { t } = useTranslation();
   const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
 
-  const getChunkList = useFetchChunkList();
-
   const handleEditChunk = useCallback(
     (chunk_id?: string) => {
       setChunkId(chunk_id);
@@ -57,14 +58,8 @@ const Chunk = () => {
     size,
   ) => {
     setSelectedChunkIds([]);
-    dispatch({
-      type: 'chunkModel/setPagination',
-      payload: {
-        current: page,
-        pageSize: size,
-      },
-    });
-    getChunkList();
+    pagination.onChange?.(page, size);
+    // getChunkList();
   };
 
   const selectAllChunk = useCallback(
@@ -125,38 +120,44 @@ const Chunk = () => {
         },
       });
       if (!chunkIds && resCode === 0) {
-        getChunkList();
+        // getChunkList();
       }
     },
     [
       dispatch,
       documentId,
-      getChunkList,
+      // getChunkList,
       selectedChunkIds,
       showSelectedChunkWarning,
     ],
   );
 
+  const { highlights, setWidthAndHeight } =
+    useGetChunkHighlights(selectedChunkId);
+
   useEffect(() => {
-    getChunkList();
+    // getChunkList();
     return () => {
       dispatch({
         type: 'chunkModel/resetFilter', // TODO: need to reset state uniformly
       });
     };
-  }, [dispatch, getChunkList]);
+  }, [dispatch]);
 
   return (
     <>
       <div className={styles.chunkPage}>
         <ChunkToolBar
-          getChunkList={getChunkList}
           selectAllChunk={selectAllChunk}
           createChunk={handleEditChunk}
           removeChunk={handleRemoveChunk}
           checked={selectedChunkIds.length === data.length}
           switchChunk={switchChunk}
           changeChunkTextMode={changeChunkTextMode}
+          searchString={searchString}
+          handleInputChange={handleInputChange}
+          available={available}
+          handleSetAvailable={handleSetAvailable}
         ></ChunkToolBar>
         <Divider></Divider>
         <Flex flex={1} gap={'middle'}>
@@ -193,33 +194,22 @@ const Chunk = () => {
             </Spin>
             <div className={styles.pageFooter}>
               <Pagination
-                responsive
-                showLessItems
-                showQuickJumper
-                showSizeChanger
-                onChange={onPaginationChange}
-                pageSize={pagination.pageSize}
-                pageSizeOptions={[10, 30, 60, 90]}
-                current={pagination.current}
-                size={'small'}
+                {...pagination}
                 total={total}
-                showTotal={(total) => (
-                  <Space>
-                    {t('total', { keyPrefix: 'common' })}
-                    {total}
-                  </Space>
-                )}
+                size={'small'}
+                onChange={onPaginationChange}
               />
             </div>
           </Flex>
 
-          {isPdf && (
+          {
             <section className={styles.documentPreview}>
               <DocumentPreview
-                selectedChunkId={selectedChunkId}
+                highlights={highlights}
+                setWidthAndHeight={setWidthAndHeight}
               ></DocumentPreview>
             </section>
-          )}
+          }
         </Flex>
       </div>
       <CreatingModal doc_id={documentId} chunkId={chunkId} />