ListView-Redux.js

/**
 * @providesModule PatientList
 */
import NavigationBar from 'react-native-navbar';
import NavigationButtons from 'NavigationButtons';
import React, { ListView, Navigator, StyleSheet, Text, TextInput, TouchableHighlight, View } from 'react-native';
import { connect } from 'react-redux/native'

@connect(state => ({
  patients: state.patients
}))

export default class PatientList extends React.Component {
  constructor(props) {
    super(props);
    let dataSource = new ListView.DataSource({
      sectionHeaderHasChanged: this._sectionHeaderHasChanged,
      rowHasChanged: this._rowHasChanged,
    });

    this.state = {
      dataSource: dataSource
    }
  }

  componentDidMount() {
    // let listViewScrollView = this.refs.listView.getScrollResponder();
    // listViewScrollView.scrollTo(1); // Hack to get ListView to render fully
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.patients !== this.props.patients) {
      let {data, sectionIds} = this._getListViewData(nextProps.patients);
      this.setState({
        dataSource: this.state.dataSource.cloneWithRowsAndSections(data, sectionIds)
      })
    }
  } 
  
  _getListViewData(patients) {
    let data = {};
    let sectionIds = [];
    
    patients.map((patient) => {
      let section = patient.lastName.charAt(0);
      if (sectionIds.indexOf(section) === -1) {
        sectionIds.push(section);
        data[section] = [];
      }
      data[section].push(patient);
    });

    return {data, sectionIds};
  }
  
  _sectionHeaderHasChanged(oldSection, newSection) {
    return oldSection !== newSection;
  }

  _rowHasChanged(oldRow, newRow) {
    return oldRow !== newRow;
  }

  _onPressButton(rowID, rowData) {
    this.props.navigator.push({
      id: 'patient-notes',
      data: rowData,
      sceneConfig: Navigator.SceneConfigs.FloatFromRight,
      navigationBar: (
        <NavigationBar
          title={`${rowData.lastName}, ${rowData.firstName.charAt(0)}.`}
          buttonsColor="#48D1CC"
          customNext={<NavigationButtons.AddNote patient={rowData} NavigationEmitter={this.props.NavigationEmitter}/>}
          style={{flex: 1}}
        />
      )
    });
  }
  
  _renderRow(rowData, sectionID, rowID) {
    return (
      <TouchableHighlight underlayColor={'#ccc'} onPress={() => this._onPressButton(rowID, rowData)}>
        <View>
          <View style={styles.row}>
            <Text style={[styles.text, styles.boldText]}>{rowData.lastName}, </Text>
            <Text style={styles.text}>{rowData.firstName}</Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  }

  _renderSectionHeader(data, sectionId) {
    var text;
    return (
      <View style={styles.sectionHeader}>
        <Text style={styles.sectionHeaderText}>{sectionId}</Text>
      </View>
    );
  }

  _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
    var style = styles.rowSeparator;
    if (adjacentRowHighlighted) {
        style = [style, styles.rowSeparatorHide];
    }
    return (
      <View key={"SEP_" + sectionID + "_" + rowID}  style={style}/>
    );
  }

  render() {
    return (
      <ListView
        ref="listView"
        automaticallyAdjustContentInsets={false}
        dataSource={this.state.dataSource}
        renderRow={::this._renderRow}
        renderSectionHeader={this._renderSectionHeader}
        renderSeparator={this._renderSeparator}
      />
    );
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    padding: 15,
  },
  rowSeparator: {
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
    height: 1,
    marginHorizontal: 10,
  },
  rowSeparatorHide: {
    opacity: 0.0,
  },
  sectionHeader: {
    backgroundColor: '#48D1CC'
  },
  sectionHeaderText: {
    fontFamily: 'AvenirNext-Medium',
    fontSize: 16,
    color: 'white',
    paddingLeft: 10
  },
  thumb: {
    width: 64,
    height: 64,
  },
  text: {
    fontFamily: 'AvenirNext-Medium',
    fontSize: 16
  },
  boldText: {
    fontFamily: 'AvenirNext-Bold',
  },
});

// PatientList.propTypes = {
//   // onAddClick: PropTypes.func.isRequired
// };