fix wrong place for new food items

js/enhancers/placeEnhancers.js

@@ -39,34 +39,47 @@ export const withPlaceIdFromRoute = withProps((props: { match: { params: { id: s
 	return { placeId };
 });
 
-export const withPlace = compose(
+export const withPlaceId = compose(
 	withPlaces,
+	withRouterContext,
 	withProps(props => {
-		const { placeId, places } = props;
-		const place = places && places.get(placeId);
+		const placeId = props.placeId || getSearch(props).placeId;
+		return { placeId };
+	})
+);
+
+export const withPlaceActions = withProps(() => {
+	return {
+		emitPlace,
+		fetchPlaceDetails,
+	};
+});
+
+export const withPlace = compose(
+	withPlaceId,
+	withPlaces,
+	withProps(({ placeId, places }) => {
+		if (!placeId) {
+			return {
+				place: null,
+				fetchPlaceDetails,
+			};
+		}
 		return {
-			...props,
-			place,
+			place: places && places.get(placeId),
 			fetchPlaceDetails,
 		};
 	})
 );
 
-export const withPlaceFromSearch = compose(
+export const withPlaceForFoodItem = compose(
 	withPlaces,
-	withRouterContext,
-	withProps(props => {
-		const { placeId } = getSearch(props);
-		return placeId ? { place: props.places.get(placeId) } : {};
-	})
-);
-
-export const withPlaceForFoodItem = mapPropsStream(props$ =>
-	props$.combineLatest(Places$, (props, places) => {
-		const placeId = props.foodItem && props.foodItem.placeId;
+	withProps(({ places, foodItem }) => {
+		if (!foodItem || !foodItem.placeId) {
+			return { place: null };
+		}
 		return {
-			...props,
-			place: places.get(placeId),
+			place: places.get(foodItem.placeId),
 		};
 	})
 );

js/pages/CreateFoodItem.js

@@ -8,12 +8,20 @@ import PlaceRecord from '../records/PlaceRecord';
 import NameModal from '../modals/FoodItemNameModal';
 import ImagePreviewModal from '../modals/ImagePreviewModal';
 import QuantityPicker from '../components/QuantityPicker';
-import { compose, branch, withState, withHandlers, renderComponent, mapProps } from 'recompose';
+import {
+	compose,
+	branch,
+	withState,
+	withHandlers,
+	renderComponent,
+	mapProps,
+	lifecycle,
+} from 'recompose';
 import RNGooglePlaces from 'react-native-google-places';
 import CategoryPicker from '../components/CategoryPicker';
 import { ImageThumb, ImagePicker } from '../components/ImagePicker';
 import { withCreateFoodItemState } from '../enhancers/createFoodItemEnhancers';
-import { withPlaceFromSearch } from '../enhancers/placeEnhancers';
+import { withPlaceForFoodItem, withPlaceId, withPlaceActions } from '../enhancers/placeEnhancers';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { openImagePicker } from '../helpers/ImagePickerHelpers';
 
@@ -43,11 +51,7 @@ const Field = ({ onPress, text = '' }: { onPress?: Function, text: string }) =>
 );
 
 const openPlaceModal = (onChoosePlace: (place: GooglePlaceObject) => void) => () => {
-	RNGooglePlaces.openAutocompleteModal({ type: 'establishment' })
-		.then(onChoosePlace)
-		.catch(error => {
-			throw error;
-		});
+	RNGooglePlaces.openAutocompleteModal({ type: 'establishment' }).then(onChoosePlace);
 };
 
 type Props = {
@@ -56,31 +60,31 @@ type Props = {
 	toggleNameModal: Function,
 	setFoodItem: Function,
 	setModalsVisible: Function,
-	place: typeof PlaceRecord,
-	setPlace: (place: typeof PlaceRecord) => void,
+	place: ?PlaceRecord,
 	updatePlace: (place: GooglePlaceObject) => void,
 	addImage: (uri: string) => void,
 	setImagePreview: (index?: number) => void,
 	loading: boolean,
 	setLoading: (arg: boolean) => void,
+	emitPlace: (place: Object) => void,
 };
 const CreateFoodItem = (props: Props) => {
 	const {
 		foodItem,
 		toggleNameModal,
 		setPropOfFoodItem,
-		place,
 		updatePlace,
 		addImage,
 		setImagePreview,
 		loading,
+		place,
 	} = props;
 
 	return (
 		<View style={{ ...theme.page.container, backgroundColor: 'white', padding: 10 }}>
 			<Spinner visible={loading} />
 			<Field text={foodItem.name || 'Name'} onPress={toggleNameModal} />
-			<Field text={place.name || 'Place'} onPress={openPlaceModal(updatePlace)} />
+			<Field text={(place && place.name) || 'Place'} onPress={openPlaceModal(updatePlace)} />
 			<CategoryPicker
 				selected={foodItem.category}
 				onValueChange={setPropOfFoodItem('category')}
@@ -135,24 +139,13 @@ const addImage = ({ foodItem, setFoodItem }: Props) => async () => {
 	setFoodItem(foodItem.update('images', images => images.add(uri)));
 };
 
-const updatePlace = ({ setPlace, foodItem, setFoodItem }: Props) => ({
-	placeID,
-	latitude,
-	longitude,
-	name,
-	address,
-	phoneNumber,
-	website,
-}) => {
-	setPlace(
+const updatePlace = ({ foodItem, setFoodItem, emitPlace }: Props) => placeDetails => {
+	const { placeID, latitude, longitude } = placeDetails;
+
+	emitPlace(
 		new PlaceRecord({
+			...placeDetails,
 			id: placeID,
-			name,
-			address,
-			latitude,
-			longitude,
-			phoneNumber,
-			website,
 		})
 	);
 
@@ -170,8 +163,9 @@ const toggleNameModal = ({ nameModalOpen, setNameModalOpen }) => () =>
 
 export default compose(
 	withCreateFoodItemState,
-	withPlaceFromSearch,
-	withState('place', 'setPlace', (props: Props) => props.place || new PlaceRecord()),
+	withPlaceId,
+	withPlaceForFoodItem,
+	withPlaceActions,
 	withState('nameModalOpen', 'setNameModalOpen', false),
 	withState('imagePreview', 'setImagePreview', -1),
 	withHandlers({
@@ -180,6 +174,12 @@ export default compose(
 		updatePlace,
 		toggleNameModal,
 	}),
+	lifecycle({
+		componentDidMount() {
+			const { placeId, setFoodItem } = this.props;
+			setFoodItem(new FoodItemRecord({ placeId }));
+		},
+	}),
 	branch(({ nameModalOpen }) => !!nameModalOpen, NameModalComp),
 	branch(({ imagePreview }) => imagePreview > -1, ImagePreviewComp)
 )(CreateFoodItem);