aretherecookies-mobile/js/pages/CreateFoodItem.js

// @flow
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import theme from '../ui-theme';
import { Divider } from 'react-native-material-ui';
import FoodItemRecord from '../records/FoodItemRecord';
import PlaceRecord from '../records/PlaceRecord';
import NameModal from '../modals/FoodItemNameModal';
import QuantityPicker from '../components/QuantityPicker';
import { compose, branch, withState, withHandlers, renderComponent, mapProps } from 'recompose';
import RNGooglePlaces from 'react-native-google-places';
import CategoryPicker from '../components/CategoryPicker';
import { ImageThumb, ImagePicker } from '../components/ImagePicker';

type GooglePlaceObject = {
	placeID: string,
	latitude: number,
	longitude: number,
	name: string,
	address: string,
};

const fieldStyle = {
	paddingTop: 10,
};

const fieldNameStyle = {
	fontSize: 18,
	paddingBottom: 10,
	paddingLeft: 10,
};

const Field = ({ onPress, text = '' }: { onPress?: Function, text: string }) =>
	<TouchableOpacity style={fieldStyle} onPress={onPress}>
		<Text style={fieldNameStyle}>
			{text}
		</Text>
		<Divider />
	</TouchableOpacity>;

const openPlaceModal = (onChoosePlace: (place: GooglePlaceObject) => void) => () => {
	RNGooglePlaces.openAutocompleteModal({ type: 'establishment' }).then(onChoosePlace).catch(error => {
		throw error;
	});
};

type Props = {
	foodItem: typeof FoodItemRecord,
	setPropOfFoodItem: Function,
	toggleNameModal: Function,
	setFoodItem: Function,
	setModalsVisible: Function,
	place: typeof PlaceRecord,
	setPlace: (place: typeof PlaceRecord) => void,
	removeImageAtIndex: (i: number) => () => void,
	updatePlace: (place: GooglePlaceObject) => void,
	addImage: (uri: string) => void,
};
const CreateFoodItem = (props: Props) => {
	const { foodItem, toggleNameModal, setPropOfFoodItem, place, updatePlace, removeImageAtIndex, addImage } = props;

	return (
		<View style={{ ...theme.page.container, backgroundColor: 'white', padding: 10 }}>
			<Field text={foodItem.name || 'Name'} onPress={toggleNameModal} />
			<Field text={place.name || 'Place'} onPress={openPlaceModal(updatePlace)} />
			<CategoryPicker
				selected={foodItem.category}
				onValueChange={setPropOfFoodItem('category')}
				style={{ height: 50 }}
			/>
			<Divider />
			<QuantityPicker
				quantity={foodItem.quantity}
				onValueChange={setPropOfFoodItem('quantity')}
				style={{ height: 50 }}
			/>
			<Divider />
			<ImagePicker onCreateNew={addImage}>
				{foodItem.images.map((image, index) =>
					<ImageThumb key={index} uri={image} onPress={removeImageAtIndex(index)} />
				)}
			</ImagePicker>
		</View>
	);
};

const enhanceNameModal = compose(
	renderComponent,
	mapProps(({ toggleNameModal, setPropOfFoodItem }: Props) => {
		return {
			onClose: toggleNameModal,
			onUpdate: setPropOfFoodItem('name'),
		};
	})
);

export default compose(
	withState('foodItem', 'setFoodItem', new FoodItemRecord()),
	withState('place', 'setPlace', new PlaceRecord()),
	withState('nameModalOpen', 'setNameModalOpen', false),
	withHandlers({
		setPropOfFoodItem: ({ foodItem, setFoodItem }: Props) => (prop: string) => (value: any) => {
			setFoodItem(foodItem.set(prop, value));
		},
		addImage: ({ foodItem, setFoodItem }: Props) => (uri: string) => {
			setFoodItem(foodItem.update('images', images => [uri].concat(images)));
		},
		removeImageAtIndex: ({ foodItem, setFoodItem }: Props) => (index: number) => () => {
			setFoodItem(
				foodItem.update('images', (images: Array<string>) => {
					images.splice(index, 1);
					return images;
				})
			);
		},
		updatePlace: ({ setPlace, foodItem, setFoodItem }: Props) => ({
			placeID,
			latitude,
			longitude,
			name,
			address,
			phoneNumber,
			website,
		}) => {
			setPlace(
				new PlaceRecord({
					id: placeID,
					name,
					address,
					latitude,
					longitude,
					phoneNumber,
					website,
				})
			);

			setFoodItem(
				foodItem.merge({
					placeId: placeID,
					latitude,
					longitude,
				})
			);
		},
		toggleNameModal: ({ nameModalOpen, setNameModalOpen }) => () => setNameModalOpen(!nameModalOpen),
	}),
	branch(({ nameModalOpen }) => !!nameModalOpen, enhanceNameModal(NameModal))
)(CreateFoodItem);