aretherecookies-mobile/js/components/PlaceTile.js

// @flow
import { View } from 'react-native';
import React from 'react';
import { pure } from 'recompose';
import FoodItemRecord from '../records/FoodItemRecord';
import typeof PlaceRecord from '../records/PlaceRecord';
import { Link } from 'react-router-native';
import { TileBox, Thumbnail, StrongText, SubText } from './ItemTile';
import { routeWithTitle } from '../helpers/RouteHelpers';
import { getCategories } from '../helpers/CategoryHelpers';
import { type Map } from 'immutable';

const appendString = (left: string, right: string) => `${left}${right}`;

const getHoursText = (place: PlaceRecord) => (place.openNow ? 'Open now' : 'Closed');

const getCategoriesText = (foodItems: Map<string, FoodItemRecord>) => {
	const categories = getCategories(foodItems);
	if (categories.size < 1) {
		return 'Nothing listed yet';
	}
	return categories.interpose(', ').reduce(appendString, '');
};

import theme from '../ui-theme';

type PlaceTileProps = {
	place: PlaceRecord,
	foodItems: Map<string, FoodItemRecord>,
};

export default pure(({ place, foodItems }: PlaceTileProps) => {
	return (
		<Link
			to={routeWithTitle(`/place/${place.id || ''}`, place.name)}
			underlayColor={theme.itemTile.pressHighlightColor}>
			<View>
				<TileBox>
					<Thumbnail thumb={place.thumb} />
					<View>
						<StrongText>{place.name}</StrongText>
						<SubText>{getCategoriesText(foodItems)}</SubText>
						<SubText>
							{getHoursText(place)} - {parseFloat(place.distance).toFixed(1)} mi
						</SubText>
					</View>
				</TileBox>
			</View>
		</Link>
	);
});