DeleteDegreeCourseModal.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 degreeCourseManagementActions from "../state/DegreeCourseManagementActions"

const mapStateToProps = state => {
    return {
        accessToken: state.AuthenticationReducer.accessToken,
        showDeleteDegreeCourseModal: state.DegreeCourseReducer.showDeleteDegreeCourseModal,
        deleteDegreeCourseModalData: state.DegreeCourseReducer.deleteDegreeCourseModalData
    };
}

class DeleteDegreeCourseModal extends Component {

    constructor(props) {
        super(props);

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

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

    handlePushDelete(e) {
        e.preventDefault();
        const { pushDeleteDegreeCourseModalAction } = this.props;
        pushDeleteDegreeCourseModalAction(this.props.deleteDegreeCourseModalData.degreeCourseID, this.props.accessToken)
    }

    render() {

        var showModal = this.props.showDeleteDegreeCourseModal
        if (showModal === undefined) {
            showModal = false
        }
        let dialogID
        let degreeCourseName
        if (this.props.deleteDegreeCourseModalData) {
            dialogID = this.props.deleteDegreeCourseModalData.dialogID;
            degreeCourseName = this.props.deleteDegreeCourseModalData.name;
        } else {
            dialogID = ""
            degreeCourseName = ""
        }

        return (
            <div className="modal show" id="DegreeCourseManagementPageDeleteComponent" style={{ display: 'block', position: 'initial' }}>
                <Modal show={showModal} id={dialogID} onHide={this.handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>Studiengang {degreeCourseName} löschen?</Modal.Title>
                    </Modal.Header>

                    <Modal.Body style={{ textAlign: 'left' }}>
                        <p>Soll Studiengang {degreeCourseName} 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({
    hideDeleteDegreeCourseModalAction: degreeCourseManagementActions.getHideDeleteDegreeCourseModalAction,
    pushDeleteDegreeCourseModalAction: degreeCourseManagementActions.deleteDegreeCourseWithID
}, dispatch)

const ConnectedDeleteDegreeCourseModal = connect(mapStateToProps, mapDispatchToProps)(DeleteDegreeCourseModal)
export default ConnectedDeleteDegreeCourseModal