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, cond, test } 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: "Where's the TP?",
	};

	props: Props;

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

		if (history.length > 1) {
			history.goBack();
		} else {
			history.replace('/list/food');
		}
	};

	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.set('search', ''));
	};

	onChangeText = (search) => {
		const { setFilter, filter } = this.props;
		setFilter(filter.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 = cond([
			[test(/\/food/), () => 'Search products...'],
			[test(/\/places/), () => 'Search places...'],
			[test(/\/faves/), () => 'Search favorites'],
		])(route);

		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: 8,
							}}>
							<View
								style={{
									flex: 1,
									flexDirection: 'row',
									alignItems: 'center',
									backgroundColor: 'white',
									borderRadius: 10,
								}}>
								<Icon name="search" style={{ marginHorizontal: 8 }} />
								<TextInput
									value={filter.search}
									onChangeText={this.onChangeText}
									placeholder={searchPlaceholder}
									underlineColorAndroid="transparent"
									style={{
										flex: 1,
										fontSize: 16,
										padding: 4,
										height: 40,
									}}
								/>
								{showSearchClear ? (
									<TouchableOpacity onPress={this.onSearchCleared}>
										<Icon name="close" style={{ margin: 8 }} />
									</TouchableOpacity>
								) : (
									<TouchableOpacity
										onPress={onFilterPress}
										style={{
											backgroundColor: '#D4EAEF',
											borderRadius: 3,
											marginHorizontal: 10,
											paddingVertical: 5,
											paddingHorizontal: 8,
										}}>
										<FAIcon name="filter" style={{ fontSize: 24, color: palette.primaryColor }} />
									</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={24} color="white" />
							</TouchableOpacity>
						</View>
					)}
				</SafeAreaView>
			</View>
		);
	}
}

export default withFilter(withRouterContext(TopToolbar));