94 lines
2.9 KiB
JavaScript
94 lines
2.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useGetProd } from '../api';
|
|
import './allProducts.css';
|
|
|
|
const AllProducts = ({ setCart }) => {
|
|
const allProducts = useGetProd();
|
|
const [productState, setProductState] = useState([]);
|
|
|
|
// adds "selected" property to each product for checkbox functionality
|
|
useEffect(() => {
|
|
if (allProducts) {
|
|
setProductState(allProducts.map(p => ({
|
|
selected: false,
|
|
...p
|
|
})));
|
|
}
|
|
}, [allProducts])
|
|
|
|
// when checkbox is changed, the corresponding product "selected" value is inversed
|
|
// cart state is filled with products that have TRUE "selected" value
|
|
const onChange = (event) => {
|
|
const {id} = event.target;
|
|
setProductState(productState.map(p => {
|
|
if (p.ID === id) {
|
|
p.selected = !p.selected;
|
|
}
|
|
return p;
|
|
}));
|
|
setCart(productState.filter((p) => {
|
|
return (p.selected === true);
|
|
}));
|
|
}
|
|
|
|
let ProductList = () => {
|
|
if (allProducts) {
|
|
return (
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>ID</th>
|
|
<th>Model #</th>
|
|
<th>Description</th>
|
|
<th>Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{productState.map(product => {
|
|
return (
|
|
<tr key={product.ID}>
|
|
<td>
|
|
<input
|
|
type="checkbox"
|
|
id={product.ID}
|
|
onChange={onChange}
|
|
checked={product.selected}
|
|
/>
|
|
</td>
|
|
<td>{product.ID}</td>
|
|
<td>{product.productName}</td>
|
|
<td>{product.productDesc}</td>
|
|
<td>${product.price}</td>
|
|
</tr>
|
|
);
|
|
})
|
|
|
|
}
|
|
</tbody>
|
|
<tfoot></tfoot>
|
|
</table>
|
|
);
|
|
} else {
|
|
return (
|
|
<>
|
|
<p> Loading... </p>
|
|
</>
|
|
)
|
|
}
|
|
|
|
};
|
|
|
|
return (
|
|
<div className="container">
|
|
<hr />
|
|
<span className="danger">Fetch product list from https://api.oemautomation.com:3001 </span>
|
|
<hr />
|
|
<ProductList />
|
|
<hr />
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AllProducts; |