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.


    dialogDeleteHook={dialogDeleteHook}
    .
    .
    onDialogDeleteHook={this.handleDeleteDialogHook}


  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.


    onClick={onDialogDeleteHook}

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


    {dialogDeleteHook && (
      <DialogAction
        open={dialogDeleteHook}
        title="Delete?"
        onSubmit={this.handleDeleteHook}
        onComplete={onActionDialogClose}
        onClose={onActionDialogClose}
        onError={onDialogActionError}
        error={dialogError}
        confirmText="Delete Hook"
        body={
          <p>
            This will delete {hook.hookGroupId}/{hook.hookId}
          </p>
        }
      />
    )}




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 — https://github.com/taskcluster/taskcluster/issues/957

See my first ever PR — https://github.com/taskcluster/taskcluster/pull/1068



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:

WordPress.com Logo

You are commenting using your WordPress.com 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