import React from 'react';
import { useGetProd } from '../api';
import './allProducts.css';

const AllProducts = ( ) => {
    const allProducts = useGetProd();

    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>
                { allProducts.map(product => {
                   return ( 
                       <tr key={product.ID}>
                       <td>[ ]</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;