aretherecookies-mobile/js/pages/PlacesMap.js

// @flow
import React from 'react';
import { View } from 'react-native';
import typeof FoodItemRecord from '../records/FoodItemRecord';
import { compose, renderComponent } from 'recompose';
import { Map } from 'immutable';
import MapView from 'react-native-maps';
import { routeWithTitle } from '../helpers/RouteHelpers';
import { withPlaces } from '../enhancers/placeEnhancers';
import PlaceTile from '../components/PlaceTile';
import { withFoodItemsGroupedByPlace } from '../enhancers/foodItemEnhancers';
import { withRegionState } from '../enhancers/mapViewEnhancers';
import typeof PlaceRecord from '../records/PlaceRecord';

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

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

const PlacesMap = ({
	places = Map(),
	foodItemsByPlace = Map(),
	region,
	onRegionChange,
	pushRoute,
}: Props) => {
	return (
		<View style={{ flex: 1 }}>
			<MapView
				initialRegion={region}
				region={region}
				style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
				onRegionChange={onRegionChange}>
				{places
					.map((place: PlaceRecord, placeId: string) => {
						const foodItems = foodItemsByPlace.get(placeId, new Map());
						const firstFoodItem = foodItems.first();

						if (!firstFoodItem) {
							return;
						}

						return (
							<MapView.Marker
								key={placeId}
								title={place.name}
								coordinate={{
									latitude: firstFoodItem.latitude,
									longitude: firstFoodItem.longitude,
								}}>
								<MapView.Callout
									onPress={() => {
										pushRoute(routeWithTitle(`/place/${placeId || ''}`, place.name));
									}}>
									<PlaceTile place={place} foodItems={foodItems} />
								</MapView.Callout>
							</MapView.Marker>
						);
					})
					.toList()}
			</MapView>
		</View>
	);
};

export default compose(
	renderComponent,
	withFoodItemsGroupedByPlace,
	withPlaces,
	withRegionState
)(PlacesMap);