Untitled

import React from 'react';
import ProductCategoryRow from './ProductCategoryRow';
import ProductRow from './ProductRow';

function ProductTable({ products, filterText, inStockOnly }) {
  const filteredProducts = products.filter(el => (
    el.name.toLowerCase().includes(filterText.toLowerCase()) &&
    (!inStockOnly || (inStockOnly && el.stocked))
  ));

  const rows = filteredProducts.reduce((acc, product) => {
    const isNewCategory = product.category !== acc.lastCategory;

    acc.output.push(isNewCategory ? <ProductCategoryRow key={product.category} category={product.category} /> : null);
    acc.output.push(<ProductRow key={product.name} product={product} />);
    acc.lastCategory = product.category;

    return acc;
  }, { lastCategory: null, output: [] }).output;

  return (
    <table className="product-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {rows}
      </tbody>
    </table>
  );
}

export default ProductTable;