static food item details

js/components/IconButton.js

@@ -0,0 +1,17 @@
+// @flow
+import React from 'react';
+import { Text, View } from 'react-native';
+import { pure } from 'recompose';
+import { Link } from 'react-router-native';
+import { Icon } from 'react-native-material-ui';
+
+export default pure(({ glyph, text, route }: { glyph: string, text: string, route: string }) => (
+    <View style={{ flex: 3 }}>
+        <Link to={route}>
+            <View style={{ alignItems: 'center' }}>
+                <Icon name={glyph} size={50} color="grey" />
+                <Text>{text}</Text>
+            </View>
+        </Link>
+    </View>
+));

js/components/ImageBackdrop.js

@@ -0,0 +1,10 @@
+// @flow
+import React from 'react';
+import { View, Image } from 'react-native';
+import { pure } from 'recompose';
+
+export default pure(({ uri }: { uri?: string }) => (
+    <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
+        <Image style={{ flex: 1, resizeMode: 'stretch' }} source={{ uri }} />
+    </View>
+));

js/components/ImageThumb.js

@@ -0,0 +1,10 @@
+// @flow
+import React from 'react';
+import { View, Image } from 'react-native';
+import { pure } from 'recompose';
+
+export default pure(({ uri, style }: { uri: string, style?: Object }) => (
+    <View style={{ height: 50, width: 50, margin: 10, backgroundColor: 'grey', ...style }}>
+        <Image source={{ uri }} style={{ flex: 1, resizeMode: 'stretch' }} />
+    </View>
+));

js/components/ItemTile.js

@@ -21,8 +21,8 @@ export const Thumbnail = ({ thumb }: { thumb: ?string }) => (
     </View>
 );
 
-export const NameAndPlace = ({ name, place }: { name: string, place: string }) => (
-    <View style={{ flex: 1, paddingTop: 15 }}>
+export const NameAndPlace = ({ name, place, style }: { name: string, place: string, style: Object }) => (
+    <View style={{ paddingTop: 15, ...style }}>
         <Text style={{ ...theme.itemTile.itemNameStyle }}>{name}</Text>
         <Text style={{ ...theme.itemTile.itemPlaceStyle }}>{place}</Text>
     </View>
@@ -38,7 +38,7 @@ export const PlaceTile = pure(({ place }: { place: Place, onPress: Function }) =
     <Link to={`/place/${place.id}`} underlayColor={theme.itemTile.pressHighlightColor}>
         <View style={{ height: 70, flexDirection: 'row' }}>
             <Thumbnail thumb={place.thumb} />
-            <NameAndPlace name={place.name} place="Whole Foods" />
+            <NameAndPlace name={place.name} place="Whole Foods" style={{ flex: 1 }} />
         </View>
     </Link>
 ));
@@ -47,7 +47,7 @@ export const FoodItemTile = pure(({ foodItem }: { foodItem: FoodItem, onPress: F
     <Link to={`/foodItem/${foodItem.id}`} underlayColor={theme.itemTile.pressHighlightColor}>
         <View style={{ height: 70, flexDirection: 'row' }}>
             <Thumbnail thumb={foodItem.thumb} />
-            <NameAndPlace name={foodItem.name} place="Whole Foods" />
+            <NameAndPlace name={foodItem.name} place="Whole Foods" style={{ flex: 1 }} />
             <AvailableCount count={foodItem.availableCount} />
         </View>
     </Link>

js/helpers/QuantityHelpers.js

@@ -0,0 +1,16 @@
+// @flow
+
+export type Quantity = 'none' | 'few' | 'many';
+
+export const getQuantityText = (quantity: Quantity) => {
+    switch (quantity) {
+        case 'none':
+            return 'None Left';
+        case 'few':
+            return 'Few Left';
+        case 'many':
+            return 'Many Left';
+        default:
+            return 'Many Left';
+    }
+};

js/pages/FoodItemDetail.js

@@ -2,8 +2,19 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 import theme from '../ui-theme';
+import { NameAndPlace } from '../components/ItemTile';
 // import { type FoodItem } from '../records/FoodItemRecord';
 import { compose, pure } from 'recompose';
+import ImageThumb from '../components/ImageThumb';
+import ImageBackdrop from '../components/ImageBackdrop';
+import IconButton from '../components/IconButton';
+import { type Quantity, getQuantityText } from '../helpers/QuantityHelpers';
+
+const QuantityText = pure(({ quantity }: { quantity: Quantity }) => (
+    <View style={{ flex: 1, alignItems: 'center', paddingTop: 20 }}>
+        <Text style={{ fontSize: 50, color: 'black', height: 100 }}>{getQuantityText(quantity)}</Text>
+    </View>
+));
 
 export class FoodItemDetail extends Component {
     static displayName = 'FoodItemDetail';
@@ -18,10 +29,26 @@ export class FoodItemDetail extends Component {
 
     // todo: need to get the item from the stream by this id
     render() {
-        const { match: { params: { id } } } = this.props;
         return (
             <View style={theme.page.container}>
-                <Text>{id}</Text>
+                <View style={{ flex: 2 }}>
+                    <ImageBackdrop uri="https://s-media-cache-ak0.pinimg.com/564x/e7/5f/08/e75f08b00c0bc7f2b01b3d1a636389f6.jpg" />
+                    <View style={{ position: 'absolute', bottom: 0, left: 0, flexDirection: 'row' }}>
+                        <ImageThumb uri="http://images.media-allrecipes.com/userphotos/560x315/1107530.jpg" />
+                        <ImageThumb />
+                        <ImageThumb />
+                        <ImageThumb />
+                    </View>
+                </View>
+                <View style={{ flex: 3, paddingTop: 10, paddingLeft: 20, paddingRight: 20 }}>
+                    <NameAndPlace name="Whole Foods Market" place="525 N. Lamar Blvd. Austin" />
+                    <QuantityText quantity="many" />
+                    <View style={{ flexDirection: 'row', paddingBottom: 20 }}>
+                        <IconButton glyph="stars" text="Add to Faves" route="/list/food" />
+                        <IconButton glyph="mode-edit" text="Update Amount" route="/list/food" />
+                        <IconButton glyph="insert-photo" text="Add Photo" route="/list/food" />
+                    </View>
+                </View>
             </View>
         );
     }

js/pages/List.js

@@ -8,7 +8,7 @@ import { type RoutingContextFlowTypes, routingContextPropTypes } from '../routes
 
 const tabs = ['food', 'places'];
 
-const getTabIndex = (tabName: string) => tabs.findIndex(tabName);
+const getTabIndex = (tabName: string) => tabs.indexOf(tabName);
 
 const getTabName = (index: number) => tabs[index];
 

js/records/FoodItemRecord.js

@@ -7,7 +7,8 @@ export type FoodItem = {
     placeId: ?number,
     availableCount: number,
     images: List<string>,
-    thumb: string,
+    thumbImage: ?string,
+    titleImage: ?string,
 };
 
 const FoodRecordDefaults: FoodItem = {
@@ -16,7 +17,8 @@ const FoodRecordDefaults: FoodItem = {
     placeId: null,
     availableCount: 0,
     images: List(),
-    thumb: '',
+    thumbImage: '',
+    titleImage: '',
 };
 
 export default Record(FoodRecordDefaults, 'FoodItemRecord');

js/streams/FoodItemsStream.js

@@ -10,6 +10,15 @@ const DUMMY_DATA = [
         id: 1,
         name: 'Big John Cookies',
         placeId: 1,
+        images: [
+            'https://s-media-cache-ak0.pinimg.com/564x/e7/5f/08/e75f08b00c0bc7f2b01b3d1a636389f6.jpg',
+            'http://images.media-allrecipes.com/userphotos/560x315/1107530.jpg',
+            'http://images.media-allrecipes.com/userphotos/560x315/1107530.jpg',
+            'http://images.media-allrecipes.com/userphotos/560x315/1107530.jpg',
+            'http://images.media-allrecipes.com/userphotos/560x315/1107530.jpg',
+        ],
+        thumbImage: 'http://images.media-allrecipes.com/userphotos/560x315/1107530.jpg',
+        titleImage: 'https://s-media-cache-ak0.pinimg.com/564x/e7/5f/08/e75f08b00c0bc7f2b01b3d1a636389f6.jpg',
     },
     {
         id: 2,

js/ui-theme.js

@@ -36,7 +36,7 @@ export default {
         thumbnailSize: 50,
         thumbnailColor: COLOR.grey500,
         itemNameStyle: {
-            color: COLOR.grey500,
+            color: COLOR.grey800,
         },
         itemPlaceStyle: {
             color: COLOR.grey500,