aretherecookies-mobile/js/pages/PlacesList.js

// @flow
import React from 'react';
import { View, ScrollView, RefreshControl } from 'react-native';
import PlaceTile from '../components/PlaceTile';
import { compose, pure, withState, withHandlers, lifecycle } from 'recompose';
import { withFoodItemsGroupedByPlace } from '../enhancers/foodItemEnhancers';
import { withPlaces } from '../enhancers/placeEnhancers';
import { Map, List } from 'immutable';
import typeof FoodItemRecord from '../records/FoodItemRecord';
import typeof PlaceRecord from '../records/PlaceRecord';
import ActionsButton from '../components/ActionsButton';
import { withRouterContext } from '../enhancers/routeEnhancers';

type Props = {
	foodItemsByPlace: Map<string, Map<string, FoodItemRecord>>,
	places: ?Map<string, PlaceRecord>,
	onRefresh: () => Promise<any>,
	onPulldown: () => {},
	isRefreshing: boolean,
	viewMode: string,
};

const byDistance = (left: PlaceRecord, right: PlaceRecord) => left.distance - right.distance;

const PlacesList = ({ foodItemsByPlace = Map(), places, isRefreshing, onPulldown }: Props) => {
	const refreshing = isRefreshing || !places;
	return (
		<View>
			<ScrollView
				refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onPulldown} />}>
				{places &&
					places
						.sort(byDistance)
						.map((place: PlaceRecord, placeId: string) => {
							const foodItems = foodItemsByPlace.get(placeId, new List());
							return <PlaceTile key={placeId} place={place} foodItems={foodItems} />;
						})
						.toList()}
			</ScrollView>
			<ActionsButton actions={['view-mode']} />
		</View>
	);
};

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