aretherecookies-mobile/js/pages/FoodList.js

// @flow
import React from "react";
import { View, Text, ScrollView, RefreshControl } from "react-native";
import FoodItemTile from "../components/FoodItemTile";
import FoodItemList from "../components/FoodItemList";
import typeof FoodItemRecord from "../records/FoodItemRecord";
import { withFoodItemsAsSeq } from "../enhancers/foodItemEnhancers";
import { type SetSeq } from "immutable";
import { compose, pure, withState, withHandlers, lifecycle } from "recompose";
import { withFilter } from "../enhancers/filterEnhancers";
import { withRouterContext } from "../enhancers/routeEnhancers";
import FullScreenMessage from "../components/FullScreenMessage";

type Props = {
	foodItemsSeq: SetSeq<FoodItemRecord>,
	isRefreshing: boolean,
	onRefresh: () => Promise<any>,
	onPulldown: () => {},
	isFilterDirty: boolean
};

const FoodList = (props: Props) => {
	const { foodItemsSeq, isRefreshing, onPulldown, isFilterDirty } = props;

	const refreshing = isRefreshing || !foodItemsSeq;
	const showNoResults = !isRefreshing && isFilterDirty && foodItemsSeq && !foodItemsSeq.size;

	return (
		<View style={{ flex: 1 }}>
			{showNoResults && (
				<FullScreenMessage>
					<Text style={{ fontSize: 16 }}>No food matched your search.</Text>
					<Text style={{ fontSize: 16 }}>Check your filters and try again</Text>
				</FullScreenMessage>
			)}
			{!showNoResults && (
				<ScrollView
					style={{ flex: 1 }}
					refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onPulldown} />}
				>
					<FoodItemList foodItemsSeq={foodItemsSeq}>
						{(foodItem: FoodItemRecord) => <FoodItemTile key={foodItem.id} foodItem={foodItem} />}
					</FoodItemList>
				</ScrollView>
			)}
		</View>
	);
};

export default compose(
	pure,
	withRouterContext,
	withFoodItemsAsSeq,
	withFilter,
	withState("isRefreshing", "setRefreshing", false),
	withHandlers({
		onPulldown: ({ setRefreshing, onRefresh, router }) => async () => {
			try {
				setRefreshing(true);
				await onRefresh();
			} catch (error) {
				console.error(error); // eslint-disable-line no-console
				router.history.push("/zipcode");
			} finally {
				setTimeout(() => setRefreshing(false), 1000);
			}
		}
	}),
	lifecycle({
		componentDidMount() {
			this.props.onPulldown();
		}
	})
)(FoodList);