aretherecookies-mobile/js/pages/FavesList.js

// @flow
import React from 'react';
import { View, ScrollView, RefreshControl } from 'react-native';
import { compose, pure, withState, withHandlers, lifecycle } from 'recompose';
import { withFoodItems } from '../enhancers/foodItemEnhancers';
import { Map, get } from 'immutable';
import typeof FoodItemRecord from '../records/FoodItemRecord';
import { withFaves } from '../enhancers/favesEnhancer';
import type { Faves, Fave } from '../streams/FavesStream';
import FoodItemTile from '../components/FoodItemTile';
import { withAuthRedirect } from '../enhancers/authEnhancers';

type Props = {
	faves: Faves,
	onRefresh: () => Promise<any>,
	onPulldown: () => {},
	isRefreshing: boolean,
	viewMode: string,
};

const FavesList = ({ faves, isRefreshing, onPulldown }: Props) => {
	const refreshing = isRefreshing || !faves;
	return (
		<View>
			<ScrollView
				refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onPulldown} />}>
				{faves &&
					faves.map((fave: Faves, index: number) => {
						return <FoodItemTile key={fave.id || index} foodItem={fave} />;
					})}
			</ScrollView>
		</View>
	);
};

export default compose(
	pure,
	withAuthRedirect,
	withFaves,
	withState('isRefreshing', 'setRefreshing', true),
	withHandlers({
		onPulldown: ({ setRefreshing, getFaves }) => async () => {
			try {
				setRefreshing(true);
				await getFaves();
			} catch (error) {
				console.error(error); // eslint-disable-line no-console
			} finally {
				setRefreshing(false);
			}
		},
	}),
	lifecycle({
		componentDidMount() {
			this.props.onPulldown();
		},
	})
)(FavesList);