<commit_before>import React from 'react';
import { 
  StyleSheet, 
  View, 
  Text, 
  ListView, 
  Button,
  TouchableOpacity 
} from 'react-native'
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import SessionDetail from './SessionDetail';
import Icon from 'react-native-vector-icons/FontAwesome';
import style from '../../common/style';
import moment from 'moment';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 5,
  },
  SessionTitle: {
    fontSize: 16,
    fontWeight: '600',
  }
});

class SessionList extends React.Component {
  static propTypes = {
    sessionsData: PropTypes.array
  }; 

  formatTime = (dateString) => {
    return new Date(dateString).toLocaleTimeString();
  }

  constructor(props) {
    super(props);    
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 

    this.state = {
      ds: ds.cloneWithRows(this.props.sessionsData)
    }
  }
  componentWillReceiveProps(nextProps) {
    if(this.props.sessionsData !== nextProps.sessionsData) {
      this.setState(()=> {
        return {ds: this.state.ds.cloneWithRows(nextProps.sessionsData)}
      });
    }
  }

  render() {
    if(!this.state.ds) return null;

    return (
      <View style={ styles.container }>
        <ListView enableEmptySections={true} style={ styles.list }
          dataSource={ this.state.ds }
          renderRow={this.renderRow.bind(this)} />
      </View>
    );
  }

  renderRow(rowData, rowID) {   
    return (
      <TouchableOpacity onPress={() => this._onRowPressed(rowData)} key={rowID}>
        <View key={ rowData.sessionId }>
          <Text>{ rowData.title }</Text>
          <Text>{ rowData.format }&nbsp;
          { moment(new Date(rowData.startTime)).format('dddd, MMMM DD HH:mm') } -&nbsp;
          { moment (new Date(rowData.endTime)).format('HH:mm') }&nbsp;
          { rowData.room }</Text>
        </View>
      </TouchableOpacity>
    );
  }

    _onRowPressed(rowData) {
      this.props.navigation.navigate('SessionDetail', 
      { sessionData: rowData })
    }   
  }

const mapStateToProps = (state) => { 
  return {  <commit_msg>added styling to list view<commit_after>import React from 'react';
import { 
  StyleSheet, 
  View, 
  Text, 
  ListView, 
  Button,
  TouchableOpacity,
} from 'react-native';
import SessionDetail from './SessionDetail';
import Icon from 'react-native-vector-icons/FontAwesome';
import style from '../../common/style';
import moment from 'moment';

const styles = StyleSheet.create({
  listContainer: {
    flex: 1,
    backgroundColor: style.colors.background,
  },
  constainer: {
    margin: 10,
  },
  sessionTitle: {
    color: style.colors.primary,    
    fontSize: 16,
    fontWeight: '600',
  },
  textStyle: {
    color: style.colors.primary,
  },
  listItemWrapper: {
    padding: 10,
    flexDirection: 'row',
  },
  filterButtonWrapper: {
    flexDirection: 'row', 
    justifyContent: 'space-between',
    // alignItems: 'center'
  },
  filterButton: {
    flexGrow: 2,
    backgroundColor: style.colors.backgroundColor,
    borderColor: style.colors.backgroundSecondary,
    borderWidth: 3,
  },
  filterButtonText: {
    alignSelf: 'center',
    paddingTop: 10,
    fontSize: 15,
    color: style.colors.color3,
  },
  formatPresentation: {
    color: style.colors.color1,
  },
  formatLightningTalk: {
    color: style.colors.color4,
  },
  formatWorkshop: {
    color: style.colors.color3,
  }
});

class SessionList extends React.Component {
  static propTypes = {
    sessionsData: PropTypes.array
  }; 

  getHeader() {
    return (
      <View style= { styles.filterButtonWrapper }>
        <TouchableOpacity
          style={ styles.filterButton }
          onPress={this.filterSessionDay.bind(1)}
          title="Day 1"
          accessibilityLabel="List sessions, day one">
            <Text style={styles.filterButtonText}>DAY 1</Text></TouchableOpacity>
        <TouchableOpacity
          style={ styles.filterButton }
          onPress={this.filterSessionDay.bind(1)}
          title="Day 1"
          accessibilityLabel="List sessions, day one"
        ><Text style={styles.filterButtonText}>DAY 2</Text></TouchableOpacity>
        <Icon.Button 
          borderRadius={0}
          backgroundColor={style.colors.backgroundSecondary}
          name="filter" 
          size={30}
          onPress={this.filterSessions()}>         
        </Icon.Button>
      </View>
    );
  }

  getTimeSpan(fromTime, endTime) {
    let from = (moment(new Date(fromTime)).format('dddd, DD MMM HH:mm'));
    let end = (moment (new Date(endTime)).format('HH:mm'));
    return (from + ' - ' + end); 
  }

  getSessionFormat(format) {
    if (format === 'presentation') {
      return <Text style={ styles.formatPresentation }>{format}</Text>      
    } else if(format === 'lightning-talk') {
      return <Text style={ styles.formatLightningTalk }>{format}</Text>            
    } else {
      return <Text style={ styles.formatWorkshop }>{format}</Text>                  
    }
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.sessionsData !== nextProps.sessionsData) {
      this.setState(()=> {
        return {ds: this.state.ds.cloneWithRows(nextProps.sessionsData)}
      });
    }
  }

  render() {
    if(!this.state.ds) return null;

    return (
      <View style={ styles.listContainer }>
        {this.getHeader()}
        <ListView 
          enableEmptySections={true} style={ styles.list }
          dataSource={ this.state.ds }
          renderRow={this.renderRow.bind(this)} />
      </View>
    );
  }


  renderRow(rowData, rowID) {   
    return (
        <View style={ styles.listItemWrapper} key={ rowData.sessionId }>
          <View>
            <Icon name="star-o" style={{paddingRight: 10}}size={30} color={style.colors.color4}/> 
        </View>
          <TouchableOpacity style={{paddingRight: 40}} onPress={() => this._onRowPressed(rowData)} key={rowID}>
            <Text style={ styles.sessionTitle }>{rowData.title}</Text>
            {this.getSessionFormat(rowData.format)}
            <Text style={ styles.textStyle }>{this.getTimeSpan(rowData.startTime, rowData.endTime)}</Text>
            <Text style={ styles.textStyle }>{rowData.room}</Text>
      </TouchableOpacity>
        </View>
    );
  }

    _onRowPressed(rowData) {
      this.props.navigation.navigate('SessionDetail', 
      { sessionData: rowData })
    }   
  }

const mapStateToProps = (state) => { 
  return {  
{'fraction_non_alphanumeric': 0.14237392373923738, 'fraction_numerical': 0.007226322263222632, 'mean_word_length': 2.6772187676653476, 'pattern_counts': {'":': 0, '<': 48, '<?xml version=': 0, '>': 56, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6598614', 'n_tokens_mistral': 2088, 'n_tokens_neox': 2012, 'n_words': 386}