aretherecookies-mobile/js/pages/FoodItemDetail.js

// @flow
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';

    props: {
        match: {
            params: {
                id: string,
            },
        },
    };

    // todo: need to get the item from the stream by this id
    render() {
        return (
            <View style={theme.page.container}>
                <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>
        );
    }
}

const enhance = compose(pure);

export default enhance(FoodItemDetail);