DEV Community

AmasiaNalbandian
AmasiaNalbandian

Posted on

Breaking the habit

This week I broke.

After spending numerous hours investigating and attempting to make the requests stop onTextChange, I decided to take a leap and start rewriting this to make it work. The main problem that I was facing was that author and posts both had their own component, but shared the same Input Component. There were many layers involved in the search to be quite honest, which was making the submit event more complicated than it needed to be.

When looking at the code, I realized everything needs to be in one place only - the Searchbar.tsx. So I started putting all the states for the inputs there. Then in this PR I had to integrate the props for the input. So I passed the text field to the SearchInput.tsx where it would determine whether it would be for author or post. This I thought was a bit of duplicate code. In fact, AuthorSearchInput.tsx and PostSearchInput.tsx are identical files. I removed it and made a reusable Input file instead. We would just pass down different props depending on the input field it was for.

I made sure the input box would only have to handle the input. We don't need to complicate the UI here. This means that the submitHandler is now in SearchBar.tsx. Do you see where I'm going with this? The last piece of the puzzle is the states which I also put into SearchBar.tsx. So what I then did is I passed those states down to the input component, as I had created props for them in the input. This means that ultimately, all control for the search queries is now in SearchBar.tsx only. This made things MUCH easier.

I cleaned the rest of the code up, and put up a pull request, describing the change to be required to complete the UI for the Search Bar. I was lucky the next day we had a triage and was able to explain what the PR was for to my peers and how it was just to make sure the search behaved the same way, nothing new or complicated. That earned me ✅✅ in 24 hours (personal record)!

Another reason that I got reviews might have also been that by breaking habit and moving code around, I also removed more code than I wrote.

Unblocking myself

Since the PR I needed was put in, I started to continue working where I left off. As I mentioned in my previous blog post, I had just created a new branch with all of my new UI changes. I rebased that branch, since it already had included the migration of the project. From there it was extremely simple - because I had already tried to implement various ways around the code before I changed it, I knew exactly how to plug everything in.

season 3 wall GIF

Ok now that everything looked great, I had to come back to my main problem. I avoided the big rebase in my first PR, however I needed to now get my code from the new branch in. What I did was I took my branch with the PR, let's call that PR-branch. I removed all the commits I had made on this PR. Then I rebased the branch. This rebase was obviously a lot easier since I had no commits. Next I made sure both branches were rebased to the current master branch. I then just merged my newbranch to my PR-branch. It was so easy and so smooth! When I had successfully done all of this, I felt that I had really mastered Git enough to be comfortable doing risky hacky things like this.

Now again, we sit and wait for some reviews - I am hoping for a clean PR, but we are human. I do want to push this in ASAP, and therefore will recall my previous tactic that if I get any feedback I need to address it right away so that my peers can review it again while their workspace is setup.

Top comments (2)

Collapse
 
tuenguyen2911_67 profile image
Tue

Wow, congrats on making 4 blog posts Amasia XD

Collapse
 
amasianalbandian profile image
AmasiaNalbandian

There's one more.... I made more than the required amount :)