For the second week of Hacktoberfest, I wanted to do something more challenging than I did in week 1. So, I thought fixing a small bug would be a good challenge.
The Project
I found a small project repo called Remotebirdjobs. In short, this is a website that searches Twitter for job posting Tweets based on a programming topic/language (i.e. React, C++, JavaScript, etc.) within a date range. The project is built using React.js.
The Issue
The issue I found was related to the date picker that's used to select the start and end dates for the search range. When a user would select a date, the date selected would change if the user used the up and down arrows to change month. This would cause the page to reload tweets since the date changed without the user selecting a date. Users expect the date not to change when using the up and down arrows to change months; it should only change when a user clicks on a specific date.
Fixing the Issue
I had an idea on how to fix the bug, so I commented and asked to be assigned the issue.
There wasn't much setup necessary, just needed to install npm packages.
Originally, the project used the default HTML date picker which used the <input> field in combination with the type=date attribute. I had tried various attribute combinations to try to get the date not to change when using the up and down arrows. After much experimentation, I determined that it was not possible using this method.
I searched for alternative date pickers to use in place of the default HTML one. I found out that there is a React Date Picker component that can be used in place of the <input> field.
To use this component, I installed the date picker component via the command-line using npm install react-datepicker --save. I then had to import the component and CSS styles to Navbar.js. I wanted to change as little as possible, so I kept most of the original attributes and replaced <input> with <Datepicker> for both start and end dates. I also had to change the way data is passed to the parent component using onChange.
The Pull Request
Once the changes were made I created the pull request (PR). In the PR, I summarized my thought process and described all the changes and additions I made.
One of the project maintainers reviewed my PR and noticed two issues. One issue was that the date selected is one less than what is shown in the date picker. The other issue was that the calendar dropdown would shift the date input box to the right, messing up the layout.
I fixed the layout issue by adding some CSS styling to the <div> where the date picker is located.
I couldn't recreate the mismatching date issue on my machine because I added some code to match the date. When I took away this code, the date would be one more than what was selected. So I did that in the hopes that it will fix this issue on the maintainer's end, which it did. The maintainer also told me that this was caused by an issue with the backend, which they will take a look at.
The PR was then merged into the main branch.
Conclusion
The PR for this week was definitely much more challenging than week 1. It took some experimentation to get the React date picker component to work, but it was much more rewarding when it finally did. I look forward to whatever issue week 3 has in store.
Top comments (0)