aretherecookies-mobile/js/components/TopToolbar.js

// @flow
import React, { Component } from 'react';
import { View, TextInput, TouchableOpacity } from 'react-native';
import { Toolbar, Icon } from 'react-native-material-ui';
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 { palette } from '../ui-theme';
import { withRouterContext } from '../enhancers/routeEnhancers';

type Props = {
	title: ?string,
	filter: FilterRecord,
	setFilter: (filter: FilterRecord) => void,
};

class TopToolbar extends Component {
	static defaultProps = {
		title: 'Are There Cookies?',
	};

	props: Props;

	onRightPress = ({ action }: { action: string }) => {
		const {
			router: { history },
		} = this.props;
		const search = getSearch(this.props);

		history.replace({
			search: queryString.stringify({
				...search,
				viewMode: action,
			}),
		});
	};

	onSearchCleared = () => {
		const { setFilter, filter } = this.props;
		setFilter(filter.update(prevFilter => prevFilter.set('search', '')));
	};

	onChangeText = search => {
		const { setFilter, filter } = this.props;
		setFilter(filter.update(prevFilter => prevFilter.set('search', search)));
	};

	getRightElement = () => {
		const route = path(['router', 'route', 'location', 'pathname'], this.props);

		if (/^\/createFoodItem/.test(route)) {
			return <FoodItemSaveBtn />;
		}
	};

	render() {
		const { filter } = this.props;
		const history = path(['router', 'history'], this.props);
		const route = path(['router', 'route', 'location', 'pathname'], this.props);
		const routeSearch = getSearch(this.props);
		const title = routeSearch.routeTitle || this.props.title;

		const showSearch = /^\/list/.test(route);
		const showSearchClear = filter.search.length > 0;
		const searchPlaceholder = /\/food/.test(route) ? 'Search Food...' : 'Search Places...';

		return (
			<View style={{ backgroundColor: palette.primaryColor }}>
				{!showSearch && (
					<Toolbar
						leftElement="arrow-back"
						onLeftElementPress={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>
		);
	}
}

export default withFilter(withRouterContext(TopToolbar));