chore: add delete action in table fetch hook

src/hooks/use-table-fetch.ts

@@ -1,12 +1,16 @@
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
+import { handleBatchRequest } from '@/utils';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export default function useTableFetch<ListItem>(options: {
   fetchAPI: (params: any) => Promise<Global.PageResponse<ListItem>>;
+  deleteAPI?: (id: number) => Promise<any>;
+  contentForDelete?: string;
 }) {
-  const { fetchAPI } = options;
+  const { fetchAPI, deleteAPI, contentForDelete } = options;
+  const modalRef = useRef<any>(null);
   const rowSelection = useTableRowSelection();
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
@@ -91,6 +95,33 @@ export default function useTableFetch<ListItem>(options: {
     });
   };
 
+  const handleDelete = (row: ListItem & { name: string; id: number }) => {
+    modalRef.current.show({
+      content: contentForDelete,
+      operation: 'common.delete.single.confirm',
+      name: row.name,
+      async onOk() {
+        console.log('OK');
+        await deleteAPI?.(row.id);
+        fetchData();
+      }
+    });
+  };
+
+  const handleDeleteBatch = () => {
+    modalRef.current.show({
+      content: contentForDelete,
+      operation: 'common.delete.confirm',
+      selection: true,
+      async onOk() {
+        if (!deleteAPI) return;
+        await handleBatchRequest(rowSelection.selectedRowKeys, deleteAPI);
+        rowSelection.clearSelections();
+        fetchData();
+      }
+    });
+  };
+
   useEffect(() => {
     fetchData();
   }, []);
@@ -100,6 +131,9 @@ export default function useTableFetch<ListItem>(options: {
     rowSelection,
     sortOrder,
     queryParams,
+    modalRef,
+    handleDelete,
+    handleDeleteBatch,
     fetchData,
     handlePageChange,
     handleTableChange,

src/pages/api-keys/index.tsx

@@ -5,7 +5,6 @@ import { PageAction } from '@/config';
 import HotKeys from '@/config/hotkeys';
 import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
-import { handleBatchRequest } from '@/utils';
 import { DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
@@ -19,7 +18,7 @@ import {
   Tooltip
 } from 'antd';
 import dayjs from 'dayjs';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { deleteApisKey, queryApisKeysList } from './apis';
 import AddAPIKeyModal from './components/add-apikey';
@@ -33,17 +32,21 @@ const APIKeys: React.FC = () => {
     rowSelection,
     queryParams,
     sortOrder,
+    modalRef,
+    handleDelete,
+    handleDeleteBatch,
     fetchData,
     handlePageChange,
     handleTableChange,
     handleSearch,
     handleNameChange
   } = useTableFetch<ListItem>({
-    fetchAPI: queryApisKeysList
+    fetchAPI: queryApisKeysList,
+    deleteAPI: deleteApisKey,
+    contentForDelete: 'apikeys.table.apikeys'
   });
 
   const intl = useIntl();
-  const modalRef = useRef<any>(null);
 
   const [openAddModal, setOpenAddModal] = useState(false);
   const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
@@ -67,32 +70,6 @@ const APIKeys: React.FC = () => {
     setOpenAddModal(false);
   };
 
-  const handleDelete = (row: ListItem) => {
-    modalRef.current.show({
-      content: 'apikeys.table.apikeys',
-      operation: 'common.delete.single.confirm',
-      name: row.name,
-      async onOk() {
-        console.log('OK');
-        await deleteApisKey(row.id);
-        fetchData();
-      }
-    });
-  };
-
-  const handleDeleteBatch = () => {
-    modalRef.current.show({
-      content: 'apikeys.table.apikeys',
-      operation: 'common.delete.confirm',
-      selection: true,
-      async onOk() {
-        await handleBatchRequest(rowSelection.selectedRowKeys, deleteApisKey);
-        rowSelection.clearSelections();
-        fetchData();
-      }
-    });
-  };
-
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
     if (

src/pages/resources/components/workers.tsx

@@ -7,7 +7,7 @@ import InfoColumn from '@/components/simple-table/info-column';
 import StatusTag from '@/components/status-tag';
 import Hotkeys from '@/config/hotkeys';
 import useTableFetch from '@/hooks/use-table-fetch';
-import { convertFileSize, handleBatchRequest } from '@/utils';
+import { convertFileSize } from '@/utils';
 import {
   DeleteOutlined,
   EditOutlined,
@@ -27,7 +27,7 @@ import {
   message
 } from 'antd';
 import _ from 'lodash';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { deleteWorker, queryWorkersList, updateWorker } from '../apis';
 import { WorkerStatusMapValue, status } from '../config';
@@ -80,25 +80,42 @@ const ActionList = [
   }
 ];
 
+const formateUtilazation = (val1: number, val2: number): number => {
+  if (!val2 || !val1) {
+    return 0;
+  }
+  return _.round((val1 / val2) * 100, 0);
+};
+
+const calcStorage = (files: Filesystem[]) => {
+  const mountRoot = _.find(
+    files,
+    (item: Filesystem) => item.mount_point === '/'
+  );
+  return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
+};
+
 const Workers: React.FC = () => {
   const {
     dataSource,
     rowSelection,
     queryParams,
-    sortOrder,
+    modalRef,
+    handleDelete,
+    handleDeleteBatch,
     fetchData,
     handlePageChange,
     handleTableChange,
     handleSearch,
     handleNameChange
   } = useTableFetch<ListItem>({
-    fetchAPI: queryWorkersList
+    fetchAPI: queryWorkersList,
+    deleteAPI: deleteWorker,
+    contentForDelete: 'worker'
   });
 
-  const modalRef = useRef<any>(null);
   const intl = useIntl();
   const [open, setOpen] = useState(false);
-
   const [updateLabelsData, setUpdateLabelsData] = useState<{
     open: boolean;
     data: ListItem;
@@ -107,51 +124,10 @@ const Workers: React.FC = () => {
     data: {} as ListItem
   });
 
-  const formateUtilazation = (val1: number, val2: number): number => {
-    if (!val2 || !val1) {
-      return 0;
-    }
-    return _.round((val1 / val2) * 100, 0);
-  };
-
-  const calcStorage = (files: Filesystem[]) => {
-    const mountRoot = _.find(
-      files,
-      (item: Filesystem) => item.mount_point === '/'
-    );
-    return mountRoot ? formateUtilazation(mountRoot.used, mountRoot.total) : 0;
-  };
-
   const handleAddWorker = () => {
     setOpen(true);
   };
 
-  const handleDelete = (row: ListItem) => {
-    modalRef.current.show({
-      content: 'worker',
-      operation: 'common.delete.single.confirm',
-      name: row.name,
-      async onOk() {
-        console.log('OK');
-        await deleteWorker(row.id);
-        fetchData();
-      }
-    });
-  };
-
-  const handleDeleteBatch = () => {
-    modalRef.current.show({
-      content: 'wokers',
-      operation: 'common.delete.confirm',
-      selection: true,
-      async onOk() {
-        await handleBatchRequest(rowSelection.selectedRowKeys, deleteWorker);
-        rowSelection.clearSelections();
-        fetchData();
-      }
-    });
-  };
-
   const handleUpdateLabelsOk = useCallback(
     async (values: Record<string, any>) => {
       try {

src/pages/users/config/types.ts

@@ -3,6 +3,7 @@ export interface ListItem {
   is_admin: boolean;
   full_name: string;
   id: number;
+  username: string;
   created_at: string;
   updated_at: string;
 }

src/pages/users/index.tsx

@@ -6,7 +6,6 @@ import { PageAction } from '@/config';
 import HotKeys from '@/config/hotkeys';
 import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
-import { handleBatchRequest } from '@/utils';
 import {
   DeleteOutlined,
   EditOutlined,
@@ -27,7 +26,7 @@ import {
   message
 } from 'antd';
 import dayjs from 'dayjs';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { createUser, deleteUser, queryUsersList, updateUser } from './apis';
 import AddModal from './components/add-modal';
@@ -56,17 +55,21 @@ const Users: React.FC = () => {
     rowSelection,
     queryParams,
     sortOrder,
+    modalRef,
+    handleDelete,
+    handleDeleteBatch,
     fetchData,
     handlePageChange,
     handleTableChange,
     handleSearch,
     handleNameChange
   } = useTableFetch<ListItem>({
-    fetchAPI: queryUsersList
+    fetchAPI: queryUsersList,
+    deleteAPI: deleteUser,
+    contentForDelete: 'users.table.user'
   });
 
   const intl = useIntl();
-  const modalRef = useRef<any>(null);
   const [openAddModal, setOpenAddModal] = useState(false);
 
   const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
@@ -110,32 +113,6 @@ const Users: React.FC = () => {
     setOpenAddModal(false);
   };
 
-  const handleDelete = (row: ListItem) => {
-    modalRef.current.show({
-      content: 'users.table.user',
-      operation: 'common.delete.single.confirm',
-      name: row.name,
-      async onOk() {
-        console.log('OK');
-        await deleteUser(row.id);
-        fetchData();
-      }
-    });
-  };
-
-  const handleDeleteBatch = () => {
-    modalRef.current.show({
-      content: 'users.table.user',
-      operation: 'common.delete.confirm',
-      selection: true,
-      async onOk() {
-        await handleBatchRequest(rowSelection.selectedRowKeys, deleteUser);
-        rowSelection.clearSelections();
-        fetchData();
-      }
-    });
-  };
-
   const handleEditUser = (row: ListItem) => {
     setCurrentData(row);
     setOpenAddModal(true);
@@ -147,7 +124,7 @@ const Users: React.FC = () => {
     if (val === 'edit') {
       handleEditUser(row);
     } else if (val === 'delete') {
-      handleDelete(row);
+      handleDelete({ ...row, name: row.username });
     }
   };