Hacktoberfest #2

Let's talk about my second week of contributing to open-source under Hacktoberfest event.

The issues:

This week I was looking for harder issues and got 2 pull requests merged in partner-finder project. The first one is PaginationControl upper page limit is always 100 and the second one is Display username on home navbar.

My pull requests: 1st issue, 2nd issue

The first issue:

In general, the front-end uses React so that it wasn't hard to figure out the logic, though, I struggled during the installation.

The project uses docker to containerize its code which requires docker installed on the machine which I didn't have. Moreover, I due to my Windows version, virtualization was not enabled as well. Therefore, I had to download some files, windows sub linux system and configure my PC's BIOS.

The issue said that the maximum page was always 100 which didn't reflect on the real data. The goal was clear: to fix the PaginationControl component. Since Home component does all the data fetching and it passes data to PaginationControl, I needed to make another api call to get the number of pages of all 'leads' (or record) and create another state maxPages

const [maxpages, setMaxPages] = useState(100);
//... 
const n_pagesUrl = `${API_HOST}/leads/n_pages?perpage=${perpage}`;
fetch(n_pagesUrl, {
      headers: headers,
    })
      .then((response) => checkForErrors(response))
      .then((data) => setMaxPages(data.pages))
      .catch((error) => console.error(error.message));

And passes maxPages to PaginationControl component:

<PaginationControl
            page={page}
            perpage={perpage}
            maxpages={maxpages}
            setPage={setPage}
            setPerpage={setPerpage}
          />

All that left to do was to change any number 100 in PaginationControl to maxPages. I also fixed another bug where clicking the > button still increases the number of page after reaching the max page.

<Button
        onClick={() => setPage(page + 1 <= maxpages ? page + 1 : maxpages)}
      >

The second issue:

The second one wasn't hard too. I figured if the jwt token is save in local storage and is extracted to verify the user, why not do the same with username.

  const handleSubmit = (event) => {
    const url = `${API_HOST}/login`;
    fetch(url, {
      //...
        if (success) {
          localStorage.setItem('partnerFinderToken', token);
          localStorage.setItem('username', username);
          history.push('/');

Then, extract the 'username' key from local storage and display.

const [username, setUsername] = useState('');
//...
<Typography variant="h6" component="h6">
          {username}
        </Typography>

What I've learned:

Since this project utilizes docker, I take the chance to learn what docker is. The concept is quite neat an beneficial for anyone involved in the coding process. I hope to actually use it in the future and understand it furthermore.

I think installing docker was quite a lesson for me, I will write a blog on it some time later to help out folks like me with Windows Home version with virtualization disabled.

With regards to coding, I got a chance to practice more React, to learn a different style of coding React and generally get used to contributing, following contributing guidelines and presenting my problems clearly to other developers

Note: for the assignment release 0.2, I will only submit the first issue as I'm also working on a backend Python issue from the same repo.