FavesMap screen

js/pages/Faves.js

@@ -0,0 +1,14 @@
+// @flow
+import { compose, branch } from 'recompose';
+import FavesList from './FavesList';
+import FavesMap from './FavesMap';
+import { withRouterContext, withViewMode, withPushRoute } from '../enhancers/routeEnhancers';
+
+export default compose(
+	withRouterContext,
+	withViewMode,
+	withPushRoute,
+	branch(({ viewMode }) => {
+		return viewMode === 'map';
+	}, FavesMap)
+)(FavesList);

js/pages/FavesMap.js

@@ -0,0 +1,80 @@
+// @flow
+import React from 'react';
+import { View } from 'react-native';
+import { withLocation } from '../enhancers/locationEnhancers';
+import { compose, renderComponent, withState, withProps } from 'recompose';
+import { Map, get } from 'immutable';
+import MapView from 'react-native-maps';
+import { routeWithTitle } from '../helpers/RouteHelpers';
+import FoodItemTile from '../components/FoodItemTile';
+import { getZoomBox } from '../helpers/CoordinatesHelpers';
+import { withFaves } from '../enhancers/favesEnhancer';
+import { type Faves } from '../streams/FavesStream';
+
+type Region = {
+	latitude: number,
+	longitude: number,
+	latitudeDelta: number,
+	longitudeDelta: number,
+};
+
+type Props = {
+	faves: Faves,
+	location: Location,
+	initialRegion: Region,
+	region: Region,
+	onRegionChange: Region => void,
+	pushRoute: () => {},
+};
+
+const FavesMap = ({ faves, region, onRegionChange, pushRoute, initialRegion }: Props) => {
+	if (!faves) {
+		return null;
+	}
+	return (
+		<View style={{ flex: 1 }}>
+			<MapView
+				region={region || initialRegion}
+				style={{ flex: 1 }}
+				onRegionChangeComplete={onRegionChange}>
+				{faves.map(fave => (
+					<MapView.Marker
+						key={get(fave, 'id')}
+						title={get(fave, 'name')}
+						coordinate={{
+							latitude: get(fave, 'latitude', 0),
+							longitude: get(fave, 'longitude', 0),
+						}}>
+						<MapView.Callout
+							onPress={() => {
+								pushRoute(routeWithTitle(`/foodItem/${get(fave, 'id', '')}`, get(fave, 'name')));
+							}}>
+							<FoodItemTile foodItem={fave} />
+						</MapView.Callout>
+					</MapView.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,
+	withFaves,
+	withLocation,
+	withState('region', 'onRegionChange', null),
+	withInitialRegionProp
+)(FavesMap);

js/pages/Nav.js

@@ -10,8 +10,8 @@ import { withRouterContext, type routerContext } from '../enhancers/routeEnhance
 import { pathOr } from 'ramda';
 import uiTheme from '../ui-theme';
 import ProfilePage from './ProfilePage';
-import AuthManager from '../AuthManager';
-import FavesPage from './FavesPage';
+import Faves from './Faves';
+import { fetchFaves } from '../apis/FavesApi';
 
 type Props = {
 	activeTab: string,
@@ -29,7 +29,7 @@ const Nav = (props: Props) => {
 			<View style={{ flex: 1 }}>
 				{activeTab === 'food' && <Food onRefresh={getLocation} />}
 				{activeTab === 'places' && <Places onRefresh={getLocation} />}
-				{activeTab === 'faves' && <FavesPage />}
+				{activeTab === 'faves' && <Faves onRefresh={fetchFaves} />}
 				{activeTab === 'profile' && <ProfilePage />}
 			</View>
 			<SafeAreaView>