DeleteApplicationModal.js

import React, { Component } from "react";
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import * as applicationmanagementActions from '../../actions/ApplicationManagementActions'

const mapStateToProps = state => {
    return {
        accessToken: state.AuthenticationReducer.accessToken,
        showDeleteApplicationModal: state.DegreeCourseApplicationReducer.showDeleteApplicationModal,
        deleteApplicationModalData: state.DegreeCourseApplicationReducer.deleteApplicationModalData
    };
}

class DeleteApplicationModal extends Component {

    constructor(props) {
        super(props);

        this.handleClose = this.handleClose.bind(this);
        this.handlePushDelete = this.handlePushDelete.bind(this);
    }

    handleClose() {
        const { hideDeleteApplicationModalAction } = this.props;
        hideDeleteApplicationModalAction();
    }

    handlePushDelete(e) {
        e.preventDefault();
        const { pushDeleteApplicationModalAction } = this.props;
        pushDeleteApplicationModalAction(this.props.deleteApplicationModalData.applicationID, this.props.accessToken)
    }

    render() {

        var showModal = this.props.showDeleteApplicationModal
        if (showModal === undefined) {
            showModal = false
        }
        let dialogID
        let applicationName
        let applicantName
        let universityName
        if (this.props.deleteApplicationModalData) {
            dialogID = this.props.deleteApplicationModalData.dialogID;
            applicationName = this.props.deleteApplicationModalData.name;
            applicantName = this.props.deleteApplicationModalData.user;
            universityName = this.props.deleteApplicationModalData.universityName;
        } else {
            dialogID = ""
            applicationName = ""
        }

        return (
            <div className="modal show" id="ApplicationManagementPageDeleteComponent" style={{ display: 'block', position: 'initial' }}>
                <Modal show={showModal} id={dialogID} onHide={this.handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>Bewerbung von {applicantName} für {applicationName} löschen?</Modal.Title>
                    </Modal.Header>

                    <Modal.Body style={{ textAlign: 'left' }}>
                        <p>Soll die Bewerbung von {applicantName} für den Studiengang {applicationName} an der {universityName} gelöscht werden?</p>
                    </Modal.Body>

                    <Modal.Footer>
                        <Button variant="secondary" id="DeleteDialogCancelButton" onClick={this.handleClose}>Cancel</Button>
                        <Button variant="primary" id="DeleteDialogConfirmButton" onClick={this.handlePushDelete}>Delete</Button>
                    </Modal.Footer>
                </Modal>
            </div >
        )
    }
}


const mapDispatchToProps = dispatch => bindActionCreators({
    hideDeleteApplicationModalAction: applicationmanagementActions.getHideDeleteApplicationModalAction,
    pushDeleteApplicationModalAction: applicationmanagementActions.deleteApplicationWithID
}, dispatch)

const ConnectedDeleteApplicationModal = connect(mapStateToProps, mapDispatchToProps)(DeleteApplicationModal)
export default ConnectedDeleteApplicationModal