aretherecookies-mobile/js/modals/FoodItemNameModal.js

// @flow
import React, { Component } from 'react';
import { View } from 'react-native';
import Modal, { TextInputHeader, TextButton } from '../components/Modal';
import { Divider } from 'react-native-material-ui';
import FoodItemList from '../components/FoodItemList';
import FoodItemRecord from '../records/FoodItemRecord';
import { withPlaceForFoodItem } from '../enhancers/placeEnhancers';
import { FoodItemTile } from '../components/ItemTile';
import typeof PlaceRecord from '../records/PlaceRecord';

const FoodItemWithPlace = withPlaceForFoodItem(
	({ foodItem, place }: { foodItem: typeof FoodItemRecord, place: PlaceRecord }) => {
		return <FoodItemTile foodItem={foodItem} place={place} />;
	}
);

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

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

	state: {
		text: string,
	};

	state = {
		text: '',
	};

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

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

	renderFoodItem = (foodItem: typeof FoodItemRecord) => {
		return (
			<View key={foodItem.id}>
				<FoodItemWithPlace foodItem={foodItem} />
				<Divider />
			</View>
		);
	};

	render() {
		const { isVisible, onClose } = this.props;
		return (
			<Modal isVisible={isVisible}>
				<TextInputHeader
					value={this.state.text}
					onChange={this.setText}
					onSubmit={this.save}
					onClose={onClose}
				/>
				<TextButton text="Not here, it's a new product" onPress={this.save} />
				<FoodItemList filter={this.state.text} limit={5} renderFoodItem={this.renderFoodItem} />
			</Modal>
		);
	}
}

export default NameModal;