remove showDeleteConfirm function and center the Empty of knowledge list and extract the text of the login page to en.json (#203)

feat: remove showDeleteConfirm function
feat: center the Empty of knowledge list
feat: extract the text of the login page to en.json
#204

web/src/hooks/commonHooks.tsx

@@ -1,5 +1,8 @@
+import { ExclamationCircleFilled } from '@ant-design/icons';
+import { App } from 'antd';
 import isEqual from 'lodash/isEqual';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export const useSetModalState = () => {
   const [visible, setVisible] = useState(false);
@@ -72,3 +75,43 @@ export function useDynamicSVGImport(
 
   return { error, loading, SvgIcon: ImportedIconRef.current };
 }
+
+interface IProps {
+  onOk?: (...args: any[]) => any;
+  onCancel?: (...args: any[]) => any;
+}
+
+export const useShowDeleteConfirm = () => {
+  const { modal } = App.useApp();
+  const { t } = useTranslation();
+
+  const showDeleteConfirm = useCallback(
+    ({ onOk, onCancel }: IProps): Promise<number> => {
+      return new Promise((resolve, reject) => {
+        modal.confirm({
+          title: t('common.deleteModalTitle'),
+          icon: <ExclamationCircleFilled />,
+          // content: 'Some descriptions',
+          okText: 'Yes',
+          okType: 'danger',
+          cancelText: 'No',
+          async onOk() {
+            try {
+              const ret = await onOk?.();
+              resolve(ret);
+              console.info(ret);
+            } catch (error) {
+              reject(error);
+            }
+          },
+          onCancel() {
+            onCancel?.();
+          },
+        });
+      });
+    },
+    [t, modal],
+  );
+
+  return showDeleteConfirm;
+};

web/src/hooks/knowledgeHook.ts

@@ -1,4 +1,4 @@
-import showDeleteConfirm from '@/components/deleting-confirm';
+import { useShowDeleteConfirm } from '@/hooks/commonHooks';
 import { IKnowledge } from '@/interfaces/database/knowledge';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSearchParams, useSelector } from 'umi';
@@ -17,6 +17,7 @@ export const useDeleteDocumentById = (): {
 } => {
   const dispatch = useDispatch();
   const knowledgeBaseId = useKnowledgeBaseId();
+  const showDeleteConfirm = useShowDeleteConfirm();
 
   const removeDocument = (documentId: string) => () => {
     return dispatch({
@@ -79,6 +80,7 @@ export const useDeleteChunkByIds = (): {
   removeChunk: (chunkIds: string[], documentId: string) => Promise<number>;
 } => {
   const dispatch = useDispatch();
+  const showDeleteConfirm = useShowDeleteConfirm();
 
   const removeChunk = useCallback(
     (chunkIds: string[], documentId: string) => () => {
@@ -97,7 +99,7 @@ export const useDeleteChunkByIds = (): {
     (chunkIds: string[], documentId: string): Promise<number> => {
       return showDeleteConfirm({ onOk: removeChunk(chunkIds, documentId) });
     },
-    [removeChunk],
+    [removeChunk, showDeleteConfirm],
   );
 
   return {