Over the last couple of weeks, we were assigned the task of contributing to several open source projects by submitting PRs that solve either an already logged issue, or an issue that we have found ourselves.
The project: a badge generator
After browsing for a while, I found MichaelCurrin's project, badge-generator. The project is a simple interface for simplifying the creation of badges, used in several open source projects to show things like the version number of the project, whether the project is currently building, etc. A badge usually looks like this:
The issue: managing persisting state
The issue I wanted to work on was #117: Manage state to persist repo values across pages. The issue was very straightforward: create a global store to persist some values that the user entered on a previous form, and reuse those values on that form, as well as other forms that use those values. An example in the site is the repository name, and the GitHub username: both are used when creating a repository badge, and if you fill in the information, then that information will be used to prefill the form that generates the package badge.
Setting the project
Setting the project was very simple: I cloned the project, then installed the dependencies. Since it is a nodejs project, the dependencies were installed in the node_modules folder.
After setting it up, I run the project, and explored it a little to get familiar with the site, and as well as checking the file organization to know where should I place my new files when I start the project.
Starting the issue
Starting the issue was not very difficult, since Michael provided a blogpost that explains how he a persisting store would be implemented.
After reading the blogpost, I wanted to clarify with Michael how the store should be used in the application, since I was not very clear regarding that part. He clarified, and he also explained some other details such as the potential usage of the store to use localStorage, but he said that would be a feature for later.
What I did
After understanding what the whole issue was about, as well as understanding how the store should be implemented, I started to write code.
I followed Michael's implementation of the store, and then after I implemented it, I tested it to make sure that it was working fine.
The way the store works is by using Vue's reactive function, which creates an object that when updated, will trigger a render of the view it is used on. This might seem very similar as to how React handle reactive state by using hooks.
Submitting the PR
After making sure everything was just fine, I submitted my PR to Michael's project. He later accepted it and merged it with his project.
Extra comments
I particularly did not have a lot of problems submitting this PR, since the issue was very focused on a single thing, and Michael provided a lot of guidance as to how implement it. I am very glad I got to work on this project.
Top comments (0)