Source: components/admin/UnitForm.js

import React, { Component } from 'react'
import Header from '../header/Header'
import Subheader from '../subheader/Subheader'
import { Redirect, Link } from 'react-router-dom'
import Select from 'react-select';
import './Superuser.css'
import getTranslation from '../../i18n/'
import Cookies from 'universal-cookie';

const cookies = new Cookies();

/**
 * Form to add or edit a unit for the virtual boreholes
 */
class UnitForm extends Component {

    constructor(props) {
        super(props);
        this.state = {
            redirect: false,
            id: 0,
            pilotarea_id: 1,
            title_en: '',
            title_de: '',
            title_cz: '',
            title_pl: '',
            title_sk: '',
            title_sl: '',
            identifier: '',
            description_de: '',
            description_en: '',
            description_sk: '',
            description_sl: '',
            description_pl: '',
            description_cz: '',
            errors: [],
            color: '',
            deleteButton: false,
            deleteButtonExpanded: false
        }
    }

    componentDidMount() {

        if(Number(this.props.id) !== 0) {
          this.updateProps(this.props);
        }

        if(!this.props.user.superuser) {
            this.setState({redirect: true})
        }
    }

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

    /**
     * Save the unit by dispatching the save
     */
    submitForm() {
    
        let token = cookies.get('token');
        let redirect = true;

        this.props.saveUnit(this.state.id, this.state.color, this.state.pilotarea_id, this.state.identifier, this.state.title_en, this.state.title_de, this.state.title_cz, this.state.title_pl, this.state.title_sk, this.state.title_sl, this.state.description_en, this.state.description_de, this.state.description_cz, this.state.description_pl, this.state.description_sk, this.state.description_sl, token)
        this.setState({redirect: redirect })
    }

    updateProps(nextProps) {
        
        let filter = nextProps.units.filter(unit => unit.id === Number(nextProps.id));
        
        if(filter.length > 0) {
            filter = filter[0];
            this.setState({
                id: filter.id,
                pilotarea_id: filter.pilotarea_id,
                title_en: filter.title_en,
                title_de: filter.title_de,
                title_cz: filter.title_cz,
                title_pl: filter.title_pl,
                title_sk: filter.title_sk,
                title_sl: filter.title_sl,
                identifier: filter.identifier,
                description_de: filter.description_de,
                description_en: filter.description_en,
                description_sk: filter.description_sk,
                description_sl: filter.description_sl,
                description_pl: filter.description_pl,
                description_cz: filter.description_cz,
                color: filter.color,
                deleteButton: true
            })
        }

    }

    componentWillReceiveProps(nextProps) {
        if(Number(nextProps.id) !== 0) {
            this.updateProps(nextProps);
        }
    }

    /**
     * Toggle the delete buttons
     */
    toggleDelete() {
        this.setState({deleteButtonExpanded: !this.state.deleteButtonExpanded})
    }

    /**
     * Remove the unit by dispatching the removeUnit action
     */
    removeUnit() {
        let token = cookies.get('token');
        this.props.removeUnit(this.props.id, token);
        this.setState({redirect: true})
    }

    changePilotArea(value) {
        this.setState({pilotarea_id: value.value})
    }

    render() {

        let pilotareas = [];

        this.props.pilotareas.map(area =>
            pilotareas.push({
                value: area.id,
                label: getTranslation(area.name)
            })
        )

        return(
            <div>
            {this.state.redirect &&
                <Redirect to="/experts/superuser" />
            }
               <Header />
              <div className="container container-small">
                <Subheader title="expert.subheader.title.contribute" />
                <div className="default-element">

                  <div className="default-element-content">
                  <h4><i className="fa fa-calendar" aria-hidden="true"></i> Unit</h4>

                  <div className="user-profile form-container">

                      <div className="form-item">
                        <label className="centered">Identifier:</label>
                        <input name="identifier" type="text" value={this.state.identifier} placeholder="Enter the identifier here.." onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Color:</label>
                        <input name="color" type="text" value={this.state.color} placeholder="Enter the color hexcode.." onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Pilotarea:</label>
                        <Select
                            name="pilotarea_id"
                            value={Number(this.state.pilotarea_id)}
                            options={pilotareas}
                            clearable={false}
                            onChange={(value) => this.changePilotArea(value)}
                        />
                      </div>
                      <div className="form-item">
                        <label className="centered">Title EN:</label>
                        <input name="title_en" type="text" value={this.state.title_en} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Title DE:</label>
                        <input name="title_de" type="text" value={this.state.title_de} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Title CZ:</label>
                        <input name="title_cz" type="text" value={this.state.title_cz} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Title PL:</label>
                        <input name="title_pl" type="text" value={this.state.title_pl} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Title SK:</label>
                        <input name="title_sk" type="text" value={this.state.title_sk} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Title SL:</label>
                        <input name="title_sl" type="text" value={this.state.title_sl} placeholder="Enter the title here.." onChange={(event) => this.updateField(event)} />
                      </div>


                      <div className="form-item">
                        <label className="centered">Description EN:</label>
                        <textarea name="description_en" rows="8" value={this.state.description_en} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Description DE:</label>
                        <textarea name="description_de" rows="8" value={this.state.description_de} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Description CZ:</label>
                        <textarea name="description_cz" rows="8" value={this.state.description_cz} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Description PL:</label>
                        <textarea name="description_pl" rows="8" value={this.state.description_pl} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Description SK:</label>
                        <textarea name="description_sk" rows="8" value={this.state.description_sk} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Description SL:</label>
                        <textarea name="description_sl" rows="8" value={this.state.description_sl} onChange={(event) => this.updateField(event)}></textarea>
                      </div>

                     


                      <div className="user-profile-item">
                      <button className="btn btn-green btn-icon btn-save" onClick={() => this.submitForm()}>Save unit</button>
                      <Link to="/experts/superuser"><button className="btn btn-gray btn-icon btn-cancel">{getTranslation("forms.general.button.cancel")}</button></Link>
                      {((!this.state.deleteButtonExpanded) && (this.state.deleteButton)) &&
                          <button className="btn btn-red btn-icon btn-delete" onClick={() => this.toggleDelete()}>{getTranslation("forms.general.button.delete")}</button>
                      }
                      {this.state.deleteButtonExpanded &&
                          <span>
                              <button className="btn btn-red btn-icon btn-delete" onClick={() => this.removeUnit()}>{getTranslation("forms.general.button.confirm_delete")}</button>
                              <button className="btn btn-gray btn-icon btn-cancel" onClick={() => this.toggleDelete()}>{getTranslation("forms.general.button.cancel_delete")}</button>
                          </span>
                      }
                      </div>


                  </div>
                  </div>
              </div>
            </div>
            </div>
        )
    }
}

export default UnitForm