Source: components/admin/UserDetail.js

import React, { Component } from 'react'
import Cookies from 'universal-cookie';

/**
 * Form to change user details as admin (projectpartner setting, confirmation of user, deactivate a user)
 */
class UserDetail extends Component {

    constructor(props) {
        super(props);
        this.state = { user: props.user}
    }

    /**
     * Update the field state on input
     * @param  {} event
     */
    updateField(event) {
        const target = event.target;
        const name = target.name.split("-")[0];
        const value = target.type === 'checkbox' ? target.checked : target.value;
        let user = this.state.user;
        user[name] = value;
        this.setState({ user : user });

    }
    
    /**
     * Hide the user details in the list of users
     */
    closeDetails() {
        this.props.unClickUser();
    }

    /**
     * Save changes to the user by dispatching the changeUserDetailsSuperuser action
     */
    saveChanges() {
        const cookies = new Cookies();
        let token = cookies.get('token');
        this.props.changeUserDetailsSuperuser(this.state.user.id, this.state.user.username, this.state.user.email, this.state.user.confirmed, this.state.user.projectpartner, this.state.user.deactivated, token)
    }

    render() {

        return(

            <div className="superuser-userdetail">

                {((this.props.fetching.formRequest.form === 'changeuserdetailssuper') && (this.props.fetching.formRequest.isFetching)) &&
                    <div className="fetching-overlay">
                      <div className="loader"></div>
                    </div>
                }

                <label>Username:</label>
                <input onChange={(event) => this.updateField(event)} name="username-form" type="text" value={this.state.user.username} />

                <label>Email:</label>
                <input onChange={(event) => this.updateField(event)} name="email-form" type="text" value={this.state.user.email} />

                <input onChange={(event) => this.updateField(event)} id="confirmed-form" name="confirmed-form" type="checkbox" checked={this.state.user.confirmed} />
                <label htmlFor="confirmed-form" className="checkbox-label">User is confirmed</label><br />
                <input id="projectpartner-form" name="projectpartner-form" type="checkbox" checked={this.state.user.projectpartner} onChange={(event) => this.updateField(event)} />
                <label htmlFor="projectpartner-form" className="checkbox-label">User is project partner of GeoPLASMA-CE</label><br />
                <input id="deactivated-form" name="deactivated-form" type="checkbox" checked={this.state.user.deactivated} onChange={(event) => this.updateField(event)} />
                <label htmlFor="deactivated-form" className="checkbox-label">User deactivated</label>
                <div className="btn-group">
                    <button onClick={() => this.saveChanges()} className="btn btn-green">Save changes</button>
                    <button onClick={() => this.closeDetails()} className="btn btn-green">Close Details</button>
                </div>

            </div>
        )
    }
}

export default UserDetail