aretherecookies-mobile/js/pages/PlaceDetail.js

// @flow
import React, { Component } from 'react';
import { View, Image, ScrollView } from 'react-native';
import theme from '../ui-theme';
import { compose, pure } from 'recompose';
import typeof PlaceRecord from '../records/PlaceRecord';
import { withPlace, withPlaceIdFromRoute, withFoodItemsForPlace } from '../enhancers/placeEnhancers';
import Carousel from 'react-native-looped-carousel';
import CountBadge from '../components/CountBadge';
import { StrongText } from '../components/ItemTile';
import IconButton from '../components/IconButton';
import { type List } from 'immutable';
import typeof FoodItemRecord from '../records/FoodItemRecord';
import FoodItemTile from '../components/FoodItemTile';

const { placeDetails: style } = theme;

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

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

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

	props: {
		place: ?PlaceRecord,
		foodItems: ?List<FoodItemRecord>,
	};

	state: {
		currentImage: number,
	};

	state = {
		currentImage: 0,
	};

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

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

	// todo - build a map view and open it here
	viewOnMap = () => {};

	// todo: need to get the item from the stream by this id
	render() {
		const { place, foodItems } = this.props;

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

		const { photos } = place;
		const { currentImage } = this.state;

		return (
			<ScrollView style={theme.page.container}>
				<View style={{ height: 200 }}>
					{photos.size === 1 && <Image style={stretchedStyle} source={{ uri: photos.first() }} />}
					{photos.size > 1 &&
						<Carousel autoplay={false} onAnimateNextPage={this.changeCurrentImage} style={stretchedStyle}>
							{photos.map(uri =>
								<Image key={uri} style={{ flex: 1, resizeMode: 'stretch' }} source={{ uri }} />
							)}
						</Carousel>}
					<CountBadge currentImage={currentImage + 1} totalCount={photos.size} />
				</View>
				<View style={{ height: 50, marginBottom: 10, ...contentTileStyle }}>
					<View style={{ marginTop: 15 }}>
						<StrongText>
							{place.address}
						</StrongText>
					</View>
				</View>
				<View
					style={{ flexBasis: 75, ...contentTileStyle, marginBottom: 10, paddingTop: 5, paddingBottom: 10 }}
				>
					<IconButton
						glyph="stars"
						text="Add to Faves"
						onPress={this.addToFaves}
						color={style.actionIconColor}
					/>
					<IconButton
						glyph="map"
						text="View on a Map"
						onPress={this.viewOnMap}
						color={style.actionIconColor}
					/>
				</View>
				<View style={{ flex: 2, ...contentTileStyle, paddingTop: 10 }}>
					<StrongText>Products</StrongText>
					{!!foodItems &&
						foodItems.size &&
						foodItems.map(foodItem => <FoodItemTile key={foodItem.id} foodItem={foodItem} place={place} />)}
				</View>
			</ScrollView>
		);
	}
}

const enhance = compose(pure, withPlaceIdFromRoute, withPlace, withFoodItemsForPlace);

export default enhance(PlaceDetail);