import { useEffect, useState } from 'react'; import { fetchOrders } from '../../lib/fetchOrders'; import { sampleStatuses } from '../../mocks/orders'; type OrderItem = { customer: string; id: number; item: string; orderDate: string; price: number; quantity: number; status: string; }; type BadOrderListProps = { limit?: number; }; export const BadOrderList = ({ limit = 10 }: BadOrderListProps) => { const [orders, setOrders] = useState([]); const [page, setPage] = useState(0); const [total, setTotal] = useState(0); const [loading, setLoading] = useState(false); const [search, setSearch] = useState({}); useEffect(() => { setLoading(true); fetchOrders({ limit, offset: page * limit, search }).then((res) => { setOrders(res.data); setTotal(res.total); setLoading(false); }); }, [page, search]); const handleSearchChange = (e) => { setSearch({ ...search, [e.target.name]: e.target.value }); }; const nextPage = () => setPage((prev) => prev + 1); const prevPage = () => setPage((prev) => (prev > 0 ? prev - 1 : 0)); return (

Bad example

Search by items

Select an option

{loading ? [...Array(limit)].map((_, rowIndex) => { return ( {[...Array(6)].map((_, columnIndex) => { return ( ); })} ); }) : orders.map((order) => { return ( ); })}

ID	Customer	Item	Order Date	Price	Status

{order.id}	{order.customer}	{order.item}	{order.orderDate}	${order.price}	{order.status}

Showing{' '} {page + 1} {' '} to{' '} {limit} {' '} of{' '} {total} {' '} Entries

); };