Source: LayerControl.js

import React, { Component } from 'react'
import getTranslation from '../../i18n/'
import './LayerControl.css'
import Cookies from 'universal-cookie';

/** Initialize the use of cookies to get the token for authorization */
const cookies = new Cookies();

/**
* Via this component, the GeoServer is mainly controlled.
* Layers can be added to the web GIS after selecting a pilotarea
*/
class LayerControl extends Component {

    constructor(props) {
        super(props);
        this.state = {
            fetched: false,
            area: '',
            rejected: []
        }
    }

    /**
    * This function fetches the layers from the geoserver that area online
    * for the given pilotarea. It fetches via the getLayers action (SuperuserContainer -> Superuser -> LayerControl)
    *@param {string} area - the uri string of the pilotarea
    */
    getLayers(area) {
        this.props.getLayers(area);
        this.setState({ fetched: true, area: area })
    }

    /**
    * This function parses the Excel files for the specified pilotarea
    * The pilotarea was specified in the getLayers function
    * Parsing via the readExcelFile action (SuperuserContainer -> Superuser -> LayerControl)
    *@param {object} layers - the response object from the getLayers function
    * Function can only be called after the getLayers function (UI is hidden before)
    */
    checkExcelFile(layers) {
        /** Get the authorization token from the cookies */
        let token = cookies.get('token');
        this.props.readExcelFile(this.props.pilotareas.filter(area => area.uri === this.state.area)[0].excel_identifier, token, layers)
    }

    rejectLayer(index) {
      let rejected = this.state.rejected;
      rejected.push(this.props.fetching.dataFetching.message.compared.layers[index].filename)
      this.setState({ rejected: rejected})
    }

    /**
    * This function starts the proccess of copying the layers from the "Inbox" to our server
    * and adding them to the GeoServer for serving them to the web GIS
    * This happens via the addLayers action (SuperuserContainer -> Superuser -> LayerControl)
    * Function can only be called after checkExcelFile function (UI is hidden before)
    */
    addLayers() {
        /** Get the authorization token from the cookies */
        let token = cookies.get('token');
        let layers = this.props.fetching.dataFetching.message.compared.layers
        if(this.state.rejected.length > 0) {
          let accepted = [];
          layers.map(layer => {
            if(this.state.rejected.filter(rejected => rejected === layer.filename).length === 0) {
              accepted.push(layer);
            }

          })
          layers = accepted
        }

        this.props.addLayers(this.state.area, token, layers)
    }

    render() {
        let layers = [];
        if(this.props.layers.length > 0) {
            this.props.layers.map(layer => {
                if(layer.children.length === 0) {
                    layers.push(layer)
                } else {
                    layer.children.map(child => {
                        layers.push(child)
                    })
                }
            })
        } else {
            layers = this.props.layers;
        }
        return(

            <div className="layercontrol">
                <h3>Choose a pilot area</h3>
                <div className="btn-list">
                    {this.props.pilotareas.map(area =>
                        <button className="btn btn-green" onClick={() => this.getLayers(area.uri)}>{getTranslation(area.name)}</button>
                    )}
                </div>
                {this.state.fetched &&
                    <div className="layeradmin-panel">

                    {((this.props.fetching.dataFetching.data === 'getlayers') && (this.props.fetching.dataFetching.isFetching)) &&
                        <div className="layer-control-panel">
                        <div className="loader"></div>
                        </div>
                    }

                        {((this.props.fetching.dataFetching.data === 'getlayers') && (!this.props.fetching.dataFetching.isFetching) && (this.props.fetching.dataFetching.status)) &&
                            <div className="layer-control-panel">
                                <span>There are {layers.layers.length} layers online for the pilotarea {getTranslation(this.state.area)}</span>
                                <button className="btn btn-green" onClick={() => this.checkExcelFile(layers)}>Check the Excel file for the pilot area {getTranslation(this.state.area)}</button>
                            </div>
                        }

                        {((this.props.fetching.dataFetching.data === 'metadataquery') && (this.props.fetching.dataFetching.isFetching)) &&
                            <div className="layer-control-panel">
                            <div className="loader"></div>
                            </div>
                        }

                        {((this.props.fetching.dataFetching.data === "metadataquery") && (!this.props.fetching.dataFetching.isFetching) && (this.props.fetching.dataFetching.status)) &&
                            <div className="layer-control-panel">
                                {this.props.fetching.dataFetching.message.errors.length > 0 &&
                                    <div className="layer-control-errors">
                                    {this.props.fetching.dataFetching.message.errors.map(error =>
                                        <h2>{error}</h2>
                                    )}
                                    </div>
                                }
                                {this.props.fetching.dataFetching.message.errors.length === 0 &&
                                    <div className="layer-control-success">
                                        <h2>The excel file was loaded successfully</h2>

                                        {this.props.fetching.dataFetching.message.compared.messages.length > 0 &&
                                            <div>
                                                <ul>
                                                {this.props.fetching.dataFetching.message.compared.messages.map((message, index) =>
                                                    <li>{message} <button className="btn btn-red" onClick={() => this.rejectLayer(index)}>Reject</button></li>
                                                )}
                                                </ul>
                                                <button onClick={() => this.addLayers()} className="btn btn-green">Update webgis for {getTranslation(this.state.area)}</button>
                                            </div>
                                        }

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

                   

                  
                }
                {((this.props.fetching.dataFetching.data === 'copylayer') && (this.props.fetching.dataFetching.isFetching)) &&
                    <div className="layer-control-panel">
                    <div className="loader"></div>
                    </div>
                }

                    {((this.props.fetching.dataFetching.data === 'copylayer') && (!this.props.fetching.dataFetching.isFetching) && (this.props.fetching.dataFetching.status)) &&
                        <div className="layer-control-panel">
                            <h2>Everything worked, the web GIS was updated for the pilot area of {getTranslation(this.state.area)}</h2>
                        </div>
                    }

                    {((this.props.fetching.dataFetching.data === 'copylayer') && (!this.props.fetching.dataFetching.isFetching) && (!this.props.fetching.dataFetching.status)) &&
                        <div className="layer-control-panel">
                            <h2>Oh no, an error occured!</h2>
                        </div>
                    }
            </div>
        )
    }
}

export default LayerControl