Happy Hacktoberfest! 🎃 - Part 4

Introduction

Well, this is it, the last chapter of my 2021 Hacktoberfest journey. As there wasn't much time left, I thought maybe I could get myself a project get it done quickly. Surprisingly, I was wrong.

Looking for a repository to work on during the last week of Hacktoberfest was quite challenging. As such, I had to rely on my classmates' PRs for issues. Since many of them worked on JavaScript or React-based projects, it didn't take me too long to find one. In the end, I decided to give Greenstand's Treetracker (an app for planting trees, surprisingly!) a shot.

The first issue

The first issue was to address a CSS behaviour that caused one of the pages not to scroll vertically. While cloning the project to my local machine, I discovered that I needed the admin credentials to log into Treetracker's website. After messaging one of the lead developers and asking for the credentials, I was added to a Slack server, which from there I could retrieve what I needed and begin my work.

Fixing the issue was not too hard. The source behind the unwanted behaviour was the overflow: hidden style in the Captures view, which I had to change into overflowY: scroll to make the page start scrolling again. After creating a PR, I got some feedback to make the navbar stick to the top even when scrolling. Googling for a solution, I realized that I had to move overflowY from the Captures view to the CaptureTable component, as this was the place that contained the navbar.

Finding a new bug

While working on the finishing touch for the CSS changes, I discovered another bug: the pagination kept loading the next page even when pressing the previous button.

The culprit lies on the CaptureTable component, where the page state was not set correctly when onPageChange happens. Realizing that it was an opportunity to test my knowledge of React, I decided to file an issue and asked if I could try and solve it myself.

First, I began looking up Material UI's TablePagination API per the lead dev suggestion. Using the example from the example and some inspiration from StackOverflow, I began creating the solution. The plan was to use a local page state, and when onPageChange happened, updated the page state to the value of the new page instead of page + 1:

const [page, setPage] = useState(captureContext.page);

const handlePageChange = (e, newPage) => {
    loadCaptures({
      page: newPage,
      // ...
    });
  };

While this solution was decent, I was told by the lead dev that the local state was unnecessary. He suggested taking advantage of the capturesContext context, which holds the logic to manage the page state. With his suggestion, I went back to the code and made some more adjustments, and in the end, managed to successfully merged my PR.

Conclusion

Hacktoberfest was an exciting new experience. I was able to learn a lot working with different communities on different projects and challenged myself to work on something a bit more advanced from what I learned. I'm excited to see which open-source events will happen in the future, and can't wait to contribute to even more repositories than this one.

Have a great Halloween everyone! 👻