Homework 3 Reflection

Node

  1. It was pretty easy to reuse my book request handler from homework 2 since the PUT endpoint was similar to the POST endpoint. I added some validation helper functions to make sure the book and author IDs existed before adding a new book and to help prevent a lot of duplicate code.
  2. For adding the tests for editing and deleteting endpoints, I mostly copied the structure of the tests for the POST endpoint. I had to make sure to set up the initial data correctly so that the book to be edited or deleted existed before running those tests. It made me think about edge cases like trying to edit or delete a book that doesn't exist.

React

  1. For editing, I opened a dialog pre-filled with the book's current data and let the user modify the fields. For deletion, I used a confirmation dialog to prevent accidental removal. I chose dialogs because they clearly separate the edit/delete actions from the main list and make it easy for users to focus on the task without navigating away from the table. I also added an author's table so that the workflow of adding a author, then a book for that author was more intuitive. Beforehand, it wasn't clear what the new authors ID was so this made it harder to add books and search for books by a specific author.
  2. I struggled with managing the edit form state and ensuring the inputs validated correctly before submitting. I also initially had a bug where the wrong state variable was used in the author search field, which caused the page to crash. Debugging that helped me realize how careful I need to be with state names and scope in React.

Material UI

  1. Material UI's API felt intuitive, and I liked the consistency it brought to the look and feel of the app. Components like `TextField`, `Button`, `Dialog`, and `Table` made it easy to build forms and tables without writing a lot of custom CSS.
  2. Refactoring the existing UI to use Material UI was mostly smooth, but I did need to adjust my CSS layouts slightly since MUI components have their own spacing and sizing defaults. Once I got used to the props and styling system, it actually made the UI code cleaner and easier to maintain.