fix: after logging out and entering the knowledge base page again, the data before still exists #1306 (#1597)

### What problem does this PR solve?

fix: after logging out and entering the knowledge base page again, the
data before still exists #1306
### Type of change

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

web/src/pages/add-knowledge/components/knowledge-setting/model.ts

@@ -29,14 +29,6 @@ const model: DvaModel<KSModelState> = {
     },
   },
   effects: {
-    *createKb({ payload = {} }, { call }) {
-      const { data } = yield call(kbService.createKb, payload);
-      const { retcode } = data;
-      if (retcode === 0) {
-        message.success(i18n.t('message.created'));
-      }
-      return data;
-    },
     *updateKb({ payload = {} }, { call, put }) {
       const { data } = yield call(kbService.updateKb, payload);
       const { retcode } = data;

web/src/pages/file-manager/connect-to-knowledge-modal/index.tsx

@@ -1,5 +1,5 @@
 import { useTranslate } from '@/hooks/common-hooks';
-import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { filterOptionsByInput } from '@/utils/commonUtil';
 import { Form, Modal, Select } from 'antd';
@@ -13,7 +13,7 @@ const ConnectToKnowledgeModal = ({
   loading,
 }: IModalProps<string[]> & { initialValue: string[] }) => {
   const [form] = Form.useForm();
-  const { list, fetchList } = useFetchKnowledgeList();
+  const { list } = useNextFetchKnowledgeList();
   const { t } = useTranslate('fileManager');
 
   const options = list?.map((item) => ({
@@ -30,9 +30,8 @@ const ConnectToKnowledgeModal = ({
   useEffect(() => {
     if (visible) {
       form.setFieldValue('knowledgeIds', initialValue);
-      fetchList();
     }
-  }, [visible, fetchList, initialValue, form]);
+  }, [visible, initialValue, form]);
 
   return (
     <Modal

web/src/pages/knowledge/hooks.ts

@@ -1,5 +1,8 @@
-import { useSelectKnowledgeList } from '@/hooks/knowledge-hooks';
-import { useState } from 'react';
+import { KnowledgeRouteKey } from '@/constants/knowledge';
+import { useSetModalState } from '@/hooks/common-hooks';
+import { useCreateKnowledge } from '@/hooks/knowledge-hooks';
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'umi';
 
 export const useSearchKnowledge = () => {
   const [searchString, setSearchString] = useState<string>('');
@@ -13,7 +16,32 @@ export const useSearchKnowledge = () => {
   };
 };
 
-export const useSelectKnowledgeListByKeywords = (keywords: string) => {
-  const list = useSelectKnowledgeList();
-  return list.filter((x) => x.name.includes(keywords));
+export const useSaveKnowledge = () => {
+  const { visible: visible, hideModal, showModal } = useSetModalState();
+  const { loading, createKnowledge } = useCreateKnowledge();
+  const navigate = useNavigate();
+
+  const onCreateOk = useCallback(
+    async (name: string) => {
+      const ret = await createKnowledge({
+        name,
+      });
+
+      if (ret?.retcode === 0) {
+        hideModal();
+        navigate(
+          `/knowledge/${KnowledgeRouteKey.Configuration}?id=${ret.data.kb_id}`,
+        );
+      }
+    },
+    [createKnowledge, hideModal, navigate],
+  );
+
+  return {
+    loading,
+    onCreateOk,
+    visible,
+    hideModal,
+    showModal,
+  };
 };

web/src/pages/knowledge/index.tsx

@@ -1,5 +1,4 @@
-import ModalManager from '@/components/modal-manager';
-import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
 import { useSelectUserInfo } from '@/hooks/user-setting-hooks';
 import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
 import { Button, Empty, Flex, Input, Space, Spin } from 'antd';
@@ -7,15 +6,22 @@ import KnowledgeCard from './knowledge-card';
 import KnowledgeCreatingModal from './knowledge-creating-modal';
 
 import { useTranslation } from 'react-i18next';
-import { useSearchKnowledge, useSelectKnowledgeListByKeywords } from './hooks';
+import { useSaveKnowledge, useSearchKnowledge } from './hooks';
 import styles from './index.less';
 
 const KnowledgeList = () => {
   const { searchString, handleInputChange } = useSearchKnowledge();
-  const { loading } = useFetchKnowledgeList();
-  const list = useSelectKnowledgeListByKeywords(searchString);
+  const { loading, list: data } = useNextFetchKnowledgeList();
+  const list = data.filter((x) => x.name.includes(searchString));
   const userInfo = useSelectUserInfo();
   const { t } = useTranslation('translation', { keyPrefix: 'knowledgeList' });
+  const {
+    visible,
+    hideModal,
+    showModal,
+    onCreateOk,
+    loading: creatingLoading,
+  } = useSaveKnowledge();
 
   return (
     <Flex className={styles.knowledge} vertical flex={1}>
@@ -36,26 +42,14 @@ const KnowledgeList = () => {
             prefix={<SearchOutlined />}
           />
 
-          <ModalManager>
-            {({ visible, hideModal, showModal }) => (
-              <>
-                <Button
-                  type="primary"
-                  icon={<PlusOutlined />}
-                  onClick={() => {
-                    showModal();
-                  }}
-                  className={styles.topButton}
-                >
-                  {t('createKnowledgeBase')}
-                </Button>
-                <KnowledgeCreatingModal
-                  visible={visible}
-                  hideModal={hideModal}
-                ></KnowledgeCreatingModal>
-              </>
-            )}
-          </ModalManager>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={showModal}
+            className={styles.topButton}
+          >
+            {t('createKnowledgeBase')}
+          </Button>
         </Space>
       </div>
       <Spin spinning={loading}>
@@ -75,6 +69,12 @@ const KnowledgeList = () => {
           )}
         </Flex>
       </Spin>
+      <KnowledgeCreatingModal
+        loading={creatingLoading}
+        visible={visible}
+        hideModal={hideModal}
+        onOk={onCreateOk}
+      ></KnowledgeCreatingModal>
     </Flex>
   );
 };

web/src/pages/knowledge/knowledge-card/index.tsx

@@ -8,9 +8,10 @@ import {
 } from '@ant-design/icons';
 import { Avatar, Card, Space } from 'antd';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useNavigate } from 'umi';
+import { useNavigate } from 'umi';
 
 import OperateDropdown from '@/components/operate-dropdown';
+import { useDeleteKnowledge } from '@/hooks/knowledge-hooks';
 import styles from './index.less';
 
 interface IProps {
@@ -19,16 +20,12 @@ interface IProps {
 
 const KnowledgeCard = ({ item }: IProps) => {
   const navigate = useNavigate();
-  const dispatch = useDispatch();
   const { t } = useTranslation();
 
+  const { deleteKnowledge } = useDeleteKnowledge();
+
   const removeKnowledge = async () => {
-    return dispatch({
-      type: 'knowledgeModel/rmKb',
-      payload: {
-        kb_id: item.id,
-      },
-    });
+    return deleteKnowledge(item.id);
   };
 
   const handleCardClick = () => {

web/src/pages/knowledge/knowledge-creating-modal/index.tsx

@@ -1,53 +1,30 @@
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
-import { KnowledgeRouteKey } from '@/constants/knowledge';
 import { Form, Input, Modal } from 'antd';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useNavigate, useSelector } from 'umi';
 
 type FieldType = {
   name?: string;
 };
 
+interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
+  loading: boolean;
+  onOk: (name: string) => void;
+}
+
 const KnowledgeCreatingModal = ({
   visible,
   hideModal,
-}: Omit<IModalManagerChildrenProps, 'showModal'>) => {
+  loading,
+  onOk,
+}: IProps) => {
   const [form] = Form.useForm();
-  const dispatch = useDispatch();
-  const loading = useSelector(
-    (state: any) => state.loading.effects['kSModel/createKb'],
-  );
-  const navigate = useNavigate();
+
   const { t } = useTranslation('translation', { keyPrefix: 'knowledgeList' });
 
   const handleOk = async () => {
     const ret = await form.validateFields();
 
-    const data = await dispatch<any>({
-      type: 'kSModel/createKb',
-      payload: {
-        name: ret.name,
-      },
-    });
-
-    if (data.retcode === 0) {
-      navigate(
-        `/knowledge/${KnowledgeRouteKey.Configuration}?id=${data.data.kb_id}`,
-      );
-      hideModal();
-    }
-  };
-
-  const handleCancel = () => {
-    hideModal();
-  };
-
-  const onFinish = (values: any) => {
-    console.log('Success:', values);
-  };
-
-  const onFinishFailed = (errorInfo: any) => {
-    console.log('Failed:', errorInfo);
+    onOk(ret.name);
   };
 
   return (
@@ -55,7 +32,7 @@ const KnowledgeCreatingModal = ({
       title={t('createKnowledgeBase')}
       open={visible}
       onOk={handleOk}
-      onCancel={handleCancel}
+      onCancel={hideModal}
       okButtonProps={{ loading }}
     >
       <Form
@@ -63,8 +40,6 @@ const KnowledgeCreatingModal = ({
         labelCol={{ span: 4 }}
         wrapperCol={{ span: 20 }}
         style={{ maxWidth: 600 }}
-        onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
         autoComplete="off"
         form={form}
       >