use search instead of state for viewMode map/list

js/components/FoodItemTile.js

@@ -10,9 +10,13 @@ import { routeWithTitle } from '../helpers/RouteHelpers';
 import { TileBox, StrongText, SubText, Thumbnail, QuantityLine } from './ItemTile';
 import { withPlace } from '../enhancers/placeEnhancers';
 
-const PlaceNameAndDistance = withPlace(({ place = {}, distance = 999.9 }: { place: PlaceRecord, distance: number }) => {
-	return <SubText>{`${place.name || 'Loading...'} - ${parseFloat(distance).toFixed(1)} mi`}</SubText>;
-});
+const PlaceNameAndDistance = withPlace(
+	({ place = {}, distance = 999.9 }: { place: PlaceRecord, distance: number }) => {
+		return (
+			<SubText>{`${place.name || 'Loading...'} - ${parseFloat(distance).toFixed(1)} mi`}</SubText>
+		);
+	}
+);
 
 export default pure(({ foodItem }: { foodItem: FoodItemRecord }) => {
 	if (!foodItem) {
@@ -22,8 +26,7 @@ export default pure(({ foodItem }: { foodItem: FoodItemRecord }) => {
 	return (
 		<Link
 			to={routeWithTitle(`/foodItem/${foodItem.id || ''}`, foodItem.name)}
-			underlayColor={theme.itemTile.pressHighlightColor}
-		>
+			underlayColor={theme.itemTile.pressHighlightColor}>
 			<View>
 				<TileBox>
 					<Thumbnail thumb={foodItem.thumbImage} />

js/components/TopToolbar.js

@@ -3,6 +3,8 @@ import React, { Component } from 'react';
 import { Toolbar } from 'react-native-material-ui';
 import { type RoutingContextFlowTypes, routingContextPropTypes } from '../routes';
 import { path } from 'ramda';
+import queryString from 'query-string';
+import { getSearch } from '../helpers/RouteHelpers';
 
 type Props = {
 	title: ?string,
@@ -20,13 +22,14 @@ class TopToolbar extends Component {
 	context: RoutingContextFlowTypes;
 
 	onRightPress = ({ action }: { action: string }) => {
-		const { router: { route, history } } = this.context;
+		const { router: { history } } = this.context;
+		const search = getSearch(this.context);
 
 		history.replace({
-			state: {
-				...route.location.state,
+			search: queryString.stringify({
+				...search,
 				viewMode: action,
-			},
+			}),
 		});
 	};
 
@@ -37,8 +40,9 @@ class TopToolbar extends Component {
 	onSearchChanged: () => {};
 
 	getRightElement = () => {
+		const search = getSearch(this.context);
 		const pathname = path(['router', 'route', 'location', 'pathname'], this.context);
-		const viewMode = path(['router', 'route', 'location', 'state', 'viewMode'], this.context);
+		const { viewMode } = queryString.parse(search);
 
 		switch (pathname.match(/^\/\w*/)[0]) {
 			case '/list': {
@@ -70,8 +74,8 @@ class TopToolbar extends Component {
 	render() {
 		const { toggleSideMenu } = this.props;
 		const history = path(['router', 'history'], this.context);
-		const routeTitle = path(['router', 'route', 'location', 'state', 'routeTitle'], this.context);
-		const title = routeTitle || this.props.title;
+		const search = getSearch(this.context);
+		const title = search.routeTitle || this.props.title;
 		const isBasePage = history.index === 0;
 
 		return (

js/enhancers/routeEnhancers.js

@@ -2,6 +2,7 @@
 import { getContext, mapProps } from 'recompose';
 import { shape, func, string } from 'prop-types';
 import { path } from 'ramda';
+import { getSearch } from '../helpers/RouteHelpers';
 
 export const withRouterContext = getContext({
 	router: shape({
@@ -10,9 +11,6 @@ export const withRouterContext = getContext({
 				pathname: string,
 				search: string,
 				hash: string,
-				state: shape({
-					viewMode: string,
-				}),
 			}),
 		}),
 		history: shape({
@@ -26,7 +24,7 @@ export const withRouterContext = getContext({
 export const withViewMode = mapProps((props: Object) => {
 	return {
 		...props,
-		viewMode: path(['router', 'route', 'location', 'state', 'viewMode'], props),
+		viewMode: getSearch(props).viewMode,
 	};
 });
 

js/helpers/RouteHelpers.js

@@ -1,14 +1,20 @@
 // @flow
-import { curry } from 'ramda';
+import { curry, pipe, pathOr } from 'ramda';
+import queryString from 'query-string';
 
 type RouteTo = {
-    pathname: string,
-    search?: string,
-    hash?: string,
-    state?: { [string]: string },
+	pathname: string,
+	search?: string,
+	hash?: string,
+	state?: { [string]: string },
 };
 
 export const routeWithTitle = curry((pathname: string, routeTitle: string): RouteTo => ({
-    pathname,
-    state: { routeTitle },
+	pathname,
+	search: queryString.stringify({ routeTitle }),
 }));
+
+export const getSearch = pipe(
+	pathOr('', ['router', 'route', 'location', 'search']),
+	queryString.parse
+);

js/pages/FoodMap.js

@@ -36,27 +36,26 @@ const FoodMap = ({ foodItemsMap, places, region, onRegionChange, pushRoute }: Pr
 			initialRegion={region}
 			region={region}
 			style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
-			onRegionChange={onRegionChange}
-		>
+			onRegionChange={onRegionChange}>
 			{foodItemsMap
-				.map((foodItem, id) => (
-					<MapView.Marker
-						key={id}
-						title={foodItem.name}
-						coordinate={{
-							latitude: foodItem.latitude,
-							longitude: foodItem.longitude,
-						}}
-					>
-						<MapView.Callout
-							onPress={() => {
-								pushRoute(routeWithTitle(`/foodItem/${foodItem.id || ''}`, foodItem.name));
-							}}
-						>
-							<FoodItemTile foodItem={foodItem} place={places.get(foodItem.placeId)} />
-						</MapView.Callout>
-					</MapView.Marker>
-				))
+				.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} place={places.get(foodItem.placeId)} />
+							</MapView.Callout>
+						</MapView.Marker>
+					);
+				})
 				.toList()}
 		</MapView>
 	);