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 typeof FoodItemRecord from '../records/FoodItemRecord';
import { type Quantity } from '../constants/QuantityConstants';
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';
import { routeWithTitle } from '../helpers/RouteHelpers';
import { Link } from 'react-router-native';
import moment from 'moment';
import { withUpdateQuantity } from '../enhancers/quantityEnhancers';

const { foodItemDetails: style } = theme;

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

const contentTileStyle = {
	backgroundColor: 'white',
	padding: 15,
	marginBottom: 10,
};

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

	props: {
		foodItem: FoodItemRecord,
		place: PlaceRecord,
		updateQuantity: ({ foodItemId: string, quantity: Quantity }) => void,
	};

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

	state = {
		currentImage: 0,
	};

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

	updateAmount = (quantity: Quantity) => {
		const { updateQuantity, foodItem: { id: foodItemId } } = this.props;
		updateQuantity({ foodItemId, 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.size === 1 && (
						<Image style={stretchedStyle} source={{ uri: viewableImages.get(0) }} />
					)}
					{viewableImages.size > 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.size} />
				</View>
				<View style={{ ...contentTileStyle }}>
					<Link
						to={routeWithTitle(`/place/${place.id || ''}`, place.name)}
						underlayColor={theme.itemTile.pressHighlightColor}
					>
						<View>
							<StrongText>{place.name}</StrongText>
							<SubText>{place.address}</SubText>
						</View>
					</Link>
				</View>
				<View
					style={{
						flex: 1,
						...contentTileStyle,
					}}
				>
					<QuantityPicker
						quantity={quantity}
						onValueChange={this.updateAmount}
						style={{ flex: 1, marginBottom: 10 }}
					/>
					<SubText>Last updated at {moment(foodItem.lastupdated).format('h:mm A on MMM D, YYYY')}</SubText>
				</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, withUpdateQuantity);

export default enhance(FoodItemDetail);