Reusable Components — Refactor

"use client";

import { useReactTable, flexRender, getCoreRowModel } from "@tanstack/react-table";

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

interface DataTableProps<T> {
  data: T[];
  columns: ColumnDef<T>[];
  emptyMessage?: string;
}

export function DataTable<T>({ data, columns, emptyMessage = "ডেটা নেই" }: DataTableProps<T>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  if (data.length === 0) {
    return <EmptyState message={emptyMessage} />;
  }

  return (
    <Table>
      <TableHeader>
        {table.getHeaderGroups().map((headerGroup) => (
          <TableRow key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <TableHead key={header.id}>
                {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
              </TableHead>
            ))}
          </TableRow>
        ))}
      </TableHeader>
      <TableBody>
        {table.getRowModel().rows.map((row) => (
          <TableRow key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <TableCell key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

function createListHook<TItem>(
  key: string,
  fetcher: (params: QueryParams) => Promise<ListResponse<TItem>>,
) {
  return (keys: QueryParams) => {
    const listKey = [key, "list", keys] as const;
    return useQuery({
      queryKey: listKey,
      queryFn: () => fetcher(keys),
      placeholderData: keepPreviousData,
    });
  };
}

export const useProducts = createListHook(
  "products",
  listProducts as Fetcher<Product>,
);

export const useOrders = createListHook(
  "orders",
  listOrders as Fetcher<Order>,
);