Day 161 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 161 of my full-stack engineering track! Today, I built the Payment Verification & User Order History Module (MyOrders.jsx) for my food delivery app, Tomato! 💳📦🚀

Handling Stripe payment callbacks and displaying dynamic order histories securely based on user authentication tokens was the primary goal today. Here is how I structured it.

🛠️ Deconstructing the Day 161 Order Management System

As shown in my UI toast popups and VS Code editor (Screenshots 387 & 388):

1. Token-Authenticated Order Fetching

• Built fetchOrder() targeting the endpoint /api/order/userorders.
• Passed the JWT stored in context directly through authorization headers ({ headers: { token } }) so the Express backend can decode the user ID and return only their specific transaction history.

2. Intelligent Item String Formatting

• Handled array parsing for ordered items inside the table view so dishes and quantities are formatted dynamically with proper comma placement:

javascript
  {order.items.map((item, index) => {
    if (index === order.items.length - 1) {
      return item.name + " x " + item.quantity;
    } else {
      return item.name + " x " + item.quantity + ", ";
    }
  })} {order.items.map((item, index) => {
  if (index === order.items.length - 1) {
    return item.name + " x " + item.quantity;
  } else {
    return item.name + " x " + item.quantity + ", ";
  }
})} const fetchOrder = async () => {
  try {
    const response = await axios.post(
      backendURL + "/api/order/userorders",
      {},
      { headers: { token } }
    );
    if (response.data.success) {
      setData(response.data.data);
    }
  } catch (error) { ... }
};