always show search bar

js/components/TopToolbar.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { Component } from 'react';
-import { Toolbar } from 'react-native-material-ui';
+import { View, TextInput, TouchableOpacity } from 'react-native';
+import { Toolbar, Icon } from 'react-native-material-ui';
 import { type RoutingContextFlowTypes, routingContextPropTypes } from '../routes';
 import { path } from 'ramda';
 import queryString from 'query-string';
@@ -8,7 +9,8 @@ import { getSearch } from '../helpers/RouteHelpers';
 import FoodItemSaveBtn from '../components/FoodItemSaveBtn';
 import { withFilter } from '../enhancers/filterEnhancers';
 import FilterRecord from '../records/FilterRecord';
-import debounce from '../helpers/debounce';
+
+import { palette } from '../ui-theme';
 
 type Props = {
 	title: ?string,
@@ -27,10 +29,6 @@ class TopToolbar extends Component {
 
 	context: RoutingContextFlowTypes;
 
-	state = {
-		search: '',
-	};
-
 	onRightPress = ({ action }: { action: string }) => {
 		const {
 			router: { history },
@@ -45,22 +43,15 @@ class TopToolbar extends Component {
 		});
 	};
 
-	onSubmitEditing = () => {
-		const { search } = this.state;
-		const { setFilter, filter } = this.props;
-		setFilter(filter.update(prevFilter => prevFilter.set('search', search)));
-	};
-
-	onSearchClosed = () => {
+	onSearchCleared = () => {
 		const { setFilter, filter } = this.props;
 		setFilter(filter.update(prevFilter => prevFilter.set('search', '')));
 	};
 
-	onChangeText = debounce(search => {
+	onChangeText = search => {
 		const { setFilter, filter } = this.props;
 		setFilter(filter.update(prevFilter => prevFilter.set('search', search)));
-		this.setState({ search });
-	}, 100);
+	};
 
 	getRightElement = () => {
 		const { viewMode } = getSearch(this.context);
@@ -79,39 +70,55 @@ class TopToolbar extends Component {
 		}
 	};
 
-	getSearchable = () => {
-		const pathname = path(['router', 'route', 'location', 'pathname'], this.context);
-
-		if (!/list/.test(pathname)) {
-			return {};
-		}
-
-		return {
-			searchable: {
-				autoFocus: true,
-				onSubmitEditing: this.onSubmitEditing,
-				onSearchClosed: this.onSearchClosed,
-				onChangeText: this.onChangeText,
-			},
-		};
-	};
-
 	render() {
-		const { toggleSideMenu } = this.props;
+		const { toggleSideMenu, filter } = this.props;
 		const history = path(['router', 'history'], this.context);
-		const search = getSearch(this.context);
-		const title = search.routeTitle || this.props.title;
+		const route = path(['router', 'route', 'location', 'pathname'], this.context);
+		const routeSearch = getSearch(this.context);
+		const title = routeSearch.routeTitle || this.props.title;
 		const isBasePage = history.index === 0;
 
+		const showSearch = /^\/list/.test(route);
+		const showSearchClear = filter.search.length > 0;
+		const searchPlaceholder = /\/food/.test(route) ? 'Search Food...' : 'Search Places...';
+
 		return (
-			<Toolbar
-				leftElement={isBasePage ? 'menu' : 'arrow-back'}
-				onLeftElementPress={isBasePage ? toggleSideMenu : history.goBack}
-				centerElement={title}
-				rightElement={this.getRightElement()}
-				onRightElementPress={this.onRightPress}
-				{...this.getSearchable()}
-			/>
+			<View style={{ backgroundColor: palette.primaryColor }}>
+				<Toolbar
+					leftElement={isBasePage ? 'menu' : 'arrow-back'}
+					onLeftElementPress={isBasePage ? toggleSideMenu : history.goBack}
+					centerElement={title}
+					rightElement={this.getRightElement()}
+					onRightElementPress={this.onRightPress}
+				/>
+				{showSearch && (
+					<View
+						style={{
+							flexDirection: 'row',
+							alignItems: 'center',
+							margin: 10,
+							backgroundColor: 'white',
+							borderRadius: 3,
+						}}>
+						<Icon name="search" style={{ margin: 10 }} />
+						<TextInput
+							value={filter.search}
+							onChangeText={this.onChangeText}
+							placeholder={searchPlaceholder}
+							underlineColorAndroid="transparent"
+							style={{
+								flex: 1,
+								fontSize: 18,
+							}}
+						/>
+						{showSearchClear && (
+							<TouchableOpacity onPress={this.onSearchCleared}>
+								<Icon name="close" style={{ margin: 10 }} />
+							</TouchableOpacity>
+						)}
+					</View>
+				)}
+			</View>
 		);
 	}
 }

js/streams/FoodItemsStream.js

@@ -27,6 +27,7 @@ const manualUpdate$ = foodItemSubject.scan(
 );
 
 const fetchedFoodItems$ = Filter$.combineLatest(location$)
+	.debounceTime(200)
 	.mergeMap(([filter, loc]) => {
 		if (!loc) {
 			return Promise.resolve({});

js/streams/PlacesStream.js

@@ -46,6 +46,7 @@ foodItems$
 
 location$
 	.combineLatest(filter$)
+	.debounceTime(200)
 	.mergeMap(([location, filter]: [?Position, FilterRecord]) => {
 		return safeFindNearbyPlaces({
 			location,