{"size": 2394, "ext": "js", "max_stars_repo_path": "mini-amazon/src/components/seller/InventoryTable.js", "max_stars_repo_name": "lorneez/mini-amazon", "max_stars_repo_stars_event_min_datetime": "2021-10-21T02:30:38.000Z", "max_stars_repo_stars_event_max_datetime": "2021-10-21T22:17:15.000Z", "max_issues_repo_path": "mini-amazon/src/components/seller/InventoryTable.js", "max_issues_repo_name": "lorneez/mini-amazon", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "mini-amazon/src/components/seller/InventoryTable.js", "max_forks_repo_name": "lorneez/mini-amazon", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.5172413793, "max_line_length": 96, "alphanum_fraction": 0.4314954052}
import React, {useState} from "react";
import InventoryItem from "./InventoryItem";

function InventoryTable(props) {

    const [page, setPage] = useState(1)
    const itemsPerPage = 6;

    function renderPage() {
        const start = (page - 1) * itemsPerPage
        const end = Math.min(props.items.length, page * itemsPerPage)
        const slicedItems = props.items.slice(start, end);
        console.log(slicedItems)
        return (
            <div>
                {slicedItems.map((item)=>(
                    <InventoryItem item={item}/>
                ))}
            </div>
        )
    }

    function handlePrev() {
        if(page > 1) {
            setPage(page - 1)
        }
    }

    function handleNext() {
        if(page < (props.items.length)/itemsPerPage + 1) {
            setPage(page + 1)
        }
    }

    function renderButtons() {
        if(page > 1 && page < (props.items.length)/itemsPerPage + 1) {
            return (
                <div>
                    <button className="button m-2" onClick={() => handlePrev()}>Prev</button>
                    <button className="button m-2" onClick={() => handleNext()}>Next</button>
                </div>
            )
        }
        if(page === 1) {
            return (
                <div>
                    <button className="button m-2" onClick={() => handleNext()}>Next</button>
                </div>
            )
        }
        else {
            return (
                <div>
                    <button className="button m-2" onClick={() => handlePrev()}>Prev</button>
                </div>
            )
        }
    }

    return (
        <div className={"table"}>
            <div className={"columns m-2"} style={{background: "#F2AA56", borderRadius: "5px"}}>
                <div className={"column"}>
                    Product Details
                </div>
                <div className={"column"}>
                    Available
                </div>
                <div className={"column"}>
                    Price
                </div>
                <div className={"column"}>
                    Date Created
                </div>
                <div className={"column"}>
                    Status
                </div>
            </div>
            {renderPage()}
            {renderButtons()}
        </div>
    )
}

export default InventoryTable;

