On the expedition of finding another issue to fix and do a second pull request in Hacktoberfest, I fixed another one in the same project I worked on in blog Lab 4.
The issue can be viewed here. The interesting thing about this issue is it’s not a technical or coding related issue. It is related to a certain component which needs to be updated but will break some other installed components as they are deprecated. The component in this was react-router-dom which is currently on version 5.1.0 but the project was still using version 4.3.1.
Following the same steps as I did in Release 0.1 post, I forked the repository, cloned it and started working on it. You can go to my fork by clicking here. I create a new branch issue-411 for getting started to fix the issue.
Upgrading a component is easy just run npm install component_name@versionName. I did that and ran npm install firstname.lastname@example.org
The component was successfully updated, I checked that through the package.json file under dependencies.
The main thing to do was testing it and finding what was getting affected. I ran the automated test using npm test. It passed all the test and then I turned toward the open source community to get some more insight to find broken functionality. I replied in the issue with the results so far and asked what more they wanted. One of the lead contributors advised me to run some manual checks but there was a small issue with it. The application requires a username and password to login and access the rest of the app. I commented on the issue that if there was any way possible to get authentication credentials for testing the app. Seeing this they added a new section to their documentation which had a public access credentials so I or whoever else wants to explore the app can do it. They replied to my comment that they have added credentials so I can go ahead manually test it.
I explored the application, and checked developer console for any warnings and there were.
Two of the component classes were using deprecated method: ComponentWillMount.
But I had to find those components because I wanted to see what they were using that function for. This was not easy as the warnings were inly printing the class name of the functions but didn’t showed exactly where it was being called, used or what the component name was.
It was important to find those components as it was required for me in the issue to report back with the components that were using deprecated code and what was the code being used for.
I went to Visual Code and tried globally searching for each class. Nothing showed up. Then I noticed something, the components might be in node-modules directory and it was excluded from search. I remove node-modules from search excluding list and ran it again. I found the components that had the classes using the deprecated code. I went through the code and see what was happening. I recorded what I found. I was not required to refactor anything for this issue.
I investigated further and noticed if I save username and password and login straight to the main page, the warnings don’t appear. Turns out only the login page was throwing warnings as it might be using those components with deprecated code. I tested further and explored the application and everything seemed to work fine. I commented back on the issue with my results and asked them if I should submit a pull request. Another contributor told me to submit a pull request and even explained further the reason of the warning.
I submitted a Pull Request(How To Do A Pull Request) which you can view here: https://github.com/edgi-govdata-archiving/web-monitoring-ui/pull/421
This issue was interesting as it aimed more on trying, testing and reading through to find out what was cause warnings and see if something significant is broken instead of writing code.
- Original Repository : https://github.com/edgi-govdata-archiving/web-monitoring-ui
- My Fork: https://github.com/jatinAroraGit/web-monitoring-ui
- My Branch for this issue: https://github.com/jatinAroraGit/web-monitoring-ui/tree/issue-411
- Issue: https://github.com/edgi-govdata-archiving/web-monitoring-ui/issues/411
- Pull Request: https://github.com/edgi-govdata-archiving/web-monitoring-ui/pull/421
- Release 0.1 Blog to learn how to get started to fix code and do pull requests: Release 0.1