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

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

/**
 * Form fon creating new zone.
 * @extends Component
 * @hideconstructor
 */
class AddNewZone extends React.Component {
  /**
   * @constructs
   * @param props
   */
  constructor(props) {
        super(props);
        this.state = {
            zones: [],
            monitoredArea: {name: null}
        }
    }

  /**
   *
   */
    componentDidMount() {
        fetchZones(this.props.match.params.id)
            .then(response =>
                this.setState({
                    zones: response,
                    toAreaAnnotation: false
                })
            );
      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
   */
    createZone = (name, cameraVertices, worldVertices) => {
        const data = {
            name: name,
            cameraVertices: cameraVertices,
            worldVertices: worldVertices
        };
        createZone(this.props.match.params.id, data)
            .then(response => {
                if (response.status === 201) {
                    this.closeScreen();
                }
            });
    };
  /**
   *
   */
    closeScreen = () => {
        this.setState({
            toAreaAnnotation: true
        });
    };

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

            <h1>
              {t("forms.additionOfNewZoneForMonitoredArea")}
              <small> {t('forms.createNewZoneForMonitoredArea')}</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 + "/new"}>{t('forms.additionOfNewZoneForMonitoredArea')}</a></li>
            </ol>

            <br/>

            <div className="row">
              <div className="col-lg-12">
                <div className=" box">
                        <div className="box-header with-border">
                            <h3 className="box-title">
                              {t('forms.createNewZoneFor')}{this.state.monitoredArea.name != null ? this.state.monitoredArea.name : ""}
                            </h3>
                            <a className="btn-lg pull-right" onClick={this.closeScreen}>
                                <i className="fa fa-remove">
                                </i>
                            </a>
                        </div>
                        <div className="box-body">
                            <ZoneEditor
                                monitoredAreaID={this.props.match.params.id}
                                zones={this.state.zones}
                                onEditorSubmit={(name, cameraVertices, worldVertices) => this.createZone(name, cameraVertices, worldVertices)}
                                submitLabel={t('forms.create')}
                                showNames={false}
                                closeScreen={() => this.closeScreen()}
                            />
                        </div>
                    </div>
                </div>
            </div>
          </section>
        )
    }
}

export default withNamespaces()(AddNewZone);