aretherecookies-mobile/js/pages/FoodList.js

// @flow
import React, { Component } from 'react';
import { View, ScrollView, RefreshControl } from 'react-native';
import FoodItemTile from '../components/FoodItemTile';
import FoodItemList from '../components/FoodItemList';
import typeof FoodItemRecord from '../records/FoodItemRecord';
import FilterModal from '../modals/FilterModal';
import { withFoodItemsAsSeq } from '../enhancers/foodItemEnhancers';
import { type SetSeq } from 'immutable';
import { compose, pure, withState, withHandlers } from 'recompose';
import { type RoutingContextFlowTypes } from '../routes';
import ActionsButton from '../components/ActionsButton';

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

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

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

	context: RoutingContextFlowTypes;

	props: {
		isFilterModalOpen: boolean,
		toggleFilterModal: (val: boolean) => void,
		foodItemsSeq: SetSeq<FoodItemRecord>,
		isRefreshing: boolean,
		onRefresh: () => Promise<any>,
		onPulldown: () => {},
	};

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

	render() {
		const { isFilterModalOpen, foodItemsSeq, isRefreshing, onPulldown } = this.props;

		const refreshing = isRefreshing || !foodItemsSeq;

		return (
			<View style={theme.page.container}>
				<ScrollView
					style={{ flex: 1 }}
					refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onPulldown} />}>
					<FoodItemList foodItemsSeq={foodItemsSeq} renderFoodItem={renderFoodItem} />
				</ScrollView>
				<FilterModal isVisible={isFilterModalOpen} onClose={this.toggleFilterModal} />
				<ActionsButton toggleFilterModal={this.toggleFilterModal} />
			</View>
		);
	}
}

export default compose(
	pure,
	withFoodItemsAsSeq,
	withState('isRefreshing', 'setRefreshing', false),
	withHandlers({
		onPulldown: ({ setRefreshing, onRefresh }) => async () => {
			setRefreshing(true);
			await onRefresh();
			setTimeout(() => setRefreshing(false), 1000);
		},
	})
)(FoodList);