@randy.tarampi/jsx/esm/lib/components/mappedPosts.js

Some common JSX components for www.randytarampi.ca

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { List } from "immutable";
import PropTypes from "prop-types";
import React, { PureComponent } from "react";
import { ConnectedMap } from "../containers/map";
import { ConnectedPostMarker } from "../containers/postMarker";
import { GoogleMapMarkerClustererComponent } from "./map";
export class MappedPostsComponent extends PureComponent {
  constructor(props) {
    super(props);
    this.googleMapRef = /*#__PURE__*/React.createRef();
    this.getGoogleMap = this.getGoogleMap.bind(this);
  }

  get googleMap() {
    return this.googleMapRef && this.googleMapRef.current;
  }

  componentDidMount() {
    if (this.props.shouldFetchPostsOnMount) {
      this.props.fetchPosts();
    }
  }

  getGoogleMap() {
    return this.googleMap;
  }

  render() {
    var _this$props = this.props,
        {
      posts,
      fetchPosts
    } = _this$props,
        props = _objectWithoutProperties(_this$props, ["posts", "fetchPosts"]);

    return /*#__PURE__*/React.createElement(ConnectedMap, _extends({}, props, {
      googleMapRef: this.googleMapRef,
      onIdle: fetchPosts
    }), /*#__PURE__*/React.createElement(GoogleMapMarkerClustererComponent, {
      enableRetinaIcons: true
    }, posts.map(post => /*#__PURE__*/React.createElement(ConnectedPostMarker, {
      getGoogleMap: this.getGoogleMap,
      mapId: props.id,
      post: post,
      key: post.uid
    }))));
  }

}
MappedPostsComponent.defaultProps = {
  shouldFetchPostsOnMount: true
};
MappedPostsComponent.propTypes = {
  id: PropTypes.string.isRequired,
  shouldFetchPostsOnMount: PropTypes.bool,
  fetchPosts: PropTypes.func.isRequired,
  isLoading: PropTypes.bool,
  currentCenter: PropTypes.shape({
    lat: PropTypes.number.isRequired,
    lng: PropTypes.number.isRequired
  }),
  currentBounds: PropTypes.shape({
    north: PropTypes.number.isRequired,
    east: PropTypes.number.isRequired,
    south: PropTypes.number.isRequired,
    west: PropTypes.number.isRequired
  }),
  posts: PropTypes.instanceOf(List)
};
export default MappedPostsComponent;