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! π»
Top comments (0)