For this assignment we are asked to continue our progression into contributing. Part of this release is making a contribution to Telescope. I already documented the setup for this in another blog, check it out if you are having trouble setting up yours.
First step is to pick an issue. After looking at some issues I found one that looked pretty interesting to me but after I asked to be assigned it there was a conversation between Josue and c3ho and apparently the issue was being addressed by another issue already. Onto the next.
I eventually came across this issue to display Telescopes contributors in the footer of the about page. It seemed ok, I’m kinda familiar with React and after looking at the example on node I decided to take it on. I was originally thinking I could use componentDidMount() in react to fetch the contributor from the GitHub API. After playing around with the code for a bit it would seem that I cannot use compnentDidMount() in this version or setup of React. Ok, I decide to inspect the node website to see how they fetch the data.
After poking around the code I found they use window.XMLHttpRequest() to Fetch the data. I wasn’t familiar with the request method but I know what the window object is and the method came up and auto completed for me as i started to type it so I decided to give it a try. I was able to make it work but there was one issue. The request was getting sent on every render instead of just the initial one. After asking for some advise in the slack channel I was given a lot more then I was expecting.
HumphD helped me out bit time by explaining that I could in fact still use componentDidmount in this version, but he gave me three separate ways to take on the task instead of using it. I decided to make a custom React hook that fetches the contributors and returns a random one. After some work I was able to make it work and submitted my PR.
There was a a list of issues that needed to be addressed for the PR. One of them was to try and implement useSWR, instead of fetch() to make the HTTP request. After doing some research and a few hours of making no progress. No matter what I did swr would either return an undefined object or give me an error msg saying that
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
It seemed like it should be working, especially after I tired doing it the exact same way that someone else had implemented it in the repository. I put out a call for help by pushing a commit to the PR. Dave was quick to advise that I should revert to the previous fetch method and implement some more error handling.
After a couple of more pushes and revisions I was finally able to get my PR merged. Before I can merge it though I need to create two more issues since this issue turned out to be a little larger in scope then I had predicted. Thankfully Dave was willing to allow my to spread out the PR’s. One is to Display the contributor fetched by the hook, while the other is to write a test suite for the hook. Both the issues already have someone looking into as I write this!
Tim's Blog for DPS 909 