aretherecookies-mobile/js/pages/FoodItemDetail.js

// @flow
import React, { Component } from 'react';
import { Picker, Text, View } from 'react-native';
import theme from '../ui-theme';
import { NameAndPlace } from '../components/ItemTile';
import { type FoodItem } from '../records/FoodItemRecord';
import { compose, pure } from 'recompose';
import ImageThumb from '../components/ImageThumb';
import ImageBackdrop from '../components/ImageBackdrop';
import IconButton from '../components/IconButton';
import { type Quantity, getQuantityText } from '../helpers/QuantityHelpers';
import Modal from '../components/Modal';
import { withFoodItem } from '../enhancers/foodItemEnhancers';

const QuantityText = pure(({ quantity }: { quantity: Quantity }) => (
	<View style={{ flex: 1, alignItems: 'center', paddingTop: 20 }}>
		<Text style={{ fontSize: 50, color: 'black', height: 100 }}>{getQuantityText(quantity)}</Text>
	</View>
));

export class FoodItemDetail extends Component {
	static displayName = 'FoodItemDetail';

	props: {
		foodItem: FoodItem,
	};

	state: {
		quantityModalOpen: boolean,
	};

	state = { quantityModalOpen: false };

	addToFaves = () => {};

	updateAmount = () => this.toggleQuantityModal();

	addPhoto = () => {};

	toggleQuantityModal = () => {
		this.setState(({ quantityModalOpen }) => {
			return { quantityModalOpen: !quantityModalOpen };
		});
	};

	render() {
		const { foodItem } = this.props;
		return (
			<View style={theme.page.container}>
				<View style={{ flex: 2 }}>
					<ImageBackdrop uri={foodItem.titleImage} />
					<View style={{ position: 'absolute', bottom: 0, left: 0, flexDirection: 'row' }}>
						{foodItem.images.map((imageURI, index) => {
							return <ImageThumb key={index} uri={imageURI} />;
						})}
					</View>
				</View>
				<View style={{ flex: 3, paddingTop: 10, paddingLeft: 20, paddingRight: 20 }}>
					<NameAndPlace name="Whole Foods Market" place="525 N. Lamar Blvd. Austin" />
					<QuantityText quantity="many" />
					<View style={{ flexDirection: 'row', paddingBottom: 20 }}>
						<IconButton style={{ flex: 3 }} glyph="stars" text="Add to Faves" onPress={this.addToFaves} />
						<IconButton
							style={{ flex: 3 }}
							glyph="mode-edit"
							text="Update Amount"
							onPress={this.updateAmount}
						/>
						<IconButton style={{ flex: 3 }} glyph="insert-photo" text="Add Photo" onPress={this.addPhoto} />
					</View>
				</View>
				<Modal isVisible={this.state.quantityModalOpen}>
					<Picker
						selectedValue={foodItem.quantity}
						onValueChange={this.toggleQuantityModal}
						style={{ width: 250 }}
					>
						{['none', 'few', 'alot', 'plenty'].map(quantity => (
							<Picker.Item key={quantity} label={getQuantityText(quantity)} value={quantity} />
						))}
					</Picker>
				</Modal>
			</View>
		);
	}
}

const enhance = compose(pure, withFoodItem);

export default enhance(FoodItemDetail);