Formulating a plan
Before we jump into the code for the App
component, let’s do a little up-front design so that we know what we’re building.
The following diagram shows all the components you’ve built and how App
will connect them:
Figure 8.1 – The component hierarchy
Here’s how it’ll work:
- When the user first loads the app, they will see a list of today’s appointments using the
AppointmentsDayView
component, which will have its appointment data populated by its containerAppointmentsDayViewLoader
component. - At the top of the screen, the user will see a button labeled Add customer and appointment. Clicking that button makes
AppointmentsDayView
disappear andCustomerForm
appear. - When the form is filled out and the submit button is clicked, the user is shown
AppointmentForm
and can add a new appointment for that customer. - Once they’ve added the appointment, they’ll be taken...