aretherecookies-mobile/js/pages/FoodList.js

// @flow
import React, { Component } from 'react';
import { View, ScrollView } from 'react-native';
import FoodItemTile from '../components/FoodItemTile';
import { ActionButton } from 'react-native-material-ui';
import { routeWithTitle } from '../helpers/RouteHelpers';
import FoodItemList from '../components/FoodItemList';
import typeof FoodItemRecord from '../records/FoodItemRecord';
import FilterModal from '../components/FilterModal';

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

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

export default class FoodList extends Component {
	static displayName = 'FoodList';

	props: {
		pushRoute: Object => void,
		isFilterModalOpen: boolean,
		toggleFilterModal: (val: boolean) => void,
	};

	addFoodItem = () => {
		const newRoute = routeWithTitle('/createFoodItem', 'Add a Food Item');
		this.props.pushRoute(newRoute);
	};

	toggleFilterModal = () => {
		const { isFilterModalOpen, toggleFilterModal } = this.props;
		toggleFilterModal(!isFilterModalOpen);
	};

	onActionPressed = (action: string) => {
		switch (action) {
			case 'add':
				this.addFoodItem();
				break;
			case 'filter':
				this.toggleFilterModal();
				break;
		}
	};

	render() {
		const { isFilterModalOpen } = this.props;

		return (
			<View style={theme.page.container}>
				<ScrollView>
					<FoodItemList renderFoodItem={renderFoodItem} />
				</ScrollView>
				<FilterModal isVisible={isFilterModalOpen} onClose={this.toggleFilterModal} />
				<ActionButton
					actions={[
						{ icon: 'add', label: 'Add New', name: 'add' },
						{ icon: 'filter-list', label: 'Filter', name: 'filter' },
					]}
					icon="add"
					transition="speedDial"
					onPress={this.onActionPressed}
				/>
			</View>
		);
	}
}