Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 2x 2x 5x 5x 5x 15x 15x 6x 9x 1x 8x 5x 8x 8x 5x 2x | import React from "react";
import ProductRow, { Product } from "../ProductRow";
import ProductCategoryRow, { ProductCategoryRowProps } from "../ProductCategoryRow";
export interface Props {
products: Product[];
category?: ProductCategoryRowProps;
filterText: string;
inStockOnly?: boolean;
}
function ProductTable({ products, filterText, inStockOnly }: Props) {
const rows: React.ReactNode[] = [];
let lastCategory: String | null = null;
products.forEach((product: Product, index: number) => {
const { category } = product;
if (product.name.toLowerCase().indexOf(filterText.toLowerCase()) === -1) {
return;
}
if (inStockOnly && !product.stocked) {
return;
}
if (category !== lastCategory) {
rows.push(<ProductCategoryRow category={category} key={`category-${index}`} />);
}
rows.push(<ProductRow product={product} key={`product-${index}`} />);
lastCategory = category;
});
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
export default ProductTable;
|