I’m planning to do an appointment manager. Therefore I have the following basic architecture which I’d like you to evaluate:
BasicConceptUML
I am still learning React. My goal is to have clean code. I want to share my thoughts so I can learn from your experiences!
Requirements
- User can select days of interests
- Fetch appointment data for days of interests from DB
- Manipulate appointment data
Fetching Data:
There are two locations where I could fetch the data:
1. Inside Table 2. Inside Colum
I decided to fetch the data in the Table to prevent to many requests to the DB.
I therefore use an Effect Hook to make the fetch call.
In detail there will actually be a week selector in the Tabel Component to choose the week of interests. So even if the Data Fetch will be event driven I think making the call inside an Effect Hook is best practice because I don’t want to fetch the data on every render. And it should fetch some data when component mounts the first time. Right?
Manipulating the Appointments:
There will be a Column Component for every day with its respective Appointments.
It recieves the Appointments from Table.
The user should be able to change the data of the Appointments. For example changing the date.
To prevent side effects a Component needs to be pure. So I think I have to declare the changeAppointmentDateFunction inside Table and not inside Column. This should also solve the problem of showing the Appointment in the new Column because I will be changing the State AppointmentsForThisDays. Right?
So this are my basic ideas how to implement my appointment manager. Would you do it similary or do I totaly drift away from best practice next js programming?