Personal Catalogue: React & Firebase — Chapter 8, Exercise 1
=====================================================================

TASK
Add the titleInputRef focus behavior to AddItemForm, then add several
valid books in a row without touching the mouse between submissions,
confirming the cursor is already in the title field each time.

SOLUTION

// AddItemForm.jsx
import { useState, useRef } from 'react';

const titleInputRef = useRef(null);

// inside handleSubmit, after a successful addDoc() and state reset:
setShared({ title: '', releaseYear: '', notes: '' });
setTypeFields({});
titleInputRef.current?.focus();

// on the title input itself:
<input
  ref={titleInputRef}
  value={shared.title}
  onChange={(e) => setShared({ ...shared, title: e.target.value })}
/>

Test sequence (keyboard only, no mouse after the first submission):
1. Type "Clean Code" in the title field, "Robert C. Martin" in author,
   press Enter (or click Submit once with the mouse to start).
2. Immediately start typing the next title — "The Pragmatic
   Programmer" — with no mouse click first.
3. Type the author, submit again with Enter.
4. Repeat for a third book.

Observed: after each successful submission, the cursor is already
sitting in the now-empty title field, confirmed by typing the next
title landing there directly with no visible focus jump or need to
click first. Three books were added in a row using only the keyboard
after the very first click.

WHY THIS WORKS AS AN ANSWER
----------------------------
It adds the exact ref-and-focus-call pattern the chapter describes and
verifies the real, practical outcome — several submissions in a row
with no mouse interaction needed between them — rather than just
confirming the code compiles.