aretherecookies-mobile/js/components/PlaceTile.js

// @flow
import { View } from 'react-native';
import React from 'react';
import { pure } from 'recompose';
import { List } from 'immutable';
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 = (hours: List<string>) => {
	if (!hours) {
		return 'hours not listed';
	}
	// Note: js Date return 0-Sun/6-Sat where google return 0-Mon/6-Sun
	// Immutable.List is smart enough to know that a negative index is counted from the last index
	const today = new Date().getDay() - 1;
	return hours.get(today);
};

const getCategoriesText = (foodItems: Map<string, FoodItemRecord>) => {
	const categoriesFromFoodItems = getCategories(foodItems);
	return categoriesFromFoodItems.interpose(', ').reduce(appendString, '');
};

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

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

export default pure(({ place, foodItems }: PlaceTileProps) => {
	if (!place || foodItems.size === 0) {
		return <View />;
	}

	const distance = foodItems.first().distance || 999;

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