aretherecookies-mobile/js/pages/FavesMap.js

// @flow
import React from 'react';
import { View } from 'react-native';
import { withLocation } from '../enhancers/locationEnhancers';
import { compose, renderComponent, withState, withProps } from 'recompose';
import { Map, get } from 'immutable';
import MapView from 'react-native-maps';
import { routeWithTitle } from '../helpers/RouteHelpers';
import ProductTile from '../components/ProductTile';
import { getZoomBox } from '../helpers/CoordinatesHelpers';
import { withFaves } from '../enhancers/favesEnhancer';
import { type Faves } from '../streams/FavesStream';

type Region = {
	latitude: number,
	longitude: number,
	latitudeDelta: number,
	longitudeDelta: number,
};

type Props = {
	faves: Faves,
	location: Location,
	initialRegion: Region,
	region: Region,
	onRegionChange: Region => void,
	pushRoute: () => {},
};

const FavesMap = ({ faves, region, onRegionChange, pushRoute, initialRegion }: Props) => {
	if (!faves) {
		return null;
	}
	return (
		<View style={{ flex: 1 }}>
			<MapView
				region={region || initialRegion}
				style={{ flex: 1 }}
				onRegionChangeComplete={onRegionChange}>
				{faves.map(fave => (
					<MapView.Marker
						key={get(fave, 'id')}
						title={get(fave, 'name')}
						coordinate={{
							latitude: get(fave, 'latitude', 0),
							longitude: get(fave, 'longitude', 0),
						}}>
						<MapView.Callout
							onPress={() => {
								pushRoute(routeWithTitle(`/product/${get(fave, 'id', '')}`, get(fave, 'name')));
							}}>
							<ProductTile product={fave} />
						</MapView.Callout>
					</MapView.Marker>
				))}
			</MapView>
		</View>
	);
};

const withInitialRegionProp = withProps(({ productsMap = Map(), location }) => {
	const zoomBox = getZoomBox(productsMap, location.coords);

	return {
		initialRegion: {
			latitude: (zoomBox.minLat + zoomBox.maxLat) / 2,
			longitude: (zoomBox.minLng + zoomBox.maxLng) / 2,
			latitudeDelta: zoomBox.maxLat - zoomBox.minLat + 0.02,
			longitudeDelta: zoomBox.maxLng - zoomBox.minLng + 0.02,
		},
	};
});

export default compose(
	renderComponent,
	withFaves,
	withLocation,
	withState('region', 'onRegionChange', null),
	withInitialRegionProp
)(FavesMap);