My third pull request for Hacktoberfest

Picking the Issue

Since I never deal with bugs for my first and second pull request, I decided to find a bug issue to work for my third pull request. The funny thing is that I just noticed that one of the contributors of my second PR's project issue-collab listed a bug about "Page not reloading after clicking next on pagination". The owner of the repo wants someone to share a video/gif about the issue because he not really clear what the bug exactly is. I tried and uploaded the gif of the bug. 



Then the owner reproduced it as following:
  • Click Find Issues
  • Scroll to bottom of page and click Next page
  • Click Find Issues again (observe it doesn't work)
  • Click Find Issues a second time (observe it loads the first page)
I asked him assigned the issue to me and he did it immediately.

Practice the git commands

I checked the requirement of release 0.2, and I am able to work on at least 3 different repos for my PR. That means I can work on this repo twice plus 2 more different repo.

Because I worked on the same repo I did for my second PR, I had the fork to this repo already and I am out of date to the upstream too. I add the upstream repo to my remote and fetched it.


 

Then I did the fast-forward merge using "git merge upstream/master".

Finding the bug 

Before I actually found where is the bug, I never know how easy or how complicated the solution can be.  Fortunately, the solution of this bug is much easier than I expect, but it still took quite a while to find the fix the code.

apparently, the bug something related to the page number. It is either the findIssue() function did not reset the page, or the nextPage() function made something wrong. Firstly, I always try to console.log some data out to see the data change in each state. 

    const preFetchState = {
      isEmpty: true,
      isFetching: true,
      isButtonLocked: true,
    };
    if (shouldResetPageNum) {
      preFetchState.pageNum = 1;
    }
    this.setState(preFetchState);
    
    const finalUrl = this.createUrl();
    console.log(preFetchState);
    console.log(finalUrl)
    await fetch(finalUrl)

when I console the preFetchState and the finalUrl, I found the page number in each of them is different when clicking findIusse() on the second page.

App.jsx:98 {isEmpty: true, isFetching: true, isButtonLocked: true, pageNum: 1}
App.jsx:99 https://api.github.com/search/issues?q=type:issue+label:react+state:open&sort=created&order=desc&per_page=20&page=2

 I checked the createUrl() function, but there seems nothing wrong there. I also stupidly change the preFetchState directly to setState, but also not work. After I check a few other functions, I suddenly realized that that might be the same problem I had that which my ignored feather sometimes works, and sometimes not work --- asynchronous problem. I  googled online "is the setState asynchronous or synchronous", and it turns out that my guess is right -- setState is an asynchronous function!

fix the bug 

As I said before, the solution of this bug is much easier than I expect after I found out what cause the bug -- setState is an asynchronous function, it called createUrl() before it actually changes the value of this.states. I just easily fix this bug by adding the keyword await in front of "this.setState(preFetchState)". I sent the PR of this one line change, and the owner gladly accepts it.


Links

the Repo issue-collab: https://github.com/tianlangwu/issue-collab

the Issue issue-71: https://github.com/trybick/issue-collab/issues/71

the PR PR-72: https://github.com/trybick/issue-collab/pull/72

Comments

Post a Comment

Popular posts from this blog

OSD Lab3 Git Merge

Image
In this lab, I need to implement two additional feathers into my release 0.1 project --  urlStatusChecker . I am asked to do each of the feathers in its own branch and then merge them into my master branch in order to learn and get familiar with the git merge processes. I choose to add two of the following  features into my   urlStatusChecker : Add a  -j ,  --json , and/or  \j  flag, which causes the program to output JSON. The JSON output should look like  [ { url: 'https://www.google.com': status '200' }, { url: 'https://bad-link.com': status: '404' } ] Support  --all ,  --good , and  --bad  flags. The  --all  flag is the default, and if none of these are present, it will display good and bad URLs. The  --good  flag causes only good URLs to get displayed; the  --bad  flag causes only bad URLs to get displayed To begin with, I issued the two feathers that I wanted to add in my repository(...
Read more

My PR for release 0.3 External Project

Image
 Picking the issue I am so glad to hear that we are allowed to work on repositories that  we have already worked on in the past. That means we don't need to spend time on set it up and learn the code. I decide to work on  issue-collab  since I am so familiar with the repository. Different than any other issue I have work on, I filed the new issue-76 myself and tried to create a pull request for it. The issue I filed is that add a scroll to the top button. I am trying to add the scroll to the top button into this issue-collab repository just like the one in Telescope. The owner of Issue-collab thinks this is a good idea too. Working on the issue The first time when I tried to work on it, I just tried to study the code from Telescope and some from google and playing the code around. I was so annoying that I can't put some code together successfully in React. After watched some React video, I realized that there are two different components which are Class compone...
Read more