<commit_before>import React, {Component} from 'react';
import { badge, Divider,Avatar,List,ListItem, Tile, Button, Card, Grid, Row, Col}  from 'react-native-elements';
import PropTypes from 'prop-types';
import {
  StyleSheet,
  TouchableOpacity,
  Image,
  Text,
  View
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Swiper from 'react-native-swiper';
import {getStocks} from '../stocks/StocksState';
var accounts =  require('../../services/accounts');

class CounterView extends Component {
    constructor(props)
    {
        super(props);
     let {stocks, offers} = this.props;
        this.state = {stocks:accounts, offers: offers}
    }
  static displayName = 'CounterView';

  static navigationOptions = {
    title: 'Account',
    tabBar: () => ({
      icon: (props) => (
        <Icon name='account-balance-wallet' size={24} color={props.tintColor} />
      )
    })
  }

  static propTypes = {
    counter: PropTypes.number.isRequired,
    userName: PropTypes.string,
    stocks: PropTypes.array,
    offers: PropTypes.array,
    userProfilePhoto: PropTypes.string,
    loading: PropTypes.bool.isRequired,
    counterStateActions: PropTypes.shape({
      increment: PropTypes.func.isRequired,
      getOffers: PropTypes.func.isRequired,
      reset: PropTypes.func.isRequired,
      random: PropTypes.func.isRequired
    }).isRequired,
    stocksStateActions: PropTypes.shape({
      getStocks: PropTypes.func.isRequired,
    }).isRequired,
    navigate: PropTypes.func.isRequired
  };

  increment = () => {
    this.props.counterStateActions.increment();
  };
  renderTestView = () => {
    return (
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  };

  renderStocks = (data) => {
    return (

<List containerStyle={{marginBottom: 20}}>
  {
   data.map((l, i) => (
      <ListItem
        roundAvatar
        avatar={l.img}
        key={i}
subtitle={
          <View style={styles.subtitleView}>
            <Text style={styles.ratingText}>{l.shares} shares</Text>
          </View>
        }
badge={{ value: l.price, badgeTextStyle: { color: l.delta == 'down'? 'red': 'green' }, badgeContainerStyle: { marginTop: 10 } }}
        title={l.name}
      />
    ))
  }
</List>

);
  };

  renderOffers = (data) => {
    return (

<List containerStyle={{marginBottom: 20}}>
  {
   accounts.offers.map((l, i) => (
      <ListItem
        roundAvatar
        avatar={l.img}
        key={i}
subtitle={
          <View style={styles.subtitleView}>
            <Text style={styles.ratingText}>{l.shares} shares</Text>
          </View>
        }
badge={{ value: l.price, badgeTextStyle: { color: l.side == 'Sell'? 'red': 'green' }, badgeContainerStyle: { marginTop: 10 } }}
        title={l.mnemonic+ ' | ' +l.name +' '+ l.surname}
      />
    ))
  }
</List>

);
  };

  renderUserInfo = () => {
    if (!this.props.userName) {
      return null;
    }

    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
        <View style={{marginTop:30, width: 80, height: 100,justifyContent:'center', alignItems:'center'}} >
<Avatar   containerStyle={{flex: 2, marginLeft: 220, marginTop: 40, marginBottom:3}}
  large
  rounded
  source={{uri: this.props.userProfilePhoto}}
  onPress={() => console.log("Works!")}
  activeOpacity={0.7}
/>
        </View>
<Card containerStyle={{flex: 1,width:320, height:30, marginBottom:330}}
  title={this.props.userName}
  >
  <Text h3 style={{marginBottom: 10, fontSize:16, fontWeight:'bold', color:'#c0c0c0'}}>
   Avaiable Balances: R 3000
  </Text>
  <Text h3 style={{marginBottom: 10, fontSize:16, fontWeight:'bold', color:'#c0c0c0' }}>
   Market Price: R 30.
  </Text>
</Card>
      </View>
    );
  };

  render() {
      var {stocks, offers}  = this.props;
      console.log('offers', offers)
    const loadingStyle = this.props.loading
      ? {backgroundColor: '#eee'}
      : null;
    return (

<Swiper style={styles.wrapper} showsButtons={false}>
        <View style={styles.slide1}>
        {this.renderUserInfo()}
        </View>
        <View style={styles.slide2}>
        {this.renderStocks(stocks)}
        </View>
        <View style={styles.slide3}>
        {this.renderOffers(offers)}
        </View>
      </Swiper>
    );
  }
}<commit_msg>Add search bar to offers and stocks views<commit_after>import React, {Component} from 'react';
import { badge, SearchBar,Avatar,List,ListItem, Tile, Button, Card, Grid, Row, Col}  from 'react-native-elements';
import PropTypes from 'prop-types';
import {
  StyleSheet,
  TouchableOpacity,ScrollView, ListView,
  Image,
  Text,
  View
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Swiper from 'react-native-swiper';
import {getStocks} from '../stocks/StocksState';
var accounts =  require('../../services/accounts');

const log = () => console.log('this is an example method')

class CounterView extends Component {
    constructor() {
      super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.state = {
      dataSource: ds.cloneWithRows(accounts.offers)
    }
    this.renderRow = this.renderOfferRow.bind(this)
    }
  static displayName = 'CounterView';

  static navigationOptions = {
    title: 'Account',
    tabBar: () => ({
      icon: (props) => (
        <Icon name='account-balance-wallet' size={24} color={props.tintColor} />
      )
    })
  }

  static propTypes = {
    counter: PropTypes.number.isRequired,
    userName: PropTypes.string,
    stocks: PropTypes.array,
    offers: PropTypes.array,
    userProfilePhoto: PropTypes.string,
    loading: PropTypes.bool.isRequired,
    counterStateActions: PropTypes.shape({
      increment: PropTypes.func.isRequired,
      getOffers: PropTypes.func.isRequired,
      reset: PropTypes.func.isRequired,
      random: PropTypes.func.isRequired
    }).isRequired,
    stocksStateActions: PropTypes.shape({
      getStocks: PropTypes.func.isRequired,
    }).isRequired,
    navigate: PropTypes.func.isRequired
  };

  renderOfferRow (rowData, sectionID) {
    return (
      <ListItem
        key={sectionID}
        onPress={log}
        roundAvatar
        avatar={rowData.img}
subtitle={
          <View style={styles.subtitleView}>
            <Text style={styles.ratingText}>{rowData.shares} shares</Text>
          </View>
        }
badge={{ value: rowData.price, badgeTextStyle: { color: rowData.delta == 'down'? 'red': 'green' }, badgeContainerStyle: { marginTop: 10 } }}
        title={rowData.mnemonic+ ' | ' +rowData.name +' '+ rowData.surname}
      />
    )
  }
  increment = () => {
    this.props.counterStateActions.increment();
  };
  renderTestView = () => {
    return (
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  };

  renderStocks = (data) => {
    return (

<List containerStyle={{marginBottom: 20}}>
  {
   data.map((l, i) => (
      <ListItem
        roundAvatar
        avatar={l.img}
        key={i}
subtitle={
          <View style={styles.subtitleView}>
            <Text style={styles.ratingText}>{l.shares} shares</Text>
          </View>
        }
badge={{ value: l.price, badgeTextStyle: { color: l.delta == 'down'? 'red': 'green' }, badgeContainerStyle: { marginTop: 10 } }}
        title={l.name}
      />
    ))
  }
</List>

);
  };

  renderOffers = (data) => {
    return (

<List containerStyle={{marginBottom: 20}}>
  {
   accounts.offers.map((l, i) => (
      <ListItem
        roundAvatar
        avatar={l.img}
        key={i}
subtitle={
          <View style={styles.subtitleView}>
            <Text style={styles.ratingText}>{l.shares} shares</Text>
          </View>
        }
badge={{ value: l.price, badgeTextStyle: { color: l.side == 'Sell'? 'red': 'green' }, badgeContainerStyle: { marginTop: 10 } }}
        title={l.mnemonic+ ' | ' +l.name +' '+ l.surname}
      />
    ))
  }
</List>

);
  };

  renderAsyncOffers = (data) => {
    return (

<List containerStyle={{marginBottom: 20}}>
          <ListView
            renderRow={this.renderOfferRow}
            dataSource={this.state.dataSource}
            />
</List>

);
  };
  renderUserInfo = () => {
    if (!this.props.userName) {
      return null;
    }

    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
        <View style={{marginTop:30, width: 80, height: 100,justifyContent:'center', alignItems:'center'}} >
<Avatar   containerStyle={{flex: 2, marginLeft: 220, marginTop: 40, marginBottom:3}}
  large
  rounded
  source={{uri: this.props.userProfilePhoto}}
  onPress={() => console.log("Works!")}
  activeOpacity={0.7}
/>

        </View>
<Card containerStyle={{flex: 1,width:320, height:30, marginBottom:330}}
  title={this.props.userName} >
  <Text h3 style={{marginBottom: 10, fontSize:16, fontWeight:'bold', color:'#c0c0c0'}}>
   Avaiable Balances: R 3000
  </Text>
  <Text h3 style={{marginBottom: 10, fontSize:16, fontWeight:'bold', color:'#c0c0c0' }}>
   Market Price: R 30.
  </Text>
</Card>
      </View>
    );
  };

  render() {
      var {stocks, offers}  = this.props;
      console.log('offers', offers)
    const loadingStyle = this.props.loading
      ? {backgroundColor: '#eee'}
      : null;
    return (

<Swiper style={styles.wrapper} showsButtons={false}>
        <View style={styles.slide1}>
        {this.renderUserInfo()}
        </View>
        <View style={styles.slide2}>
        <View style={{marginTop: 10, marginBottom: 0}}>
          <SearchBar
            round
            lightTheme
            clearIcon
            placeholder='Search stocks...' />
        </View>
      <ScrollView keyboardShouldPersistTaps="always" style={styles.mainContainer}>
        {this.renderStocks(stocks)}
      </ScrollView>
        </View>
        <View style={styles.slide3}>
        <View style={{marginTop: 10, marginBottom: 0}}>
          <SearchBar
            round
            lightTheme
            clearIcon
            placeholder='Search stocks...' />
        </View>
      <ScrollView keyboardShouldPersistTaps="always" style={styles.mainContainer}>
        {this.renderAsyncOffers(offers)}
      </ScrollView>
        </View>
      </Swiper>
    );
  }
}
{'fraction_non_alphanumeric': 0.16092385691484368, 'fraction_numerical': 0.015209839451694676, 'mean_word_length': 2.785358919687278, 'pattern_counts': {'":': 0, '<': 99, '<?xml version=': 0, '>': 122, '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': '4919569', 'n_tokens_mistral': 3551, 'n_tokens_neox': 3468, 'n_words': 689}