react-native

Foods_2.js

'use strict';

const React       = require('react');
const ReactNative = require('react-native');
const { StyleSheet, View, Text, ListView, ScrollView, TouchableHighlight } = ReactNative;
const urlBase = 'http://192.168.1.131:4001/api';

function group(array, n) {
    n = n ? n : 1
    let res = []

    for(let i = 0; i < array.length; i+= n) {
        res.push(array.slice(i, i + n))
    }
    return res
}

const stuff = {
  getInitialState: function() {
    return {
      error: null,
      vertical: true,
      foods: [],
      dataSource: new ListView.DataSource({
		    rowHasChanged: (row1, row2) => row1 !== row2
		  }),
      loading: true
    }
  },

  componentWillMount: function() {
    fetch(`${urlBase}/`)
      .then(res => res.json())
      .then(data => {
        this.setState({ foods: data, loading: false })
      })
  },

  toggleView: function() {
      this.setState({ vertical: !this.state.vertical })
  },

  renderFoodItem: function(food) {
    return (
        <View style={styles.food_item}>
          <Text style={styles.food_item_text}>{food.name}</Text>
          <Text style={styles.food_item_type}>{food.type}</Text>
        </View>
    )
  },

  renderItems: function() {
    if(this.state.vertical) {
        let foods = this.state.dataSource.cloneWithRows(this.state.foods)
        return (
            <ScrollView ref="scrollViewV">
              <ListView initialSize={1} dataSource={foods} renderRow={this.renderFoodItem}></ListView>
            </ScrollView>
        )
    } else {
        let data = group(this.state.foods, 2)
        let views = data.reduce((acc, v, i) => {
            let foods = (new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 })).cloneWithRows(v)
            let el = <ListView key={i} dataSource={foods} style={styles.foods_grid} renderRow={this.renderFoodItem}></ListView>;
            return acc.concat(el)
        }, [])

        return <ScrollView ref="scrollViewH">{views}</ScrollView>
    }
  },

  render: function() {
    return (
        <View style={styles.contentContainer}>
          <View style={styles.header}>
            <View style={styles.header_item}><Text style={styles.header_text}>Foods</Text></View>
            <TouchableHighlight onPress={this.toggleView} underlayColor={"#E8E8E8"}><Text>Switch View</Text></TouchableHighlight>
          </View>
        <View style={styles.body}>
          { this.state.loading ? <Text>Loading...</Text> : this.renderItems() }
          { this.state.error && <Text>{this.state.error}</Text> }
          </View>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  contentContainer: {
    flex: 1
  },

  header: {
    backgroundColor: '#FF6600',
    padding: 10,
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center'
  },

  body: {
    flex: 9,
    backgroundColor: '#F6F6EF'
  },

  header_item: {
    paddingLeft: 10,
    paddingRight: 10,
    justifyContent: 'center'
  },

  header_text: {
    color: '#FFF',
    fontWeight: 'bold',
    fontSize: 20
  },

  foods_grid: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },

  food_item: {
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 15,
    paddingBottom: 15,
    marginBottom: 5,
    borderBottomColor: '#ddd',
    borderBottomWidth: StyleSheet.hairlineWidth
  },

  food_item_text: {
    color: '#575757',
    fontSize: 18
  },

  food_item_type: {
    color: '#777',
    fontSize: 12
  }
})

const Foods = React.createClass(stuff);
module.exports = Foods