gistfile1.js

'use strict';

var React = require('react-native');
var Parse = require('parse').Parse;
var ParseReact = require('parse-react');

var DetailScreen = require('./DetailScreen');

var {
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  ListView,
  ActivityIndicatorIOS,
} = React;

var NotifList = React.createClass({

  mixins: [ParseReact.Mixin],

  observe: function() {
    // Subscribe to all Notification objects, ordered by creation date
    // The results will be available at this.data.notifications
    return {
      notifications: (new Parse.Query('Notification')).ascending('createdAt')
    };
  },

  getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  },

  render: function() {
    if(!this.state.loaded) {
      return this.renderLoadingView();
    }
    return (
      <ListView
        style={styles.ListView}
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
      />
    );
  },

  renderRow: function(notif) {
    return (
      <TouchableHighlight
        style={styles.cell}
        onPress={() => this.showNotif(notif)}
        >
        <View >
            <Text style={styles.title}>{notif.title}</Text>
            <Text style={styles.body}>{notif.body}</Text>
        </View>
      </TouchableHighlight>
    );
  },

  showNotif: function(notif) {
    this.props.navigator.push({
      title: notif.title,
      component: DetailScreen,
      passProps: {link: notif.link}
    });
  },

  renderLoadingView: function() {
    console.log("loading");
    return (
      <ActivityIndicatorIOS
        style={[styles.centering, {height: 80}]}
      />
    );
  },

});

var styles = StyleSheet.create({
  listView: {
  },
  cell: {
    flex: 1,
    padding: 10,
    marginLeft: 20,
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    borderColor: 'rgba(0,0,0,0)',
    borderBottomColor: 'rgba(0,0,0,0.1)',
    borderWidth: 1,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  body: {
    fontSize: 14,
  },
});

module.exports = NotifList;