Adding a Confirm Delete Hook in React

My first Open Source Contribution – The Technical Side

So about a month and a half ago – I got assigned my first ever issue in the world of Open Source – and it was my first time asking for one – which you can find all about here.

Here’s the technical side of it – [ I am going to keep this short and sweet]

So this was the problem –

Deleting Hooks were directly deleting Delete Hooks! And as clearly explained in the image, there must first be a confirmation step – to confirm delete – to avoid data loss frustration!

These were the steps I needed to take (after setting up Taskcluster locally – which again is quite hefty [especially on windows]) –

  1. Import Dialog Action Component in the desired jsx file.

    import DialogAction from '../DialogAction';

  2. Send in the props required by DialogAction from the jsx file where this component is being implemented.


  3. Add required methods for these props and changing state when required.

    handleDeleteDialogHook = () => {
    this.setState({ dialogDeleteHook: true });

  4. Calling the Dialog Action Hook when “Delete Hook” is clicked, instead of its default action.


  5. Adding Code for this new hook and adding UI as required, and then calling the delete method on confirmation of deleting hook.

    {dialogDeleteHook && (
        confirmText="Delete Hook"
            This will delete {hook.hookGroupId}/{hook.hookId}

6. That should do it!

This was the final result-

is this ok

And obviously –

Things I learned:
1. Using ES Lint to write perfect code – reusable, re-readable!
2. Making changes in the correct file among-st 1000s of files.
3. Making sure no test case fails!
4. Looking at Travis CI tests on Github and see why they are failing!
5. A deploy preview, I never knew about!

See the issue here —

See my first ever PR —

Yep. That’s my first contribution!

Written with love,
Rishabh Budhiraja

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s