DEV Community 👩‍💻👨‍💻

Kunwarvir
Kunwarvir

Posted on

Adding a new component for my fourth hacktoberfest contribution

Awesome-Adoption: Add a modal to profile

#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

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

As requested, I added validation to the username to ensure that it can't be empty:
Image description

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

After setting up EditProfileModal.jsx, I was then able to integrate it with the profile page:

<Button variant="primary" onClick={handleShow}>
        Edit
</Button>
<EditProfileModal
        show={showModal}
        handleClose={handleClose}
></EditProfileModal>
Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠