fix: delete chunk by @tanstack/react-query #1306 (#1749)

### What problem does this PR solve?
fix: delete chunk 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,31 +1,25 @@
-import { useFetchNextChunkList } from '@/hooks/chunk-hooks';
-import { useDeleteChunkByIds } from '@/hooks/knowledge-hooks';
+import { useFetchNextChunkList, useSwitchChunk } from '@/hooks/chunk-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 } from 'umi';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 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,
+  useDeleteChunkByIds,
   useGetChunkHighlights,
   useHandleChunkCardClick,
+  useUpdateChunk,
 } from './hooks';
 
-import { useTranslation } from 'react-i18next';
 import styles from './index.less';
 
 const Chunk = () => {
-  const dispatch = useDispatch();
-
   const [selectedChunkIds, setSelectedChunkIds] = useState<string[]>([]);
-  const [searchParams] = useSearchParams();
-  // const loading = useSelectChunkListLoading();
-  const documentId: string = searchParams.get('doc_id') || '';
-  const [chunkId, setChunkId] = useState<string | undefined>();
   const { removeChunk } = useDeleteChunkByIds();
   const {
     data: { documentInfo, data = [], total },
@@ -38,20 +32,19 @@ const Chunk = () => {
   } = useFetchNextChunkList();
   const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
   const isPdf = documentInfo?.type === 'pdf';
+
   const { t } = useTranslation();
   const { changeChunkTextMode, textMode } = useChangeChunkTextMode();
-
-  const handleEditChunk = useCallback(
-    (chunk_id?: string) => {
-      setChunkId(chunk_id);
-
-      dispatch({
-        type: 'chunkModel/setIsShowCreateModal',
-        payload: true,
-      });
-    },
-    [dispatch],
-  );
+  const { switchChunk } = useSwitchChunk();
+  const {
+    chunkUpdatingLoading,
+    onChunkUpdatingOk,
+    showChunkUpdatingModal,
+    hideChunkUpdatingModal,
+    chunkId,
+    chunkUpdatingVisible,
+    documentId,
+  } = useUpdateChunk();
 
   const onPaginationChange: PaginationProps['onShowSizeChange'] = (
     page,
@@ -100,7 +93,7 @@ const Chunk = () => {
     }
   }, [selectedChunkIds, documentId, removeChunk, showSelectedChunkWarning]);
 
-  const switchChunk = useCallback(
+  const handleSwitchChunk = useCallback(
     async (available?: number, chunkIds?: string[]) => {
       let ids = chunkIds;
       if (!chunkIds) {
@@ -111,20 +104,17 @@ const Chunk = () => {
         }
       }
 
-      const resCode: number = await dispatch<any>({
-        type: 'chunkModel/switch_chunk',
-        payload: {
-          chunk_ids: ids,
-          available_int: available,
-          doc_id: documentId,
-        },
+      const resCode: number = await switchChunk({
+        chunk_ids: ids,
+        available_int: available,
+        doc_id: documentId,
       });
       if (!chunkIds && resCode === 0) {
         // getChunkList();
       }
     },
     [
-      dispatch,
+      switchChunk,
       documentId,
       // getChunkList,
       selectedChunkIds,
@@ -135,24 +125,15 @@ const Chunk = () => {
   const { highlights, setWidthAndHeight } =
     useGetChunkHighlights(selectedChunkId);
 
-  useEffect(() => {
-    // getChunkList();
-    return () => {
-      dispatch({
-        type: 'chunkModel/resetFilter', // TODO: need to reset state uniformly
-      });
-    };
-  }, [dispatch]);
-
   return (
     <>
       <div className={styles.chunkPage}>
         <ChunkToolBar
           selectAllChunk={selectAllChunk}
-          createChunk={handleEditChunk}
+          createChunk={showChunkUpdatingModal}
           removeChunk={handleRemoveChunk}
           checked={selectedChunkIds.length === data.length}
-          switchChunk={switchChunk}
+          switchChunk={handleSwitchChunk}
           changeChunkTextMode={changeChunkTextMode}
           searchString={searchString}
           handleInputChange={handleInputChange}
@@ -178,12 +159,12 @@ const Chunk = () => {
                     <ChunkCard
                       item={item}
                       key={item.chunk_id}
-                      editChunk={handleEditChunk}
+                      editChunk={showChunkUpdatingModal}
                       checked={selectedChunkIds.some(
                         (x) => x === item.chunk_id,
                       )}
                       handleCheckboxClick={handleSingleCheckboxClick}
-                      switchChunk={switchChunk}
+                      switchChunk={handleSwitchChunk}
                       clickChunkCard={handleChunkCardClick}
                       selected={item.chunk_id === selectedChunkId}
                       textMode={textMode}
@@ -212,7 +193,16 @@ const Chunk = () => {
           }
         </Flex>
       </div>
-      <CreatingModal doc_id={documentId} chunkId={chunkId} />
+      {chunkUpdatingVisible && (
+        <CreatingModal
+          doc_id={documentId}
+          chunkId={chunkId}
+          hideModal={hideChunkUpdatingModal}
+          visible={chunkUpdatingVisible}
+          loading={chunkUpdatingLoading}
+          onOk={onChunkUpdatingOk}
+        />
+      )}
     </>
   );
 };