useState tutorials

import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import './MyOrders.css'

function MyOrders({ user }) {
  const navigate = useNavigate()
  const [orders, setOrders] = useState([])

  useEffect(() => {
    if (!user) { navigate('/login'); return }
    const load = async () => {
      const res  = await fetch(`/api/orders/${user.customerID}`)
      const data = await res.json()
      setOrders(data)
    }
    load()
  }, [user])

  if (!user) return <div className="page"><p>Please log in.</p></div>

  return (
    <div className="page">
      <h1>My Orders</h1>
      {orders.length === 0 && <p>No orders yet.</p>}
      {orders.map(order => (
        <div key={order.orderID} className="order-card">
          <p className="order-product">{order.product_name}</p>
          <p>Quantity: {order.product_quantity}</p>
          <p>Date: {new Date(order.order_date).toLocaleDateString()}</p>
        </div>
      ))}
    </div>
  )
}

export default MyOrders

.page { padding: 30px; }
.page h1 { margin-bottom: 20px; }

.order-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  max-width: 500px;
}

.order-product {
  font-weight: 700;
  margin-bottom: 8px;
  color: #144A5C;
}

import './Loyalty.css'

function Loyalty() {
  return (
    <div className="page">
      <h1>Loyalty Scheme</h1>
      <p className="subtitle">Complete 8 purchases and get free delivery!</p>

      <div className="loyalty-section">
        <h2>Your Rewards</h2>
        <div className="reward-card">
          <p>10% off all dairy products</p>
          <button>Activate</button>
        </div>
        <div className="reward-card">
          <p>15% off your next order</p>
          <button>Activate</button>
        </div>
      </div>

      <div className="loyalty-section">
        <h2>Stamp Card</h2>
        <div className="stamps">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="stamp">
              {i === 7 ? 'FREE' : i + 1}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default Loyalty