71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { ProductCards } from "./components";
|
|
import React, { useEffect, useMemo, useState } from "react";
|
|
import type { Product, ProductLine } from "../../types";
|
|
import Order from "./components/order/Order";
|
|
import styles from "./Catalog.module.css";
|
|
|
|
|
|
const Catalog = () => {
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [productLines, setProductLines] = useState<ProductLine[] | []>([]);
|
|
const [filterText, setFilterText] = useState<string>("");
|
|
|
|
useEffect(() => {
|
|
async function fetchProducts() {
|
|
try{
|
|
const response = await fetch("http://localhost:8010/api/v1/products");
|
|
const data = await response.json();
|
|
setProducts(data);
|
|
}catch(error){
|
|
console.error(`Este es el error: ${error}`);
|
|
};
|
|
};
|
|
fetchProducts();
|
|
}, []);
|
|
|
|
function addProductLine(product: Product, quantity: number): void{
|
|
const newProductLine: ProductLine = {
|
|
id: Date.now(),
|
|
product: product,
|
|
quantity: quantity,
|
|
unitPrice: product.price,
|
|
totalAmount: quantity * product.price,
|
|
};
|
|
|
|
setProductLines([...productLines, newProductLine]);
|
|
}
|
|
|
|
const filteredProducts = useMemo(() =>
|
|
filterText.trim()
|
|
? products.filter(p =>
|
|
p.name.toLowerCase().includes(filterText.toLowerCase())
|
|
)
|
|
: products,
|
|
[products, filterText]
|
|
);
|
|
|
|
return (
|
|
<div className={styles.layout}>
|
|
<section className={styles.catalog}>
|
|
<section>
|
|
<form onSubmit={e => e.preventDefault()}>
|
|
<input
|
|
type="text"
|
|
value={filterText}
|
|
placeholder="Buscar"
|
|
onChange={
|
|
(event) => setFilterText(event.target.value)}/>
|
|
<button type="submit">Buscar</button>
|
|
</form>
|
|
</section>
|
|
<ProductCards products={filteredProducts} addProductLine={addProductLine}/>
|
|
</section>
|
|
<aside className={styles.order}>
|
|
<Order productLines={productLines}/>
|
|
</aside>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Catalog;
|