src/routes/products/products.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { useLoaderData } from "react-router-dom";
import ProductListing from "../../components/product_listing";
import SearchBar from "../../components/search_bar";
import MainContentLayout from "../../components/main_content_layout";

export default function Products() {
  const products = useLoaderData().data;
  const productList = products.data.map(product =>
    <li key={product.id}>
      <ProductListing product={product}/>
    </li>
  );

  return(
    <>
      <MainContentLayout>
        <SearchBar path="/products"/>
        <ul>
          {productList}
        </ul>
      </MainContentLayout>
    </>
  );
}