aretherecookies-mobile/js/pages/FoodItemDetail.js

// @flow
import React, { Component } from 'react';
import { Image, View } from 'react-native';
import theme from '../ui-theme';
import { StrongText, SubText } from '../components/ItemTile';
import { type FoodItem, type Quantity, QUANTITY_MANY } from '../records/FoodItemRecord';
import typeof PlaceRecord from '../records/PlaceRecord';
import { compose, pure } from 'recompose';
import IconButton from '../components/IconButton';
import { withFoodItem } from '../enhancers/foodItemEnhancers';
import { withPlaceForFoodItem } from '../enhancers/placeEnhancers';
import Carousel from 'react-native-looped-carousel';
import CountBadge from '../components/CountBadge';
import QuantityPicker from '../components/QuantityPicker';

const { foodItemDetails: style } = theme;

const stretchedStyle = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 };

const contentTileStyle = {
	backgroundColor: 'white',
	paddingLeft: 20,
	paddingRight: 20,
};

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

	props: {
		foodItem: FoodItem,
		place: PlaceRecord,
	};

	state: {
		isFavorite: boolean,
		quantity: Quantity,
		currentImage: number,
	};

	state = {
		currentImage: 0,
		quantity: QUANTITY_MANY,
	};

	// TODO placeholder implementation until we get a backend
	addToFaves = () =>
		this.setState(prevState => ({
			isFavorite: !prevState.isFavorite,
		}));

	updateAmount = (quantity: Quantity) => this.setState({ quantity });

	// TODO
	addPhoto = () => {};

	changeCurrentImage = (currentImage: number) => this.setState({ currentImage });

	render() {
		const { foodItem, place } = this.props;

		if (!foodItem || !place) {
			return <View />;
		}

		const { images, quantity } = foodItem;
		const viewableImages = images.filter(image => !!image);

		return (
			<View style={{ ...theme.page.container }}>
				<View style={{ flex: 3 }}>
					{viewableImages.length === 1 &&
						<Image style={stretchedStyle} source={{ uri: viewableImages[0] }} />}
					{viewableImages.length > 1 &&
						<Carousel autoplay={false} onAnimateNextPage={this.changeCurrentImage} style={stretchedStyle}>
							{viewableImages.map(uri =>
								<Image key={uri} style={{ flex: 1, resizeMode: 'stretch' }} source={{ uri }} />
							)}
						</Carousel>}
					<CountBadge currentImage={this.state.currentImage + 1} totalCount={viewableImages.length} />
				</View>
				<View style={{ flex: 1, marginBottom: 10, ...contentTileStyle }}>
					<View style={{ marginTop: 15 }}>
						<StrongText>
							{place.name}
						</StrongText>
						<SubText>
							{place.address}
						</SubText>
					</View>
				</View>
				<View
					style={{
						flex: 1,
						marginBottom: 10,
						...contentTileStyle,
					}}
				>
					<QuantityPicker
						quantity={this.state.quantity || quantity}
						onValueChange={this.updateAmount}
						style={{ flex: 1 }}
					/>
				</View>
				<View style={{ flex: 2, ...contentTileStyle }}>
					<IconButton
						glyph="stars"
						text="Add to Faves"
						onPress={this.addToFaves}
						color={style.actionIconColor}
					/>
					<IconButton
						glyph="insert-photo"
						text="Add Photo"
						onPress={this.addPhoto}
						color={style.actionIconColor}
					/>
				</View>
			</View>
		);
	}
}

const enhance = compose(pure, withFoodItem, withPlaceForFoodItem);

export default enhance(FoodItemDetail);