aretherecookies-mobile/js/components/FoodItemTile.js

// @flow
import React from 'react';
import { View } from 'react-native';
import { pure } from 'recompose';
import FoodItemRecord from '../records/FoodItemRecord';
import typeof PlaceRecord from '../records/PlaceRecord';
import theme from '../ui-theme';
import { Link } from 'react-router-native';
import { routeWithTitle } from '../helpers/RouteHelpers';
import { TileBox, StrongText, SubText, Thumbnail, QuantityLine } from './ItemTile';
import { withPlace } from '../enhancers/placeEnhancers';

const PlaceNameAndDistance = withPlace(
	({ place, distance = 999.9 }: { place: ?PlaceRecord, distance: number }) => {
		return (
			<SubText>{`${(place && place.name) || 'Loading...'} - ${parseFloat(distance).toFixed(
				1
			)} mi`}</SubText>
		);
	}
);

const EmptyFoodItemTile = () => {
	return (
		<View>
			<TileBox>
				<Thumbnail thumb={null} />
				<View>
					<StrongText>Loading...</StrongText>
				</View>
			</TileBox>
		</View>
	);
};

export default pure(({ foodItem }: { foodItem: FoodItemRecord }) => {
	if (!foodItem) {
		return <EmptyFoodItemTile />;
	}

	return (
		<Link
			to={routeWithTitle(`/foodItem/${foodItem.id || ''}`, foodItem.name)}
			underlayColor={theme.itemTile.pressHighlightColor}>
			<View>
				<TileBox>
					<Thumbnail thumb={foodItem.thumbImage} />
					<View>
						<StrongText>{foodItem.name || ''}</StrongText>
						<PlaceNameAndDistance placeId={foodItem.placeId} distance={foodItem.distance} />
						<QuantityLine quantity={foodItem.quantity} lastupdated={foodItem.lastupdated} />
					</View>
				</TileBox>
			</View>
		</Link>
	);
});