aretherecookies-mobile/js/components/ItemTile.js

//@flow
import React from 'react';
import { Text, View, Image } from 'react-native';
import { pure } from 'recompose';
import { type FoodItem } from '../records/FoodItemRecord';
import { type Place } from '../records/PlaceRecord';
import theme from '../ui-theme';
import { Link } from 'react-router-native';
import { routeWithTitle } from '../helpers/RouteHelpers';

export const Thumbnail = ({ thumb }: { thumb: ?string }) => (
	<View
		style={{
			height: theme.itemTile.thumbnailSize,
			width: theme.itemTile.thumbnailSize,
			borderRadius: Math.round(theme.itemTile.thumbnailSize / 2),
			backgroundColor: theme.itemTile.thumbnailColor,
			margin: 10,
		}}
	>
		{!!thumb &&
			<Image
				style={{
					height: theme.itemTile.thumbnailSize,
					width: theme.itemTile.thumbnailSize,
					borderRadius: Math.round(theme.itemTile.thumbnailSize / 2),
				}}
				source={{ uri: thumb }}
			/>}
	</View>
);

export const NameAndPlace = ({ name, place, style }: { name: string, place: string, style: Object }) => (
	<View style={{ paddingTop: 15, ...style }}>
		<Text style={{ ...theme.itemTile.itemNameStyle }}>{name}</Text>
		<Text style={{ ...theme.itemTile.itemPlaceStyle }}>{place}</Text>
	</View>
);

export const AvailableCount = ({ count }: { count: number }) => (
	<View style={{ height: 70, width: 70, paddingTop: 15 }}>
		<Text style={{ ...theme.itemTile.availableCountStyle }}>{count}</Text>
	</View>
);

export const PlaceTile = pure(({ place }: { place: Place, onPress: Function }) => (
	<Link to={routeWithTitle(`/place/${place.id}`, place.name)} underlayColor={theme.itemTile.pressHighlightColor}>
		<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white' }}>
			<Thumbnail thumb={place.thumb} />
			<NameAndPlace name={place.name} place="Whole Foods" style={{ flex: 1 }} />
		</View>
	</Link>
));

export const FoodItemTile = pure(({ foodItem, place }: { foodItem: FoodItem, place: Place }) => (
	<Link
		to={routeWithTitle(`/foodItem/${foodItem.id}`, foodItem.name)}
		underlayColor={theme.itemTile.pressHighlightColor}
	>
		<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white' }}>
			<Thumbnail thumb={foodItem.thumbImage} />
			<NameAndPlace name={foodItem.name} place={place.name} style={{ flex: 1 }} />
			<AvailableCount count={foodItem.availableCount} />
		</View>
	</Link>
));