DeleteUserModal.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 userManagementActions from '../../actions/UserManagementActions'

const mapStateToProps = state => {
    return {
        accessToken: state.AuthenticationReducer.accessToken,
        showDeleteUserModal: state.UserManagementReducer.showDeleteUserModal,
        deleteModalData: state.UserManagementReducer.deleteModalData
    };
}

class DeleteUserModal extends Component {

    constructor(props) {
        super(props);

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

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

    handlePushDelete(e) {
        e.preventDefault();
        const { pushDeleteUserModalAction } = this.props;
        pushDeleteUserModalAction(this.props.deleteModalData.userID, this.props.accessToken)
    }

    render() {

        var showModal = this.props.showDeleteUserModal
        if (showModal === undefined) {
            showModal = false
        }
        let dialogID
        let name
        if (this.props.deleteModalData) {
            dialogID = this.props.deleteModalData.dialogID;
            name = this.props.deleteModalData.name;
        } else {
            dialogID = ""
            name = ""
        }

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

                    <Modal.Body style={{ textAlign: 'left' }}>
                        <p>Soll User {name} 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({
    hideDeleteUserModalAction: userManagementActions.getHideDeleteUserModalAction,
    pushDeleteUserModalAction: userManagementActions.deleteUserWithID
}, dispatch)

const ConnectedDeleteUserModal = connect(mapStateToProps, mapDispatchToProps)(DeleteUserModal)
export default ConnectedDeleteUserModal