aretherecookies-mobile/js/pages/Food.js

// @flow
import React, { Component, PropTypes } from 'react';
import { View, ScrollView } from 'react-native';
import theme from '../ui-theme';
import FoodItemTile from '../components/FoodItemTile';
import { ActionButton } from 'react-native-material-ui';
import { routeWithTitle } from '../helpers/RouteHelpers';
import FoodItemList from '../components/FoodItemList';
import { type FoodItem } from '../records/FoodItemRecord';
import { withPlaceForFoodItem } from '../enhancers/placeEnhancers';

const { shape, func } = PropTypes;

const FoodItemWithPlace = withPlaceForFoodItem(FoodItemTile);

const renderFoodItem = (foodItem: FoodItem) => <FoodItemWithPlace key={foodItem.id} foodItem={foodItem} />;

class Food extends Component {
	static displayName = 'Food';
	static contextTypes = {
		router: shape({
			history: shape({
				push: func.isRequired,
			}).isRequired,
		}).isRequired,
	};

	addFoodItem = () => {
		const newRoute = routeWithTitle('/createFoodItem', 'Add a Food Item');
		this.context.router.history.push(newRoute);
	};

	render() {
		return (
			<View style={theme.page.container}>
				<ScrollView>
					<FoodItemList renderFoodItem={renderFoodItem} />
				</ScrollView>
				<ActionButton icon="add" onPress={this.addFoodItem} />
			</View>
		);
	}
}

export default Food;