async componentDidMount()

in website/src/components/ESRIMap.js [78:152]
59 lines of code
4 McCabe index (conditional complexity)

    async componentDidMount() {
      try {
        const ESRI = await this.loadEsriModules();
        this.xyToLngLat = ESRI.webMercatorUtils.xyToLngLat;

        const map = ESRI.Map({ basemap: 'gray-vector' });
        const view = ESRI.MapView({
          center: [-122.31, 47.60],
          container: 'esriMapView',
          map: map,
          zoom: 12
        });

        const pinSymbol = new ESRI.TextSymbol({
          color: '#f50856',
          text: '\ue61d',
          font: { size: 20, family: 'CalciteWebCoreIcons' }
        });

        var unicornSymbol = new ESRI.PictureMarkerSymbol({
          url: 'https://s3.amazonaws.com/aws-mobile-hub-images/wild-rydes/unicorn-icon.png',
          width: '25px',
          height: '25px'
        });

        this.pinGraphic = null;
        if (this.props.pinLocation) {
          this.selectedPoint = this.props.pinLocation;
          this.pinGraphic = new ESRI.Graphic({
            symbol: this.state.pinSymbol,
            geometry: this.selectedPoint
          });
          view.graphics.add(this.pinGraphic);
        }

        // Watch for map re-centering
        view.watch('center', (position) => this.updateCenter(position));

        // Watch for map pinch-and-zoom actions
        view.watch('extent', (extent) => this.updateExtent(extent));

        // Watch for map click events
        view.on('click', (event) => {
          this.unsetLocation();
          this.selectedPoint = event.mapPoint;
          this.pinGraphic = new ESRI.Graphic({
            symbol: this.state.pinSymbol,
            geometry: this.selectedPoint
          });
          view.graphics.add(this.pinGraphic);

          if (this.props.onMapClick) {
            this.props.onMapClick(this.selectedPoint);
          }
        });

        view.then(() => {
          // Set the current map settings in the object
          // once it is rendered
          this.updateCenter(view.center);
          this.updateExtent(view.extent);

          // Store the status of the map
          this.setState({
            map,
            view,
            pinSymbol,
            unicornSymbol,
            status: 'loaded'
          });
        });
      } catch (err) {
        console.error(err);
      }
    }