DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Hacktoberfest: Final Challenge
dbelokon
dbelokon

Posted on

Hacktoberfest: Final Challenge

Looking For an Issue

The last issue for the #Hacktoberfest challenge was really difficult to find.

After a long time of trying to find an issue with no luck, I decided to cheat a little and see what repos my classmates were contributing to. Funnily enough, I noticed that 3 of my classmates contributed to the same repo - usTaxes. This made me wonder what was so special about that repo, like why would my classmates care about US Taxes in Canada?? Or even generally care about taxes 😡 So I decided to take a look at that repo and see what's going on. I still don't know why they would choose it but I noticed that it had quite a few issues that were manageable and straightforward. So I decided to try and see how it goes, even though I'm not interested in taxes πŸ˜…

Contribution Process

The issue I chose was related to the form submissions. Basically, when a user would press enter, the form will submit itself without saving the data. Also, when a user would try to go back and forth between forms, the data will be lost.

I did some research and I found this article explaining the default behaviour when a user presses the enter key. In summary, when that happens, it would try to find the nearest submit button and submit the form. This helped me understand the bug even more.

The way I decided to approach the issue about the enter key is by creating an eventHandler that will catch a key down event and prevent its default behaviours.

The other issue required a little bit more of a set up. In basic terms, I had to keep track of the form state and note whether the form had actually changed. This way, if the user changes the page without saving the form, it would trigger an alarm to the user to let the user know that the data will be lost if the proceed without saving.

The way I keep track of it is by listening to an event triggered on a change, and change the form state to a "dirty" state. Then, I used the Prompt component of react-router-dom to trigger an alarm if the form was on the "dirty" state.

You can view it in more details here.

Recap

Overall, Hacktoberfest challenge was a good start to explore open source world. The hardest thing was looking for issues and having to setup everything for the projects. But I definitely learned a lot. I think participating in such challenges or open source projects in general is a great way to practice coding. It also allows you to try something new by working on a real project. Hopefully next time I can be more skilled and experienced to be able to contribute to even more repos. πŸ™

oh, and Happy Halloween everyone!!πŸ‘»πŸ•·πŸ•ΈπŸ’€πŸ‘½~~~

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈