SockInventory: Fix bug that inventory update is not immediately visible

[Laoujin]

File: SockInventory.tsx

When clicking the "Add to cart" button on a Sock detail page, nothing seems to be happening. We need to go back to the prev screen and return before a rerender happens.

This is because the sock prop is mutated.

<button onClick={() => sock.inventory--}>
       Add to cart
</button>

Fix the bug by using state properly.

Create a PR per task

• Implement either with
  • A component class and state
  • Hooks
• Add a button to remove from the Cart