balibabu
commited on
Commit
·
2d45930
1
Parent(s):
9d3ef9c
fix: fetch the file list after uploading the file by @tanstack/react-query #1306 (#1654)
Browse files### What problem does this PR solve?
fix: fetch the file list after uploading the file by
@tanstack/react-query #1306
### Type of change
- [x] Bug Fix (non-breaking change which fixes an issue)
web/src/hooks/file-manager-hooks.ts
CHANGED
@@ -1,13 +1,12 @@
|
|
1 |
import { ResponseType } from '@/interfaces/database/base';
|
2 |
-
import {
|
3 |
-
|
4 |
-
IFileListRequestBody,
|
5 |
-
} from '@/interfaces/request/file-manager';
|
6 |
import fileManagerService from '@/services/file-manager-service';
|
7 |
-
import { useMutation, useQuery } from '@tanstack/react-query';
|
8 |
-
import { PaginationProps, UploadFile } from 'antd';
|
9 |
import React, { useCallback } from 'react';
|
10 |
-
import {
|
|
|
11 |
import { useGetNextPagination, useHandleSearchChange } from './logic-hooks';
|
12 |
import { useSetPaginationParams } from './route-hook';
|
13 |
|
@@ -18,41 +17,22 @@ export const useGetFolderId = () => {
|
|
18 |
return id ?? '';
|
19 |
};
|
20 |
|
21 |
-
export const useFetchFileList = () => {
|
22 |
-
const dispatch = useDispatch();
|
23 |
-
|
24 |
-
const fetchFileList = useCallback(
|
25 |
-
(payload: IFileListRequestBody) => {
|
26 |
-
return dispatch<any>({
|
27 |
-
type: 'fileManager/listFile',
|
28 |
-
payload,
|
29 |
-
});
|
30 |
-
},
|
31 |
-
[dispatch],
|
32 |
-
);
|
33 |
-
|
34 |
-
return fetchFileList;
|
35 |
-
};
|
36 |
-
|
37 |
export interface IListResult {
|
38 |
searchString: string;
|
39 |
handleInputChange: React.ChangeEventHandler<HTMLInputElement>;
|
40 |
pagination: PaginationProps;
|
41 |
setPagination: (pagination: { page: number; pageSize: number }) => void;
|
|
|
42 |
}
|
43 |
|
44 |
-
export const
|
45 |
const { searchString, handleInputChange } = useHandleSearchChange();
|
46 |
const { pagination, setPagination } = useGetNextPagination();
|
47 |
const id = useGetFolderId();
|
48 |
|
49 |
-
const { data } = useQuery({
|
50 |
queryKey: [
|
51 |
'fetchFileList',
|
52 |
-
// pagination.current,
|
53 |
-
// id,
|
54 |
-
// pagination.pageSize,
|
55 |
-
// searchString,
|
56 |
{
|
57 |
id,
|
58 |
searchString,
|
@@ -87,27 +67,14 @@ export const useFetchNextFileList = (): ResponseType<any> & IListResult => {
|
|
87 |
handleInputChange: onInputChange,
|
88 |
pagination: { ...pagination, total: data?.data?.total },
|
89 |
setPagination,
|
|
|
90 |
};
|
91 |
};
|
92 |
|
93 |
-
export const useRemoveFile = () => {
|
94 |
-
const dispatch = useDispatch();
|
95 |
-
|
96 |
-
const removeFile = useCallback(
|
97 |
-
(fileIds: string[], parentId: string) => {
|
98 |
-
return dispatch<any>({
|
99 |
-
type: 'fileManager/removeFile',
|
100 |
-
payload: { fileIds, parentId },
|
101 |
-
});
|
102 |
-
},
|
103 |
-
[dispatch],
|
104 |
-
);
|
105 |
-
|
106 |
-
return removeFile;
|
107 |
-
};
|
108 |
-
|
109 |
export const useDeleteFile = () => {
|
110 |
const { setPaginationParams } = useSetPaginationParams();
|
|
|
|
|
111 |
const {
|
112 |
data,
|
113 |
isPending: loading,
|
@@ -117,9 +84,10 @@ export const useDeleteFile = () => {
|
|
117 |
mutationFn: async (params: { fileIds: string[]; parentId: string }) => {
|
118 |
const { data } = await fileManagerService.removeFile(params);
|
119 |
if (data.retcode === 0) {
|
120 |
-
setPaginationParams(1);
|
|
|
121 |
}
|
122 |
-
return data
|
123 |
},
|
124 |
});
|
125 |
|
@@ -127,106 +95,129 @@ export const useDeleteFile = () => {
|
|
127 |
};
|
128 |
|
129 |
export const useRenameFile = () => {
|
130 |
-
const
|
131 |
-
|
132 |
-
const
|
133 |
-
|
134 |
-
|
135 |
-
|
136 |
-
|
137 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
138 |
},
|
139 |
-
|
140 |
-
);
|
141 |
|
142 |
-
return renameFile;
|
143 |
};
|
144 |
|
145 |
-
export const useFetchParentFolderList = () => {
|
146 |
-
const
|
147 |
-
|
148 |
-
|
149 |
-
|
150 |
-
|
151 |
-
|
152 |
-
|
|
|
153 |
});
|
|
|
|
|
154 |
},
|
155 |
-
|
156 |
-
);
|
157 |
|
158 |
-
return
|
159 |
};
|
160 |
|
161 |
export const useCreateFolder = () => {
|
162 |
-
const
|
|
|
|
|
163 |
|
164 |
-
const
|
165 |
-
|
166 |
-
|
167 |
-
|
168 |
-
|
|
|
|
|
|
|
|
|
|
|
169 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
170 |
},
|
171 |
-
|
172 |
-
);
|
173 |
-
|
174 |
-
return createFolder;
|
175 |
-
};
|
176 |
-
|
177 |
-
export const useSelectFileList = () => {
|
178 |
-
const fileList = useSelector((state) => state.fileManager.fileList);
|
179 |
|
180 |
-
return
|
181 |
-
};
|
182 |
-
|
183 |
-
export const useSelectParentFolderList = () => {
|
184 |
-
const parentFolderList = useSelector(
|
185 |
-
(state) => state.fileManager.parentFolderList,
|
186 |
-
);
|
187 |
-
return parentFolderList.toReversed();
|
188 |
};
|
189 |
|
190 |
export const useUploadFile = () => {
|
191 |
-
const
|
192 |
-
|
193 |
-
const
|
194 |
-
|
195 |
-
|
196 |
-
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
|
203 |
-
|
204 |
-
|
205 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
206 |
}
|
|
|
207 |
},
|
208 |
-
|
209 |
-
);
|
210 |
|
211 |
-
return uploadFile;
|
212 |
};
|
213 |
|
214 |
export const useConnectToKnowledge = () => {
|
215 |
-
const
|
216 |
-
|
217 |
-
|
218 |
-
|
219 |
-
|
220 |
-
|
221 |
-
|
222 |
-
|
223 |
-
|
224 |
-
|
225 |
-
|
|
|
|
|
|
|
226 |
}
|
|
|
227 |
},
|
228 |
-
|
229 |
-
);
|
230 |
|
231 |
-
return
|
232 |
};
|
|
|
1 |
import { ResponseType } from '@/interfaces/database/base';
|
2 |
+
import { IFolder } from '@/interfaces/database/file-manager';
|
3 |
+
import { IConnectRequestBody } from '@/interfaces/request/file-manager';
|
|
|
|
|
4 |
import fileManagerService from '@/services/file-manager-service';
|
5 |
+
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
6 |
+
import { PaginationProps, UploadFile, message } from 'antd';
|
7 |
import React, { useCallback } from 'react';
|
8 |
+
import { useTranslation } from 'react-i18next';
|
9 |
+
import { useSearchParams } from 'umi';
|
10 |
import { useGetNextPagination, useHandleSearchChange } from './logic-hooks';
|
11 |
import { useSetPaginationParams } from './route-hook';
|
12 |
|
|
|
17 |
return id ?? '';
|
18 |
};
|
19 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
20 |
export interface IListResult {
|
21 |
searchString: string;
|
22 |
handleInputChange: React.ChangeEventHandler<HTMLInputElement>;
|
23 |
pagination: PaginationProps;
|
24 |
setPagination: (pagination: { page: number; pageSize: number }) => void;
|
25 |
+
loading: boolean;
|
26 |
}
|
27 |
|
28 |
+
export const useFetchFileList = (): ResponseType<any> & IListResult => {
|
29 |
const { searchString, handleInputChange } = useHandleSearchChange();
|
30 |
const { pagination, setPagination } = useGetNextPagination();
|
31 |
const id = useGetFolderId();
|
32 |
|
33 |
+
const { data, isFetching: loading } = useQuery({
|
34 |
queryKey: [
|
35 |
'fetchFileList',
|
|
|
|
|
|
|
|
|
36 |
{
|
37 |
id,
|
38 |
searchString,
|
|
|
67 |
handleInputChange: onInputChange,
|
68 |
pagination: { ...pagination, total: data?.data?.total },
|
69 |
setPagination,
|
70 |
+
loading,
|
71 |
};
|
72 |
};
|
73 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
74 |
export const useDeleteFile = () => {
|
75 |
const { setPaginationParams } = useSetPaginationParams();
|
76 |
+
const queryClient = useQueryClient();
|
77 |
+
|
78 |
const {
|
79 |
data,
|
80 |
isPending: loading,
|
|
|
84 |
mutationFn: async (params: { fileIds: string[]; parentId: string }) => {
|
85 |
const { data } = await fileManagerService.removeFile(params);
|
86 |
if (data.retcode === 0) {
|
87 |
+
setPaginationParams(1); // TODO: There should be a better way to paginate the request list
|
88 |
+
queryClient.invalidateQueries({ queryKey: ['fetchFileList'] });
|
89 |
}
|
90 |
+
return data.retcode;
|
91 |
},
|
92 |
});
|
93 |
|
|
|
95 |
};
|
96 |
|
97 |
export const useRenameFile = () => {
|
98 |
+
const queryClient = useQueryClient();
|
99 |
+
const { t } = useTranslation();
|
100 |
+
const {
|
101 |
+
data,
|
102 |
+
isPending: loading,
|
103 |
+
mutateAsync,
|
104 |
+
} = useMutation({
|
105 |
+
mutationKey: ['renameFile'],
|
106 |
+
mutationFn: async (params: { fileId: string; name: string }) => {
|
107 |
+
const { data } = await fileManagerService.renameFile(params);
|
108 |
+
if (data.retcode === 0) {
|
109 |
+
message.success(t('message.renamed'));
|
110 |
+
queryClient.invalidateQueries({ queryKey: ['fetchFileList'] });
|
111 |
+
}
|
112 |
+
return data.retcode;
|
113 |
},
|
114 |
+
});
|
|
|
115 |
|
116 |
+
return { data, loading, renameFile: mutateAsync };
|
117 |
};
|
118 |
|
119 |
+
export const useFetchParentFolderList = (): IFolder[] => {
|
120 |
+
const id = useGetFolderId();
|
121 |
+
const { data } = useQuery({
|
122 |
+
queryKey: ['fetchParentFolderList', id],
|
123 |
+
initialData: [],
|
124 |
+
enabled: !!id,
|
125 |
+
queryFn: async () => {
|
126 |
+
const { data } = await fileManagerService.getAllParentFolder({
|
127 |
+
fileId: id,
|
128 |
});
|
129 |
+
|
130 |
+
return data?.data?.parent_folders?.toReversed() ?? [];
|
131 |
},
|
132 |
+
});
|
|
|
133 |
|
134 |
+
return data;
|
135 |
};
|
136 |
|
137 |
export const useCreateFolder = () => {
|
138 |
+
const { setPaginationParams } = useSetPaginationParams();
|
139 |
+
const queryClient = useQueryClient();
|
140 |
+
const { t } = useTranslation();
|
141 |
|
142 |
+
const {
|
143 |
+
data,
|
144 |
+
isPending: loading,
|
145 |
+
mutateAsync,
|
146 |
+
} = useMutation({
|
147 |
+
mutationKey: ['createFolder'],
|
148 |
+
mutationFn: async (params: { parentId: string; name: string }) => {
|
149 |
+
const { data } = await fileManagerService.createFolder({
|
150 |
+
...params,
|
151 |
+
type: 'folder',
|
152 |
});
|
153 |
+
if (data.retcode === 0) {
|
154 |
+
message.success(t('message.created'));
|
155 |
+
setPaginationParams(1);
|
156 |
+
queryClient.invalidateQueries({ queryKey: ['fetchFileList'] });
|
157 |
+
}
|
158 |
+
return data.retcode;
|
159 |
},
|
160 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
161 |
|
162 |
+
return { data, loading, createFolder: mutateAsync };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
163 |
};
|
164 |
|
165 |
export const useUploadFile = () => {
|
166 |
+
const { setPaginationParams } = useSetPaginationParams();
|
167 |
+
const { t } = useTranslation();
|
168 |
+
const queryClient = useQueryClient();
|
169 |
+
const {
|
170 |
+
data,
|
171 |
+
isPending: loading,
|
172 |
+
mutateAsync,
|
173 |
+
} = useMutation({
|
174 |
+
mutationKey: ['uploadFile'],
|
175 |
+
mutationFn: async (params: {
|
176 |
+
fileList: UploadFile[];
|
177 |
+
parentId: string;
|
178 |
+
}) => {
|
179 |
+
const fileList = params.fileList;
|
180 |
+
const pathList = params.fileList.map(
|
181 |
+
(file) => (file as any).webkitRelativePath,
|
182 |
+
);
|
183 |
+
const formData = new FormData();
|
184 |
+
formData.append('parent_id', params.parentId);
|
185 |
+
fileList.forEach((file: any, index: number) => {
|
186 |
+
formData.append('file', file);
|
187 |
+
formData.append('path', pathList[index]);
|
188 |
+
});
|
189 |
+
const { data } = await fileManagerService.uploadFile(formData);
|
190 |
+
if (data.retcode === 0) {
|
191 |
+
message.success(t('message.uploaded'));
|
192 |
+
setPaginationParams(1);
|
193 |
+
queryClient.invalidateQueries({ queryKey: ['fetchFileList'] });
|
194 |
}
|
195 |
+
return data.retcode;
|
196 |
},
|
197 |
+
});
|
|
|
198 |
|
199 |
+
return { data, loading, uploadFile: mutateAsync };
|
200 |
};
|
201 |
|
202 |
export const useConnectToKnowledge = () => {
|
203 |
+
const queryClient = useQueryClient();
|
204 |
+
const { t } = useTranslation();
|
205 |
+
|
206 |
+
const {
|
207 |
+
data,
|
208 |
+
isPending: loading,
|
209 |
+
mutateAsync,
|
210 |
+
} = useMutation({
|
211 |
+
mutationKey: ['connectFileToKnowledge'],
|
212 |
+
mutationFn: async (params: IConnectRequestBody) => {
|
213 |
+
const { data } = await fileManagerService.connectFileToKnowledge(params);
|
214 |
+
if (data.retcode === 0) {
|
215 |
+
message.success(t('message.operated'));
|
216 |
+
queryClient.invalidateQueries({ queryKey: ['fetchFileList'] });
|
217 |
}
|
218 |
+
return data.retcode;
|
219 |
},
|
220 |
+
});
|
|
|
221 |
|
222 |
+
return { data, loading, connectFileToKnowledge: mutateAsync };
|
223 |
};
|
web/src/interfaces/request/file-manager.ts
CHANGED
@@ -8,7 +8,7 @@ interface BaseRequestBody {
|
|
8 |
parentId: string;
|
9 |
}
|
10 |
|
11 |
-
export interface IConnectRequestBody
|
12 |
fileIds: string[];
|
13 |
kbIds: string[];
|
14 |
}
|
|
|
8 |
parentId: string;
|
9 |
}
|
10 |
|
11 |
+
export interface IConnectRequestBody {
|
12 |
fileIds: string[];
|
13 |
kbIds: string[];
|
14 |
}
|
web/src/pages/file-manager/file-toolbar.tsx
CHANGED
@@ -26,7 +26,7 @@ import {
|
|
26 |
|
27 |
import {
|
28 |
IListResult,
|
29 |
-
|
30 |
} from '@/hooks/file-manager-hooks';
|
31 |
import styles from './index.less';
|
32 |
|
@@ -49,7 +49,7 @@ const FileToolbar = ({
|
|
49 |
const { t } = useTranslate('knowledgeDetails');
|
50 |
const breadcrumbItems = useSelectBreadcrumbItems();
|
51 |
const { handleBreadcrumbClick } = useHandleBreadcrumbClick();
|
52 |
-
const parentFolderList =
|
53 |
const isKnowledgeBase =
|
54 |
parentFolderList.at(-1)?.source_type === 'knowledgebase';
|
55 |
|
|
|
26 |
|
27 |
import {
|
28 |
IListResult,
|
29 |
+
useFetchParentFolderList,
|
30 |
} from '@/hooks/file-manager-hooks';
|
31 |
import styles from './index.less';
|
32 |
|
|
|
49 |
const { t } = useTranslate('knowledgeDetails');
|
50 |
const breadcrumbItems = useSelectBreadcrumbItems();
|
51 |
const { handleBreadcrumbClick } = useHandleBreadcrumbClick();
|
52 |
+
const parentFolderList = useFetchParentFolderList();
|
53 |
const isKnowledgeBase =
|
54 |
parentFolderList.at(-1)?.source_type === 'knowledgebase';
|
55 |
|
web/src/pages/file-manager/hooks.ts
CHANGED
@@ -3,21 +3,15 @@ import {
|
|
3 |
useConnectToKnowledge,
|
4 |
useCreateFolder,
|
5 |
useDeleteFile,
|
6 |
-
useFetchFileList,
|
7 |
useFetchParentFolderList,
|
8 |
useRenameFile,
|
9 |
-
useSelectFileList,
|
10 |
-
useSelectParentFolderList,
|
11 |
useUploadFile,
|
12 |
} from '@/hooks/file-manager-hooks';
|
13 |
-
import { useGetPagination, useSetPagination } from '@/hooks/logic-hooks';
|
14 |
-
import { useOneNamespaceEffectsLoading } from '@/hooks/store-hooks';
|
15 |
import { IFile } from '@/interfaces/database/file-manager';
|
16 |
-
import { PaginationProps } from 'antd';
|
17 |
import { TableRowSelection } from 'antd/es/table/interface';
|
18 |
import { UploadFile } from 'antd/lib';
|
19 |
-
import { useCallback,
|
20 |
-
import {
|
21 |
|
22 |
export const useGetFolderId = () => {
|
23 |
const [searchParams] = useSearchParams();
|
@@ -26,71 +20,6 @@ export const useGetFolderId = () => {
|
|
26 |
return id ?? '';
|
27 |
};
|
28 |
|
29 |
-
export const useFetchDocumentListOnMount = () => {
|
30 |
-
const fetchDocumentList = useFetchFileList();
|
31 |
-
const fileList = useSelectFileList();
|
32 |
-
const id = useGetFolderId();
|
33 |
-
const { searchString, pagination } = useSelector(
|
34 |
-
(state) => state.fileManager,
|
35 |
-
);
|
36 |
-
const { pageSize, current } = pagination;
|
37 |
-
|
38 |
-
const dispatch = useDispatch();
|
39 |
-
|
40 |
-
useEffect(() => {
|
41 |
-
fetchDocumentList({
|
42 |
-
parent_id: id,
|
43 |
-
keywords: searchString,
|
44 |
-
page_size: pageSize,
|
45 |
-
page: current,
|
46 |
-
});
|
47 |
-
}, [dispatch, fetchDocumentList, id, current, pageSize, searchString]);
|
48 |
-
|
49 |
-
return { fetchDocumentList, fileList };
|
50 |
-
};
|
51 |
-
|
52 |
-
export const useGetFilesPagination = () => {
|
53 |
-
const { pagination } = useSelector((state) => state.fileManager);
|
54 |
-
|
55 |
-
const setPagination = useSetPagination('fileManager');
|
56 |
-
|
57 |
-
const onPageChange: PaginationProps['onChange'] = useCallback(
|
58 |
-
(pageNumber: number, pageSize: number) => {
|
59 |
-
setPagination(pageNumber, pageSize);
|
60 |
-
},
|
61 |
-
[setPagination],
|
62 |
-
);
|
63 |
-
|
64 |
-
const { pagination: paginationInfo } = useGetPagination(
|
65 |
-
pagination.total,
|
66 |
-
pagination.current,
|
67 |
-
pagination.pageSize,
|
68 |
-
onPageChange,
|
69 |
-
);
|
70 |
-
|
71 |
-
return {
|
72 |
-
pagination: paginationInfo,
|
73 |
-
setPagination,
|
74 |
-
};
|
75 |
-
};
|
76 |
-
|
77 |
-
export const useHandleSearchChange = () => {
|
78 |
-
const dispatch = useDispatch();
|
79 |
-
const { searchString } = useSelector((state) => state.fileManager);
|
80 |
-
const setPagination = useSetPagination('fileManager');
|
81 |
-
|
82 |
-
const handleInputChange = useCallback(
|
83 |
-
(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
84 |
-
const value = e.target.value;
|
85 |
-
dispatch({ type: 'fileManager/setSearchString', payload: value });
|
86 |
-
setPagination();
|
87 |
-
},
|
88 |
-
[setPagination, dispatch],
|
89 |
-
);
|
90 |
-
|
91 |
-
return { handleInputChange, searchString };
|
92 |
-
};
|
93 |
-
|
94 |
export const useGetRowSelection = () => {
|
95 |
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
96 |
|
@@ -126,11 +55,14 @@ export const useRenameCurrentFile = () => {
|
|
126 |
hideModal: hideFileRenameModal,
|
127 |
showModal: showFileRenameModal,
|
128 |
} = useSetModalState();
|
129 |
-
const renameFile = useRenameFile();
|
130 |
|
131 |
const onFileRenameOk = useCallback(
|
132 |
async (name: string) => {
|
133 |
-
const ret = await renameFile(
|
|
|
|
|
|
|
134 |
|
135 |
if (ret === 0) {
|
136 |
hideFileRenameModal();
|
@@ -139,8 +71,6 @@ export const useRenameCurrentFile = () => {
|
|
139 |
[renameFile, file, hideFileRenameModal],
|
140 |
);
|
141 |
|
142 |
-
const loading = useOneNamespaceEffectsLoading('fileManager', ['renameFile']);
|
143 |
-
|
144 |
const handleShowFileRenameModal = useCallback(
|
145 |
async (record: IFile) => {
|
146 |
setFile(record);
|
@@ -160,15 +90,7 @@ export const useRenameCurrentFile = () => {
|
|
160 |
};
|
161 |
|
162 |
export const useSelectBreadcrumbItems = () => {
|
163 |
-
const parentFolderList =
|
164 |
-
const id = useGetFolderId();
|
165 |
-
const fetchParentFolderList = useFetchParentFolderList();
|
166 |
-
|
167 |
-
useEffect(() => {
|
168 |
-
if (id) {
|
169 |
-
fetchParentFolderList(id);
|
170 |
-
}
|
171 |
-
}, [id, fetchParentFolderList]);
|
172 |
|
173 |
return parentFolderList.length === 1
|
174 |
? []
|
@@ -184,12 +106,12 @@ export const useHandleCreateFolder = () => {
|
|
184 |
hideModal: hideFolderCreateModal,
|
185 |
showModal: showFolderCreateModal,
|
186 |
} = useSetModalState();
|
187 |
-
const createFolder = useCreateFolder();
|
188 |
const id = useGetFolderId();
|
189 |
|
190 |
const onFolderCreateOk = useCallback(
|
191 |
async (name: string) => {
|
192 |
-
const ret = await createFolder(id, name);
|
193 |
|
194 |
if (ret === 0) {
|
195 |
hideFolderCreateModal();
|
@@ -198,10 +120,6 @@ export const useHandleCreateFolder = () => {
|
|
198 |
[createFolder, hideFolderCreateModal, id],
|
199 |
);
|
200 |
|
201 |
-
const loading = useOneNamespaceEffectsLoading('fileManager', [
|
202 |
-
'createFolder',
|
203 |
-
]);
|
204 |
-
|
205 |
return {
|
206 |
folderCreateLoading: loading,
|
207 |
onFolderCreateOk,
|
@@ -234,24 +152,19 @@ export const useHandleDeleteFile = (
|
|
234 |
return { handleRemoveFile };
|
235 |
};
|
236 |
|
237 |
-
export const useSelectFileListLoading = () => {
|
238 |
-
return useOneNamespaceEffectsLoading('fileManager', ['listFile']);
|
239 |
-
};
|
240 |
-
|
241 |
export const useHandleUploadFile = () => {
|
242 |
const {
|
243 |
visible: fileUploadVisible,
|
244 |
hideModal: hideFileUploadModal,
|
245 |
showModal: showFileUploadModal,
|
246 |
} = useSetModalState();
|
247 |
-
const uploadFile = useUploadFile();
|
248 |
const id = useGetFolderId();
|
249 |
|
250 |
const onFileUploadOk = useCallback(
|
251 |
async (fileList: UploadFile[]): Promise<number | undefined> => {
|
252 |
if (fileList.length > 0) {
|
253 |
-
const ret: number = await uploadFile(fileList, id);
|
254 |
-
console.info(ret);
|
255 |
if (ret === 0) {
|
256 |
hideFileUploadModal();
|
257 |
}
|
@@ -261,8 +174,6 @@ export const useHandleUploadFile = () => {
|
|
261 |
[uploadFile, hideFileUploadModal, id],
|
262 |
);
|
263 |
|
264 |
-
const loading = useOneNamespaceEffectsLoading('fileManager', ['uploadFile']);
|
265 |
-
|
266 |
return {
|
267 |
fileUploadLoading: loading,
|
268 |
onFileUploadOk,
|
@@ -278,8 +189,8 @@ export const useHandleConnectToKnowledge = () => {
|
|
278 |
hideModal: hideConnectToKnowledgeModal,
|
279 |
showModal: showConnectToKnowledgeModal,
|
280 |
} = useSetModalState();
|
281 |
-
const connectToKnowledge =
|
282 |
-
|
283 |
const [record, setRecord] = useState<IFile>({} as IFile);
|
284 |
|
285 |
const initialValue = useMemo(() => {
|
@@ -291,7 +202,6 @@ export const useHandleConnectToKnowledge = () => {
|
|
291 |
const onConnectToKnowledgeOk = useCallback(
|
292 |
async (knowledgeIds: string[]) => {
|
293 |
const ret = await connectToKnowledge({
|
294 |
-
parentId: id,
|
295 |
fileIds: [record.id],
|
296 |
kbIds: knowledgeIds,
|
297 |
});
|
@@ -301,13 +211,9 @@ export const useHandleConnectToKnowledge = () => {
|
|
301 |
}
|
302 |
return ret;
|
303 |
},
|
304 |
-
[connectToKnowledge, hideConnectToKnowledgeModal,
|
305 |
);
|
306 |
|
307 |
-
const loading = useOneNamespaceEffectsLoading('fileManager', [
|
308 |
-
'connectFileToKnowledge',
|
309 |
-
]);
|
310 |
-
|
311 |
const handleShowConnectToKnowledgeModal = useCallback(
|
312 |
(record: IFile) => {
|
313 |
setRecord(record);
|
@@ -328,16 +234,14 @@ export const useHandleConnectToKnowledge = () => {
|
|
328 |
|
329 |
export const useHandleBreadcrumbClick = () => {
|
330 |
const navigate = useNavigate();
|
331 |
-
const setPagination = useSetPagination('fileManager');
|
332 |
|
333 |
const handleBreadcrumbClick = useCallback(
|
334 |
(path?: string) => {
|
335 |
if (path) {
|
336 |
-
setPagination();
|
337 |
navigate(path);
|
338 |
}
|
339 |
},
|
340 |
-
[
|
341 |
);
|
342 |
|
343 |
return { handleBreadcrumbClick };
|
|
|
3 |
useConnectToKnowledge,
|
4 |
useCreateFolder,
|
5 |
useDeleteFile,
|
|
|
6 |
useFetchParentFolderList,
|
7 |
useRenameFile,
|
|
|
|
|
8 |
useUploadFile,
|
9 |
} from '@/hooks/file-manager-hooks';
|
|
|
|
|
10 |
import { IFile } from '@/interfaces/database/file-manager';
|
|
|
11 |
import { TableRowSelection } from 'antd/es/table/interface';
|
12 |
import { UploadFile } from 'antd/lib';
|
13 |
+
import { useCallback, useMemo, useState } from 'react';
|
14 |
+
import { useNavigate, useSearchParams } from 'umi';
|
15 |
|
16 |
export const useGetFolderId = () => {
|
17 |
const [searchParams] = useSearchParams();
|
|
|
20 |
return id ?? '';
|
21 |
};
|
22 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
23 |
export const useGetRowSelection = () => {
|
24 |
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
25 |
|
|
|
55 |
hideModal: hideFileRenameModal,
|
56 |
showModal: showFileRenameModal,
|
57 |
} = useSetModalState();
|
58 |
+
const { renameFile, loading } = useRenameFile();
|
59 |
|
60 |
const onFileRenameOk = useCallback(
|
61 |
async (name: string) => {
|
62 |
+
const ret = await renameFile({
|
63 |
+
fileId: file.id,
|
64 |
+
name,
|
65 |
+
});
|
66 |
|
67 |
if (ret === 0) {
|
68 |
hideFileRenameModal();
|
|
|
71 |
[renameFile, file, hideFileRenameModal],
|
72 |
);
|
73 |
|
|
|
|
|
74 |
const handleShowFileRenameModal = useCallback(
|
75 |
async (record: IFile) => {
|
76 |
setFile(record);
|
|
|
90 |
};
|
91 |
|
92 |
export const useSelectBreadcrumbItems = () => {
|
93 |
+
const parentFolderList = useFetchParentFolderList();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
94 |
|
95 |
return parentFolderList.length === 1
|
96 |
? []
|
|
|
106 |
hideModal: hideFolderCreateModal,
|
107 |
showModal: showFolderCreateModal,
|
108 |
} = useSetModalState();
|
109 |
+
const { createFolder, loading } = useCreateFolder();
|
110 |
const id = useGetFolderId();
|
111 |
|
112 |
const onFolderCreateOk = useCallback(
|
113 |
async (name: string) => {
|
114 |
+
const ret = await createFolder({ parentId: id, name });
|
115 |
|
116 |
if (ret === 0) {
|
117 |
hideFolderCreateModal();
|
|
|
120 |
[createFolder, hideFolderCreateModal, id],
|
121 |
);
|
122 |
|
|
|
|
|
|
|
|
|
123 |
return {
|
124 |
folderCreateLoading: loading,
|
125 |
onFolderCreateOk,
|
|
|
152 |
return { handleRemoveFile };
|
153 |
};
|
154 |
|
|
|
|
|
|
|
|
|
155 |
export const useHandleUploadFile = () => {
|
156 |
const {
|
157 |
visible: fileUploadVisible,
|
158 |
hideModal: hideFileUploadModal,
|
159 |
showModal: showFileUploadModal,
|
160 |
} = useSetModalState();
|
161 |
+
const { uploadFile, loading } = useUploadFile();
|
162 |
const id = useGetFolderId();
|
163 |
|
164 |
const onFileUploadOk = useCallback(
|
165 |
async (fileList: UploadFile[]): Promise<number | undefined> => {
|
166 |
if (fileList.length > 0) {
|
167 |
+
const ret: number = await uploadFile({ fileList, parentId: id });
|
|
|
168 |
if (ret === 0) {
|
169 |
hideFileUploadModal();
|
170 |
}
|
|
|
174 |
[uploadFile, hideFileUploadModal, id],
|
175 |
);
|
176 |
|
|
|
|
|
177 |
return {
|
178 |
fileUploadLoading: loading,
|
179 |
onFileUploadOk,
|
|
|
189 |
hideModal: hideConnectToKnowledgeModal,
|
190 |
showModal: showConnectToKnowledgeModal,
|
191 |
} = useSetModalState();
|
192 |
+
const { connectFileToKnowledge: connectToKnowledge, loading } =
|
193 |
+
useConnectToKnowledge();
|
194 |
const [record, setRecord] = useState<IFile>({} as IFile);
|
195 |
|
196 |
const initialValue = useMemo(() => {
|
|
|
202 |
const onConnectToKnowledgeOk = useCallback(
|
203 |
async (knowledgeIds: string[]) => {
|
204 |
const ret = await connectToKnowledge({
|
|
|
205 |
fileIds: [record.id],
|
206 |
kbIds: knowledgeIds,
|
207 |
});
|
|
|
211 |
}
|
212 |
return ret;
|
213 |
},
|
214 |
+
[connectToKnowledge, hideConnectToKnowledgeModal, record.id],
|
215 |
);
|
216 |
|
|
|
|
|
|
|
|
|
217 |
const handleShowConnectToKnowledgeModal = useCallback(
|
218 |
(record: IFile) => {
|
219 |
setRecord(record);
|
|
|
234 |
|
235 |
export const useHandleBreadcrumbClick = () => {
|
236 |
const navigate = useNavigate();
|
|
|
237 |
|
238 |
const handleBreadcrumbClick = useCallback(
|
239 |
(path?: string) => {
|
240 |
if (path) {
|
|
|
241 |
navigate(path);
|
242 |
}
|
243 |
},
|
244 |
+
[navigate],
|
245 |
);
|
246 |
|
247 |
return { handleBreadcrumbClick };
|
web/src/pages/file-manager/index.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1 |
-
import {
|
2 |
import { IFile } from '@/interfaces/database/file-manager';
|
3 |
import { formatDate } from '@/utils/date';
|
4 |
import { Button, Flex, Space, Table, Tag, Typography } from 'antd';
|
@@ -12,7 +12,6 @@ import {
|
|
12 |
useHandleUploadFile,
|
13 |
useNavigateToOtherFolder,
|
14 |
useRenameCurrentFile,
|
15 |
-
useSelectFileListLoading,
|
16 |
} from './hooks';
|
17 |
|
18 |
import FileUploadModal from '@/components/file-upload-modal';
|
@@ -31,7 +30,6 @@ const FileManager = () => {
|
|
31 |
const { t } = useTranslate('fileManager');
|
32 |
// const fileList = useSelectFileList();
|
33 |
const { rowSelection, setSelectedRowKeys } = useGetRowSelection();
|
34 |
-
const loading = useSelectFileListLoading();
|
35 |
const navigateToOtherFolder = useNavigateToOtherFolder();
|
36 |
const {
|
37 |
fileRenameVisible,
|
@@ -64,8 +62,8 @@ const FileManager = () => {
|
|
64 |
connectToKnowledgeLoading,
|
65 |
} = useHandleConnectToKnowledge();
|
66 |
// const { pagination } = useGetFilesPagination();
|
67 |
-
const { pagination, data, searchString, handleInputChange } =
|
68 |
-
|
69 |
const columns: ColumnsType<IFile> = [
|
70 |
{
|
71 |
title: t('name'),
|
|
|
1 |
+
import { useFetchFileList } from '@/hooks/file-manager-hooks';
|
2 |
import { IFile } from '@/interfaces/database/file-manager';
|
3 |
import { formatDate } from '@/utils/date';
|
4 |
import { Button, Flex, Space, Table, Tag, Typography } from 'antd';
|
|
|
12 |
useHandleUploadFile,
|
13 |
useNavigateToOtherFolder,
|
14 |
useRenameCurrentFile,
|
|
|
15 |
} from './hooks';
|
16 |
|
17 |
import FileUploadModal from '@/components/file-upload-modal';
|
|
|
30 |
const { t } = useTranslate('fileManager');
|
31 |
// const fileList = useSelectFileList();
|
32 |
const { rowSelection, setSelectedRowKeys } = useGetRowSelection();
|
|
|
33 |
const navigateToOtherFolder = useNavigateToOtherFolder();
|
34 |
const {
|
35 |
fileRenameVisible,
|
|
|
62 |
connectToKnowledgeLoading,
|
63 |
} = useHandleConnectToKnowledge();
|
64 |
// const { pagination } = useGetFilesPagination();
|
65 |
+
const { pagination, data, searchString, handleInputChange, loading } =
|
66 |
+
useFetchFileList();
|
67 |
const columns: ColumnsType<IFile> = [
|
68 |
{
|
69 |
title: t('name'),
|
web/src/pages/file-manager/model.ts
DELETED
@@ -1,159 +0,0 @@
|
|
1 |
-
import { paginationModel } from '@/base';
|
2 |
-
import { BaseState } from '@/interfaces/common';
|
3 |
-
import { IFile, IFolder } from '@/interfaces/database/file-manager';
|
4 |
-
import i18n from '@/locales/config';
|
5 |
-
import fileManagerService, {
|
6 |
-
getDocumentFile,
|
7 |
-
} from '@/services/file-manager-service';
|
8 |
-
import { message } from 'antd';
|
9 |
-
import omit from 'lodash/omit';
|
10 |
-
import { DvaModel } from 'umi';
|
11 |
-
|
12 |
-
export interface FileManagerModelState extends BaseState {
|
13 |
-
fileList: IFile[];
|
14 |
-
parentFolderList: IFolder[];
|
15 |
-
}
|
16 |
-
|
17 |
-
const model: DvaModel<FileManagerModelState> = {
|
18 |
-
namespace: 'fileManager',
|
19 |
-
state: {
|
20 |
-
fileList: [],
|
21 |
-
parentFolderList: [],
|
22 |
-
...(paginationModel.state as BaseState),
|
23 |
-
},
|
24 |
-
reducers: {
|
25 |
-
setFileList(state, { payload }) {
|
26 |
-
return { ...state, fileList: payload };
|
27 |
-
},
|
28 |
-
setParentFolderList(state, { payload }) {
|
29 |
-
return { ...state, parentFolderList: payload };
|
30 |
-
},
|
31 |
-
...paginationModel.reducers,
|
32 |
-
},
|
33 |
-
effects: {
|
34 |
-
*removeFile({ payload = {} }, { call, put }) {
|
35 |
-
const { data } = yield call(fileManagerService.removeFile, {
|
36 |
-
fileIds: payload.fileIds,
|
37 |
-
});
|
38 |
-
const { retcode } = data;
|
39 |
-
if (retcode === 0) {
|
40 |
-
message.success(i18n.t('message.deleted'));
|
41 |
-
yield put({
|
42 |
-
type: 'listFile',
|
43 |
-
payload: { parentId: payload.parentId },
|
44 |
-
});
|
45 |
-
}
|
46 |
-
return retcode;
|
47 |
-
},
|
48 |
-
*listFile({ payload = {} }, { call, put, select }) {
|
49 |
-
const { searchString, pagination } = yield select(
|
50 |
-
(state: any) => state.fileManager,
|
51 |
-
);
|
52 |
-
const { current, pageSize } = pagination;
|
53 |
-
const { data } = yield call(fileManagerService.listFile, {
|
54 |
-
...payload,
|
55 |
-
keywords: searchString.trim(),
|
56 |
-
page: current,
|
57 |
-
pageSize,
|
58 |
-
});
|
59 |
-
const { retcode, data: res } = data;
|
60 |
-
if (retcode === 0 && Array.isArray(res.files)) {
|
61 |
-
yield put({
|
62 |
-
type: 'setFileList',
|
63 |
-
payload: res.files,
|
64 |
-
});
|
65 |
-
yield put({
|
66 |
-
type: 'setPagination',
|
67 |
-
payload: { total: res.total },
|
68 |
-
});
|
69 |
-
}
|
70 |
-
},
|
71 |
-
*renameFile({ payload = {} }, { call, put }) {
|
72 |
-
const { data } = yield call(
|
73 |
-
fileManagerService.renameFile,
|
74 |
-
omit(payload, ['parentId']),
|
75 |
-
);
|
76 |
-
if (data.retcode === 0) {
|
77 |
-
message.success(i18n.t('message.renamed'));
|
78 |
-
yield put({
|
79 |
-
type: 'listFile',
|
80 |
-
payload: { parentId: payload.parentId },
|
81 |
-
});
|
82 |
-
}
|
83 |
-
return data.retcode;
|
84 |
-
},
|
85 |
-
*uploadFile({ payload = {} }, { call, put }) {
|
86 |
-
const fileList = payload.file;
|
87 |
-
const pathList = payload.path;
|
88 |
-
const formData = new FormData();
|
89 |
-
formData.append('parent_id', payload.parentId);
|
90 |
-
fileList.forEach((file: any, index: number) => {
|
91 |
-
formData.append('file', file);
|
92 |
-
formData.append('path', pathList[index]);
|
93 |
-
});
|
94 |
-
const { data } = yield call(fileManagerService.uploadFile, formData);
|
95 |
-
if (data.retcode === 0) {
|
96 |
-
message.success(i18n.t('message.uploaded'));
|
97 |
-
|
98 |
-
yield put({
|
99 |
-
type: 'listFile',
|
100 |
-
payload: { parentId: payload.parentId },
|
101 |
-
});
|
102 |
-
}
|
103 |
-
return data.retcode;
|
104 |
-
},
|
105 |
-
*createFolder({ payload = {} }, { call, put }) {
|
106 |
-
const { data } = yield call(fileManagerService.createFolder, payload);
|
107 |
-
if (data.retcode === 0) {
|
108 |
-
message.success(i18n.t('message.created'));
|
109 |
-
|
110 |
-
yield put({
|
111 |
-
type: 'listFile',
|
112 |
-
payload: { parentId: payload.parentId },
|
113 |
-
});
|
114 |
-
}
|
115 |
-
return data.retcode;
|
116 |
-
},
|
117 |
-
*getAllParentFolder({ payload = {} }, { call, put }) {
|
118 |
-
const { data } = yield call(
|
119 |
-
fileManagerService.getAllParentFolder,
|
120 |
-
payload,
|
121 |
-
);
|
122 |
-
if (data.retcode === 0) {
|
123 |
-
yield put({
|
124 |
-
type: 'setParentFolderList',
|
125 |
-
payload: data.data?.parent_folders ?? [],
|
126 |
-
});
|
127 |
-
}
|
128 |
-
return data.retcode;
|
129 |
-
},
|
130 |
-
*connectFileToKnowledge({ payload = {} }, { call, put }) {
|
131 |
-
const { data } = yield call(
|
132 |
-
fileManagerService.connectFileToKnowledge,
|
133 |
-
omit(payload, 'parentId'),
|
134 |
-
);
|
135 |
-
if (data.retcode === 0) {
|
136 |
-
message.success(i18n.t('message.operated'));
|
137 |
-
yield put({
|
138 |
-
type: 'listFile',
|
139 |
-
payload: { parentId: payload.parentId },
|
140 |
-
});
|
141 |
-
}
|
142 |
-
return data.retcode;
|
143 |
-
},
|
144 |
-
*getDocumentFile({ payload = {} }, { call }) {
|
145 |
-
const ret = yield call(getDocumentFile, payload);
|
146 |
-
|
147 |
-
return ret;
|
148 |
-
},
|
149 |
-
},
|
150 |
-
};
|
151 |
-
|
152 |
-
// const finalModel = modelExtend<DvaModel<FileManagerModelState & BaseState>>(
|
153 |
-
// paginationModel,
|
154 |
-
// model,
|
155 |
-
// );
|
156 |
-
|
157 |
-
// console.info(finalModel);
|
158 |
-
|
159 |
-
export default model;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
web/typings.d.ts
CHANGED
@@ -3,7 +3,6 @@ import { KFModelState } from '@/pages/add-knowledge/components/knowledge-file/mo
|
|
3 |
import { TestingModelState } from '@/pages/add-knowledge/components/knowledge-testing/model';
|
4 |
import { kAModelState } from '@/pages/add-knowledge/model';
|
5 |
import { ChatModelState } from '@/pages/chat/model';
|
6 |
-
import { FileManagerModelState } from '@/pages/file-manager/model';
|
7 |
import { LoginModelState } from '@/pages/login/model';
|
8 |
import { SettingModelState } from '@/pages/user-setting/model';
|
9 |
|
@@ -15,8 +14,6 @@ function useSelector<TState = RootState, TSelected = unknown>(
|
|
15 |
): TSelected;
|
16 |
|
17 |
export interface RootState {
|
18 |
-
// loading: Loading;
|
19 |
-
fileManager: FileManagerModelState;
|
20 |
chatModel: ChatModelState;
|
21 |
loginModel: LoginModelState;
|
22 |
settingModel: SettingModelState;
|
|
|
3 |
import { TestingModelState } from '@/pages/add-knowledge/components/knowledge-testing/model';
|
4 |
import { kAModelState } from '@/pages/add-knowledge/model';
|
5 |
import { ChatModelState } from '@/pages/chat/model';
|
|
|
6 |
import { LoginModelState } from '@/pages/login/model';
|
7 |
import { SettingModelState } from '@/pages/user-setting/model';
|
8 |
|
|
|
14 |
): TSelected;
|
15 |
|
16 |
export interface RootState {
|
|
|
|
|
17 |
chatModel: ChatModelState;
|
18 |
loginModel: LoginModelState;
|
19 |
settingModel: SettingModelState;
|