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 typeof PlaceRecord from '../records/PlaceRecord';
import { Link } from 'react-router-native';
import { Thumbnail, StrongText, SubText } from './ItemTile';
import { routeWithTitle } from '../helpers/RouteHelpers';

const getHoursText = (hours: List<string>) => {
	if (!hours) {
		return '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
	return hours.get(new Date().getDay() - 1);
};

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

type PlaceTileProps = { place: PlaceRecord, distance: number, categories: List<string> };
export default pure(({ place, distance = 999, categories = new List() }: PlaceTileProps) => {
	if (!place) {
		return <View />;
	}

	return (
		<Link
			to={routeWithTitle(`/place/${place.id || ''}`, place.name)}
			underlayColor={theme.itemTile.pressHighlightColor}
		>
			<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white' }}>
				<Thumbnail thumb={place.thumb} />
				<View style={{ paddingTop: 5 }}>
					<StrongText>
						{`${place.name} - ${distance} mi`}
					</StrongText>
					<SubText>
						{`${categories.interpose(', ').reduce((str, token) => str + token, '')}`}
					</SubText>
					<SubText>
						{getHoursText(place.hours)}
					</SubText>
				</View>
			</View>
		</Link>
	);
});