React Derived State: Calculating Total Order Price

This challenge focuses on a fundamental React concept: derived state. You will build a component that calculates and displays the total price of an order based on a list of items, each with a quantity and price. This is a common pattern in e-commerce applications where you need to display calculated values that depend on other pieces of state.

Problem Description

You need to create a React component named OrderSummary that takes an array of OrderItem objects as a prop. Each OrderItem has properties for name, quantity, and price.

Your task is to:

1. Display the list of order items: For each item, show its name, quantity, and individual price.
2. Calculate and display the subtotal for each item: This is quantity * price.
3. Calculate and display the grand total for the entire order: This is the sum of all item subtotals.
4. Handle empty orders: If no items are provided, the component should gracefully display a message indicating an empty order.

Key Requirements:

• The component must be a functional component using TypeScript.
• The OrderSummary component should accept a prop named items which is an array of OrderItem objects.
• The OrderItem type should be defined.
• Calculations for item subtotals and the grand total should be performed within the component's logic.
• The UI should clearly present the item details, item subtotals, and the grand total.

Expected Behavior:

• When items is an empty array, display "Your order is empty."
• When items contains data, display each item's details, its calculated subtotal, and the overall grand total.

Edge Cases:

• Consider what happens if quantity or price are zero for an item.
• Consider potential floating-point precision issues (though for this challenge, standard JavaScript number operations are acceptable).

Examples

Example 1:

interface OrderItem {
  id: string;
  name: string;
  quantity: number;
  price: number;
}

const orderItems: OrderItem[] = [
  { id: '1', name: 'Laptop', quantity: 1, price: 1200.50 },
  { id: '2', name: 'Mouse', quantity: 2, price: 25.00 },
];

Output:

Laptop: 1 x $1200.50 = $1200.50
Mouse: 2 x $25.00 = $50.00
--------------------
Grand Total: $1250.50

Explanation:

• Laptop subtotal: 1 * 1200.50 = 1200.50
• Mouse subtotal: 2 * 25.00 = 50.00
• Grand Total: 1200.50 + 50.00 = 1250.50

Example 2:

const orderItems: OrderItem[] = [];

Output:

Your order is empty.

Explanation:

The input array is empty, so the "Your order is empty." message is displayed.

Example 3:

const orderItems: OrderItem[] = [
  { id: '3', name: 'Keyboard', quantity: 1, price: 75.99 },
  { id: '4', name: 'Monitor', quantity: 0, price: 300.00 },
];

Output:

Keyboard: 1 x $75.99 = $75.99
Monitor: 0 x $300.00 = $0.00
--------------------
Grand Total: $75.99

Explanation:

• Keyboard subtotal: 1 * 75.99 = 75.99
• Monitor subtotal: 0 * 300.00 = 0.00
• Grand Total: 75.99 + 0.00 = 75.99

Constraints

• The items array can contain zero or more OrderItem objects.
• quantity will be a non-negative integer.
• price will be a non-negative floating-point number.
• The component should render efficiently, avoiding unnecessary re-calculations.

Notes

• Think about where in your component's lifecycle it's best to perform these calculations. Should they be done on every render, or can they be optimized?
• Consider using memoization techniques if performance becomes a concern with a very large number of items (though not strictly required for this challenge).
• Focus on clear readability and maintainability of your code.