Source: components/admin/ExamplesForm.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';
import Rte from './Rte'

const cookies = new Cookies();

/**
 * The form to add or edit case studies
 */
class ExamplesForm extends Component {

    constructor(props) {
        super(props);
        // Form state
        this.state = {
            redirect: false,
            id :0,
            pilotarea_id: 1,
            title: '',
            address_of_project: '',
            gps_coordinates: '',
            usage_form: '',
            heating_capacity: '',
            heating_production: '',
            cooling_capacity: '',
            cooling_production: '',
            seasonal_performance: '',
            number_of_tubes_wells: '',
            depth_of_tubes_wells: '',
            geothermal_coverage_rate: '',
            supply_temperature_borehole: '',
            supply_temperature_heating: '', 
            supply_temperature_cooling: '',
            planning_company: '',
            specialties_of_project: '',
            drilling_company: '',
            heating_installer: '',
            thermal_response_test: '',
            year_of_installation: '',
            web_link: '',
            description: '',
            introduction: '',
            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 });
    }

    /**
     * Submit the form by calling the saveExample action with the form state + token
     */
    submitForm() {
        let token = cookies.get('token');
        let redirect = true;

        this.props.saveExample(this.state.id, this.state.pilotarea_id, this.state.title, this.state.address_of_project, this.state.gps_coordinates, this.state.usage_form, this.state.heating_capacity, this.state.heating_production, this.state.cooling_capacity, this.state.cooling_production, this.state.seasonal_performance, this.state.number_of_tubes_wells, this.state.depth_of_tubes_wells, this.state.geothermal_coverage_rate, this.state.supply_temperature_borehole, this.state.supply_temperature_heating, this.state.supply_temperature_cooling, this.state.planning_company, this.state.specialties_of_project, this.state.drilling_company, this.state.heating_installer, this.state.thermal_response_test, this.state.year_of_installation, this.state.web_link, this.state.description, this.state.introduction,token)
        this.setState({redirect: redirect })
    }

    updateProps(nextProps) {
        let filter = nextProps.examples.filter(example => example.id === Number(nextProps.id));
        
        if(filter.length > 0) {
            filter = filter[0];
            this.setState({
                id : filter.id,
                pilotarea_id: filter.pilotarea_id,
                title: filter.title,
                address_of_project: filter.address_of_project,
                gps_coordinates: filter.gps_coordinates,
                usage_form: filter.usage_form,
                heating_capacity: filter.heating_capacity,
                heating_production: filter.heating_production,
                cooling_capacity: filter.cooling_capacity,
                cooling_production: filter.cooling_production,
                seasonal_performance: filter.seasonal_performance,
                number_of_tubes_wells: filter.number_of_tubes_wells,
                depth_of_tubes_wells: filter.depth_of_tubes_wells,
                geothermal_coverage_rate: filter.geothermal_coverage_rate,
                supply_temperature_borehole: filter.supply_temperature_borehole,
                supply_temperature_heating: filter.supply_temperature_heating, 
                supply_temperature_cooling: filter.supply_temperature_cooling,
                planning_company: filter.planning_company,
                specialties_of_project: filter.specialties_of_project,
                drilling_company: filter.drilling_company,
                heating_installer: filter.heating_installer,
                thermal_response_test: filter.thermal_response_test,
                year_of_installation: filter.year_of_installation,
                web_link: filter.web_link,
                description: filter.description,
                introduction: filter.introduction,
                deleteButton: true
            })
        }

    }

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

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

    /**
     * Change the selected pilot area (custom select field)
     * @param  {} value
     */
    changePilotArea(value) {
        this.setState({pilotarea_id: value.value})
    }

    /**
     * Update the description state (rich text editor)
     * @param  {} input
     */
    updateText(input) {
        this.setState({description: input});
    }

    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> Example</h4>

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

                      <div className="form-item">
                        <label className="centered">Title:</label>
                        <input name="title" type="text" value={this.state.title} placeholder="Enter the title here.." 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">Address of Project:</label>
                        <input name="address_of_project" type="text" value={this.state.address_of_project} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">GPS:</label>
                        <input name="gps_coordinates" type="text" value={this.state.gps_coordinates} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Usage form:</label>
                        <input name="usage_form" type="text" value={this.state.usage_form} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Heating capacity:</label>
                        <input name="heating_capacity" type="text" value={this.state.heating_capacity} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Heating production:</label>
                        <input name="heating_production" type="text" value={this.state.heating_production} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Cooling capacity:</label>
                        <input name="cooling_capacity" type="text" value={this.state.cooling_capacity} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Cooling production:</label>
                        <input name="cooling_production" type="text" value={this.state.cooling_production} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Seasonal performance:</label>
                        <input name="seasonal_performance" type="text" value={this.state.seasonal_performance} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Number of tubes / wells:</label>
                        <input name="number_of_tubes_wells" type="text" value={this.state.number_of_tubes_wells} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Depth of tubes / wells:</label>
                        <input name="depth_of_tubes_wells" type="text" value={this.state.depth_of_tubes_wells} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Geothermal coverage rate:</label>
                        <input name="geothermal_coverage_rate" type="text" value={this.state.geothermal_coverage_rate} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Supply temperature borehole:</label>
                        <input name="supply_temperature_borehole" type="text" value={this.state.supply_temperature_borehole} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Supply temperature heating:</label>
                        <input name="supply_temperature_heating" type="text" value={this.state.supply_temperature_heating} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Supply temperature cooling:</label>
                        <input name="supply_temperature_cooling" type="text" value={this.state.supply_temperature_cooling} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Thermal response test:</label>
                        <input name="thermal_response_test" type="text" value={this.state.thermal_response_test} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Year of installation:</label>
                        <input name="year_of_installation" type="text" value={this.state.year_of_installation} onChange={(event) => this.updateField(event)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Web link:</label>
                        <input name="web_link" type="text" value={this.state.web_link} onChange={(event) => this.updateField(event)} />
                      </div>
                     

                    
                      <div className="form-item">
                        <label className="centered">Planning company:</label>
                        <textarea name="planning_company" rows="8" value={this.state.planning_company} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Specialties of project:</label>
                        <textarea name="specialties_of_project" rows="8" value={this.state.specialties_of_project} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Drilling company:</label>
                        <textarea name="drilling_company" rows="8" value={this.state.drilling_company} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Heating installer:</label>
                        <textarea name="heating_installer" rows="8" value={this.state.heating_installer} onChange={(event) => this.updateField(event)}></textarea>
                      </div>
                      <div className="form-item">
                        <label className="centered">Description:</label>
                        <Rte content={this.state.description} updateText={(input) => this.updateText(input)} />
                      </div>
                      <div className="form-item">
                        <label className="centered">Introduction:</label>
                        <textarea name="introduction" rows="8" value={this.state.introduction} 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 ExamplesForm