Patterns
Edit course identity and presentation
Keep title, description, thumbnail and status understandable before a learner reaches the course.
On this page
Workflow
| Step | Responsibility |
|---|---|
| 1 | Hydrate the real owner course through useCourseEditor. |
| 2 | Use persistent labels and source fields for title and metadata. |
| 3 | Choose the actual status and presentation flags. |
| 4 | Commit through the route’s save callback. |
| 5 | Verify the updated course identity in its destination after genuine success. |
Decisions and composition
- Status availability is a product/data rule, not just a visual badge.
- Cover images are landscape; let the image wrapper manage crop.
- A demo fixture should preserve title, description and actual status.
Errors, recovery and limits
- Invalid or missing fields need associated errors.
- Do not claim a successful cover upload or backend save from a capture.
- Course titles can be long; check phone input visibility and visible course summaries.
Source references
| File | Responsibility |
|---|---|
| src/hooks/useCourseEditor.ts | Hydration |
| src/components/forms/FormField.tsx | Inputs |
| src/components/ToggleField.tsx | Flags |
| src/components/SaveButton.tsx | Commit |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1