Release 0.3 : Telescope and The Quest for Infinity.... Scroll

-
Welcome adventurers, sit down while I tell a little story of a brave programmer who slayed an issue so boldly, his PR request broke a record all time high of 57 comments.

Alright so Release 0.3. Got it done right on time, just by the hair... I took on an issue on Telescope that was to add paging functionality to the search results, which also related to the another issue which is to enable infinite scrolling to the same component. Prior to this, humphd (our valiant maintainer and professor, whos been reviewing like a million PRs for the past few days.) has already added the SWR react hook to implement the same feature but on the home page feed. So I used that as a reference point.


I started work on the issue and first tried to implement the swr react hook with the current search components we had. This was confusing and tricky since with a search page we want to wait for the parameters for the search to be entered and then wait for the user to click the search button before making our fetch call, so I tried to figure out a way to make it work for about a day and was really stumped, I couldn't get it working. I got the backend to fetch for the right data but getting the front end to fetch and infinitely scroll was tough.

useSWR implemented by @humphd

Luckily around this time, PRs are getting merged and reviewed left and right, and some include the same components that I was working on. Well thanks to PR #1343 it turns out our prof and another student had already made changes to the search components so that a new component for search results would be the one fetching requests with the SWR react hook. This was great for me because that was the part I needed figuring out, and it was already done. However it still needed the infinite scrolling functionality which I've been reading docs on the past few days so I kind of had an idea of what to do.

the swrInfinite function

So I switched the swr function from the regular one to swrInfinite which will enable infinite scrolling. Passed the next page function to the timeline component which will increment the page index when fetching for results and made the edits to the backend to accept the new page parameters in the query. And would you believe it worked! The posts load as you scroll down to the bottom of the page.

It just keeps scrolling!

For the most part I thought I was done, I'll submit a PR and maybe get a few requested changes in. Boy was I wrong..... Merged finally at a total of 57 comments, I think I must have revised the code with @humphd for about 2-3 days. But it was a good learning experience because he pointed out a lot of discrepancies in my code and suggested ways to code it better. 

57.....


Anyways, after a few days of back and forth reviews and revisions and happily obliging to the profs requests, it's finally merged to the master and I can sleep comfortably knowing that anyone using the search results will now infinitely scroll to their hearts desires

Thanks for reading!

Comments

Post a Comment

Popular posts from this blog

HacktoberFest Entry No.2

-
Image
So around last week I found a great github repo of a chrome extension that previews contents of a webpage when you hover over a link. I stumbled upon it after a suggestion from my professor about taking a look at chrome extensions for a possible repo to contribute to. I'm glad I did because this was a chrome extension that was interesting, seemed practical and had a maintainer who was keen on receiving contributions to better his program. The extension is called Survol First I had to install it and test it out first, can't just contribute to a repo meaninglessly just to force a pr. I tested the extension and liked the functionality, it was useful and is well designed. Makes it all the more exciting for me to try and contribute to it. So I read the docs and learned how the extension worked. It uses a javascript file to inject html elements through the dom and uses mousemove event to detect anchor links to request information of a page, and positions and fills the div with conten...
Read more

Lab 1 : Our First Open Source Contributions

-
So for Lab 1 our tasks were fairly simple. Find a partner to review a repo on and make contributions, no matter the scale, to their code. Be it a suggestion for their code, reporting an issue, or even fixing up small details in their readme. So through slack I partnered up with one of my coursemates  Niaz Much like me, he wrote his code in nodejs, so it was perfect since I can go through his code easier through my understanding of node. His code, though written in the same language, differed from mine a lot. For one, he didn't use yargs so he had to process the arguments manually, and secondly he didn't use fetch and opted for a module called linkinator. No problem, in fact it's an opportunity for me to understand the logic and components that he used. I forked a copy of the repo, cloned it and tested it out for myself. The code worked perfectly as intended and processed urls well. Functionally, I couldn't find find anything in the code I could identify as a flaw or imp...
Read more

Hack.... vemberfest.. PR No. 3

-
Image
OK so this is pretty long overdue (sorry Prof!) And I still have one more pull request to go and that's on me yes. BUT, this week I spent working (or should I say learning) on our course's aggregated blog website which coincidentally, our prof is making us work on this week for the lab, so I guess I got a good head start going on.  So I took on an issue that seemed pretty straight forward in the repo. It was to change the functionality of the search bar when filtered by author. Seemed pretty straightforward enough, so I went ahead, forked the repo and cloned it on my computer. Now the reading begins, the lengthy process of coding. And the fact that this was a whole website coupled with different technologies that I'm not familiar with only made it waaayyy longer, which maybe is a sign that I should have started working on this much much earlier. But that's what happens when your time management skills is hot garbage. Anyways, I spent the next few days learning about eac...
Read more