1 | import axios from "axios";
|
---|
2 | import React, { useContext, useEffect, useReducer } from "react";
|
---|
3 | import { Helmet } from "react-helmet-async";
|
---|
4 | import { useNavigate } from "react-router-dom";
|
---|
5 | import LoadingBox from "../components/LoadingBox";
|
---|
6 | import MessageBox from "../components/MessageBox";
|
---|
7 | import { getError } from "../components/utils";
|
---|
8 | import { Store } from "../Store";
|
---|
9 | import Button from "react-bootstrap/Button";
|
---|
10 | import CheckIcon from "@mui/icons-material/Check";
|
---|
11 | import ClearIcon from "@mui/icons-material/Clear";
|
---|
12 | const reducer = (state, action) => {
|
---|
13 | switch (action.type) {
|
---|
14 | case "FETCH_REQUEST":
|
---|
15 | return { ...state, loading: true };
|
---|
16 | case "FETCH_SUCCESS":
|
---|
17 | return { ...state, orders: action.payload, loading: false };
|
---|
18 | case "FETCH_FAIL":
|
---|
19 | return { ...state, loading: false, error: action.payload };
|
---|
20 | default:
|
---|
21 | return state;
|
---|
22 | }
|
---|
23 | };
|
---|
24 |
|
---|
25 | function OrderHistoryScreen() {
|
---|
26 | const { state } = useContext(Store);
|
---|
27 | const { userInfo } = state;
|
---|
28 | const navigate = useNavigate();
|
---|
29 |
|
---|
30 | const [{ loading, error, orders }, dispatch] = useReducer(reducer, {
|
---|
31 | loading: true,
|
---|
32 | error: "",
|
---|
33 | });
|
---|
34 |
|
---|
35 | useEffect(() => {
|
---|
36 | const fetchData = async () => {
|
---|
37 | dispatch({ type: "FETCH_REQUEST" });
|
---|
38 | try {
|
---|
39 | const { data } = await axios.get("/api/orders/mine", {
|
---|
40 | headers: { Authorization: `Bearer ${userInfo.token}` },
|
---|
41 | });
|
---|
42 | dispatch({ type: "FETCH_SUCCESS", payload: data });
|
---|
43 | } catch (error) {
|
---|
44 | dispatch({ type: "FETCH_FAIL", payload: getError(error) });
|
---|
45 | }
|
---|
46 | };
|
---|
47 | fetchData();
|
---|
48 | }, [userInfo]);
|
---|
49 |
|
---|
50 | return (
|
---|
51 | <div className="pageContainer shipPC">
|
---|
52 | <Helmet>
|
---|
53 | <title>Историја на нарачки</title>
|
---|
54 | </Helmet>
|
---|
55 | <h1 style={{ marginTop: "20px" }}>Историја на нарачки</h1>
|
---|
56 | {loading ? (
|
---|
57 | <LoadingBox></LoadingBox>
|
---|
58 | ) : error ? (
|
---|
59 | <MessageBox variant="danger">{error}</MessageBox>
|
---|
60 | ) : (
|
---|
61 | <table
|
---|
62 | className="table"
|
---|
63 | style={{ marginTop: "20px", width: "90%", textAlign: "center" }}
|
---|
64 | >
|
---|
65 | <thead>
|
---|
66 | <tr>
|
---|
67 | <th>ID</th>
|
---|
68 | <th>Дата</th>
|
---|
69 | <th>Вкупно</th>
|
---|
70 | <th>Статус</th>
|
---|
71 | <th>Акции</th>
|
---|
72 | </tr>
|
---|
73 | </thead>
|
---|
74 | <tbody>
|
---|
75 | {orders.map((order) => (
|
---|
76 | <tr key={order._id}>
|
---|
77 | <td>{order._id.substring(0, 7)}</td>
|
---|
78 | <td>{order.createdAt.substring(0, 10)}</td>
|
---|
79 | <td>{order.totalPrice.toFixed(2)}</td>
|
---|
80 |
|
---|
81 | <td>
|
---|
82 | {order.isDelivered ? (
|
---|
83 | <CheckIcon></CheckIcon>
|
---|
84 | ) : (
|
---|
85 | <ClearIcon></ClearIcon>
|
---|
86 | )}
|
---|
87 | </td>
|
---|
88 | <td>
|
---|
89 | <Button
|
---|
90 | type="button"
|
---|
91 | variant="primary"
|
---|
92 | onClick={() => {
|
---|
93 | navigate(`/order/${order._id}`);
|
---|
94 | }}
|
---|
95 | >
|
---|
96 | Детали
|
---|
97 | </Button>
|
---|
98 | </td>
|
---|
99 | </tr>
|
---|
100 | ))}
|
---|
101 | </tbody>
|
---|
102 | </table>
|
---|
103 | )}
|
---|
104 | </div>
|
---|
105 | );
|
---|
106 | }
|
---|
107 |
|
---|
108 | export default OrderHistoryScreen;
|
---|