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;
|
---|