// Home.js
import React from
"react"
;
import {
Component,
Fragment
} from
"react"
import BookItem from
"./BookItem"
import
'./Home.css'
import
'bootstrap/dist/css/bootstrap.css'
;
import {
Card,
CardHeader,
CardTitle,
Button,
CardFooter,
CardBody,
CardText
} from
"reactstrap"
;
import {
Nav,
NavItem,
NavLink
} from
"reactstrap"
;
import { Link } from
"react-router-dom"
;
import Cart from
'./Cart'
;
const Home = ({ items, onHandleAddToCart,
onHandleCheckCartItem, clearCart }) => {
return
(
<Fragment>
<div class=
'navigation_class'
>
<Nav
card
justified
pills
>
<NavItem>
<NavLink href=
'/'
>
Home
</NavLink>
</NavItem>
<NavItem>
<Link to=
'/cart'
>
Cart
</Link>
</NavItem>
<NavItem>
<NavLink
onClick={() => onHandleCheckCartItem}>
Check Cart
</NavLink>
</NavItem>
</Nav>
</div>
<div>
{
//mapping a item in js
items.map((currentItem, index) => {
//alert('loop executed '+index)
return
(
<Fragment>
<Card
className=
"my-2"
style={{
width:
'97%'
,
margin:
'20px'
}}
>
<CardHeader>
{currentItem.getName()}
</CardHeader>
<CardBody>
<CardTitle tag=
"h5"
>
{currentItem.getAuthor()}
</CardTitle>
<CardText>
Price : {currentItem.getPrice()}
</CardText>
<Button
onClick={() => onHandleAddToCart(index)}>
Add to Cart
</Button>
</CardBody>
<CardFooter>
</CardFooter>
</Card>
</Fragment>
)
})}
</div>
</Fragment>
)
}
export
default
Home;