lunch.js

import React, { Component } from 'react'
import {
  StyleSheet,
  Image,
  StatusBar,
  ListView,
  RefreshControl,
  Text,
  View
} from 'react-native'

import Icon from 'react-native-vector-icons/FontAwesome'
import Router from '../router'
import { withNavigation } from '@exponent/ex-navigation'
import Api from '../api'
import {DeviceWidth, DeviceHeight, Colors} from '../styles'
import { times } from 'lodash'
import { observer } from 'mobx-react/native'
import { computed } from 'mobx'
import { LunchboxStore } from '../stores/LunchboxStore'

const lunchboxStore = new LunchboxStore()
const dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})

@withNavigation
@Router.makeRoute()
@observer
export default class Lunchboxes extends Component {

  @computed get dataSource() {
    console.log(lunchboxStore.lunchboxes[0])
    return dataSource.cloneWithRows(lunchboxStore.lunchboxes)
  }

  state = { refreshing: false }

  async componentWillMount() {
    this.fetchLunchboxes()
  }

  componentWillReact() {
    console.log('react')
  }

  fetchLunchboxes = () => {
    lunchboxStore.fetch()
  }

  onRefresh = () => {
    this.setState({refreshing: true});
    this.fetchLunchboxes();
    this.setState({refreshing: false});
  }

  renderImage(lunchbox) {
    return (
      <View style={{flexDirection: 'row'}}>
        <Image resizeMode="contain" source={{uri: 'https:'+lunchbox.fields.lunchboxUnits[0].fields.image.fields.file.url}} style={{width: 200, height: 200}} />
        <View>
          <Image resizeMode="contain" source={{uri: 'https:'+lunchbox.fields.lunchboxUnits[1].fields.image.fields.file.url}} style={{width: 100, height: 100}} />
          <Image resizeMode="contain" source={{uri: 'https:'+lunchbox.fields.lunchboxUnits[2].fields.image.fields.file.url}} style={{width: 100, height: 100}} />
        </View>
      </View>
    )
  }

  renderLunchbox = (lunchbox) => {
    console.log(lunchbox.name)
    console.log(lunchbox)
    return (
      <View key={lunchbox.name} style={styles.lunchbox}>
        <Text style={styles.title}>{lunchbox.fields.name}</Text>
        <View style={styles.details}>
          <Text style={styles.detailItem}>
            <Icon name="clock-o" size={14} color={Colors.darkGrey} /> FAST
          </Text>
          <Text style={styles.detailItem}>
            <Icon name="usd" size={14} color={Colors.darkGrey} /> CHEAP
          </Text>
          <Text style={styles.detailItem}>
            <Icon name="usd" size={14} color={Colors.darkGrey} /> 400 CAL
          </Text>
        </View>

        <Image source={{uri: 'https:'+lunchbox.fields.lunchboxUnits[0].fields.image.fields.file.url}} width="300" height="300" />
        {this.renderImage(lunchbox)}
      </View>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          barStyle="light-content"
        />
        <ListView
          automaticallyAdjustContentInsets={false}
          dataSource={this.dataSource}
          renderRow={this.renderLunchbox}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.onRefresh}
            />}
          style={{marginTop: 70, height: DeviceHeight - 80}}
          contentContainerStyle={styles.listView} />
        <View style={styles.filter}>
          <Text style={styles.filterTitle}>PALEO</Text>
          <Text style={styles.filterTitle}>LOW PRICE</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.lightGrey
  },
  filter: {
    paddingTop: 40,
    position: 'absolute',
    top: 0,
    flexDirection: 'row',
    justifyContent: 'space-around',
    height: 70,
    backgroundColor: Colors.lightBlue,
    width: DeviceWidth
  },
  filterTitle: {
    color: Colors.white,
    fontSize: 13,
    fontWeight: 'bold'
  },
  details: {
    flexDirection: 'row',
    width: DeviceWidth * 0.6,
    justifyContent: 'space-around',
    marginBottom: 18
  },
  detailItem: {
    fontSize: 10,
    alignItems: 'center',
    justifyContent: 'center',
    color: Colors.darkGrey
  },
  listView: {
    backgroundColor: Colors.lightGrey,
    alignItems: 'center',
    paddingTop: 20,
  },
  title: {
    textAlign: 'center',
    fontSize: 32,
    fontWeight: 'bold',
    marginBottom: 10,
    width: DeviceWidth - 100
  },
  lunchbox: {
    alignItems: 'center',
    marginBottom: 30,
  }
})