import axios from "axios";
import React, { useContext, useEffect, useReducer } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import LoadingBox from "../components/LoadingBox";
import MessageBox from "../components/MessageBox";
import { Store } from "../Store";
import { getError } from "../components/utils";
import { Helmet } from "react-helmet-async";
import Row from "react-bootstrap/Row";
import Card from "react-bootstrap/Card";
import Col from "react-bootstrap/Col";
import ListGroup from "react-bootstrap/ListGroup";
function reducer(state, action) {
switch (action.type) {
case "FETCH_REQUEST":
return { ...state, loading: true, error: "" };
case "FETCH_SUCCESS":
return { ...state, loading: false, order: action.payload, error: "" };
case "FETCH_FAIL":
return { ...state, loading: false, error: action.payload };
default:
return state;
}
}
export default function OrderScreen() {
const { state } = useContext(Store);
const { userInfo } = state;
const params = useParams();
const { id: orderId } = params;
const navigate = useNavigate();
const [{ loading, error, order }, dispatch] = useReducer(reducer, {
loading: true,
order: {},
error: "",
});
useEffect(() => {
const fetchOrder = async () => {
try {
dispatch({ type: "FETCH_REQUEST" });
const { data } = await axios.get(`/api/orders/${orderId}`, {
headers: { authorization: `Bearer ${userInfo.token}` },
});
dispatch({ type: "FETCH_SUCCESS", payload: data });
} catch (err) {
dispatch({ type: "FETCH_FAIL", payload: getError(err) });
}
};
if (!userInfo) {
return navigate("/login");
}
if (!order._id || (order._id && order._id !== orderId)) {
fetchOrder();
}
}, [order, userInfo, orderId, navigate]);
return loading ? (