update pagination hook

client/src/hooks/Pagination.ts

@@ -1,26 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 10;
 export const usePaginationHook = (list: any[]) => {
-  const [offset, setOffset] = useState(0);
   const [currentPage, setCurrentPage] = useState(0);
-  const [total, setTotal] = useState(0);
-  const [data, setData] = useState<any[]>([]);
 
-  useEffect(() => {
-    if (list.length > 0) {
-      setTotal(list.length);
-      setData(list.slice(0, PAGE_SIZE));
-    }
-  }, [list]);
+  const offset = useMemo(() => PAGE_SIZE * currentPage, [currentPage]);
+  const total = list.length;
+  const data = useMemo(() => {
+    const offset = PAGE_SIZE * currentPage;
+    const test = list.slice(offset, offset + PAGE_SIZE);
+    return test;
+  }, [list, currentPage]);
 
   const handleCurrentPage = (page: number) => {
     setCurrentPage(page);
-    const offset = PAGE_SIZE * page;
-    setOffset(offset);
-
-    const data = list.slice(offset, offset + PAGE_SIZE);
-    setData(data);
   };
 
   return {
@@ -29,7 +22,6 @@ export const usePaginationHook = (list: any[]) => {
     pageSize: PAGE_SIZE,
     handleCurrentPage,
     total,
-    setTotal,
     data,
   };
 };

client/src/i18n/cn/partition.ts

@@ -10,6 +10,7 @@ const partitionTrans = {
 
   createTitle: 'Create Partition',
   nameWarning: '_default is reserved, cannot be used as name',
+  createSuccess: 'Partition has been created',
 };
 
 export default partitionTrans;

client/src/i18n/en/partition.ts

@@ -10,6 +10,7 @@ const partitionTrans = {
 
   createTitle: 'Create Partition',
   nameWarning: '_default is reserved, cannot be used as name',
+  createSuccess: 'Partition has been created',
 };
 
 export default partitionTrans;

client/src/pages/collections/Collections.tsx

@@ -67,29 +67,34 @@ const Collections = () => {
   const InfoIcon = icons.info;
 
   const fetchData = useCallback(async () => {
-    const res = await CollectionHttp.getCollections();
-    const statusRes = await CollectionHttp.getCollectionsIndexState();
-    setLoading(false);
-    setCollections(
-      res.map(v => {
-        const indexStatus = statusRes.find(item => item._name === v._name);
-        Object.assign(v, {
-          nameElement: (
-            <Link to={`/collections/${v._name}`} className={classes.link}>
-              {v._name}
-            </Link>
-          ),
-          statusElement: <Status status={v._status} />,
-          indexCreatingElement: (
-            <StatusIcon
-              type={indexStatus?._indexState || ChildrenStatusType.FINISH}
-            />
-          ),
-        });
+    try {
+      const res = await CollectionHttp.getCollections();
+      const statusRes = await CollectionHttp.getCollectionsIndexState();
+      setLoading(false);
+
+      setCollections(
+        res.map(v => {
+          const indexStatus = statusRes.find(item => item._name === v._name);
+          Object.assign(v, {
+            nameElement: (
+              <Link to={`/collections/${v._name}`} className={classes.link}>
+                {v._name}
+              </Link>
+            ),
+            statusElement: <Status status={v._status} />,
+            indexCreatingElement: (
+              <StatusIcon
+                type={indexStatus?._indexState || ChildrenStatusType.FINISH}
+              />
+            ),
+          });
 
-        return v;
-      })
-    );
+          return v;
+        })
+      );
+    } catch (err) {
+      setLoading(false);
+    }
   }, [classes.link]);
 
   useEffect(() => {

client/src/pages/partitions/partitions.tsx

@@ -11,6 +11,7 @@ import { rootContext } from '../../context/Root';
 import CreatePartition from './Create';
 import { PartitionHttp } from '../../http/Partition';
 import Status from '../../components/status/Status';
+import { ManageRequestMethods } from '../../types/Common';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -37,9 +38,7 @@ const Partitions: FC<{
     pageSize,
     currentPage,
     handleCurrentPage,
-    // offset,
     total,
-    // setTotal
     data: partitionList,
   } = usePaginationHook(partitions);
   const [loading, setLoading] = useState<boolean>(true);
@@ -51,13 +50,17 @@ const Partitions: FC<{
   }, [collectionName]);
 
   const fetchPartitions = async (collectionName: string) => {
-    const res = await PartitionHttp.getPartitions(collectionName);
+    try {
+      const res = await PartitionHttp.getPartitions(collectionName);
 
-    const partitons: PartitionView[] = res.map(p =>
-      Object.assign(p, { _statusElement: <Status status={p._status} /> })
-    );
-    setLoading(false);
-    setPartitions(partitons);
+      const partitons: PartitionView[] = res.map(p =>
+        Object.assign(p, { _statusElement: <Status status={p._status} /> })
+      );
+      setLoading(false);
+      setPartitions(partitons);
+    } catch (err) {
+      setLoading(false);
+    }
   };
 
   const toolbarConfigs: ToolBarConfig[] = [
@@ -134,12 +137,12 @@ const Partitions: FC<{
     const param: PartitionManageParam = {
       partitionName: name,
       collectionName,
-      type: 'create',
+      type: ManageRequestMethods.CREATE,
     };
 
     await PartitionHttp.createPartition(param);
 
-    openSnackBar('create partition success');
+    openSnackBar(t('createSuccess'));
     handleCloseDialog();
     // refresh partitions
     fetchPartitions(collectionName);

client/src/types/Common.ts

@@ -21,4 +21,7 @@ export interface IPaginationRes {
   total_count: number;
 }
 
-export type ManageRequestMethods = 'delete' | 'create';
+export enum ManageRequestMethods {
+  DELETE = 'delete',
+  CREATE = 'create',
+}