<commit_before>import React from 'react'
import { View, Text, WebView, Linking, ScrollView } from 'react-native'

import LoadingView from 'react-native-loading-view'
import { Badge } from 'react-native-elements'
import { connect } from 'react-redux'
import marked from 'marked'

import { fetchRepository } from '../../redux/repository'
import styles from './styles'
import { navigatorStyle as commonNavigatorStyle } from '../../styles' // eslint-disable-line
import Component from '../base'
import Icon from 'react-native-vector-icons/Octicons'

const injectScript = `
setTimeout(function () {
  html = document.documentElement;
  window.postMessage('height_' + html.offsetHeight);
}, 500)
(function () {
  window.onclick = function(e) {
    e.preventDefault();
    window.postMessage(e.target.href);
    e.stopPropagation()
  }
}());
`

const customStyle = '<style>* {max-width: 100%;} body {font-family: sans-serif;}</style>'

export default connect(
  store => ({
    store,
    repository: store.repository.repository,
  }),
  dispatch => ({ dispatch }),
)(class Repo extends Component {
  static navigatorStyle = { ...commonNavigatorStyle }

  state = {
    height: 0,
    heightReceived: false,
  }

  constructor(props) {
    super(props)

    this.onMessage = this.onMessage.bind(this)
  }

  componentWillMount() {
    this.props.dispatch(fetchRepository(this.props.owner, this.props.repo))
  }

  onMessage({ nativeEvent }) {
    const data = nativeEvent.data
    // debug check loop: console.log(data)
    if (data.substring(0, 6) === 'height') {
      // prevent loop [render => get height => set height => render]
      if (!this.state.heightReceived) {
        this.setState({
          height: parseInt(data.split('_')[1], 10),
          heightReceived: true,
        })
      }
      return
    }
    if (data === 'undefined' || data === null) return
    Linking.openURL(data)
  }

  render() {
    const r = this.props.repository
    if (r === null) {
      return (
        <View style={styles.container}>
          <LoadingView loading />
        </View>
      )
    }
    r.content = r.content ? marked(r.content) : ''
    return (
      <ScrollView style={styles.container}>
        <View style={{ padding: 10 }}>
          <View style={{ marginBottom: 10 }}>
            <Text>{r.description}</Text>
          </View>

          {Object.keys(r.languages).map(l => (
            <Text key={l}>{l} {r.languages[l]}</Text>
          ))}

          <View style={{ marginTop: 20, flexDirection: 'row', flexWrap: 'wrap' }}>
            {r.topics.map((t, i) => (
              <Badge
                key={i}
                containerStyle={{ marginBottom: 4, marginRight: 4 }}
                value={t}
                textStyle={{ color: 'white' }}
              />
            ))}
          </View>

          <View style={{ flexDirection: 'row', borderWidth: 1, borderColor: '#ddd', marginTop: 10 }}>
            <View style={{ flexDirection: 'row', padding: 10, flex: 1, justifyContent: 'center' }}>
              <Icon name="star" style={{ fontSize: 20, marginRight: 5 }} />
              <Text>{r.stargazers_count}</Text>
            </View>
            <View style={{ flexDirection: 'row', padding: 10, flex: 1, justifyContent: 'center', borderLeftWidth: 1, borderColor: '#ddd' }}>
              <Icon name="repo-forked" style={{ fontSize: 20, marginRight: 5 }} />
              <Text>{r.forks_count}</Text>
            </View>
            <View style={{ flexDirection: 'row', padding: 10, flex: 1, justifyContent: 'center', borderLeftWidth: 1, borderColor: '#ddd' }}>
              <Icon name="eye" style={{ fontSize: 20, marginRight: 5 }} />
              <Text>{r.subscribers_count}</Text>
            </View>
          </View>

          {/* <View style={{ flexDirection: 'row' }}>
            <Icon name="link-external" style={{ fontSize: 18, alignItems: 'center' }} />
            <Text>{r.html_url}</Text>
          </View> */}
        </View>


        <WebView
          style={{ height: this.state.height, padding: this.state.heightReceived ? 10 : 0 }}
          automaticallyAdjustContentInsets={false}
          scrollEnabled={false}
          injectedJavaScript={injectScript}
          source={{ html: customStyle + r.content }}
          onMessage={this.onMessage}
        /><commit_msg>styling the repo<commit_after>import React from 'react'
import { View, Text, WebView, Linking, ScrollView } from 'react-native'

import LoadingView from 'react-native-loading-view'
import { Badge } from 'react-native-elements'
import { connect } from 'react-redux'
import marked from 'marked'

import { fetchRepository } from '../../redux/repository'
import styles from './styles'
import { navigatorStyle as commonNavigatorStyle } from '../../styles' // eslint-disable-line
import Component from '../base'
import Icon from 'react-native-vector-icons/Octicons'

const injectScript = `
setTimeout(function () {
  html = document.documentElement;
  window.postMessage('height_' + html.offsetHeight);
}, 500)
(function () {
  window.onclick = function(e) {
    e.preventDefault();
    window.postMessage(e.target.href);
    e.stopPropagation()
  }
}());
`

const customStyle = '<style>* {max-width: 100%;} body {font-family: sans-serif;}</style>'

export default connect(
  store => ({
    store,
    repository: store.repository.repository,
  }),
  dispatch => ({ dispatch }),
)(class Repo extends Component {
  static navigatorStyle = { ...commonNavigatorStyle }

  state = {
    height: 0,
    heightReceived: false,
  }

  constructor(props) {
    super(props)

    this.onMessage = this.onMessage.bind(this)
  }

  componentWillMount() {
    this.props.dispatch(fetchRepository(this.props.owner, this.props.repo))
  }

  onMessage({ nativeEvent }) {
    const data = nativeEvent.data
    // debug check loop: console.log(data)
    if (data.substring(0, 6) === 'height') {
      // prevent loop [render => get height => set height => render]
      if (!this.state.heightReceived) {
        this.setState({
          height: parseInt(data.split('_')[1], 10),
          heightReceived: true,
        })
      }
      return
    }
    if (data === 'undefined' || data === null) return
    Linking.openURL(data)
  }

  render() {
    const r = this.props.repository
    if (r === null) {
      return (
        <View style={styles.container}>
          <LoadingView loading />
        </View>
      )
    }
    r.content = r.content ? marked(r.content) : ''
    return (
      <ScrollView style={styles.container}>
        <View style={{ padding: 10 }}>
          <View style={{ marginBottom: 10 }}>
            <Text>{r.description ? r.description : '(no description)'}</Text>
          </View>

          {Object.keys(r.languages).map(l => (
            <Text key={l}>{l} {r.languages[l]}</Text>
          ))}

          {r.topics.length > 0 ?
            <View style={{ marginTop: 20, flexDirection: 'row', flexWrap: 'wrap' }}>
              {r.topics.map((t, i) => (
                <Badge
                  key={i}
                  containerStyle={{ marginBottom: 4, marginRight: 4 }}
                  value={t}
                  textStyle={{ color: 'white' }}
                />
              ))}
            </View>
            : null}

          <View style={{ flexDirection: 'row', borderWidth: 1, borderColor: '#ddd', marginTop: 10 }}>
            <View style={{ flexDirection: 'row', padding: 10, flex: 1, justifyContent: 'center' }}>
              <Icon name="star" style={{ fontSize: 15, marginRight: 5 }} />
              <Text>{r.stargazers_count}</Text>
            </View>
            <View style={{ flexDirection: 'row', padding: 10, flex: 1, justifyContent: 'center', borderLeftWidth: 1, borderColor: '#ddd' }}>
              <Icon name="repo-forked" style={{ fontSize: 15, marginRight: 5 }} />
              <Text>{r.forks_count}</Text>
            </View>
            <View style={{ flexDirection: 'row', padding: 10, flex: 1, justifyContent: 'center', borderLeftWidth: 1, borderColor: '#ddd' }}>
              <Icon name="eye" style={{ fontSize: 15, marginRight: 5 }} />
              <Text>{r.subscribers_count}</Text>
            </View>
          </View>

          {/* <View style={{ flexDirection: 'row' }}>
            <Icon name="link-external" style={{ fontSize: 18, alignItems: 'center' }} />
            <Text>{r.html_url}</Text>
          </View> */}
        </View>


        <WebView
          style={{ height: this.state.height, padding: this.state.heightReceived ? 10 : 0 }}
          automaticallyAdjustContentInsets={false}
          scrollEnabled={false}
          injectedJavaScript={injectScript}
          startInLoadingState
          source={{ html: customStyle + r.content }}
          onMessage={this.onMessage}
        />
{'fraction_non_alphanumeric': 0.1585712660675691, 'fraction_numerical': 0.011034012057786372, 'mean_word_length': 2.345509893455099, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 98, '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': '1170153', 'n_tokens_mistral': 2686, 'n_tokens_neox': 2592, 'n_words': 607}