index.ios.js

'use strict';

var React = require('react-native');
var Api = require('./App/api')

var {
  AppRegistry,
  StyleSheet,
  Image,
  ListView,
  Text,
  View,
} = React;

var PHReact = React.createClass({
  getInitialState: function() {
    return {
      token: '',
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  },

  componentDidMount: function() {
    Api.getToken().then((response) => {
      this.setState({
        token: response.access_token,
      });
    }).then(()=>{
      Api.getAllPosts(this.state.token,0).then((response)=> {
        this.setState({
          dataSource : this.state.dataSource.cloneWithRows(response.posts),
          loaded : true
        });
      }).done();
    }).done();
  },

  render: function() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderPost}
        automaticallyAdjustContentInsets={false}
        style={styles.mainView}
      />
    );
  },

  renderPost: function(post) {
    return (
      <View style={styles.container}>
        <Image
          source={{uri: post.screenshot_url['300px']}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{post.name}</Text>
          <Text style={styles.hunter}>{post.user.username}</Text>
        </View>
      </View>
    );
  },

  renderLoadingView: function() {
    return (
      <View style={styles.container}>
        <Text>
          Loading...
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },
  hunter: {
    textAlign: 'center',
    color: 'red',
  },
  thumbnail: {
    width: 120,
    height: 120,
  },
  mainView: {
    paddingTop: 50,
    backgroundColor: '#3498db',
  },
});

AppRegistry.registerComponent('PHReact', () => PHReact);