Adding a new component for my fourth hacktoberfest contribution
Published: 2021-11-01 03:44:28

## Awesome-Adoption: Add a modal to profile
[#207](https://github.com/redxzeta/Awesome-Adoption/issues/207) highlighted the need for a modal through which the user could edit their profile. `Awesome-Adoption` is a React based application and I decided to work on it for my 4th contribution towards Hacktoberfest

The issue wanted the modal to contain 2 editable fields: 
- Username
- Description
The requirements also indicated that validation was required for the username and the cancel button should warn the user with a prompt before closing the modal.

After setting up the project locally and starting a dev server, I started off by adding an `Edit` button on the profile page through which the user could access the `Edit Profile Modal`:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lolvmpc9g5nty1qkzwgi.png)

It was then time to work on the Modal. I decided to create a separate component for the edit profile modal called `EditProfileModal.jsx` to keep the code organized. The project was using React-Bootstrap to style the website so I simply used it for my changes too, not needing a dedicated `.css` file at all.

I added a modal with two buttons to `Cancel` and `Save` the editing workflow:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrjt472gqra1enh2sebm.png)

As requested, I added validation to the username to ensure that it can't be empty:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qv1xkbyhwzx8wxahdaa1.png)
 
At this point, I tested it a bit to ensure that the form was submitting properly through the UI. I then further worked on the `Cancel` button and added a warning prompt which would confirm the user to exit:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhurmncskru7m1gxno87.png)
 
After setting up `EditProfileModal.jsx`, I was then able to integrate it with the profile page:
```js
<Button variant="primary" onClick={handleShow}>
        Edit
</Button>
<EditProfileModal
        show={showModal}
        handleClose={handleClose}
></EditProfileModal>
```

## Review and merge
After a quick sanity test, I pushed my changes and created a pull request to Awesome-Adoption:

Link to the merged pull request: [#210](https://github.com/redxzeta/Awesome-Adoption/pull/210)

I highlighted all my changes and included screenshots in my pull request to highlight the work that had been done. After commenting on the issue for a review, the repo maintainer ended up accepting my pull request without any changes.

## 4th contribution towards Hacktoberfest 2021
This marked my fourth contribution towards Hacktoberfest 2021! Being my first time contributing to open source projects, I definitely learnt a lot. I found it especially important to have an open mindset while looking for issues to work on.
I spent a lot of time waiting for an **ideal issue** to work on, but I've realized that having an open mind while picking up issues is the key to working in open source. It not only leads to discovery of interesting projects by stepping outside one's comfort zone but is also a fun and rewarding experience.