Notes

// import React, { useState, useEffect } from "react";
// import axios from "axios";
// import Card from "@material-ui/core/Card";
// import CardContent from "@material-ui/core/CardContent";
// import Typography from "@material-ui/core/Typography";
// import { CardMedia } from "@material-ui/core";
// import AddShoppingCartSharpIcon from "@mui/icons-material/AddShoppingCartSharp";
// import Button from "@mui/material/Button";
// import TextField from '@mui/material/TextField';
// import { DnsTwoTone } from "@mui/icons-material";
// import { itemsArray } from "./constant";
// import CartDrawer from "./addtocartdata";

// const AllProductList = (props) => {
// const [productList, setProductList] = useState([]);
// const [laptopList, setLaptopList] = useState([]);
// const [Additems, setAdditems] = useState([]);

// useEffect(() => {
// axios
// .get("http://localhost:5500/ProductList")
// .then((response) => setProductList(response.data));
// }, []);
// console.log(productList);

// const search = (value) => {
// const url = (value) ? ("http://localhost:5500/ProductList/" +value) : "http://localhost:5500/ProductList";
// axios.get(url)
// .then(res => {
// // let arr = [];
// // arr.push(res.data);
// setProductList(res.data)
// // console.log(arr)
// })
// }
// const Addcart = (laptop) => {
// props.onAddtocart(laptop);
// itemsArray.push(laptop)
// setAdditems([...Additems, laptop]);
// console.log("lapidata",laptop)
// };
// return (
// <div className="laptopmaincls">
// <TextField id="searchId" label="Search by product title " type="search" onChange={(e)=>search(e.target.value)} />
// {/* <ToggleButton value="list" aria-label="list" sx={{ border: "0" }}>
// <Badge badgeContent={cartData.length} color="primary">
// <ShoppingCartOutlinedIcon onClick={LaptopmodalOpen}/>
// </Badge>
// </ToggleButton> */}
// {productList.map((data) => (
// <Card className="laptops">
// <div className="watchCont">
// <div>
// <CardContent className="laptoplist">
// <CardMedia sx={{ height: 140, width: "" }} image={data.Img} title="green iguana" />
// <img style={{ width: "250px", height: "100px", display: "flex", alignItems: "center" }} src={data.Img} />

// <Typography variant="headline" component="h2" style={{ marginTop: "10px" }}>
// Category: {data.title}
// </Typography>
// <Typography variant="headline" component="h2">
// ProductName: {data.Brand}
// </Typography>
// <Typography variant="headline" component="h2" style={{ marginTop: "10px" }}>
// Product Id: {data.Id}
// </Typography>
// <Typography variant="headline" component="h2" style={{ marginTop: "10px" }}>
// Price: ${data.Price}
// </Typography>

// </CardContent>
// </div>
// <div style={{ display: "contents" }}>
// <Button
// variant="contained"
// startIcon={<AddShoppingCartSharpIcon />}
// component="h2"
// onClick={() => {
// Addcart(data);
// }}
// >
// Add To Cart
// </Button>
// </div>
// </div>
// </Card>
// ))}
// <CartDrawer
// cartItems={cartItems}
// cartTotal={cartTotal}
// isOpen={isCartOpen}
// handleClose={() => setCartOpen(false)}
// handleRemoveCartItem={handleRemoveCartItem}
// />
// </div>

// );
// };
// export default AllProductList;

import React, { useState, useEffect } from "react";
import axios from "axios";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import { CardMedia } from "@material-ui/core";
import AddShoppingCartSharpIcon from "@mui/icons-material/AddShoppingCartSharp";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import { itemsArray } from "./constant";
import Cart from "./cart";
import { Home, ShoppingCart } from "@mui/icons-material";
import CartDrawer from "./addtocartdata";
import ToggleButton from "@mui/material/ToggleButton";
import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
import Badge from "@mui/material/Badge";
import { Grid } from "@mui/material";
import { Box } from "@mui/material";
import {Stack} from "@mui/material";
const AllProductList = () => {
const [productList, setProductList] = useState([]);
// const [cartItems, setCartItems] = useState([]);

const [products, setProducts] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
const [cartItems, setCartItems] = useState([]);
const [isCartOpen, setCartOpen] = useState(false);
const [cartTotal, setCartTotal] = useState(0);

useEffect(() => {
axios
.get("http://localhost:5500/ProductList")
.then((response) => setProductList(response.data));
}, []);

const search = (value) => {
const url = value
? "http://localhost:5500/ProductList/" + value
: "http://localhost:5500/ProductList";
axios.get(url).then((res) => {
setProductList(res.data);
});
};

const addToCart = (product) => {
const existingItemIndex = cartItems.findIndex(
(item) => item.Id === product.Id
);
if (existingItemIndex >= 0) {
const updatedItems = [...cartItems];
updatedItems[existingItemIndex].quantity += 1;
setCartItems(updatedItems);
} else {
setCartItems([...cartItems, { ...product, quantity: 1 }]);
}
};
const handleAddToCart = (product) => {
const existingCartItem = cartItems.find((item) => item.id === product.id);
if (existingCartItem) {
setCartItems((prevItems) =>
prevItems.map((item) =>
item.id === product.id
? { ...item, quantity: item.quantity + 1 }
: item
)
);
} else {
setCartItems((prevItems) => [...prevItems, { ...product, quantity: 1 }]);
}
};
useEffect(() => {
const total = cartItems.reduce(
(total, item) => total + item.Price * item.quantity,
0
);
setCartTotal(total);
}, [cartItems]);
const handleRemoveCartItem = (id) => {
const updatedCartItems = cartItems.filter((item) => item.id !== id);
const updatedCartTotal = updatedCartItems.reduce(
(acc, item) => acc + item.Price * item.quantity,
0
);
setCartItems(updatedCartItems);
setCartTotal(updatedCartTotal);
};
return (
<div>
{/* <button className="cartBadge" onClick={() => setCartOpen(true)}>
<div className="badge badgeStyle">{cartItems.length}</div>
<ShoppingCart />
</button> */}

<Stack justifyContent="space-between" alignItems="center" direction="row" spacing={2} margin={1}>
<Grid xs={11} container>

<TextField
// id="searchId"
label="Search by product title "
size="small"
type="search"
onChange={(e) => search(e.target.value)}
fullWidth
/>
</Grid >
<Grid xs={1} sx={{marginLeft:"10px"}}>
<ToggleButton value="list" aria-label="list" sx={{ border: "0" }}>
<Badge badgeContent={cartItems.length} color="primary">
<ShoppingCartOutlinedIcon onClick={() => setCartOpen(true)} />
</Badge>
</ToggleButton>
</Grid>

</Stack>


<div>
{/* {productList.map((product) => (
<Card key={product.Id}>
<div className="product-card">
<CardContent>
<CardMedia
sx={{ height: 140, width: "" }}
image={product.Img}
title="Product image"
/>
<Typography variant="h6">{product.Brand}</Typography>
<Typography variant="subtitle1">
Category: {product.title}
</Typography>

<Typography variant="subtitle1">
Price: ${product.Price}
</Typography>
</CardContent>
<Button
variant="contained"
color="primary"
startIcon={<AddShoppingCartSharpIcon />}
onClick={() => addToCart(product)}
>
Add to cart
</Button>
</div>
</Card> */}
<Grid container spacing={2}>
{productList.map((data) => (
<Grid item xs={12} sm={6} md={4} lg={3}>
<Card
sx={{
width: {
xs: "10px",
sm: "90%",
md: "100%",
lg: "100%",
},
}}
>
<Box>
<Grid item xs container direction="column" spacing={2}>
<Grid item xs={12} container>
<CardContent className="laptoplist">
<CardMedia
sx={{
height: 240,

// width: {
// xs: "15%",
// sm: "20%",
// md: "30%",
// lg: "40%",

// },
display: "flex",
justifyContent:"flex-end",
backgroundSize:"cover"
}}
image={data.Img}
title="green iguana"
/>
<img
style={{
width: "200px",
height: "30vh",
// display: "flex",
alignItems: "center",
}}
src={data.Img}
/>

<Typography
variant="headline"
component="h2"
style={{ marginTop: "10px" }}
>
Category: {data.title}
</Typography>
<Typography variant="headline" component="h2">
ProductName: {data.Brand}
</Typography>
<Typography
variant="headline"
component="h2"
style={{ marginTop: "10px" }}
>
Product Id: {data.Id}
</Typography>
<Typography
variant="headline"
component="h2"
style={{ marginTop: "10px" }}
>
Price: ${data.Price}
</Typography>
</CardContent>
</Grid>
</Grid>
</Box>

<div style={{ display: "contents" }}>
<Button
variant="contained"
startIcon={<AddShoppingCartSharpIcon />}
component="h2"
onClick={() => addToCart(data)}
size="small"
fullWidth
>
Add To Cart
</Button>
</div>
</Card>
</Grid>
))}
</Grid>
</div>
<CartDrawer
cartItems={cartItems}
cartTotal={cartTotal}
isOpen={isCartOpen}
handleClose={() => setCartOpen(false)}
handleRemoveCartItem={handleRemoveCartItem}
/>
</div>
);
};

export default AllProductList;