refactor: remove anys and add generic type to B3PaginationTable

bigcommerce · Feb 4, 2025 · 81c75e8 · 81c75e8
1 parent af32baf
commit 81c75e8
Show file tree

Hide file tree

Showing 15 changed files with 85 additions and 60 deletions.
diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -18,7 +18,8 @@
     "coverage": "vitest --coverage",
     "generate": "graphql-codegen",
     "generate:local": "CODEGEN_ENV=local graphql-codegen",
-    "start": "http-server ./dist --cors"
+    "start": "http-server ./dist --cors",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@b3/global-b3": "*",

diff --git a/apps/storefront/src/components/table/B3PaginationTable.tsx b/apps/storefront/src/components/table/B3PaginationTable.tsx
@@ -1,6 +1,4 @@
 import {
-  forwardRef,
-  memo,
   ReactElement,
   Ref,
   useCallback,
@@ -14,28 +12,46 @@ import isEqual from 'lodash-es/isEqual';
 
 import { useMobile } from '@/hooks';
 import { useAppSelector } from '@/store';
+import { forwardRefWithGenerics, memoWithGenerics } from '@/utils';
 
 import { B3Table, TableColumnItem } from './B3Table';
 
 export interface TablePagination {
   offset: number;
   first: number;
 }
-interface B3PaginationTableProps {
+
+interface GetRequestListResult<T> {
+  edges: T[];
+  totalCount: number;
+}
+
+type GetRequestListSync<Params, Item> = (params: Params) => GetRequestListResult<Item>;
+type GetRequestListAsync<Params, Item> = (params: Params) => Promise<GetRequestListResult<Item>>;
+
+export type GetRequestList<Params, Item> =
+  | GetRequestListSync<Params, Item>
+  | GetRequestListAsync<Params, Item>;
+
+interface B3PaginationTableProps<
+  GetRequestListParams,
+  ListItem,
+  Row = ListItem extends { node: infer Node } ? Node : ListItem,
+> {
   tableFixed?: boolean;
   tableHeaderHide?: boolean;
-  columnItems?: TableColumnItem<any>[];
+  columnItems?: TableColumnItem<Row>[];
   itemSpacing?: number;
   itemXs?: number;
   rowsPerPageOptions?: number[];
   showPagination?: boolean;
-  renderItem?: (row: any, index?: number, checkBox?: () => ReactElement) => ReactElement;
-  CollapseComponent?: (row: any) => ReactElement;
+  renderItem?: (row: Row, index?: number, checkBox?: () => ReactElement) => ReactElement;
+  CollapseComponent?: (row: { row: Row }) => ReactElement;
   isCustomRender?: boolean;
   noDataText?: string;
   tableKey?: string;
-  getRequestList: any;
-  searchParams?: any;
+  getRequestList: GetRequestList<GetRequestListParams, ListItem>;
+  searchParams: GetRequestListParams & { createdBy?: string };
   requestLoading?: (bool: boolean) => void;
   showCheckbox?: boolean;
   showSelectAllCheckbox?: boolean;
@@ -48,7 +64,7 @@ interface B3PaginationTableProps {
   itemIsMobileSpacing?: number;
   disableCheckbox?: boolean;
   applyAllDisableCheckbox?: boolean;
-  onClickRow?: (item: any, index?: number) => void;
+  onClickRow?: (item: ListItem, index?: number) => void;
   showRowsPerPageOptions?: boolean;
   sortDirection?: 'asc' | 'desc';
   sortByFn?: (e: { key: string }) => void;
@@ -57,7 +73,7 @@ interface B3PaginationTableProps {
   isAutoRefresh?: boolean;
 }
 
-function PaginationTable(
+function PaginationTable<GetRequestListParams, ListItem>(
   {
     columnItems,
     isCustomRender = false,
@@ -92,7 +108,7 @@ function PaginationTable(
     orderBy = '',
     pageType = '',
     isAutoRefresh = true,
-  }: B3PaginationTableProps,
+  }: B3PaginationTableProps<GetRequestListParams, ListItem>,
   ref?: Ref<unknown>,
 ) {
   const initPagination = {
@@ -105,7 +121,7 @@ function PaginationTable(
   );
   const selectCompanyHierarchyIdCache = useRef(selectCompanyHierarchyId);
 
-  const cache = useRef(null);
+  const cache = useRef<GetRequestListParams | null>(null);
 
   const [loading, setLoading] = useState<boolean>();
 
@@ -156,7 +172,7 @@ function PaginationTable(
 
         setLoading(true);
         if (requestLoading) requestLoading(true);
-        const { createdBy } = searchParams;
+        const { createdBy = '' } = searchParams;
 
         const getEmailReg = /\((.+)\)/g;
         const getCreatedByReg = /^[^(]+/;
@@ -312,7 +328,7 @@ function PaginationTable(
       if (flag) {
         list.forEach((item: CustomFieldItems) => {
           const option = item?.node || item;
-          const index = newSelectCheckbox.findIndex((item: any) => item === option[selectedSymbol]);
+          const index = newSelectCheckbox.findIndex((item) => item === option[selectedSymbol]);
           newSelectCheckbox.splice(index, 1);
         });
       } else {
@@ -387,6 +403,6 @@ function PaginationTable(
   );
 }
 
-const B3PaginationTable = memo(forwardRef(PaginationTable));
+const B3PaginationTable = memoWithGenerics(forwardRefWithGenerics(PaginationTable));
 
 export { B3PaginationTable };
diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
@@ -58,7 +58,7 @@ interface TableProps<T> {
     index?: number,
     checkBox?: (disable?: boolean) => ReactElement,
   ) => ReactElement;
-  CollapseComponent?: (row: T) => ReactElement;
+  CollapseComponent?: (row: { row: T }) => ReactElement;
   isCustomRender?: boolean;
   isInfiniteScroll?: boolean;
   isLoading?: boolean;

diff --git a/apps/storefront/src/pages/Address/index.tsx b/apps/storefront/src/pages/Address/index.tsx
@@ -4,7 +4,7 @@ import { Box } from '@mui/material';
 
 import B3Filter from '@/components/filter/B3Filter';
 import B3Spin from '@/components/spin/B3Spin';
-import { B3PaginationTable } from '@/components/table/B3PaginationTable';
+import { B3PaginationTable, GetRequestList } from '@/components/table/B3PaginationTable';
 import { useCardListColumn, useTableRef, useVerifyCreatePermission } from '@/hooks';
 import { GlobalContext } from '@/shared/global';
 import {
@@ -105,7 +105,7 @@ function Address() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const getAddressList = async (params = {}) => {
+  const getAddressList: GetRequestList<FilterSearchProps, AddressItemType> = async (params) => {
     let list = [];
     let count = 0;
 

diff --git a/apps/storefront/src/pages/Invoice/components/PrintTemplate.tsx b/apps/storefront/src/pages/Invoice/components/PrintTemplate.tsx
@@ -1,6 +1,7 @@
 import { SyntheticEvent, useEffect, useRef, useState } from 'react';
 import { Resizable } from 'react-resizable';
 import { Box } from '@mui/material';
+// cspell:disable-next-line
 import PDFObject from 'pdfobject';
 
 import B3Spin from '@/components/spin/B3Spin';
@@ -9,7 +10,6 @@ import { snackbar } from '@/utils';
 import { handlePrintPDF } from '../utils/pdf';
 
 interface RowList {
-  [key: string]: CustomFieldItems | string | number;
   id: string;
   createdAt: number;
   updatedAt: number;

diff --git a/apps/storefront/src/pages/Invoice/index.tsx b/apps/storefront/src/pages/Invoice/index.tsx
@@ -1,12 +1,12 @@
-import { ReactElement, useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useB3Lang } from '@b3/lang';
 import { Box, Button, InputAdornment, TextField, Typography } from '@mui/material';
 import cloneDeep from 'lodash-es/cloneDeep';
 
 import { B2BAutoCompleteCheckbox } from '@/components';
 import B3Spin from '@/components/spin/B3Spin';
-import { B3PaginationTable } from '@/components/table/B3PaginationTable';
+import { B3PaginationTable, GetRequestList } from '@/components/table/B3PaginationTable';
 import { TableColumnItem } from '@/components/table/B3Table';
 import { permissionLevels } from '@/constants';
 import { useMobile, useSort } from '@/hooks';
@@ -132,7 +132,7 @@ function Invoice() {
   const [selectedPay, setSelectedPay] = useState<CustomFieldItems | InvoiceListNode[]>([]);
   const [list, setList] = useState<InvoiceListNode[]>([]);
 
-  const [filterData, setFilterData] = useState<Partial<FilterSearchProps> | null>();
+  const [filterData, setFilterData] = useState<Partial<FilterSearchProps>>({});
 
   const [exportCsvText, setExportCsvText] = useState<string>(b3Lang('invoice.exportCsvText'));
 
@@ -478,7 +478,7 @@ function Invoice() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [checkedArr]);
 
-  const fetchList = async (params: Partial<FilterSearchProps>) => {
+  const fetchList: GetRequestList<Partial<FilterSearchProps>, InvoiceListNode> = async (params) => {
     const {
       invoices: { edges, totalCount },
     } = await getInvoiceList(params);
@@ -959,11 +959,7 @@ function Invoice() {
           isSelectOtherPageCheckbox
           hover
           isAutoRefresh={false}
-          renderItem={(
-            row: InvoiceList,
-            index?: number,
-            checkBox?: (disable?: boolean) => ReactElement,
-          ) => (
+          renderItem={(row, index, checkBox) => (
             <InvoiceItemCard
               item={row}
               checkBox={checkBox}

diff --git a/apps/storefront/src/pages/QuickOrder/components/QuickOrderB2BTable.tsx b/apps/storefront/src/pages/QuickOrder/components/QuickOrderB2BTable.tsx
@@ -1,9 +1,9 @@
-import { Dispatch, ReactElement, SetStateAction, useRef, useState } from 'react';
+import { Dispatch, SetStateAction, useRef, useState } from 'react';
 import { useB3Lang } from '@b3/lang';
 import { Box, styled, TextField, Typography } from '@mui/material';
 
 import B3Spin from '@/components/spin/B3Spin';
-import { B3PaginationTable } from '@/components/table/B3PaginationTable';
+import { B3PaginationTable, GetRequestList } from '@/components/table/B3PaginationTable';
 import { TableColumnItem } from '@/components/table/B3Table';
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants';
 import { useMobile, useSort } from '@/hooks';
@@ -33,10 +33,6 @@ import { CheckedProduct } from '../utils';
 
 import QuickOrderCard from './QuickOrderCard';
 
-interface ListItem {
-  [key: string]: string;
-}
-
 interface ProductInfoProps {
   basePrice: number | string;
   baseSku: string;
@@ -193,7 +189,7 @@ function QuickOrderTable({
     return [];
   };
 
-  const getList = async (params: SearchProps) => {
+  const getList: GetRequestList<SearchProps, ListItemProps> = async (params) => {
     const {
       orderedProducts: { edges, totalCount },
     } = isB2BUser ? await getOrderedProducts(params) : await getBcOrderedProducts(params);
@@ -319,7 +315,7 @@ function QuickOrderTable({
     return qty;
   };
 
-  const columnItems: TableColumnItem<ListItem>[] = [
+  const columnItems: TableColumnItem<ProductInfoProps>[] = [
     {
       key: 'product',
       title: b3Lang('purchasedProducts.product'),
@@ -563,7 +559,7 @@ function QuickOrderTable({
           sortDirection={order}
           orderBy={orderBy}
           sortByFn={handleSetOrderBy}
-          renderItem={(row: ProductInfoProps, _?: number, checkBox?: () => ReactElement) => (
+          renderItem={(row, _, checkBox) => (
             <QuickOrderCard
               item={row}
               checkBox={checkBox}

diff --git a/apps/storefront/src/pages/ShoppingListDetails/components/ShoppingDetailTable.tsx b/apps/storefront/src/pages/ShoppingListDetails/components/ShoppingDetailTable.tsx
@@ -1,7 +1,6 @@
 import {
   Dispatch,
   forwardRef,
-  ReactElement,
   Ref,
   SetStateAction,
   useEffect,
@@ -14,7 +13,7 @@ import { Delete, Edit, StickyNote2 } from '@mui/icons-material';
 import { Box, Grid, styled, TextField, Typography } from '@mui/material';
 import cloneDeep from 'lodash-es/cloneDeep';
 
-import { B3PaginationTable } from '@/components/table/B3PaginationTable';
+import { B3PaginationTable, GetRequestList } from '@/components/table/B3PaginationTable';
 import { TableColumnItem } from '@/components/table/B3Table';
 import { PRODUCT_DEFAULT_IMAGE } from '@/constants';
 import { useMobile, useSort } from '@/hooks';
@@ -67,7 +66,7 @@ interface ShoppingDetailTableProps {
   isRequestLoading: boolean;
   setIsRequestLoading: Dispatch<SetStateAction<boolean>>;
   shoppingListId: number | string;
-  getShoppingListDetails: CustomFieldItems;
+  getShoppingListDetails: GetRequestList<SearchProps, CustomFieldItems>;
   setCheckedArr: (values: CustomFieldItems) => void;
   isReadForApprove: boolean;
   isJuniorApprove: boolean;
@@ -81,7 +80,7 @@ interface ShoppingDetailTableProps {
 }
 
 interface SearchProps {
-  search: string;
+  search?: string;
   first?: number;
   offset?: number;
   orderBy: string;
@@ -179,7 +178,7 @@ function ShoppingDetailTable(props: ShoppingDetailTableProps, ref: Ref<unknown>)
   const [chooseOptionsOpen, setSelectedOptionsOpen] = useState(false);
   const [optionsProduct, setOptionsProduct] = useState<any>(null);
   const [editProductItemId, setEditProductItemId] = useState<number | string | null>(null);
-  const [search, setSearch] = useState<SearchProps | {}>({
+  const [search, setSearch] = useState<SearchProps>({
     orderBy: `-${sortKeys[defaultSortKey]}`,
   });
   const [qtyNotChangeFlag, setQtyNotChangeFlag] = useState<boolean>(true);
@@ -763,7 +762,7 @@ function ShoppingDetailTable(props: ShoppingDetailTableProps, ref: Ref<unknown>)
         orderBy={orderBy}
         sortByFn={handleSetOrderBy}
         pageType="shoppingListDetailsTable"
-        renderItem={(row: ProductInfoProps, index?: number, checkBox?: () => ReactElement) => (
+        renderItem={(row, index, checkBox) => (
           <ShoppingDetailCard
             len={shoppingListInfo?.products?.edges.length || 0}
             item={row}

diff --git a/apps/storefront/src/pages/ShoppingListDetails/index.tsx b/apps/storefront/src/pages/ShoppingListDetails/index.tsx
@@ -4,6 +4,7 @@ import { useB3Lang } from '@b3/lang';
 import { Box, Grid, useTheme } from '@mui/material';
 
 import B3Spin from '@/components/spin/B3Spin';
+import { GetRequestList } from '@/components/table/B3PaginationTable';
 import { useMobile } from '@/hooks';
 import { GlobalContext } from '@/shared/global';
 import {
@@ -266,7 +267,7 @@ function ShoppingListDetails({ setOpenPage }: PageProps) {
     return [];
   };
 
-  const getShoppingListDetails = async (params: SearchProps) => {
+  const getShoppingListDetails: GetRequestList<SearchProps, ListItemProps> = async (params) => {
     const shoppingListDetailInfo = await getShoppingList(params);
 
     const {

diff --git a/apps/storefront/src/pages/ShoppingLists/index.tsx b/apps/storefront/src/pages/ShoppingLists/index.tsx
@@ -5,7 +5,7 @@ import { Box } from '@mui/material';
 import B3Dialog from '@/components/B3Dialog';
 import B3Filter from '@/components/filter/B3Filter';
 import B3Spin from '@/components/spin/B3Spin';
-import { B3PaginationTable } from '@/components/table/B3PaginationTable';
+import { B3PaginationTable, GetRequestList } from '@/components/table/B3PaginationTable';
 import { useCardListColumn, useMobile, useTableRef } from '@/hooks';
 import { GlobalContext } from '@/shared/global';
 import {
@@ -165,7 +165,7 @@ function ShoppingLists() {
     setFilterSearch(search);
   };
 
-  const fetchList = async (params: ShoppingListSearch) => {
+  const fetchList: GetRequestList<ShoppingListSearch, ShoppingListsItemsProps> = async (params) => {
     const { edges, totalCount } = isB2BUser
       ? await getB2BShoppingList(params)
       : await getBcShoppingList({
@@ -248,7 +248,7 @@ function ShoppingLists() {
           isCustomRender
           itemXs={isExtraLarge ? 3 : 4}
           requestLoading={setIsRequestLoading}
-          renderItem={(row: ShoppingListsItemsProps) => (
+          renderItem={(row) => (
             <ShoppingListsCard
               key={row.id || ''}
               item={row}