Getting Fully Functional

I had a pretty uneventful day at work today, much to my dismay. I've found I'm much happier when I have a full load of tasks to complete, even more than I can handle. As it stands right now, I'm clawing for anything at all that I can do. I'm at the point right now where, if I keep working on things, I'm only going to make them worse. I can't work on any of the other pages because the designs haven't been decided on, yet, and the APIs aren't built out for the pages I am working on, so I can't work on that either. On Friday, I started working on the filters for the search page, and got the UI pretty much done, but just for mobile. This component is nested about 5 layers deep, and I need to keep track of what has been selected or unselected and eventually pass it into an API on the top level. I started off by creating several instances of useState in the top level and passing it down. I quickly realized this was a terrible idea, and completely backtracked it. I knew I was going to write a reducer for the information today, so I had been thinking it through all weekend. At first, I wrote it in a very un-dynamic way. I basically created a really long ternary operator to check for the category of the filter, and then push it onto the correct key in the object. I knew there was a way to make this more dynamic, but I kept hitting roadblocks.

I left it alone for a while, and set out to do some refactoring. Again, I'm getting into the danger zone, where if I work on this code much more, I'm only going to make it worse. There are always things to abstract away, but sometimes I feel like I over-abstract things and it ends up being more complex than it was. Nonetheless, my base component on the search page still hadn't been broken into its true components, so I quickly went ahead with this. On this page, there is a header section that holds the search input, title, subheader, and an image, and then the container to hold all of the leads from the search query. It only makes sense to break this into two separate components, and is certainly pretty simple to do so. That was easy, but the hardest part of my day was still ahead. On this page, the filters will be presented in two different ways, depending on what type of device you're using. If using a phone, the filters will slide in from the bottom and cover about 2/3rds of the page, whereas in any other view, they will slide in from the left and just move everything over a little bit. Flexbox makes the latter really simple, but the issue was presenting either of these dynamically. With the system we have in place, we have a simple boolean to check to see if something is a phone or not, so it's not difficult to get that working. The problem was, in the mobile view, this filters tab was a position "absolute" element, whereas in any other view, it is not. It wasn't the hardest thing in the world, but it took some finagling to get it to appear correctly.

Once I got this done, I literally had nothing left to do on my docket. I've asked my cohort for some tasks multiple times, and I just can't seem to make any headway. It can get a little frustrating sometimes, but I know he's trying his best. I think he just gets focused on the tasks he has in front of him and doesn't see that if he built out the APIs or the designs for the other pages a little, we could double our productivity with the work I could get done. Anyways, I decided to look back at the reducer I had created earlier and see if there was a way to simplify it. With objects, I knew you could pass in an argument as a key if you put it in square brackets, but I had issues with this earlier. I decided to try it again, and lo and behold, it worked. Sometimes, I've found the best thing to do is walk away from a problem a revisit it with a fresh perspective. It wasn't that I didn't know how to do this in the morning when I first was looking at it; I just wasn't looking at it correctly. It ended up being a really easy fix, and it totally simplified my code. Instead of having a 4 part ternary, I had one object with a dynamic parameter. I took that reducer down from being about 35 or 40 lines to being about 10 or 15 lines. That's always a really good feeling.

Until tomorrow!