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 } from 'recompose';
import { Map } from 'immutable';
import MapView from 'react-native-maps';
import { path } from 'ramda';
import { routeWithTitle } from '../helpers/RouteHelpers';
import FoodItemTile from '../components/FoodItemTile';
import ActionsButton from '../components/ActionsButton';
import FilterModal from '../modals/FilterModal';

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

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

const FoodMap = ({
	foodItemsMap = Map(),
	region,
	onRegionChange,
	pushRoute,
	toggleFilterModal,
	isFilterModalOpen,
}: Props) => {
	return (
		<View style={{ flex: 1 }}>
			<MapView
				initialRegion={region}
				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>
			<FilterModal isVisible={isFilterModalOpen} onClose={toggleFilterModal} />
			<ActionsButton
				actions={['add-food', 'filter-modal', 'view-mode']}
				icon="add"
				toggleFilterModal={toggleFilterModal}
			/>
		</View>
	);
};

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);