Using Context

March 16th, 2020
react

Learning So Much

I started my second week of work as a Software Developer today, and I can honestly say the learning curve was just as expected. I figured it would be a lot to take in, and I would feel overwhelmed with information, and that has totally been true. I also thought I would have more time to adjust to the new job and codebase, which has definitely not been the case. Instead of being eased into the work, I was given a list of projects on my first day, and have been working through them ever since, yet I'm only on my second one. It would be one thing if they gave me some HTML files to edit and fix up, maybe adding some CSS to them and a little bit of JavaScript to ease me into the system, but it's been quite the opposite. I haven't been given the critical projects the company depends on, but they certainly haven't been trivial either. My first project was adding some validation to a form in jQuery, with some code written by a guy who's no longer around and that was very poorly documented. Since then, I've refactored a larger React project, moved it over to TypeScript, which I didn't know anything about until I started learning it from one of the other developers, and now building out a payment system on this same project.

react

Last week, I started this project and I've felt pretty overwhelmed by it from the get-go. Slowly, I've made progress on it, and actually had a big breakthrough today, nearly completing the project. When I first started the project, I wrote out the beginning page of it, checking the sales representative's ID against an API, and then asked the other front-end developer for some assistance. He is a React developer primarily, along with having some other really useful skills, and he's well advanced from where I am. We are into the same tools and technologies, though, so I'm hoping I can keep coming to him for help. If he's willing to bring me along, I will be able to learn a lot in a short amount of time, making me a much more productive member of the team. Right now, I feel pretty limited as to how much I can really help them out, but so far they've been willing to give me the time to foster these skills and get up to speed. I'm not completely useless; it just takes me much longer than it would for him and I need to ask for help when I get stuck.

react

Anyways, he took a look at it, and suggested I implement the useReducer hook, using enumerators to represent the different states of the application. So, for example, as the app is loaded, it is given a state of "idle," which has a status attached to it, along with the other default values for the state, like a blank error message and a blank value for the information returned from the API. Then, when the search button is clicked to match up the ID, the app goes into a "loading" state, and a spinner is thrown. After that, the information is returned, and the "success" state is thrown with a value given for the information given. If the ID is invalid, the app will go into an "error" state and the UI changes to reflect an error message. This allows the app to flow through the different states and change the UI accordingly. It was difficult for me to grasp at first, but after some work, I understood it and it made my life a lot easier. Today, I got to the point where I was able to return a price from the form that was filled out, and needed his help to hook that back up to the original app, so that it could flow to the billing address page, then to the card info page, and finally to the confirmation page, where that price would be displayed. This required the use of the useContext hook, another hook that I really wasn't very good with. After today, though, I feel much better than I did with it than I started. At the end of the day, I was able to get that price to show up on the confirmation page, leaving only some cleanup, some styling changes, and adding some bells and whistles to the app. In the matter of about 3 days, I was able to build this all the way up, and hopefully tomorrow, I'll be able to put the finishing touches on it.

Created by Sam Thoyre, © 2019