aretherecookies-mobile/js/modals/FoodItemNameModal.js

// @flow
import React, { Component } from 'react';
import { TouchableOpacity, ScrollView, SafeAreaView } from 'react-native';
import { TextButton } from './Modal';
import FoodItemList from '../components/FoodItemList';
import FoodItemRecord from '../records/FoodItemRecord';
import { StrongText } from '../components/ItemTile';
import { Toolbar } from 'react-native-material-ui';
import FilterRecord from '../records/FilterRecord';
import { compose, pure } from 'recompose';
import { withUniqueFoodItems } from '../enhancers/foodItemEnhancers';
import { Set } from 'immutable';

type Props = {
	onClose: () => void,
	onUpdate: (name: string) => void,
	foodItemsSeq: ?Set<FoodItemRecord>,
};

class NameModal extends Component {
	static displayName = 'NameModal';

	props: Props;

	state: {
		filter: FilterRecord,
	};

	state = {
		filter: new FilterRecord(),
	};

	save = () => {
		this.props.onUpdate(this.state.filter.search);
		this.props.onClose();
	};

	setText = (text: string) => {
		this.setState(({ filter }) => ({ filter: filter.set('search', text) }));
	};

	updateAndClose = (text: string) => {
		this.props.onUpdate(text);
		this.props.onClose();
	};

	render() {
		const { onClose, foodItemsSeq } = this.props;
		const { filter } = this.state;
		return (
			<SafeAreaView
				style={{
					position: 'absolute',
					top: 0,
					bottom: 0,
					left: 0,
					right: 0,
				}}>
				<Toolbar
					leftElement="arrow-back"
					onLeftElementPress={onClose}
					searchable={{
						autoFocus: false,
						placeholder: 'Search',
						onChangeText: this.setText,
						onSearchClosed: onClose,
					}}
					isSearchActive={true}
					style={{
						container: {
							elevation: 3,
						},
					}}
				/>
				{!!filter.search && (
					<TextButton
						text="Not here, it's a new product"
						onPress={this.save}
						style={{ marginLeft: 66 }}
					/>
				)}
				<ScrollView style={{ paddingLeft: 78 }}>
					<FoodItemList filter={filter} limit={10} foodItemsSeq={foodItemsSeq}>
						{(foodItem: FoodItemRecord) => (
							<TouchableOpacity
								key={foodItem.id}
								onPress={() => this.updateAndClose(foodItem.name)}>
								<StrongText style={{ paddingTop: 20, paddingBottom: 20 }}>
									{foodItem.name}
								</StrongText>
							</TouchableOpacity>
						)}
					</FoodItemList>
				</ScrollView>
			</SafeAreaView>
		);
	}
}

export default compose(
	pure,
	withUniqueFoodItems
)(NameModal);