aretherecookies-mobile/js/pages/FoodMap.js

// @flow
import React from 'react';
import typeof FoodItemRecord from '../records/FoodItemRecord';
import { withFoodItems } from '../enhancers/foodItemEnhancers';
import { withLocation } from '../enhancers/locationEnhancers';
import { compose, renderComponent, withState } from 'recompose';
import { type Map } from 'immutable';
import MapView from 'react-native-maps';
import { path } from 'ramda';
import { getQuantityText } from '../helpers/QuantityHelpers';

// import theme from '../ui-theme';

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

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

const FoodMap = ({ foodItemsMap, region, onRegionChange }: Props) => {
	return (
		<MapView
			initialRegion={region}
			region={region}
			style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
			onRegionChange={onRegionChange}
		>
			{foodItemsMap
				.map((foodItem, id) => (
					<MapView.Marker
						key={id}
						title={foodItem.name}
						coordinate={{
							latitude: foodItem.latitude,
							longitude: foodItem.longitude,
						}}
						description={getQuantityText(foodItem.quantity)}
						onPress={() => {
							// todo - should we navigate the user to place or food item detail screen?
						}}
					/>
				))
				.toList()}
		</MapView>
	);
};

export default compose(
	renderComponent,
	withFoodItems,
	withLocation,
	withState('region', 'onRegionChange', ({ location }) => {
		return {
			latitude: path(['coords', 'latitude'], location),
			longitude: path(['coords', 'longitude'], location),
			latitudeDelta: 0.07,
			longitudeDelta: 0.07,
		};
	})
)(FoodMap);