esbeautify issues

examples.js

/*
	BEFORE
*/

import React, { Component } from 'react'

export const Icon = props => (
  <div className={`icon icon--${props.icon}`}>
		<svg>
					<use className="no-barba" xlinkHref={`#${props.icon}`} />
			</svg>
 </div>
)

/*

AFTER
note, it's added semicolons,
but the indentation looks perfect

*/

import React, { Component } from 'react';

export const Icon = props => (
  <div className={`icon icon--${props.icon}`}>
    <svg>
      <use className="no-barba" xlinkHref={`#${props.icon}`} />
    </svg>
  </div>
);



/*
	Slightly larger example 

	BEFORE
*/

import React, { Component } from 'react'
import { Icon } from './Icon'

export class Card extends Component {
	constructor(props) {
		super(props)
	}

	render() {
		return (
			<div className="map-panel">
				<div className="map-panel__video">
					<div data-behaviour="video">
						<div data-video-id={169708067} data-type="vimeo" />
					</div>
				</div>
				<div className="map-panel__content">
					<h4 className="heading-3 map-panel__title">Exposing slave labour in the Thai seafood sector</h4>
					<p>words</p>
					<ul className="r-ul map-panel__media-list">
						<li className="map-panel__media-item">
							<a className="map-panel__media-link" href="#">
								<span className="map-panel__media-type map-panel__media-type--film">Film</span>
								<span className="map-panel__media-title">Thailand's Seafood Slaves</span>
								<Icon icon={'share'} />
							</a>
						</li>
					</ul>
				</div>
			</div>
    )
	}
}

/*
	Notice how the h4, and spans have been formatted 

	AFTRER
*/

import React, { Component } from 'react';
import { Icon } from './Icon';

export class Card extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="map-panel">
        <div className="map-panel__video">
          <div data-behaviour="video">
            <div data-video-id={169708067} data-type="vimeo" />
          </div>
        </div>
        <div className="map-panel__content">
          <h4
            className="heading-3 map-panel__title"
          >
            Exposing slave labour in the Thai seafood sector
          </h4>
          <p>words</p>
          <ul className="r-ul map-panel__media-list">
            <li className="map-panel__media-item">
              <a className="map-panel__media-link" href="#">
                <span
                  className="map-panel__media-type map-panel__media-type--film"
                >
                  Film
                </span>
                <span
                  className="map-panel__media-title"
                >
                  Thailand's Seafood Slaves
                </span>
                <Icon icon={'share'} />
              </a>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}


/*
	
	This next example is rather large.
	But this is where the error is thrown

*/

import React, { Component } from 'react'
import GoogleMap from 'google-map-react'
import { style } from './map-style'
import { Marker, Nav, Campaigns, Card } from '../ui/'
import { offsetCenter } from '../utils/'

export default class Map extends Component {

	constructor(props) {
		super(props)

		this.latLngArray = []

		// bind the methods
		const methods = ['createMapOptions', 'onMarkerClick', 'dataLayerInit', 'onNavClick']
		methods.forEach((method) => this[method] = this[method].bind(this))

		/*
			set some inital values
		*/

		const { google, entries, geo } = this.props
		// the inital status of all of the objects
		const status = false


		this.bounds = new google.maps.LatLngBounds()
		this.data_layer

		const categories = new Set()

		/*
			get all of the entries that have latlng attributes
		*/
		const markers = entries.filter((entry) => typeof entry.region[0] === 'number')
												.map((entry) => {
													const [lat, lng] = entry.region
													const type = 'point'
													const id = Math.floor(Math.random() * 1000) // DEV ONLY
													const className = 'marker--inactive'

													entry.campaigns.forEach(campaign => categories.add(campaign))
													/*
														 push each latLng object to another array
														 as the object throws an error when passed
														 into the marker component
													*/
													this.latLngArray.push(new google.maps.LatLng(lat, lng))
													return {...entry, lat, lng, type, status, id, className}
												})



		/*
			get all of the entries that have an array of countries
		*/
		const countries = entries.filter((entry) => typeof entry.region[0] === 'string')
														.map((entry) => {
															/*
																get the geo code data from the geo array,
																and merge into countries array
															*/
															entry.campaigns.forEach(campaign => categories.add(campaign))

															const region = entryyarn .region.map((region) => {
																return geo.find((item) => item.id.toLowerCase() === region.toLowerCase() )
															})
															const type = 'region'
															return {...entry, region, type, status}
														})

		this.state = {
			entries,
			markers,
			countries,
			categories: [...categories],
			center: [20,0],
			zoom: 1,
			card: false
		}
	}

	/*
		data layer, used to add country outlines
		this.data_layer is created once the component has mounted
		as we need a reference to the map
	*/
	dataLayerInit() {
		const region = this.state.countries[0].region

		region.map((region, index) => {
			const newBoundary = {}
			region.properties = {}
			region.properties.boundaryID = index

			this.data_layer.setStyle({
				fillColor: 'green',
				strokeWeight: 1,
				fillOpacity: 1
			})
			this.data_layer.addGeoJson(region, {idPropertyName: 'boundaryID'})

			newBoundary.feature = this.data_layer.getFeatureById(index)

			return newBoundary
		})
	}

	/*
		Life cycle hook
		we are all good, let's center the map by the bounds of all the markers
	*/
	componentDidMount() {
		/*
			wrapped in a setTimeout because
			you mum said so
		*/
		setTimeout(() => {
			const { map_ } = this.refs.googleMap
			const bounds = this.bounds
			this.latLngArray.forEach((latLng) => {
				bounds.extend(latLng)
			})
			map_.fitBounds(bounds)

			this.data_layer = new google.maps.Data({map: map_})
			this.dataLayerInit()
		})

	}

	/*
		some options for the map, it's a function
		that returns an object... which is nice
	*/
	createMapOptions() {
		return {
			panControl: false,
			mapTypeControl: false,
			scrollwheel: false,
			styles: style
		}
	}


	/*
		the marker click handle
		grabs the id from the data attribute
	*/
	
	onMarkerClick(evt) {
		const { id } = evt.target.dataset
		const { markers } = this.state
		const { map_ } = this.refs.googleMap

		let latLng
		let card

		/*
			create a new state object
			update the classes, get the latlng
			so we can update the center point
		*/

		const newMarkers = markers.map((marker) => {
			const { lat, lng } = marker
			let className
			if(marker.id.toString() === id) {
				latLng = new google.maps.LatLng(lat, lng)
				card = marker
				className = 'marker--active'
			} else {
				className = 'marker--inactive'
			}
			return {...marker, className }
		})


		/*
			update state with the newMarkers state
			and the card
		*/
		this.setState({
			markers: newMarkers,
			card: card
		})

		map_.panTo(offsetCenter(map_, latLng, 0))
	}

	onNavClick(e) {
		e.preventDefault()
	}


	/*
		Render my face
	*/
	render() {
		const {
			center,
			zoom,
			markers,
			categories,
			countries
		} = this.state

		return (
			<div>
				<GoogleMap
					options={this.createMapOptions}
					ref="googleMap"
					center={center}
					zoom={zoom}>
						{markers.map((entry, index) => {
							return (
								<Marker key={index} lat={entry.lat} lng={entry.lng} onMarkerClick={this.onMarkerClick} {...entry}/>
							)
						})}
				</GoogleMap>
				<Nav categories={categories} onNavClick={this.onNavClick}/>
				<Campaigns countries={countries} />
				<Card />
			</div>
		)
	}
}