food item search bar passing to backend

js/apis/FoodItemsApi.js

@@ -41,7 +41,7 @@ export const getFoodItems = memoize(
 		const {
 			coords: { latitude: lat, longitude: lng },
 		} = loc;
-		const { orderby, categories, radius } = filter;
+		const { orderby, categories, radius, search } = filter;
 
 		try {
 			return fetchRequest({
@@ -54,6 +54,7 @@ export const getFoodItems = memoize(
 					filter: {
 						...(categories ? { categories } : {}),
 						radius,
+						search,
 					},
 				},
 			}).then(json => ({

js/components/TopToolbar.js

@@ -6,10 +6,15 @@ import { path } from 'ramda';
 import queryString from 'query-string';
 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';
 
 type Props = {
 	title: ?string,
 	toggleSideMenu: Function,
+	filter: FilterRecord,
+	setFilter: (filter: FilterRecord) => void,
 };
 
 class TopToolbar extends Component {
@@ -23,7 +28,9 @@ class TopToolbar extends Component {
 	context: RoutingContextFlowTypes;
 
 	onRightPress = ({ action }: { action: string }) => {
-		const { router: { history } } = this.context;
+		const {
+			router: { history },
+		} = this.context;
 		const search = getSearch(this.context);
 
 		history.replace({
@@ -34,11 +41,17 @@ class TopToolbar extends Component {
 		});
 	};
 
-	onSearchPressed: () => {};
+	onSearchPressed = () => {};
 
-	onSearchClosed: () => {};
+	onSearchClosed = () => {
+		const { setFilter, filter } = this.props;
+		setFilter(filter.update(prevFilter => prevFilter.set('search', '')));
+	};
 
-	onSearchChanged: () => {};
+	onSearchChanged = debounce(search => {
+		const { setFilter, filter } = this.props;
+		setFilter(filter.update(prevFilter => prevFilter.set('search', search)));
+	}, 200);
 
 	getRightElement = () => {
 		const search = getSearch(this.context);
@@ -95,4 +108,4 @@ class TopToolbar extends Component {
 	}
 }
 
-export default TopToolbar;
+export default withFilter(TopToolbar);

js/modals/FilterModal.js

@@ -13,7 +13,6 @@ import RadiusPicker from '../components/RadiusPicker';
 import { compose, withHandlers, withState, onlyUpdateForKeys } from 'recompose';
 
 import theme from '../ui-theme';
-const { palette } = theme;
 
 type Props = {
 	isVisible: boolean,

js/records/FilterRecord.js

@@ -4,6 +4,7 @@ import { CATEGORIES } from '../constants/CategoryConstants';
 import { Set } from 'immutable';
 
 const FilterRecord = Record({
+	search: '',
 	orderby: 'distance',
 	categories: Set(CATEGORIES),
 	radius: 20,