Modifiability

// Everything below lives in the @order-history module.

// One order. This unit owns the representation.
type OrderItemProps = { order: Order };

export const OrderItem = ({ order }: OrderItemProps) => (
  <li>
    <span>{order.title}</span>
  </li>
);

// The list of orders. Data comes in from outside.
type OrderListProps = { orders: Order[] };

export const OrderList = ({ orders }: OrderListProps) => (
  <ul>
    {orders.map((order) => (
      <OrderItem key={order.id} order={order} />
    ))}
  </ul>
);

// OrderList used inside a modal
export const OrderHistoryModal = ({ orders }: { orders: Order[] }) => (
  <Modal title="Order history">
    <OrderList orders={orders} />
  </Modal>
);

// The container changes from a modal to a page.
// OrderList moves as-is — not a single line inside it changes.
export const OrderHistoryPage = ({ orders }: { orders: Order[] }) => (
  <PageLayout title="Order history">
    <OrderList orders={orders} />
  </PageLayout>
);

// Only OrderItem — the unit that owns the representation — responds.
export const OrderItem = ({ order }: OrderItemProps) => (
  <li>
    <img src={order.thumbnailUrl} alt="" /> {/* added */}
    <span>{order.title}</span>
  </li>
);
// OrderList and OrderHistoryPage stay untouched.
// Order gains thumbnailUrl, so types and tests follow the change.

  // routes.tsx — remove the usage and the import.
  // With its entry point no longer imported, the @order-history
  // module — OrderList and OrderItem included — can be deleted whole.
- import { OrderHistoryPage } from "@order-history";

  export const routes = (
    <Routes>
      <Route path="/" element={<HomePage />} />
-     <Route path="/orders/history" element={<OrderHistoryPage />} />
    </Routes>
  );

// Two ways to handle "move the modal content to a page"

// ❌ Treated as a revision: the list rendering is rewritten for the page
// (the same view now exists twice, and a later revision such as
// adding a product image must be paid in both places)
export const OrderHistoryPage = ({ orders }: { orders: Order[] }) => (
  <PageLayout title="Order history">
    <ul>
      {orders.map((order) => (
        <li key={order.id}>
          <span>{order.title}</span>
        </li>
      ))}
    </ul>
  </PageLayout>
);

// ✅ Treated as a separation: OrderList moves to the new container as-is
export const OrderHistoryPage = ({ orders }: { orders: Order[] }) => (
  <PageLayout title="Order history">
    <OrderList orders={orders} />
  </PageLayout>
);

// greeting.ts
type GreetingArgs = { name: string };
export const greeting = ({ name }: GreetingArgs) =>
  `Nice to meet you, ${name}!`;

// message.ts

// ❌ Re-declares the same shape by hand
// (when greeting's definition changes, this type silently keeps the old shape)
type MessageArgs = { name: string } & { agent: Agent };

// ✅ Derives the input type from greeting
// (a change to greeting's definition propagates to this type
// and its callers as type errors)
type MessageArgs = Parameters<typeof greeting>[0] & { agent: Agent };

export const message = ({ name, agent }: MessageArgs) =>
  `Hello, I am ${agent.name}. ${greeting({ name })}`;