Untitled

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

function ProductTable(props) {
  const {products,filterText,inStockOnly} = props
  // console.log(products)
  const rows = [];
  let lastCategory = null;
  
 

  const myFilter = products.filter(el =>
    (el.name.toLowerCase().includes(filterText.toLowerCase()) &&
      (inStockOnly ? el.stocked : true))
  );
  
  const finalList = myFilter.reduce((a, c) => {
    const isDifferentCategory = c.category !== a.lastCategory;
    a.output.push(
      isDifferentCategory
        ? <ProductCategoryRow key={c.category} category={c.category} />
        : <ProductRow key={c.name} product={c} />
    );
    a.lastCategory = isDifferentCategory ? c.category : a.lastCategory;
    return a;
  }, { lastCategory: null, output: [] });
  
  
  // console.log(finalList)

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

export default ProductTable