In Too Deep

April 27th, 2020
react

Nested

It was back to work today after I nice, relaxing Monday. The one thing I've noticed about working from home is there is less distinction between the weekends and workdays. I'm not saying it's necessarily a bad thing. It definitely takes something away from the weekends, making them seem less like weekends, but the quality of life increases from working at home are well worth it. I know my company is not a big fan of working from home, for whatever reason, and I suspect this fairy tale will be over soon. However, whenever I do start looking for another job, I'll be able to say I have experience working from home, which is usually a prerequisite for landing a remote job. I would love to work from home in the future; it's so nice to be in the comfort of my home. I can understand for people who are more socially inclined, it would seem like a personal hell. A lot of people really enjoy the time they have in the office so they can have some social interaction with their coworkers. While I appreciate the relationships I've built over the years with my coworkers, I would much prefer to create those relationships digitally. I think my cohort and I communicate now more than we did when there was only a partition separating us. I love being able to walk out on my breaks and lunch and see my little girl, and just go to the kitchen when I need a bite to eat or some coffee. I'm pretty self-sufficient when it comes to work anyways, and I think I can self-govern.

back-to-react2

I've been waiting on my cohort for several days now to be able to start the project in React Native. He was having some serious issues with getting it up and running and in a state where more than just him would be able to work on it. He also was working to create a monorepo to hold the web version as well as the mobile version. After much trials and tribulations, he decided on using React Native Web for the web version, which he was at first averse to. After doing a lot of research on using React Native for the web, he realized it would actually be the way to go. Apparently, with the way he laid it out, the only thing you have to add are the responsive changes to make it work for the web. You can write it completely with React Native, and Webpack will handle the rest. If you want to add media queries, there is a hook someone has created to add these in, and it looks pretty seamless. Also, you can add the suffix of .web before .tsx and that file will only be used for the web version. For example, you could have a Header.tsx file for the mobile view, and if you wanted something different for the web, you could create a file called Header.web.tsx and it would be parsed correctly. It seems that being able to build this for the web will pretty simple; that won't be the issue. At this point, though, I really have no idea what we're doing with the application itself. I know it's an application for the representative's to use to manage their daily tasks. They can add appointments and other stuff on their own personal calendar. Other than that, I know they want it to do a lot more than that; I just don't really know what they want yet. Like I said, I'm waiting on my cohort to have it ready so he can go over everything with me.

i-love-react

In the meantime, I've been keeping myself busy with another project. We finished up our portion of the version for the payments application early last week, but it still hasn't been shipped. Apparently, there's still some work to be done on the backend to get it fully functioning. I've been working on the next version, and nearly have the preliminary work already done, but I could be way off course on this one. I'm meeting with my CTO tomorrow morning to go over what I have done so far in the project, so I should know more after that. In the last version, we had one step of the form where the representative would choose the plan from a select and there were 4 inputs after this, differentiating the different types of deeds they could add onto the purchase. In my new version, I turned those into individual boxes they click on and the 4 inputs drop down below the box, according to which one they chose. The real reason for this new version is to add on some different products they can add on to the purchase. So, below the 4 boxes for the plans, there are 5 other boxes for the other products. When one of these boxes are selected, a couple of inputs appear below the box and coincide with the selected box. If you can imagine the complexity of this form, it's kind of ridiculous. It would be pretty simple to just add these values on individually to context, but that would cause a re-render of the screen every time a key was touched. With React-Hook-Forms, it definitely makes it a little more difficult to create this form, but I was able to do so without causing a single re-render of the screen. Only when you complete and submit this step is it re-rendered. I had the whole thing abstracted into dynamic, reusable components, but I managed to cause a huge problem with the way I handled the local state. I had to de-abstract it and create one huge component, but I'm going to go back to it as soon as I can and probably implement useReducer to manage the state of the dropdowns.

Created by Sam Thoyre, © 2019