Source: components/userComponents/monitoredArea/Annotation/zones/EditZone.js

import React from 'react';
import {updateZone, fetchZone} from '../../../../restmodules/ZoneRestModule';
import ZoneEditor from './ZoneEditor';
import {Redirect} from 'react-router-dom';
import { fetchMonitoredArea } from '../../../../restmodules/MonitoredAreaRestModule';
import { withNamespaces } from 'react-i18next';

/**
 * Form for editing a zone
 * @extends Component
 * @hideconstructor
 */
class EditZone extends React.Component {
  /**
   * @constructs
   * @param props
   */
    constructor(props) {
        super(props);
        this.state = {
            zoneData: {},
            toAreaAnnotation: false,
            loaded: false,
            monitoredArea: {name: null}
        }

        this.closeScreen = this.closeScreen.bind(this);
    }

  /**
   *
   */
    componentDidMount() {
        fetchZone(this.props.match.params.id, this.props.match.params.zoneId)
            .then(response => {
                this.setState({
                    zoneData: response,
                    loaded: true
                })
            });
        fetchMonitoredArea(this.props.match.params.id)
        .then(data => this.setState({ monitoredArea: data }))
        .catch(error => this.setState({ monitoredArea: [{ name: error.toString() }] }));

    }

  /**
   *
   * @param name
   * @param cameraVertices
   * @param worldVertices
   */
    updateZone = (name, cameraVertices, worldVertices) => {
        let zone = this.state.zoneData;
        zone.name = name;
        if (cameraVertices.length > 0) zone.cameraVertices = cameraVertices;
        if (worldVertices !== undefined && worldVertices !== null && worldVertices.points.length > 0) {
            zone.worldVertices = worldVertices;
        }
        updateZone(this.props.match.params.id, zone)
            .then(response => {
                if (response.status === 200) {
                    this.closeScreen();
                }
            });
    };

  /**
   *
   */
    closeScreen() {
        console.log("closing");
        this.setState({
            toAreaAnnotation: true
        });
    };

  /**
   *
   * @returns {*}
   */
    render() {
        const { t } = this.props;
        let zone = [];
        zone.push(this.state.zoneData);
        if (this.state.toAreaAnnotation === true) {
            return <Redirect to={'/annotation/' + this.props.match.params.id}/>
        }
        return (
            <section className="content-header">

              <h1>
                {t('forms.editZoneFromMonitoredArea')}
                <small> {t('forms.editExistingZoneFromMonitoredArea')}</small>
              </h1>

              <ol className="breadcrumb">
                <li><a href="/config"><i className="fa fa-gear"></i>{t('sidebar.adminConfiguration')}</a></li>
                <li><a href={"/config/annotation/" + this.props.match.params.id}>{t('annotate.annotationOfMonitoredArea')}</a></li>
                <li><a href={"/annotation/" + this.props.match.params.id + "/edit/" + this.state.zoneData['zoneNumber']}>{t('forms.editZoneFromMonitoredArea')}</a></li>
              </ol>

              <br/>

              <div className="row">
                  <div className="col-lg-12">
                    <div className=" box">

                    <div className="col-md-12">
                        <div className="box">
                            <div className="box-header with-border">
                                <h3 className="box-title">
                                  {t('forms.editZoneFrom')}{this.state.monitoredArea.name != null ? this.state.monitoredArea.name : ""}
                                  </h3>
                            </div>
                            <ZoneEditor
                                monitoredAreaID={this.props.match.params.id}
                                zones={zone}
                                onEditorSubmit={(name, cameraVertices, worldVertices) => this.updateZone(name, cameraVertices, worldVertices)}
                                submitLabel={t('forms.update')}
                                showNames={false}
                                nameOfZone={this.state.zoneData['name']}
                                zoneId={this.state.zoneData['zoneNumber']}
                                closeScreen={() => this.closeScreen()}
                            />
                        </div>
                    </div>
                </div>
                  </div>
              </div>
            </section>
        )
    }

}

export default withNamespaces()(EditZone);