<commit_before>'use strict';

import React, {
  Component,
  Image,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} from 'react-native';

var audio = require('react-native').NativeModules.RNAudioPlayerURL;

class Station extends Component {

  playStation() {
    audio.play();
  }

  componentDidMount() {
    audio.initWithURL(this.props.station.stationInfo.uri);
  }

  render() {
    var stationInfo = this.props.station.stationInfo;
    return (
      <TouchableHighlight onPress={() => this.playStation()}>
        <View style={styles.container} >
          <Text style={styles.description}>You're listening to {stationInfo.name}</Text>
        </View>
      </TouchableHighlight>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 75,
    alignItems: 'center'
  },
  description: {
    padding: 10,
    fontSize: 12,
    color: '#656565'
  }
});<commit_msg>UI improvements. Also, mocked server response.<commit_after>'use strict';

import React, {
  Component,
  Image,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} from 'react-native';
import Loading from './Loading';

var audio = require('react-native').NativeModules.RNAudioPlayerURL;

var FAKE_STATION_DATUM = {
  heartCount: 1000,
  image: '',
  listenerCount: 20,
  desc: 'Sick beets. Not a typo. Here is some additional text to experiement with how text flows.'
}

var REQUEST_URL_ONE = "";

class Station extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      heartCount: 0,
      image: '',
      listenerCount: 0,
      desc: ''
    }
  }

  playStation() {
    audio.play();
  }

  componentDidMount() {
    //this.fetchData();
    var stationDetail = FAKE_STATION_DATUM;
    console.log(this.props.station.id);
    this.setState({
      isLoading: false,
      heartCount: stationDetail.heartCount,
      image: "https://i.imgur.com/03t6Yun.jpg",
      listenerCount: stationDetail.listenerCount,
      desc: stationDetail.desc
    });
    audio.initWithURL(this.props.station.uri);
    audio.play();
  }

  componentWillUnmount() {
    audio.pause();
  }

  fetchData() {
    fetch(REQUEST_URL_ONE)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          isLoading: false,
          heartCount: responseData.heartCount,
          image: responseData.image,
          listenerCount: responseData.listenerCount,
          desc: responseData.desc
        });
      })
      .done();
  }

  upheart() {
    var POST_HEART = "http://10.6.32.108:8000/" + this.props.station.id + "/heart";
    fetch(POST_HEART, {
      method: 'POST',
      body: JSON.stringify({
        id: this.props.station.id
      })
    })
    .then((response) => response.json())
    .then((responseData) => {
      this.setState({
        heartCount: responseData.heartCount.length > 5 ? ">9,999" : responseData.heartCount
      });
    })
    .done();
  }

  render() {
    if (this.state.isLoading) {
      return <Loading />
    }

    return (
      <View style={styles.container} >
        <Image style={styles.lede} source={{uri: this.state.image}}/>
        <View>
          <View style={styles.heartThisDJ}>
            <Text style={styles.broadcaster}>{this.props.station.broadcaster}</Text>
            <View style={styles.rightContainer}>
              <Text style={styles.heartNum}>
                {this.state.heartCount}
              </Text>
              <TouchableHighlight style={styles.button} onPress={this.upheart.bind(this)}>
                <Image style={styles.hearts} source={require("./assets/Like-Filled-40.png")}/>
              </TouchableHighlight>
            </View>
          </View>
        </View>
        <View style={styles.description}>
          <Text style={styles.descriptionText}>{this.state.desc}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 3,
    marginTop: 75,
    alignItems: 'center'
  },
  rightContainer: {
    flex: 2,
    flexDirection: 'row',
    justifyContent: 'flex-end'
  },
  lede: {
    width: 300,
    height: 300,
    borderWidth: 1,
    marginBottom: 10
  },
  heartThisDJ: {
    width: 250,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  broadcaster: {
    flex: 5,
    color: '#555555',
    fontSize: 20
  },
  hearts: {
    height: 20,
    width: 20
  },
  heartNum: {
    color: '#555555',
    fontSize: 20
  },
  description: {
    marginTop: 10,
    padding: 10,
  },
  descriptionText: {
    textAlign: 'left'
  }
});
{'fraction_non_alphanumeric': 0.14485470832422984, 'fraction_numerical': 0.0183526327288617, 'mean_word_length': 2.4524886877828056, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 37, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 1, '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': '7547353', 'n_tokens_mistral': 1543, 'n_tokens_neox': 1458, 'n_words': 282}