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