EditUser.js

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

import * as userManagementActions from "../state/UserManagementActions"

const mapStateToProps = state => {
    return {
        accessToken: state.AuthenticationReducer.accessToken
    };
}

class EditUser extends Component {

    constructor(props) {
        super(props);
        this.state = {
            userID: '',
            firstName: '',
            lastName: '',
            password: '',
            isAdministrator: this.props.editUser.isAdministrator
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        const { name, value } = e.target;
        if (name === 'isAdministrator') {
            if (e.target.checked) {
                this.setState({ [name]: true })
            } else {
                this.setState({ [name]: false })
            }
        } else {
            this.setState({ [name]: value })
        }
    }

    handleSubmit(e) {
        e.preventDefault()
        const { editUserWithIDAction } = this.props
        editUserWithIDAction(this.state, this.props.editUser.userID, this.props.accessToken)
    }



    render() {
        return (
            <div id="UserManagementPageEditComponent" style={{ display: 'flex', justifyContent: 'center', textAlign: 'left', background: '#fff', borderRadius: '30px', padding: '2rem' , margin: '3rem'}}>
                <Form style={{ width: '60rem' }}>
                    <h2>Benutzer {this.props.editUser.userID} bearbeiten</h2>
                    <Form.Group className="mb-3">
                        <Form.Label>User-ID</Form.Label>
                        <Form.Control name="userID" id="EditUserComponentEditUserID" type="text" disabled={true} defaultValue={this.props.editUser.userID} />
                        <Form.Text className="text-muted">
                            Die User-ID kann nicht geändert werden.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Vorname</Form.Label>
                        <Form.Control name="firstName" id="EditUserComponentEditFirstName" type="text" placeholder="Bitte Vornamen eingeben" defaultValue={this.props.editUser.firstName} onChange={this.handleChange} />
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Nachname</Form.Label>
                        <Form.Control name="lastName" id="EditUserComponentEditLastName" type="text" placeholder="Bitte Nachnamen eingeben" defaultValue={this.props.editUser.lastName} onChange={this.handleChange} />
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Passwort</Form.Label>
                        <Form.Control name="password" id="EditUserComponentEditPassword" type="password" placeholder="Passwort" onChange={this.handleChange} />
                        <Form.Text className="text-muted">
                            Wenn das Passwort gesetzt wird, wird es im Backend geändert!
                        </Form.Text>
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Check name="isAdministrator" id="EditUserComponentEditIsAdministrator" type="checkbox" label="Administrator-Rechte" style={{ color: '#0eb30e' }} onChange={this.handleChange} defaultChecked={this.props.editUser.isAdministrator} />
                    </Form.Group>
                    <Button style={{marginRight: '1rem'}} id="EditUserComponentSaveUserButton" variant="primary" type="submit" onClick={this.handleSubmit}>
                        Speichern
                    </Button>
                    <Button id="OpenUserManagementPageListComponentButton" variant="primary" type="submit" onClick={this.props.goBack}>
                        User-Liste
                    </Button>
                </Form>
            </div >
        )
    }
}

const mapDispatchToProps = dispatch => bindActionCreators({
    editUserWithIDAction: userManagementActions.editUserWithID
}, dispatch)

const ConnectedEditUser = connect(mapStateToProps, mapDispatchToProps)(EditUser)
export default ConnectedEditUser