aretherecookies-mobile/js/pages/FoodMap.js

// @flow
import React from 'react';
import { View, Image } 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, { Marker } from 'react-native-maps';
import { routeWithTitle } from '../helpers/RouteHelpers';
import FoodItemTile from '../components/FoodItemTile';
import { getZoomBox } from '../helpers/CoordinatesHelpers';
import LOCATION_DOT from '../../static/location-dot.png';

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,
	location,
}: Props) => {
	if (!foodItemsMap) {
		return null;
	}

	return (
		<View style={{ flex: 1 }}>
			<MapView
				region={region || initialRegion}
				style={{ flex: 1 }}
				onRegionChangeComplete={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()}
				<Marker coordinate={location.coords}>
					<View>
						<Image source={LOCATION_DOT} style={{ height: 24, width: 24 }} resizeMode="contain" />
					</View>
				</Marker>
			</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);