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 } from './ItemTile';

export default pure(({ foodItem, place = {} }: { foodItem: FoodItemRecord, place: PlaceRecord }) => {
	if (!foodItem) {
		return <View />;
	}

	return (
		<Link
			to={routeWithTitle(`/foodItem/${foodItem.id || ''}`, foodItem.name)}
			underlayColor={theme.itemTile.pressHighlightColor}
		>
			<View>
				<TileBox>
					<Thumbnail thumb={foodItem.thumbImage} />
					<View style={{ paddingTop: 15 }}>
						<StrongText>
							{foodItem.name || ''}
						</StrongText>
						<SubText>
							{`${place.name || ''} - ${foodItem.distance} mi`}
						</SubText>
					</View>
				</TileBox>
			</View>
		</Link>
	);
});