Source: components/admin/NotesForm.js

import React, { Component } from 'react'
import Header from '../header/Header'
import Subheader from '../subheader/Subheader'
import { Redirect, Link } from 'react-router-dom'
import './Superuser.css'
import getTranslation from '../../i18n/'
import Cookies from 'universal-cookie';
const cookies = new Cookies();

/**
 * The form to add / edit explanatory notes for the web GIS layers
 */
class NotesForm extends Component {

    constructor(props) {
        super(props);
        this.state = {
            redirect: false,
            active: 'notes',
            id: 0,
            key: '',
            explanatory_note: '',
            explanatory_note_de: '',
            explanatory_note_cz: '',
            explanatory_note_pl: '',
            explanatory_note_sk: '',
            explanatory_note_sl: '',
            layer_description: '',
            layer_description_de: '',
            layer_description_cz: '',
            layer_description_pl: '',
            layer_description_sk: '',
            layer_description_sl: '',
            errors: [],
            required: [
                "keyword"
            ],
            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;

        let errors = this.state.errors;

        if(this.state.required.indexOf(name) !== -1) {
            if(value === '') {
                errors[name] = true;
            } else {
                errors[name] = false;
            }
        }

        this.setState({ [name] : value, errors: errors });
    }

    /**
     * Submit the form and save the explanatory note
     * by dispatching the saveNote action with the form state and the JWT token
     */
    submitForm() {
        let errorMessages = [];
        let errors = this.state.errors;
        let required = [];
        this.state.required.map(field => {
            if(this.state[field] === '') {
                required.push(field);
                errors[field] = true;
            }

        })

        if(required.length > 0) {
            errorMessages.push("forms.general.error.message.fields_required");
        }

        let redirect = false;
         if(errorMessages.length === 0) {
            let token = cookies.get('token');
            redirect = true;

            this.props.saveNote(this.state.id, this.state.key, this.state.explanatory_note, this.state.explanatory_note_de, this.state.explanatory_note_cz, this.state.explanatory_note_pl, this.state.explanatory_note_sk, this.state.explanatory_note_sl, this.state.layer_description, this.state.layer_description_de, this.state.layer_description_cz, this.state.layer_description_pl, this.state.layer_description_sk, this.state.layer_description_sl, token)
            this.setState({redirect: redirect, errors: errors, errorMessages: errorMessages })
        }

    }

    updateProps(nextProps) {

        let filter = nextProps.explanatorynotes.filter(entry => entry.id === Number(nextProps.id));
        if(filter.length > 0) {
            filter = filter[0];
            this.setState({
                id: filter.id,
                key: filter.key,
                layer_description: filter.layer_description,
                layer_description_de: filter.layer_description_de,
                layer_description_cz: filter.layer_description_cz,
                layer_description_pl: filter.layer_description_pl,
                layer_description_sk: filter.layer_description_sk,
                layer_description_sl: filter.layer_description_sl,
                explanatory_note: filter.explanatory_note,
                explanatory_note_de: filter.explanatory_note_de,
                explanatory_note_cz: filter.explanatory_note_cz,
                explanatory_note_pl: filter.explanatory_note_pl,
                explanatory_note_sk: filter.explanatory_note_sk,
                explanatory_note_sl: filter.explanatory_note_sl,
            })
        }

    }

    componentWillReceiveProps(nextProps) {

        if(Number(nextProps.id) !== 0) {
            this.updateProps(nextProps);
        }
    }
    
    /**
     * Toggle the delete buttons
     */
    toggleDelete() {
        this.setState({deleteButtonExpanded: !this.state.deleteButtonExpanded})
    }

    render() {

        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> Glossary entry</h4>

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

                      <div className="form-item">
                        <label className="centered">Key:{this.state.errors.key && <span className="validation-error">{getTranslation('forms.general.error.hints.field_required')}</span>}</label>
                        <input className={(this.state.errors.key ? 'v-error' : 'v-check')} name="key" type="text" value={this.state.key} placeholder="Enter the key here.." onChange={(event) => this.updateField(event)} />

                      </div>


                      <div className="form-item">
                        <label className="centered">Explanatory note:</label>
                        <textarea name="explanatory_note" rows="8" value={this.state.explanatory_note} onChange={(event) => this.updateField(event)}></textarea>
                      </div>

                      <div className="form-item">
                        <label className="centered">Explanatory note DE:</label>
                        <textarea name="explanatory_note_de" rows="8" value={this.state.explanatory_note_de} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Explanatory note CZ:</label>
                        <textarea name="explanatory_note_cz" rows="8" value={this.state.explanatory_note_cz} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Explanatory note PL:</label>
                        <textarea name="explanatory_note_pl" rows="8" value={this.state.explanatory_note_pl} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Explanatory note SK:</label>
                        <textarea name="explanatory_note_sk" rows="8" value={this.state.explanatory_note_sk} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Explanatory note SL:</label>
                        <textarea name="explanatory_note_sl" rows="8" value={this.state.explanatory_note_sl} onChange={(event) => this.updateField(event)}></textarea>
                      </div>

                      <div className="form-item">
                        <label className="centered">Layer description:</label>
                        <textarea name="layer_description" rows="8" value={this.state.layer_description} onChange={(event) => this.updateField(event)}></textarea>
                      </div>

                      <div className="form-item">
                        <label className="centered">Layer description DE:</label>
                        <textarea name="layer_description_de" rows="8" value={this.state.layer_description_de} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Layer description CZ:</label>
                        <textarea name="layer_description_cz" rows="8" value={this.state.layer_description_cz} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Layer description PL:</label>
                        <textarea name="layer_description_pl" rows="8" value={this.state.layer_description_pl} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Layer description SK:</label>
                        <textarea name="layer_description_sk" rows="8" value={this.state.layer_description_sk} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Layer description SL:</label>
                        <textarea name="layer_description_sl" rows="8" value={this.state.layer_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 note</button>
                      <Link to="/experts/contribute/overview"><button className="btn btn-gray btn-icon btn-cancel">{getTranslation("forms.general.button.cancel")}</button></Link>

                      </div>


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

export default NotesForm