Happy Hacktoberfest! 🎃 - Part 4
Tags: opensource, hacktoberfest
Published: 2021-10-31 05:08:00

## 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](https://github.com/Greenstand/treetracker-admin-client) (an app for planting trees, surprisingly!) a shot.

## The first issue 

The first [issue](https://github.com/Greenstand/treetracker-admin-client/issues/176) 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](https://github.com/Greenstand/treetracker-admin-client/pull/182), 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. 

![a website image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpz215c74kc2qqi8hkeo.png)

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](https://mui.com/api/pagination/) 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`:

```js
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](https://github.com/Greenstand/treetracker-admin-client/pull/182).

## 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! 👻