ArtistList

import React, { Component } from 'react';
import {
  StyleSheet,
  ListView,
  TouchableOpacity,
  View,
} from 'react-native';

import ArtistBox from './ArtistBox';
import {Actions} from 'react-native-router-flux'
import SearchBar from 'react-native-material-design-searchbar';


export default class ArtistList extends Component {


  state = {
    text: ''
  }

  constructor(props){
    super(props);

    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds
        }
  }

  componentDidMount(){
    this.updateDataSource(this.props.artists)
  }

  componentWillReceiveProps(newProps){

    if(newProps.artists !== this.props.artists){
        this.updateDataSource(newProps.artists)
    }
  }

  updateDataSource = data => {
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(data)
    })
  }

  handlePress(artist){
      Actions.artistDetail({artist: artist})
  }


  filterSearch(text){
    const newData = this.props.artists.filter(function(item){
      const itemData =  item.artist.toUpperCase()
      const textData = text.toUpperCase()
      return itemData.indexOf(textData) > -1

    })
    this.setState = {
        dataSource: this.state.dataSource.cloneWithRows(newData),
        text: text
    }
  }


  render() {

    return (
<View>
        <SearchBar
        onSearchChange={(text) => this.filterSearch(text)}
        height={50}
        value={this.state.text}
        onFocus={() => console.log('On Focus')}
        onBlur={() => console.log('On Blur')}
        placeholder={'Search...'}
        autoCorrect={false}
        padding={5}
        returnKeyType={'search'}
        />
        <ListView
            enableEmptySections={true}
            dataSource={this.state.dataSource}
            renderRow={(artist) => {
                return (
                    <TouchableOpacity
                        onPress={ () => this.handlePress(artist)}>
                        <ArtistBox artist={artist} />
                    </TouchableOpacity>
                );
            }}
        />
</View>
    );
  }
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    paddingTop: 20,
    backgroundColor: 'lightgray',
  },
});