In this post, we are going to code a business logic for the DeleteOwner component to delete an entity from the server. After we implement this component, we’ll complete this series and have all the CRUD operations.

Without further ado, let’s get into it.

For the complete navigation and all the basic instructions of the React series, check out: Introduction to the React series.

The source code is available at GitHub: React series – react-series-part9-end branch

This post is divided into several sections:

Preparations for the Delete Owner Component and the Delete Route

Inside the Owner folder, let’s create a new one and name it DeleteOwner. Inside we are going to create a new file DeleteOwner.js:

Delete Request in React folder structure

Now let’s modify the DeleteOwner.js file with basic setup code:

import React, { Component } from 'react';
import Aux from '../../../hoc/Auxiliary/Auxiliary';

class DeleteOwner extends Component {
    render() { 
        return ( 
            <Aux>
                
            </Aux>
         )
    }
}
 
export default DeleteOwner;

To enable navigation to this component, we need to modify the App.js file:
import DeleteOwner from './Owner/DeleteOwner/DeleteOwner';

<Route path="/deleteOwner/:id" component={DeleteOwner} />

Right now if we click on the Delete button in the OwnerList component, we will navigate to the DeleteOwner page (even though it has no content inside).

Connecting Our Component with the Reducer

First of all, we need to add the import statements:

import * as repositoryActions from '../../../store/actions/repositoryActions';
import * as errorHandlerActions from '../../../store/actions/errorHandlerActions';
import { connect } from 'react-redux';

The next thing we need to do is to add the mapStateToProps function right below the class:
const mapStateToProps = (state) => {
  return {
     data: state.repository.data,
     showSuccessModal: state.repository.showSuccessModal,
     showErrorModal: state.errorHandler.showErrorModal,
     errorMessage: state.errorHandler.errorMessage
  }
}

And then, add the mapDispatchToProps function:
const mapDispatchToProps = (dispatch) => {
    return {
        onGetOwnerById: (url, props) => dispatch(repositoryActions.getData(url, props)),
        onDeleteOwner: (url, props) => dispatch(repositoryActions.deleteData(url, props)),
        onCloseSuccessModal: (url, props) => dispatch(repositoryActions.closeSuccessModal(props, url)),
        onCloseErrorModal: () => dispatch(errorHandlerActions.closeErrorModal())
    }
}

So, all of this code is quite familiar (if you had read previous parts).

Finally, let’s modify the export statement:

export default connect(mapStateToProps, mapDispatchToProps)(DeleteOwner);

Implementing JSX in the DeleteOwner Component

To create our view for this component, we need to add the import statements first:

import { Well, Button, Col, Row, ControlLabel } from 'react-bootstrap';
import Moment from 'react-moment';

Right between the render and return blocks, we need to add this code:
let owner = {...this.props.data};

Inside the Aux tag, let’s add a content that we are going to display on the page:
<Row>
   <Col md={10}>
       <Well>
           <Row>
              <Col md={3}>
                 <ControlLabel htmlFor='name'>Owners name:</ControlLabel>
              </Col>
              <Col md={7}>
                  <span name='name'>{owner.name}</span>
              </Col>
           </Row>
           <Row>
              <Col md={3}>
                  <ControlLabel htmlFor='dateOfBirth'>Date of birth:</ControlLabel>
              </Col>
              <Col md={7}>
                  <span name='dateOfBirth'><Moment format="MM/DD/YYYY">{owner.dateOfBirth}</Moment></span>
              </Col>
           </Row>
           <Row>
              <Col md={3}>
                  <ControlLabel htmlFor='address'>Address:</ControlLabel>
              </Col>
              <Col md={7}>
                  <span name='address'>{owner.address}</span>
              </Col>
            </Row>
       </Well>
    </Col>
</Row>

Below the Row tag we need to display the buttons on the page:
<Row>
   <Col mdOffset={8} md={1}>
       <Button type="submit" bsStyle="info" onClick={this.deleteOwner}>Delete</Button>
   </Col>
   <Col md={1}>
        <Button bsStyle='danger' onClick={this.redirectToOwnerList}>Cancel</Button>
   </Col>
</Row>

Finally, let’s add the import statements for the modal components:
import SuccessModal from '../../../components/Modals/SuccessModal/SuccessModal';
import ErrorModal from '../../../components/Modals/ErrorModal/ErrorModal';

Right after that, below the Row tag and right above the Aux tag, let’s add the code for displaying our modal components:
<SuccessModal show={this.props.showSuccessModal} modalHeaderText={'Success message'}
      modalBodyText={'Action completed successfylly'}
      okButtonText={'OK'}
      successClick={() => this.props.onCloseSuccessModal('/owner-List', { ...this.props })} />
<ErrorModal show={this.props.showErrorModal} modalHeaderText={'Error message'}
      modalBodyText={this.props.errorMessage}
      okButtonText={'OK'}
      closeModal={() => this.props.onCloseErrorModal()} />

Now, we can inspect the result:

Result picture

As we can see from the picture above, we don’t have all the data on the page, but we are about to fix that shortly.

Implementing the Business Logic for the Delete Action

To fetch the owner object from the server we are going to add the componentDidMount function right above the render function:

componentDidMount = () => {
    const id = this.props.match.params.id;
    const url = '/api/owner/' + id;
    this.props.onGetOwnerById(url, { ...this.props });
}

Now if we navigate to the OwnerDelete component, we are going to see the page with the correct data:

In order for the Cancel button to work, let’s add this function:

redirectToOwnerList = () => {
    this.props.history.push('/owner-List');
}

Finally, let’s implement the delete action:
deleteOwner = (event) => {
    event.preventDefault();

    const url = "/api/owner/" + this.props.data.id;

    this.props.onDeleteOwner(url, { ...this.props });
}

Great job.

We can check the result:

Delete action

If we click on the OK button, we are going to be directed to the OwnerList component.

Conclusion

Finally, we have finished our journey for this React project. We hope you have enjoyed as much as we did.

Thank you for reading the article and I hope you found something useful in it.