aretherecookies-mobile/js/modals/FoodItemNameModal.js

// @flow
import React, { Component } from 'react';
import { View, TextInput, TouchableOpacity } from 'react-native';
import Modal from '../components/Modal';
import { Divider, Icon } from 'react-native-material-ui';
import FoodItemList from '../components/FoodItemList';
import FoodItemRecord from '../records/FoodItemRecord';
import { withPlaceForFoodItem } from '../enhancers/placeEnhancers';
import { NameAndPlace } from '../components/ItemTile';
import { type Place } from '../records/PlaceRecord';

const FoodItemWithPlace = withPlaceForFoodItem(
	({ foodItem, place }: { foodItem: typeof FoodItemRecord, place: Place }) => {
		return <NameAndPlace name={foodItem.name} place={place.name} />;
	}
);

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

	props: {
		isVisible: boolean,
		onClose: () => void,
	};

	state: {
		text: string,
	};

	state = {
		text: '',
	};

	setText = (text: string) => {
		this.setState({ text });
	};

	renderFoodItem = (foodItem: typeof FoodItemRecord) => {
		return (
			<TouchableOpacity key={foodItem.id} onPress={() => this.setText(foodItem.name)}>
				<FoodItemWithPlace foodItem={foodItem} />
				<Divider />
			</TouchableOpacity>
		);
	};

	render() {
		const { isVisible, onClose } = this.props;
		return (
			<Modal isVisible={isVisible}>
				<View style={{ flexDirection: 'row' }}>
					<Icon name="search" style={{ marginTop: 10 }} />
					<TextInput
						style={{ flex: 1, height: 40 }}
						onChangeText={this.setText}
						value={this.state.text}
						placeholder="search"
					/>
					<TouchableOpacity onPress={onClose}>
						<Icon name="close" style={{ marginTop: 10 }} />
					</TouchableOpacity>
				</View>
				<Divider />
				<FoodItemList filter={this.state.text} renderFoodItem={this.renderFoodItem} />
			</Modal>
		);
	}
}

export default NameModal;