CS478 – Homework 3 Reflection

Node

The re-use of my add book handler for editing was fairly simple since the validation rules were the same. I used the same schema and parsing, but changed the SQL from an INSERT to an UPDATE and added a check to see if the book existed.

The tests for the edit and delete were pretty smooth since they were similar to the tests for HW1. The only thing I had to be careful about was checking the HTTP response as well as the database state to verify that the update or deletion had taken place.

React

I implemented editing by adding an Edit button to each row that takes the user to an edit page with a pre-filled form. I implemented deletion by adding a Delete button with a confirmation dialog to prevent unintended destructive operations, which is a typical UX pattern.

The hardest part was managing state changes after editing or deleting an item so that the table would reflect changes to the database. I had to be mindful of the loading state when retrieving a book to edit.

Material UI

The Material UI API was easy to work with once I got the hang of the components that Material UI offers. It also provided a clean look for the app with little effort. I enjoyed the fact that the UI components that Material UI offers, such as tables, dialogs, and form controls, were already available and well-structured.

Refactoring the app to Material UI was not too hard. However, it did take some time to replace the HTML elements with Material UI elements and arrange the layout using the props that Material UI offers. After the initial refactoring, making the UI look consistent was not hard compared to doing it with custom CSS.