aretherecookies-mobile/js/pages/FoodMap.js

// @flow
import React from 'react';
import { View } from 'react-native';
import typeof FoodItemRecord from '../records/FoodItemRecord';
import { withFoodItems } from '../enhancers/foodItemEnhancers';
import { withLocation } from '../enhancers/locationEnhancers';
import { compose, renderComponent, withState, withProps } from 'recompose';
import { Map } from 'immutable';
import MapView from 'react-native-maps';
import { routeWithTitle } from '../helpers/RouteHelpers';
import FoodItemTile from '../components/FoodItemTile';
import { getZoomBox } from '../helpers/CoordinatesHelpers';

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

type Props = {
	foodItemsMap: Map<string, FoodItemRecord>,
	location: Location,
	initialRegion: Region,
	region: Region,
	onRegionChange: Region => void,
	pushRoute: () => {},
};

const FoodMap = ({ foodItemsMap, region, onRegionChange, pushRoute, initialRegion }: Props) => {
	return !foodItemsMap ? null : (
		<View style={{ flex: 1 }}>
			<MapView
				initialRegion={initialRegion}
				region={region}
				style={{ flex: 1 }}
				onRegionChange={onRegionChange}>
				{foodItemsMap
					.map((foodItem, id) => {
						return (
							<MapView.Marker
								key={id}
								title={foodItem.name}
								coordinate={{
									latitude: foodItem.latitude || 0,
									longitude: foodItem.longitude || 0,
								}}>
								<MapView.Callout
									onPress={() => {
										pushRoute(routeWithTitle(`/foodItem/${foodItem.id || ''}`, foodItem.name));
									}}>
									<FoodItemTile foodItem={foodItem} />
								</MapView.Callout>
							</MapView.Marker>
						);
					})
					.toList()}
			</MapView>
		</View>
	);
};

const withInitialRegionProp = withProps(({ foodItemsMap = Map(), location }) => {
	const zoomBox = getZoomBox(foodItemsMap, 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,
	withFoodItems,
	withLocation,
	withState('region', 'onRegionChange', null),
	withInitialRegionProp
)(FoodMap);