[b612ab1] | 1 | import React, { useContext } from "react";
|
---|
| 2 | import "../styles/CartScreen.css";
|
---|
| 3 | import { Store } from "../Store";
|
---|
| 4 | import { Helmet } from "react-helmet-async";
|
---|
| 5 | import Row from "react-bootstrap/Row";
|
---|
| 6 | import Col from "react-bootstrap/Col";
|
---|
| 7 | import MessageBox from "../components/MessageBox";
|
---|
| 8 | import ListGroup from "react-bootstrap/ListGroup";
|
---|
| 9 | import Button from "react-bootstrap/Button";
|
---|
| 10 | import { Link, useNavigate } from "react-router-dom";
|
---|
| 11 | import "bootstrap/dist/css/bootstrap.min.css";
|
---|
| 12 | import AddCircleIcon from "@mui/icons-material/AddCircle";
|
---|
| 13 | import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
|
---|
| 14 | import DeleteIcon from "@mui/icons-material/Delete";
|
---|
| 15 | import axios from "axios";
|
---|
| 16 | function CartScreen() {
|
---|
| 17 | const navigate = useNavigate();
|
---|
| 18 | const { state, dispatch: ctxDispatch } = useContext(Store);
|
---|
| 19 | const {
|
---|
| 20 | cart: { cartItems },
|
---|
| 21 | } = state;
|
---|
| 22 |
|
---|
| 23 | const updateCartHandler = async (item, quantity) => {
|
---|
| 24 | const { data } = await axios.get(`/api/products/${item._id}`);
|
---|
| 25 | if (data.countInStock < quantity) {
|
---|
| 26 | window.alert("Sorry. Product is out of stock");
|
---|
| 27 | return;
|
---|
| 28 | }
|
---|
| 29 | ctxDispatch({
|
---|
| 30 | type: "CART_ADD_ITEM",
|
---|
| 31 | payload: { ...item, quantity },
|
---|
| 32 | });
|
---|
| 33 | };
|
---|
| 34 |
|
---|
| 35 | const removeItemHandler = (item) => {
|
---|
| 36 | ctxDispatch({ type: "CART_REMOVE_ITEM", payload: item });
|
---|
| 37 | };
|
---|
| 38 |
|
---|
| 39 | const checkoutHandler = () => {
|
---|
| 40 | navigate("/signin?redirect=/shipping");
|
---|
| 41 | };
|
---|
| 42 |
|
---|
| 43 | return (
|
---|
| 44 | <div className="d-flex flex-column pageContainer">
|
---|
| 45 | <Helmet>
|
---|
| 46 | <title>Кошничка</title>
|
---|
| 47 | </Helmet>
|
---|
| 48 | <main>
|
---|
| 49 | <h2>Кошничка</h2>
|
---|
| 50 | <Row className="productRow">
|
---|
| 51 | <Col>
|
---|
| 52 | {cartItems.length === 0 ? (
|
---|
| 53 | <MessageBox>Кошничката е празна</MessageBox>
|
---|
| 54 | ) : (
|
---|
| 55 | <ListGroup>
|
---|
| 56 | {cartItems.map((item) => (
|
---|
| 57 | <ListGroup.Item
|
---|
| 58 | variant="dark"
|
---|
| 59 | key={item._id}
|
---|
| 60 | className="item"
|
---|
| 61 | >
|
---|
| 62 | <div className="itemContainer ">
|
---|
| 63 | <div className="trashImgContainer">
|
---|
| 64 | <div className="trashIconContainer">
|
---|
| 65 | <Button
|
---|
| 66 | variant="dark"
|
---|
| 67 | onClick={() => removeItemHandler(item)}
|
---|
| 68 | >
|
---|
| 69 | <DeleteIcon />
|
---|
| 70 | </Button>
|
---|
| 71 | </div>
|
---|
| 72 | <div>
|
---|
| 73 | <Link className="link" to={`/product/${item.slug}`}>
|
---|
| 74 | <img
|
---|
| 75 | src={item.image}
|
---|
| 76 | alt={item.name}
|
---|
| 77 | className="img-fluid rounded img-thumbnail"
|
---|
| 78 | ></img>
|
---|
| 79 | <p>{item.name}</p>
|
---|
| 80 | </Link>
|
---|
| 81 | </div>
|
---|
| 82 | </div>
|
---|
| 83 | <div className="btnsPriceContainer">
|
---|
| 84 | <div className="">
|
---|
| 85 | <Button
|
---|
| 86 | variant="danger"
|
---|
| 87 | onClick={() =>
|
---|
| 88 | updateCartHandler(item, item.quantity - 1)
|
---|
| 89 | }
|
---|
| 90 | disabled={item.quantity === 1}
|
---|
| 91 | >
|
---|
| 92 | <RemoveCircleIcon />
|
---|
| 93 | </Button>{" "}
|
---|
| 94 | <input
|
---|
| 95 | className="quantityInput"
|
---|
| 96 | readOnly
|
---|
| 97 | value={item.quantity}
|
---|
| 98 | ></input>{" "}
|
---|
| 99 | <Button
|
---|
| 100 | variant="danger"
|
---|
| 101 | className="marginBtn"
|
---|
| 102 | onClick={() =>
|
---|
| 103 | updateCartHandler(item, item.quantity + 1)
|
---|
| 104 | }
|
---|
| 105 | disabled={item.quantity === item.countInStock}
|
---|
| 106 | >
|
---|
| 107 | <AddCircleIcon />
|
---|
| 108 | </Button>
|
---|
| 109 | </div>
|
---|
| 110 | <div>
|
---|
| 111 | <h3>{item.price}ден</h3>
|
---|
| 112 | </div>
|
---|
| 113 | </div>
|
---|
| 114 | </div>
|
---|
| 115 | </ListGroup.Item>
|
---|
| 116 | ))}
|
---|
| 117 | </ListGroup>
|
---|
| 118 | )}
|
---|
| 119 | </Col>
|
---|
| 120 | </Row>
|
---|
| 121 | {cartItems.length === 0 ? (
|
---|
| 122 | <h2></h2>
|
---|
| 123 | ) : (
|
---|
| 124 | <Row className="productRow lastRow">
|
---|
| 125 | <div className="totalPriceContainer">
|
---|
| 126 | <h3>Вкупно:</h3>
|
---|
| 127 | <h3>
|
---|
| 128 | {cartItems.reduce((a, c) => a + c.price * c.quantity, 0)}ден
|
---|
| 129 | </h3>
|
---|
| 130 | </div>
|
---|
| 131 | <div className="checkoutBtnContainer">
|
---|
| 132 | <Button
|
---|
| 133 | variant="danger"
|
---|
| 134 | size="lg"
|
---|
| 135 | onClick={checkoutHandler}
|
---|
| 136 | disabled={cartItems.length === 0}
|
---|
| 137 | >
|
---|
| 138 | НАРАЧАЈТЕ
|
---|
| 139 | </Button>
|
---|
| 140 | </div>
|
---|
| 141 | </Row>
|
---|
| 142 | )}
|
---|
| 143 | </main>
|
---|
| 144 | </div>
|
---|
| 145 | );
|
---|
| 146 | }
|
---|
| 147 |
|
---|
| 148 | export default CartScreen;
|
---|