The final address book I have for the midterm is as below (link on Github):
In the pre-midterm blog post, I mentioned several actions I hope my final product will be able to perform. They are:
The user will be able to sort the contacts alphabetically (descending or ascending)
The user will be able to filter the contacts based on the location of the contact
The user will be able to search for a contact
The user will be able to ring the contact on different apps through this one contact book.
The user will be able to zoom in (make the font size of the contact) and show the contact’s picture by press-and-holding the contact’s name
Whilst I’m for sure excited that I managed to tick all the boxes (that I created myself), I wonder if it’s because I kept my goal rather narrow. But when I finished completing the goals I have set forth myself, I realised that it actually gave me room to add some other elements to the address book.
1. Night Mode
From my research, I learnt that not a lot of address book offers customisation just for the address book. The look of the address book, especially when you use the mobile’s default address book is often dependent on the mobile’s entire theme. This was something that I knew I would like to address if I still have time to work on the project (which I did). So then I reacted a night-mode view option.
I used CSS’ filter feature to modify the theme, that’s triggered by the change of React state, but I didn’t realise it would lay the filter on all the elements, including the profile photos. To handle this, I created a class that’s added to those elements, that will keep the profile picture unfiltered whilst the rest of the elements change in colour.
2. Dealing with incomplete information
I first finished the assignment with all of my contacts filling in all the information required (e.g. mobile number, home number, email, etc). However, looking at my own address book habit (?), I noticed that not all of my contacts are saved with complete information. I then decided that my address book will need to be able to do the same.
It was actually quite easy, as all I needed to do was to remember maxing the height of the information box to be set to “max-height” as opposed to just “height”, which will make the box shrink and grow to a max-height according to the content.
However, it was challenging when I tried to incorporate field titles, e.g. “home, mobile, country, etc” because whilst the content depends on the props and simply wouldn’t show up when it’s empty, that’s not the case with the field titles. To handle this, I then created a variable that adds or remove classes according to whether the field has data or not.
3. Learnt to actually use react’s state as opposed to relying on CSS
I’ve been quite accustomed to using CSS’ display properties to hide/display elements. However, upon meeting with Rune, he decided I should let go of my CSS trick for the better (also known as React’s state). Whilst it took a while to wrap my head around the concept, I could see how using React’s state eventually helps with a lot of things. I can trigger more actions when a button is clicked (which is not the case with my CSS tricks unless they’re adjacent sibling divs).
4. If I had more time…
I would love to incorporate the adding of new contacts. I would also love to further optimise my code and add CSS animations. I tried playing with React’s CSS Transition Group, but it seems that I will need more time to get a hang of it. All in all, I really enjoyed this midterm’s assignment because it helped me further cement materials learnt in class, especially the idea that it’s basically doing the same thing with states and props and functions over and over again, whilst giving me room to play with things not necessarily covered in class.