Source: components/userComponents/monitoredArea/configuration/MonitoredAreaConfiguration.js

import React from "react";
import '../../css/CameraList.css';
import {
  deleteMonitoredArea,
  fetchMonitoredAreaList
} from '../../../restmodules/MonitoredAreaRestModule';
import 'react-table/react-table.css';
import { Redirect } from 'react-router-dom';
import Tabs from "react-bootstrap/es/Tabs";
import Tab from "react-bootstrap/es/Tab";
import TableOfMonitoredAreasConfiguration from "./../table/TableOfMonitoredAreasConfiguration";
import { MapOfMonitoredAreasConfiguration } from "../../maps/MapOfMonitoredAreasConfiguration";
import { withNamespaces } from 'react-i18next';

/**
 * Overview of monitored areas
 * @extends Component
 * @hideconstructor
 */
class MonitoredAreaConfiguration extends React.Component {

  /**
   * @constructs
   * @param props
   */
  constructor(props) {
    super(props);
    this.state = {
      selectedMonitoredAreaID: null,
      data: null,
      redirectPath: null,
      tabKey: '1'
    }
  }

  /**
   *
   * @param redirectPath
   */
  redirectTo = (redirectPath) => {
    this.setState({
      redirectPath: redirectPath
    });
  };
  /**
   *
   * @param id
   */
  showEditParamsForm = (id) => {
    if (id) {
      this.redirectTo('/config/parameters/' + id);
    }
  }
  /**
   *
   * @param id
   */
  showEditAnnotationForm = (id) => {
    if (id) {
      this.redirectTo('/config/annotation/' + id);
    }
  }
  /**
   *
   */
  showAddForm = () => {
    this.redirectTo('/config/new');
  }

  showDetailForm = (id) => {
    if (id) {
      this.redirectTo('/config/detail/' + id);
    }
  }
  /**
   *
   * @param id
   */
  showEditForm = (id) => {
    if (id) {
      this.redirectTo('/config/edit/' + id);
    }
  }
  /**
   *
   * @param id
   */
  showLivestream = (id) => {
    if (id) {
      this.redirectTo('live/' + id);
    }
  }

  /**
   *
   * @param id
   */
  handleDelete(id) {
    deleteMonitoredArea(id).then(response => this.updateData());
  }

  /**
   *
   * @param e
   * @param id
   * @param name
   */
  clickedDelete = (e, id, name) => {
    this.setState({
      selectedMonitoredAreaID: id,
    });
    e.stopPropagation();
  }

  /**
   *
   */
  updateData() {
    fetchMonitoredAreaList().then(data => this.setState({
      data: data,
      selectedMonitoredAreaID: null
    }))
    .catch(error => this.setState({ data: [{ name: error.toString() }] }));
  }

  /**
   *
   * @param key
   */
  switchAndSaveTab(key) {
    this.setState({
      tabKey: key
    });

    localStorage.setItem("MACTabKey", key);
  }

  /**
   *
   */
  componentDidMount() {
    this.updateData();

    if (localStorage.hasOwnProperty("MACTabKey")) {
      let tabkey = localStorage.getItem("MACTabKey");

      try {
        this.setState({ tabKey: tabkey });
      }
      catch (e) {
        // handle empty
        this.setState({ tabKey: "1" });
      }
    }
  }

  /**
   *
   * @returns {*}
   */
  render() {
    const { t } = this.props;
    if (this.state.redirectPath) {
      return <Redirect to={this.state.redirectPath}/>
    }

    return (
      <section className="content-header">

        <h1>
          {t('sidebar.adminConfiguration')}
          <small> {t('monitoredArea.editCreateSetupMonitoredArea')}</small>
        </h1>

        <ol className="breadcrumb">
          <li><a href="/config"><i className="fa fa-gear"></i>{t('sidebar.adminConfiguration')}</a></li>
        </ol>

        <br/>

      <div className="row">
        <div className=" col-lg-12">
          <div className="box">
            <div className="box-body">
              <div className="pull-right">
                    <span style={{ padding: '10px' }}>
                      {t('forms.addNewArea')}
                    </span>
                <a className="btn btn-primary"
                   onClick={() => this.showAddForm()}>
                  <i className="fa fa-plus"/>
                </a>

              </div>
              <div>
                <Tabs
                  id="controlled-tab-example"
                  activeKey={this.state.tabKey}
                  onSelect={key => this.switchAndSaveTab(key)}
                >
                  <Tab eventKey="1" title={t('monitoredArea.mapOfMonitoredAreas')}>

                        <MapOfMonitoredAreasConfiguration data={this.state.data}
                                                          onDetail={this.showDetailForm}
                                                          onEditParams={this.showEditParamsForm}
                                                          onEditAnnotations={this.showEditAnnotationForm}
                                                          onDelete={this.clickedDelete}
                                                          onViewLivestream={this.showLivestream}/>
                  </Tab>
                  <Tab eventKey="2" title={t('monitoredArea.tableOfMonitoredAreas')}>
                        <TableOfMonitoredAreasConfiguration data={this.state.data}
                                                            onDetail={this.showDetailForm}
                                                            onEdit={this.showEditForm}
                                                            onEditParams={this.showEditParamsForm}
                                                            onEditAnnotations={this.showEditAnnotationForm}
                                                            onDelete={this.clickedDelete}
                                                            onViewLivestream={this.showLivestream}/>
                  </Tab>
                </Tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
      </section>
    )
  }
}

export default withNamespaces()(MonitoredAreaConfiguration);