Hacktoberfest #2

Let’s speak about my second week of contributing to open-source beneath Hacktoberfest occasion.

The problems:

This week I used to be in search of tougher points and obtained 2 pull requests merged in partner-finder undertaking. The primary one is PaginationControl upper page limit is always 100 and the second is Display username on home navbar.

My pull requests: 1st issue, 2nd issue

The primary difficulty:

On the whole, the front-end makes use of React in order that it wasn’t laborious to determine the logic, although, I struggled through the set up.

The undertaking makes use of docker to containerize its code which requires docker put in on the machine which I did not have. Furthermore, I attributable to my Home windows model, virtualization was not enabled as effectively. Due to this fact, I needed to obtain some recordsdata, home windows sub linux system and configure my PC’s BIOS.

The difficulty mentioned that the utmost web page was at all times 100 which did not mirror on the true information. The purpose was clear: to repair the PaginationControl element. Since House element does all the info fetching and it passes information to PaginationControl, I wanted to make one other api name to get the variety of pages of all ‘leads’ (or file) and create one other 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((information) => setMaxPages(information.pages))
      .catch((error) => console.error(error.message));
Enter fullscreen mode

Exit fullscreen mode

And passes maxPages to PaginationControl element:

            web page={web page}
Enter fullscreen mode

Exit fullscreen mode

All that left to do was to vary any quantity 100 in PaginationControl to maxPages. I additionally fastened one other bug the place clicking the > button nonetheless will increase the variety of web page after reaching the max web page.

        onClick={() => setPage(web page + 1 <= maxpages ? web page + 1 : maxpages)}
Enter fullscreen mode

Exit fullscreen mode

The second difficulty:

The second wasn’t laborious too. I figured if the jwt token is save in native storage and is extracted to confirm the person, why not do the identical with username.

  const handleSubmit = (occasion) => {
    const url = `${API_HOST}/login`;
    fetch(url, {
        if (success) {
          localStorage.setItem('partnerFinderToken', token);
          localStorage.setItem('username', username);
          historical past.push('/');
Enter fullscreen mode

Exit fullscreen mode

Then, extract the ‘username’ key from native storage and show.

const [username, setUsername] = useState('');
<Typography variant="h6" element="h6">
Enter fullscreen mode

Exit fullscreen mode

What I’ve realized:

I believe putting in docker was fairly a lesson for me, I’ll write a weblog on it a while later to assist out of us like me with Home windows House model with virtualization disabled.

Close to coding, I obtained an opportunity to observe extra React, to be taught a distinct fashion of coding React and usually get used to contributing, following contributing tips and presenting my issues clearly to different developers

Observe: for the task launch 0.2, I’ll solely submit the primary difficulty as I am additionally engaged on a backend Python difficulty from the identical repo.

Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.

Checkout extra Articles on Sayed.CYou