React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x';
import reactDom from 'eslint-plugin-react-dom';

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
});

Hướng dẫn sử dụng hook useFilterable

Hook useFilterable được tạo ra để chuẩn hóa và tái sử dụng logic xử lý filter, phân trang, và gọi API trong các hooks khác nhau của ứng dụng.

Cách triển khai

1. Cấu trúc của hook useFilterable

Hook useFilterable nhận vào một đối tượng với các thuộc tính:

interface UseFilterableParams<T, P> {
  // Hàm để gọi API lấy dữ liệu
  fetchDataFn: (params: P) => Promise<any>;
  // Hàm chuyển đổi từ filter sang params API
  getSearchParams: (
    filteredInfo: FilterParams,
    page: number,
    pageSize: number
  ) => P;
  // Trường status mặc định (waiting, approved, rejected...)
  defaultStatus?: string;
  // Trường type mặc định (manual, auto...)
  defaultType?: string;
  // Kích thước trang mặc định
  defaultPageSize?: number;
  // Hàm xử lý dữ liệu trả về từ API
  processResponseData?: (response: any) => {
    items: T[];
    total: number;
    page: number;
    pageSize: number;
    totalPages: number;
  };
}

2. Cách áp dụng cho các hooks khác

Bước 1: Import hook useFilterable

import { useFilterable } from './useFilterable';

Bước 2: Định nghĩa các hàm trợ giúp

// Hàm chuyển đổi từ FilterParams sang API params
const getSearchParamsForAPI = (
  filters: FilterParams,
  page: number,
  pageSize: number
) => {
  return {
    page,
    pageSize,
    status: 'your_status', // Tùy vào hook cụ thể (rejected, approved, waiting)
    type: 'your_type', // manual hoặc auto
    ...filters,
  };
};

// Hàm xử lý dữ liệu trả về từ API (nếu cần)
const processResponseData = (response: any) => {
  const items = response.data.items || [];
  // Chuyển đổi items nếu cần
  return {
    items: items, // hoặc items đã được chuyển đổi
    total: response.data.total || 0,
    page: response.data.page || 1,
    pageSize: response.data.pageSize || 20,
    totalPages: response.data.totalPages || 1,
  };
};

Bước 3: Sử dụng hook useFilterable

const {
  records,
  isLoading,
  filteredInfo,
  currentPage,
  pageSize,
  setFilteredInfo,
  setCurrentPage,
  setPageSize,
  handleSearch,
  handleClearFilters,
  handleFilterChange,
  contextHolder: filterableContextHolder,
} = useFilterable<YourDataType>({
  fetchDataFn: yourAPIFunction,
  getSearchParams: getSearchParamsForAPI,
  defaultPageSize: 20,
  defaultStatus: 'your_status', // nếu cần
  defaultType: 'your_type', // nếu cần
  processResponseData: processResponseData, // nếu cần
});

Bước 4: Điều chỉnh các hàm hiện có

Ví dụ handlePaginationChange và handleTableChange cần được cập nhật để sử dụng các hàm từ hook:

const handlePaginationChange = useCallback(
  (page: number, pageSize: number) => {
    setCurrentPage(page);
    setPageSize(pageSize);
    handleSearch(false);
  },
  [handleSearch, setCurrentPage, setPageSize]
);

const handleTableChange = (newPagination: any, filters: any, sorter: any) => {
  setCurrentPage(newPagination.current);
  setPageSize(newPagination.pageSize);
  handleSearch(false);
};

Bước 5: Cập nhật return của hook

return {
  // Các giá trị từ useFilterable
  filteredInfo,
  loading: isLoading,
  data: records.items, // Tùy vào cách bạn muốn expose data
  pagination: {
    current: currentPage,
    pageSize,
    total: records.total,
    // Các thuộc tính khác nếu cần
  },
  // Các methods từ useFilterable
  handleSearch,
  clearFilters: handleClearFilters,
  // Các giá trị và methods khác của hook
  // ...
  contextHolder: contextHolder || filterableContextHolder,
};

Ví dụ cho các hooks cụ thể

Bằng cách áp dụng hook chung, bạn sẽ:

1. Giảm lượng code trùng lặp
2. Dễ dàng bảo trì và thay đổi logic xử lý filter, search và pagination
3. Đảm bảo tính nhất quán giữa các màn hình khác nhau
4. Giảm thiểu lỗi khi thêm tính năng mới