Final Refactors

March 25th, 2020
refactoring

Almost There

I've been saying it for over a week now, and every time I believe it to be true: I'm almost done with my project at work. It's become a lot more than it started out being, which is great, and allowed me to get a lot of practice using some complex concepts in the world of React, but at this point, I feel it's necessary to get this project to production. I expect that the powers that be would like to see me produce, and at an efficient rate. If it were completely up to me, I would have had my project up and running several days ago, at least, but the extra time has given me a lot of opportunity to make the code better and add some bells and whistles. For example, a couple of days ago, I added buttons in all over the place, allowing the user to navigate from one page back to another, or kind of hop around to appropriate places in the process, without losing their saved data. Since everything is maintained using useReducer and the context API, the state is preserved in a way I had never done before. Now that I have this tool in my repertoire, I couldn't imagine using anything else. I would like to take another crack at learning Redux at this point, since I think it's still a very relevant tool, and I'm bound to come across it again in future positions. Now that I have a better understanding of these two constructs, the context API and the useReducer hook, I think I would have a better time at understanding what's going on in Redux. Then again, given past experience, maybe not.

context

I started off the day by trying to figure out exactly what we needed to pass through to the database from my feature. We have everything working exactly as it should if the user has a quote, but I'm building out the part of the application that is without a quote, so this requires different pieces of data to be passed through. I found out I would need to pass through the first and last names of the plan holder, as well as their phone number. While we do get their name from their credit card information, it may be someone else paying for the plan, so we would need to add some fields to capture the name of the actual plan holder, along with that phone number. This required another form page, but not a lengthy one. Given that the CSS is already configured correctly for other forms in the application, the styling of this page was a cinch. It just required grabbing some classes from other files and building it out in a similar fashion. No big deal. It would be a big deal to get that data passed all the way through to the main object, if I had built the app without using context and the reducer hook. But, since I have built in this way, passing that information through was a breeze; I just added it along to the rest of the product context, and boom, it was set to go. I handled the page change with the reducer object, creating another type for this page, and dispatching the state to this type when a button was clicked on the former page. To pass it to the next page, I just dispatch the next type in line. With this system, it's never been easier to create routing for an application like this, as well as access state on a global level without exposing too much. In my opinion, we may have more state exposed than we might want, but that's something we can address at a later date.

clean code

From there, everything was getting passed through to the submission of the application at the end, just as we would like it to be. Now, all that was left to do was make sure ASP.net would be able to read that object of information correctly, as it was only configured to read the object with a quote ID tied to it at this point. Almost all of the fields were the same on this object and the quote ID object, except for the details object within this object. This is where some of the very pertinent information that describes what kind of plan they had chosen would be, along with their name, phone number, and the representative's ID. But, I had to wait on my neighbor to configure this, since my knowledge of ASP.net and C# is zilch. So, in the meantime, I set to work on doing some serious refactoring. One thing that has bothered me for quite a while is the fact that our types and statuses on the reducers were strings, and this was an easy fix. I just created an enum that related a variable name to each string and replaced the strings with variables. After that, it was just a matter of replacing every instance of the string in the application with the appropriate variable attached to the enum, of which there were quite a few. Now, though, there is no risk of making a common typo and not being able to figure out what's going on, and especially with using TypeScript, the mistake would be obvious and I would have the autofill feature. After finishing this task up, I went to work on pretty much destructuring every object I saw in the application. This took much longer than expected, and I actually only finished about half of the files before the day was done. But, that leaves me something to do in the morning, and after that, I hope we can put this thing to bed.

Until tomorrow!

Created by Sam Thoyre, © 2019