aretherecookies-mobile/js/components/FoodItemSaveBtn.js

// @flow
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { withCreateFoodItemState } from '../enhancers/createFoodItemEnhancers';
import { withReplaceRoute } from '../enhancers/routeEnhancers';
import { compose, onlyUpdateForKeys, withHandlers } from 'recompose';
import { routeWithTitle } from '../helpers/RouteHelpers';

type Props = {
	loading: boolean,
	doSave: Function,
};

const FoodItemSaveBtn = ({ loading, doSave }: Props) => {
	const textStyle = {
		color: 'white',
		marginRight: 20,
		fontWeight: 'bold',
		opacity: loading ? 0.7 : 1,
	};

	return (
		<TouchableOpacity onPress={loading ? null : doSave}>
			<Text style={textStyle}>SAVE</Text>
		</TouchableOpacity>
	);
};

export default compose(
	withCreateFoodItemState,
	withReplaceRoute,
	withHandlers({
		doSave: ({ saveFoodItem, setLoading, setError, replaceRoute }) => async () => {
			setError(null);
			setLoading(true);
			try {
				const { id, name } = await saveFoodItem();
				replaceRoute(routeWithTitle(`/foodItem/${id || ''}`, name));
			} catch (error) {
				setError(error);
			} finally {
				setLoading(false);
			}
		},
	}),
	onlyUpdateForKeys(['loading'])
)(FoodItemSaveBtn);