This React component, `MyOrders`, manages and displays a list of...

July 5, 2025 at 11:09 PM

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { FaArrowLeft, FaClock, FaCheckCircle, FaTruck, FaUtensils } from 'react-icons/fa';
import '../Styles/MyOrders.css';

const MyOrders = () => {
  const navigate = useNavigate();
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      const storedOrders = JSON.parse(localStorage.getItem('orders') || '[]');
      const sortedOrders = storedOrders.sort((a, b) => 
        new Date(b.date) - new Date(a.date)
      );
      setOrders(sortedOrders);
      setLoading(false);
    }, 800);
  }, []);

  const getStatusIcon = (status) => {
    switch(status) {
      case 'Preparing':
        return <FaUtensils className="status-icon preparing" />;
      case 'On the Way':
        return <FaTruck className="status-icon on-the-way" />;
      case 'Delivered':
        return <FaCheckCircle className="status-icon delivered" />;
      default:
        return <FaClock className="status-icon" />;
    }
  };

  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  const getStatusClass = (status) => {
    switch(status) {
      case 'Preparing':
        return 'preparing';
      case 'On the Way':
        return 'on-the-way';
      case 'Delivered':
        return 'delivered';
      default:
        return '';
    }
  };

  return (
    <div className="orders-page">
      <div className="orders-container">
        <button className="back-button" onClick={() => navigate(-1)}>
          <span className="back-icon"><FaArrowLeft /></span>
        </button>

        <h1 className="orders-heading">My Orders</h1>

        {loading ? (
          <div className="loading-container">
            <div className="loading-spinner"></div>
            <p>Loading your orders...</p>
          </div>
        ) : orders.length === 0 ? (
          <div className="no-orders">
            <p>You haven't placed any orders yet.</p>
            <button 
              className="place-order-btn"
              onClick={() => navigate('/placeorder')}
            >
              Place an Order
            </button>
          </div>
        ) : (
          <div className="orders-list">
            {orders.map(order => (
              <div className="order-card" key={order.id}>
                <div className="order-header">
                  <div className="order-id">Order #{order.id}</div>
                  <div className={`order-status ${getStatusClass(order.status)}`}>
                    {getStatusIcon(order.status)}
                    <span className="status-text">{order.status}</span>
                  </div>
                </div>

                <div className="order-date">{formatDate(order.date)}</div>

                <div className="order-summary">
                  <div className="order-items">
                    {order.items.slice(0, 3).map((item, index) => (
                      <div className="order-item" key={index}>
                        <span className="item-name">{item.name}</span>
                        <span className="item-price">Rs. {item.finalPrice}</span>
                      </div>
                    ))}
                    {order.items.length > 3 && (
                      <div className="more-items">
                        +{order.items.length - 3} more items
                      </div>
                    )}
                  </div>

                  <div className="order-total">
                    <span>Total:</span>
                    <span>Rs. {order.total}</span>
                  </div>
                </div>

                <div className="order-details">
                  <div className="detail">
                    <span className="detail-label">Delivery to:</span>
                    <span>{order.address}</span>
                  </div>
                  <div className="detail">
                    <span className="detail-label">Payment:</span>
                    <span>{order.paymentMethod === 'cash' ? 'Cash on Delivery' : 'Card'}</span>
                  </div>
                  {order.specialInstructions && (
                    <div className="detail" style={{ gridColumn: '1 / span 2' }}>
                      <span className="detail-label">Special Instructions:</span>
                      <span>{order.specialInstructions}</span>
                    </div>)}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
      <div className="confirmation-buttons">
        <button 
          className="back-home-btn"
          onClick={() => navigate('/')}
        >
        Home
        </button>
      </div>
    </div>
  );
};

export default MyOrders;

This React component, MyOrders, manages and displays a list of customer orders stored in the browser's localStorage, providing users an interface to view and interact with their order history. Here's a breakdown of what this code does:

Import Dependencies:
- React, and hooks like useEffect and useState, are imported to manage component state and side effects.
- useNavigate is imported from react-router-dom for navigation between pages.
- Icons from react-icons/fa are used for UI elements like navigation and status indicators.
Local State:
- orders: Stores the list of orders retrieved from localStorage (default empty array).
- loading: Tracks whether the data is still loading (default true).
Side Effect (useEffect):
- Fetches order data from localStorage when the component is mounted.
- Simulates a delay (800ms) using setTimeout for loading purposes.
- Sorts the fetched orders based on their date in descending order.
- Updates the orders state with sorted data and sets loading to false.
Helper Functions:
- getStatusIcon(status): Returns an icon corresponding to the order status (e.g., preparing, delivered).
- formatDate(dateString): Formats the order's date into a readable format (e.g., "Oct 10, 2023, 12:45 PM").
- getStatusClass(status): Dynamically assigns CSS classes based on the order's status.
Render Logic:
- If loading is true, a loading spinner and message are displayed.
- If no orders are found in localStorage, a message and button to place an order are shown.
- If orders exist, a list of order cards (order-card) is displayed:
  - Each card includes order details like ID, date, total price, status (with icon), delivery address, payment method, and up to 3 item summaries. Items beyond the first 3 are shown as a summary (e.g., "+2 more items").
  - Special instructions, if provided, are also displayed.
Navigation:
- There are buttons to navigate back (navigate(-1)), forward to a specific path (e.g., /placeorder for placing a new order), or back to the homepage (navigate('/')).
Styling:
- The component references CSS styles from MyOrders.css to manage layout and appearance, supplemented by dynamic class names (status-based) for conditional styling.

Purpose:

This component is effectively a "My Orders" page for a food delivery or e-commerce app:

It fetches and displays past order details saved locally.
It integrates navigation options to other parts of the app (e.g., home, place order).
It uses meaningful icons, formatting, and UI details to enhance the user experience.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr