aretherecookies-mobile/js/pages/FoodItemDetail.js

// @flow
import React from 'react';
import { Button, Image, Text, 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, withState, withHandlers, onlyUpdateForKeys, withProps } 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 { routeWithTitle } from '../helpers/RouteHelpers';
import { Link } from 'react-router-native';
import moment from 'moment';
import { withUpdateQuantity } from '../enhancers/quantityEnhancers';
import { getQuantityLabelText } from '../helpers/QuantityHelpers';
import AuthManager from '../AuthManager';
import RouterButton from 'react-router-native-button';
import QuantityModal from '../modals/QuantityModal';

const { foodItemDetails: style } = theme;

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

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

type Props = {
	foodItem: FoodItemRecord,
	place: PlaceRecord,
	currentImage: number,
	quantityModalOpen: boolean,
	isLoggedIn: boolean,
	changeCurrentImage: (index: number) => void,
	updateAmount: (quantity: Quantity) => void,
	updateQuantity: (arg: { foodItemId: string, quantity: Quantity }) => void,
	toggleQuantityModal: () => void,
	addPhoto: () => void,
};

export const FoodItemDetail = (props: Props) => {
	const {
		foodItem,
		place,
		currentImage,
		changeCurrentImage,
		isLoggedIn,
		addPhoto,
		toggleQuantityModal,
		quantityModalOpen,
		updateAmount,
	} = props;

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

	const visibleImages = foodItem.images.filter(image => !!image);

	return (
		<View style={{ ...theme.page.container }}>
			<View style={{ flex: 3 }}>
				{visibleImages.size === 1 && (
					<Image style={stretchedStyle} source={{ uri: visibleImages.get(0) }} />
				)}
				{visibleImages.size > 1 && (
					<Carousel autoplay={false} onAnimateNextPage={changeCurrentImage} style={stretchedStyle}>
						{visibleImages.map(uri => (
							<Image key={uri} style={{ flex: 1, resizeMode: 'stretch' }} source={{ uri }} />
						))}
					</Carousel>
				)}
				<CountBadge currentImage={currentImage + 1} totalCount={visibleImages.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={{
					flexBasis: 100,
					flexGrow: 1,
					...contentTileStyle,
					flexDirection: 'column',
					justifyContent: 'space-between',
				}}>
				<Text style={{ fontSize: 42, color: 'black' }}>
					{getQuantityLabelText(foodItem.quantity)}
				</Text>
				<SubText>
					Last updated at {moment(foodItem.lastupdated).format('h:mm A on MMM D, YYYY')}
				</SubText>
				{isLoggedIn && (
					<Button
						title="Update quantity"
						onPress={toggleQuantityModal}
						color={theme.palette.primaryColor}
					/>
				)}
				{!isLoggedIn && (
					<RouterButton
						title="Log in to update quantity"
						to={`/login?returnto=/foodItem/${foodItem.id}`}
						color={theme.palette.primaryColor}
					/>
				)}
			</View>
			<View style={{ flex: 1, ...contentTileStyle }}>
				{/* <IconButton
					glyph="stars"
					text="Add to Faves"
					onPress={this.addToFaves}
					color={style.actionIconColor}
				/> */}
				<IconButton
					glyph="insert-photo"
					text="Add Photo"
					onPress={addPhoto}
					color={style.actionIconColor}
				/>
			</View>
			<QuantityModal
				isVisible={quantityModalOpen}
				quantity={foodItem.quantity}
				onChange={updateAmount}
				onClose={toggleQuantityModal}
			/>
		</View>
	);
};

export default compose(
	withFoodItem,
	withPlaceForFoodItem,
	withUpdateQuantity,
	withProps(() => ({
		isLoggedIn: AuthManager.isLoggedIn(),
	})),
	withState('currentImage', 'changeCurrentImage', 0),
	withState('quantityModalOpen', 'setQuantityModalOpen', false),
	withHandlers({
		addPhoto: () => () => {},
		updateAmount: ({ updateQuantity, foodItem }: Props) => (quantity: Quantity) => {
			updateQuantity({ foodItemId: foodItem.id, quantity });
		},
		toggleQuantityModal: ({ quantityModalOpen, setQuantityModalOpen }) => () => {
			setQuantityModalOpen(!quantityModalOpen);
		},
	}),
	onlyUpdateForKeys(['foodItem', 'place', 'currentImage', 'quantityModalOpen'])
)(FoodItemDetail);