category picker

js/components/CategoryPicker.js

@@ -0,0 +1,28 @@
+// @flow
+import React from 'react';
+import { getCategoryText } from '../helpers/CategoryHelpers';
+import { Picker, View } from 'react-native';
+import theme from '../ui-theme';
+import { pure } from 'recompose';
+import { type Category, CATEGORIES } from '../records/FoodItemRecord';
+import debounce from '../helpers/debounce';
+
+const { picker: { color: selectedColor } } = theme;
+const defaultColor = 'black';
+
+const getItemColor = (selected, current) => (selected === current ? selectedColor : defaultColor);
+
+/* eslint-disable react/display-name */
+const renderItem = (selected: Category) => (item: Category) =>
+	<Picker.Item key={item} label={getCategoryText(item)} value={item} color={getItemColor(selected, item)} />;
+
+type categoryPickerProps = { selected: Category, onValueChange: Function, style: Object };
+const categoryPicker = pure(({ selected, onValueChange, style }: categoryPickerProps) =>
+	<View style={style}>
+		<Picker selectedValue={selected} onValueChange={debounce(onValueChange)} style={{ flex: 1 }}>
+			{CATEGORIES.map(renderItem(selected))}
+		</Picker>
+	</View>
+);
+
+export default categoryPicker;

js/components/QuantityPicker.js

@@ -7,7 +7,7 @@ import { pure } from 'recompose';
 import { type Quantity, QUANTITIES } from '../records/FoodItemRecord';
 import debounce from '../helpers/debounce';
 
-const { quantityPicker: { color: selectedColor } } = theme;
+const { picker: { color: selectedColor } } = theme;
 const defaultColor = 'black';
 
 const getItemColor = (selected, current) => (selected === current ? selectedColor : defaultColor);
@@ -24,7 +24,7 @@ const renderQuantityItem = (selectedQuantity: Quantity) => (quantity: Quantity)
 type QuantityPickerProps = { quantity: Quantity, onValueChange: Function, style: Object };
 const QuantityPicker = pure(({ quantity, onValueChange, style }: QuantityPickerProps) =>
 	<View style={style}>
-		<Picker selectedValue={quantity} onValueChange={onValueChange} style={{ flex: 1 }}>
+		<Picker selectedValue={quantity} onValueChange={debounce(onValueChange)} style={{ flex: 1 }}>
 			{QUANTITIES.map(renderQuantityItem(quantity))}
 		</Picker>
 	</View>

js/helpers/CategoryHelpers.js

@@ -0,0 +1,15 @@
+// @flow
+import { type Category, CATEGORY_BEVERAGES, CATEGORY_DESSERTS, CATEGORY_ENTREES } from '../records/FoodItemRecord';
+
+export const getCategoryText = (category: Category) => {
+	switch (category) {
+		case CATEGORY_BEVERAGES:
+			return 'Beverages';
+		case CATEGORY_DESSERTS:
+			return 'Desserts';
+		case CATEGORY_ENTREES:
+			return 'Entrees';
+		default:
+			return 'Other';
+	}
+};

js/pages/CreateFoodItem.js

@@ -9,14 +9,16 @@ 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';
 
 const fieldStyle = {
 	paddingTop: 10,
-	paddingBottom: 10,
 };
 
 const fieldNameStyle = {
 	fontSize: 18,
+	paddingBottom: 10,
+	paddingLeft: 10,
 };
 
 const Field = ({ onPress, text = '' }: { onPress?: Function, text: string }) =>
@@ -63,11 +65,16 @@ const CreateFoodItem = ({ foodItem, toggleModal, setPropOfFoodItem, place, setPl
 		<View style={{ ...theme.page.container, backgroundColor: 'white', padding: 10 }}>
 			<Field text={foodItem.name || 'Name'} onPress={toggleModal('name')} />
 			<Field text={place.name || 'Place'} onPress={openPlaceModal(updatePlace)} />
-			<Field text={'Category'} />
+			<CategoryPicker
+				selected={foodItem.category}
+				onValueChange={setPropOfFoodItem('category')}
+				style={{ height: 50, width: 200 }}
+			/>
+			<Divider />
 			<QuantityPicker
 				quantity={foodItem.quantity}
 				onValueChange={setPropOfFoodItem('quantity')}
-				style={{ height: 70, width: 200 }}
+				style={{ height: 50, width: 200 }}
 			/>
 			<Divider />
 		</View>

js/records/FoodItemRecord.js

@@ -7,11 +7,23 @@ export const QUANTITY_MANY: 'many' = 'many';
 export type Quantity = typeof QUANTITY_NONE | typeof QUANTITY_FEW | typeof QUANTITY_MANY;
 export const QUANTITIES = [QUANTITY_NONE, QUANTITY_FEW, QUANTITY_MANY];
 
+export const CATEGORY_BEVERAGES: 'beverages' = 'beverages';
+export const CATEGORY_DESSERTS: 'desserts' = 'desserts';
+export const CATEGORY_ENTREES: 'entrees' = 'entrees';
+export const CATEGORY_OTHER: 'other' = 'other';
+export type Category =
+	| typeof CATEGORY_BEVERAGES
+	| typeof CATEGORY_DESSERTS
+	| typeof CATEGORY_ENTREES
+	| typeof CATEGORY_OTHER;
+export const CATEGORIES = [CATEGORY_BEVERAGES, CATEGORY_DESSERTS, CATEGORY_ENTREES, CATEGORY_OTHER];
+
 export type FoodItem = {
 	id: ?number,
 	name: string,
 	placeId: ?number,
 	quantity: Quantity,
+	category: Category,
 	images: Array<string>,
 	thumbImage: ?string,
 	titleImage: ?string,
@@ -22,6 +34,7 @@ const FoodRecordDefaults: FoodItem = {
 	name: '',
 	placeId: null,
 	quantity: QUANTITY_MANY,
+	category: CATEGORY_DESSERTS,
 	images: [],
 	thumbImage: '',
 	titleImage: '',

js/streams/FoodItemsStream.js

@@ -11,6 +11,7 @@ const DUMMY_DATA = [
 		name: 'Big John Cookies',
 		placeId: 1,
 		quantity: 'alot',
+		category: 'dessert',
 		images: [
 			'https://s-media-cache-ak0.pinimg.com/564x/e7/5f/08/e75f08b00c0bc7f2b01b3d1a636389f6.jpg',
 			'http://images.media-allrecipes.com/userphotos/560x315/1107530.jpg',
@@ -22,6 +23,7 @@ const DUMMY_DATA = [
 		name: 'Jelly Filled Donuts',
 		placeId: 2,
 		quantity: 'few',
+		category: 'dessert',
 		images: ['https://timenewsfeed.files.wordpress.com/2013/06/jellydonut.jpg'],
 		thumbImage: 'https://timenewsfeed.files.wordpress.com/2013/06/jellydonut.jpg',
 	},
@@ -30,6 +32,7 @@ const DUMMY_DATA = [
 		name: 'Spelt Brownies',
 		placeId: 3,
 		quantity: 'few',
+		category: 'dessert',
 		images: ['http://www.momshealthyeats.com/wp-content/uploads/2011/11/spelt-fudge-brownie.jpg'],
 		thumbImage: 'http://www.momshealthyeats.com/wp-content/uploads/2011/11/spelt-fudge-brownie.jpg',
 	},
@@ -38,6 +41,7 @@ const DUMMY_DATA = [
 		name: 'Oatmeal Raisin Cookies',
 		placeId: 4,
 		quantity: 'few',
+		category: 'dessert',
 		images: ['http://cookingontheside.com/wp-content/uploads/2009/04/oatmeal_raisin_cookies_stack-400.jpg'],
 		thumbImage: 'http://cookingontheside.com/wp-content/uploads/2009/04/oatmeal_raisin_cookies_stack-400.jpg',
 	},
@@ -46,6 +50,7 @@ const DUMMY_DATA = [
 		name: 'Donuts with Sprinkles',
 		placeId: 5,
 		quantity: 'few',
+		category: 'dessert',
 		images: ['https://dannivee.files.wordpress.com/2013/10/img_1950.jpg'],
 		thumbImage: 'https://dannivee.files.wordpress.com/2013/10/img_1950.jpg',
 	},
@@ -54,19 +59,22 @@ const DUMMY_DATA = [
 		name: 'Powdered Donuts',
 		placeId: 1,
 		quantity: 'few',
+		category: 'dessert',
 		images: [
 			'http://3.bp.blogspot.com/-NUKSXr1qLHs/UQmsaEFgbTI/AAAAAAAAA_Y/l4psfVl4a5A/s1600/white-powdered-sugar-doughnuts-tracie-kaska.jpg',
 		],
-		thumbImage: 'http://3.bp.blogspot.com/-NUKSXr1qLHs/UQmsaEFgbTI/AAAAAAAAA_Y/l4psfVl4a5A/s1600/white-powdered-sugar-doughnuts-tracie-kaska.jpg',
+		thumbImage:
+			'http://3.bp.blogspot.com/-NUKSXr1qLHs/UQmsaEFgbTI/AAAAAAAAA_Y/l4psfVl4a5A/s1600/white-powdered-sugar-doughnuts-tracie-kaska.jpg',
 	},
 	{
 		id: 7,
 		name: 'Snickerdoodles',
 		placeId: 3,
 		quantity: 'few',
+		category: 'dessert',
 		images: ['http://josephcphillips.com/wp-content/uploads/2015/02/snickerdoodles2.jpg'],
 		thumbImage: 'http://josephcphillips.com/wp-content/uploads/2015/02/snickerdoodles2.jpg',
 	},
 ];
 
-export default Observable.from(DUMMY_DATA.concat(DUMMY_DATA)).map(FoodItemRecord).scan(setById, Map());
+export default Observable.from(DUMMY_DATA).map(FoodItemRecord).scan(setById, Map());

js/ui-theme.js

@@ -26,6 +26,9 @@ export default {
 	page: {
 		container: { flex: 1, backgroundColor: COLOR.grey300 },
 	},
+	divider: {
+		container: { height: 2 },
+	},
 	topTabs: {
 		selectedUnderlineStyle: {
 			backgroundColor: COLOR.grey100,
@@ -53,7 +56,7 @@ export default {
 		backgroundColor: primaryColor,
 		textColor: COLOR.white,
 	},
-	quantityPicker: {
+	picker: {
 		color: '#0E6E9E',
 	},
 	foodItemDetails: {