cot-blog-mapbox-index.jsx

import PropTypes from 'prop-types';
import React from 'react';
import Load from 'external-load';
import Loadable from 'react-loadable';

import CircularProgress from '@material-ui/core/CircularProgress';

//  Children
import Map from './map';

//  Utilities
import getWindowIsDefined from '../../../utilities/get-window-is-defined';

const Loading = () => (<div><CircularProgress /></div>);

const LoadableComponent = Loadable({
  loader: () => import('./map'),
  loading: Loading,
  render(loaded, props) {
    let Component = loaded.default;
    return <Component {...props}/>
  }
});

class MapBoxWrapper extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      mounted: false,
    };
  }

  componentDidMount() {
    Load.css('https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css')
      .then(() => {
        this.setState((prevState) => (
          {
            ...prevState,
            css: {
              ...prevState.css,
              map: true,
            },
          }
        ));
      })
      .then(() => {
        this.setState((prevState) => (
          {
            ...prevState,
            mounted: true,
          }
        ));
      })
      .catch((error) => {
        console.log(error);
      });
  }

  render() {
    const { businessName, latitude, longitude, zoom } = this.props;
    const { mounted } = this.state;
    const isWindowDefined = getWindowIsDefined();

    if (latitude === -200 || longitude === -200) {
      return null;
    }

    if (!mounted) {
      return null;
    }

    if (isWindowDefined) {
      return (
        <LoadableComponent
          businessName={businessName}
          latitude={latitude}
          longitude={longitude}
          zoom={zoom}
        />
      )
    }

    return null;
  }
}

MapBoxWrapper.defaultProps = {
  businessName: '',
  latitude: -200,
  longitude: -200,
  zoom: 6,
};

MapBoxWrapper.propTypes = {
  businessName: PropTypes.string,
  latitude: PropTypes.number,
  longitude: PropTypes.number,
  zoom: PropTypes.number,
};

export default MapBoxWrapper;