import React, { useMemo } from 'react'; import { Button, Table, Tag } from 'antd'; import { useAppDispatch, useAppSelector } from '../hooks/redux'; import { Product } from '../types'; import { deleteProduct } from '../store/productSlice'; const categoryColors: Record<string, string> = { Electronics: 'blue', Accessories: 'green', Tools: 'orange', }; export const ProductList: React.FC = () => { const allProducts = useAppSelector((state) => state.products.items); const products = useMemo(() => [...allProducts], [allProducts]); const dispatch = useAppDispatch(); const handleDelete = (id: string) => { dispatch(deleteProduct(id)); }; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Sales', dataIndex: 'sales', key: 'sales', sorter: (a: Product, b: Product) => a.sales - b.sales, render: (v: number) => v.toLocaleString(), }, { title: 'Category', dataIndex: 'category', key: 'category', render: (category: string) => ( <Tag color={categoryColors[category]}>{category}</Tag> ), }, { title: 'Action', key: 'action', render: (_: any, record: Product) => ( <Button danger onClick={() => handleDelete(record.id)}> Delete </Button> ), }, ]; return <Table dataSource={products} columns={columns} rowKey="id" />; };