Middle

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" />; };

sobes.tech AI

Answer from AI

This React component ProductList implements a list of products with sorting and deletion capabilities.

Main points:

Uses useAppSelector to get the list of products from the Redux store.
useMemo is used to memoize a copy of the products array to avoid unnecessary re-renders.
Table columns are defined with the columns array, where:
- Name and Category display the product's name and category.
- Sales are sorted numerically and formatted with separators.
- Category is displayed with a colored tag, the color depends on the category.
- The Action column contains a delete button that calls handleDelete and dispatches a delete action from Redux.

Using useMemo here is justified if the product list updates frequently, to avoid creating a new array unnecessarily.

The code is well-structured and utilizes Ant Design library features for convenient table display with interactive elements.