aretherecookies-mobile/js/components/TopToolbar.js

// @flow
import React, { Component } from 'react';
import { View, TextInput, TouchableOpacity, SafeAreaView } from 'react-native';
import { Toolbar, Icon } from 'react-native-material-ui';
import { path, pipe, not, cond, isNil, compose, always } from 'ramda';
import queryString from 'query-string';
import { getSearch, getViewMode } 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';
import FAIcon from 'react-native-vector-icons/FontAwesome';

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

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

	props: Props;

	onBackPress = () => {
		const { router } = this.props;
		const { history } = router;

		const notNil = compose(
			not,
			isNil
		);

		const goBackTo = pipe(
			path(['route', 'location', 'search']),
			queryString.parse,
			path(['backto']),
			cond([[notNil, history.replace], [always(true), history.goBack]])
		);

		goBackTo(router);
	};

	toggleMapList = () => {
		const history = path(['router', 'history'], this.props);
		const search = getSearch(this.props);
		const viewMode = getViewMode(this.props);

		history.replace({
			search: queryString.stringify({
				...search,
				viewMode: viewMode === 'list' ? 'map' : 'list',
			}),
		});
	};

	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, onFilterPress } = this.props;
		const route = path(['router', 'route', 'location', 'pathname'], this.props);
		const routeSearch = getSearch(this.props);
		const title = routeSearch.routeTitle || this.props.title;
		const viewMode = getViewMode(this.props);

		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 }}>
				<SafeAreaView>
					{!showSearch && (
						<Toolbar
							leftElement="arrow-back"
							onLeftElementPress={this.onBackPress}
							centerElement={title}
							rightElement={this.getRightElement()}
						/>
					)}
					{showSearch && (
						<View style={{ flexDirection: 'row', padding: 10 }}>
							<View
								style={{
									flex: 1,
									flexDirection: 'row',
									alignItems: 'center',
									backgroundColor: 'white',
									borderRadius: 10,
								}}>
								<Icon name="search" style={{ marginHorizontal: 10 }} />
								<TextInput
									value={filter.search}
									onChangeText={this.onChangeText}
									placeholder={searchPlaceholder}
									underlineColorAndroid="transparent"
									style={{
										flex: 1,
										fontSize: 18,
										padding: 5,
									}}
								/>
								{showSearchClear ? (
									<TouchableOpacity onPress={this.onSearchCleared}>
										<Icon name="close" style={{ margin: 10 }} />
									</TouchableOpacity>
								) : (
									<TouchableOpacity
										onPress={onFilterPress}
										style={{
											backgroundColor: '#E5E5E5',
											borderRadius: 3,
											marginHorizontal: 10,
											paddingVertical: 5,
											paddingHorizontal: 8,
										}}>
										<FAIcon name="filter" style={{ fontSize: 22 }} />
									</TouchableOpacity>
								)}
							</View>
							<TouchableOpacity
								onPress={this.toggleMapList}
								style={{
									padding: 8,
									borderRadius: 10,
									backgroundColor: 'rgba(255,255,255,0.2)',
									marginLeft: 10,
									alignItems: 'center',
									justifyContent: 'center',
								}}>
								<Icon name={viewMode === 'map' ? 'view-list' : 'map'} size={22} color="white" />
							</TouchableOpacity>
						</View>
					)}
				</SafeAreaView>
			</View>
		);
	}
}

export default withFilter(withRouterContext(TopToolbar));