improvements

Author: kentcdodds

exercises/03.optimistic/01.problem.optimistic/index.tsx

@@ -70,15 +70,21 @@ function CreateForm({
 				>
 					<div>
 						<label htmlFor="shipName">Ship Name</label>
-						<input id="shipName" type="text" name="name" />
+						<input id="shipName" type="text" name="name" required />
 					</div>
 					<div>
 						<label htmlFor="topSpeed">Top Speed</label>
-						<input id="topSpeed" type="number" name="topSpeed" />
+						<input id="topSpeed" type="number" name="topSpeed" required />
 					</div>
 					<div>
 						<label htmlFor="image">Image</label>
-						<input id="image" type="file" name="image" accept="image/*" />
+						<input
+							id="image"
+							type="file"
+							name="image"
+							accept="image/*"
+							required
+						/>
 					</div>
 					<button type="submit">Create</button>
 				</form>

exercises/03.optimistic/01.solution.optimistic/index.tsx

@@ -61,15 +61,21 @@ function CreateForm({
 				>
 					<div>
 						<label htmlFor="shipName">Ship Name</label>
-						<input id="shipName" type="text" name="name" />
+						<input id="shipName" type="text" name="name" required />
 					</div>
 					<div>
 						<label htmlFor="topSpeed">Top Speed</label>
-						<input id="topSpeed" type="number" name="topSpeed" />
+						<input id="topSpeed" type="number" name="topSpeed" required />
 					</div>
 					<div>
 						<label htmlFor="image">Image</label>
-						<input id="image" type="file" name="image" accept="image/*" />
+						<input
+							id="image"
+							type="file"
+							name="image"
+							accept="image/*"
+							required
+						/>
 					</div>
 					<button type="submit">Create</button>
 				</form>

exercises/03.optimistic/02.problem.form-status/index.tsx

@@ -61,15 +61,21 @@ function CreateForm({
 				>
 					<div>
 						<label htmlFor="shipName">Ship Name</label>
-						<input id="shipName" type="text" name="name" />
+						<input id="shipName" type="text" name="name" required />
 					</div>
 					<div>
 						<label htmlFor="topSpeed">Top Speed</label>
-						<input id="topSpeed" type="number" name="topSpeed" />
+						<input id="topSpeed" type="number" name="topSpeed" required />
 					</div>
 					<div>
 						<label htmlFor="image">Image</label>
-						<input id="image" type="file" name="image" accept="image/*" />
+						<input
+							id="image"
+							type="file"
+							name="image"
+							accept="image/*"
+							required
+						/>
 					</div>
 					{/* 🐨 create a CreateButton component and move this into it */}
 					<button type="submit">Create</button>

exercises/03.optimistic/02.solution.form-status/index.tsx

@@ -62,15 +62,21 @@ function CreateForm({
 				>
 					<div>
 						<label htmlFor="shipName">Ship Name</label>
-						<input id="shipName" type="text" name="name" />
+						<input id="shipName" type="text" name="name" required />
 					</div>
 					<div>
 						<label htmlFor="topSpeed">Top Speed</label>
-						<input id="topSpeed" type="number" name="topSpeed" />
+						<input id="topSpeed" type="number" name="topSpeed" required />
 					</div>
 					<div>
 						<label htmlFor="image">Image</label>
-						<input id="image" type="file" name="image" accept="image/*" />
+						<input
+							id="image"
+							type="file"
+							name="image"
+							accept="image/*"
+							required
+						/>
 					</div>
 					<CreateButton />
 				</form>

exercises/03.optimistic/03.problem.message/README.mdx

@@ -5,7 +5,23 @@ actually has one more step: loading the newly created ship.
 
 We want to update the message of our submit button to indicate which step we're
 on in the process. But updating state during a transition (like that in our form
-action) isn't possible. So we need to use `useOptimistic`.
+action) isn't possible. So we need to use `useOptimistic`. Here's an example of
+how you might do this:
+
+```tsx
+<form
+	action={async formData => {
+		setMessage('Creating order...')
+		const order = await createOrder(formData)
+		setMessage('Creating payment...')
+		const payment = await createPayment(formData, order)
+		setMessage('Almost done!')
+		await sendThankYou(order, payment)
+	}}
+>
+	{/* ...*/}
+</form>
+```
 
 So please add a `useOptimistic` for a "message" variable which we'll use to
 update the submit button message. You can initialize it to "Create" and then

exercises/03.optimistic/03.problem.message/index.tsx

@@ -66,15 +66,21 @@ function CreateForm({
 				>
 					<div>
 						<label htmlFor="shipName">Ship Name</label>
-						<input id="shipName" type="text" name="name" />
+						<input id="shipName" type="text" name="name" required />
 					</div>
 					<div>
 						<label htmlFor="topSpeed">Top Speed</label>
-						<input id="topSpeed" type="number" name="topSpeed" />
+						<input id="topSpeed" type="number" name="topSpeed" required />
 					</div>
 					<div>
 						<label htmlFor="image">Image</label>
-						<input id="image" type="file" name="image" accept="image/*" />
+						<input
+							id="image"
+							type="file"
+							name="image"
+							accept="image/*"
+							required
+						/>
 					</div>
 					{/* 🐨 pass the message as children */}
 					<CreateButton />

exercises/03.optimistic/03.solution.message/index.tsx

@@ -66,15 +66,21 @@ function CreateForm({
 				>
 					<div>
 						<label htmlFor="shipName">Ship Name</label>
-						<input id="shipName" type="text" name="name" />
+						<input id="shipName" type="text" name="name" required />
 					</div>
 					<div>
 						<label htmlFor="topSpeed">Top Speed</label>
-						<input id="topSpeed" type="number" name="topSpeed" />
+						<input id="topSpeed" type="number" name="topSpeed" required />
 					</div>
 					<div>
 						<label htmlFor="image">Image</label>
-						<input id="image" type="file" name="image" accept="image/*" />
+						<input
+							id="image"
+							type="file"
+							name="image"
+							accept="image/*"
+							required
+						/>
 					</div>
 					<CreateButton>{message}</CreateButton>
 				</form>