<commit_before>import React, { 
  Component, 
  PropTypes,
} from 'react';

import { 
  StyleSheet,
  View, 
  Image,
  TouchableOpacity, 
} from 'react-native';

import { 
  Container, 
  Content, 
  Card, 
  CardItem, 
  Thumbnail, 
  Text, 
  Icon,
  Button,
} from 'native-base';

import Immutable from 'immutable';
import darkTheme from '../themes/dark';

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  card: {
    borderWidth: 1,
    backgroundColor: '#fff',
    borderColor: 'rgba(0,0,0,0.1)',
    minHeight: 150,
    margin: 20,
    marginBottom: 0,
    shadowColor: '#ccc',
    shadowOffset: { width: 2, height: 2, },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  newCard: {
    flex: 0,
    padding: -1,
    marginBottom: 15,
  },
  cardItemH: {
    //borderBottomWidth: 0,
  },
  cardItem: {
    //borderBottomWidth: 0,
  },
});

export default class NewsItem extends Component {
  static propTypes = {
  };

  constructor(props) {
    super(props);
    Image.getSize('https://liquiddandruff.github.io/reveal.js/cubesat.jpg', (width, height) => {
    });
    this.state = {
      imageWidth: 0,
      imageHeight: 0,
    };
  }

  render() {
    const { counter, toCounter, tabStyle, instagramModel } = this.props;

    // get the large version of each image so it crops and looks nicer
    let largeDest = undefined;
    if(instagramModel) {
      largeDest = 'https://www.instagram.com/p/' + instagramModel.code + '/media/?size=l'
      console.log(`largeDest: ${largeDest}`);
    }

    return (
      <Card 
        style={styles.newCard}
        onLayout={(event) => {
          const {x, y, width, height} = event.nativeEvent.layout;
          this.setState({imageWidth: width});
        }}
      >
        <CardItem style={styles.cardItemH}>
          <Thumbnail size={50} source={{uri:'https://liquiddandruff.github.io/reveal.js/cubesat.jpg'}} />
          <Text>{this.props.title}</Text>
          {instagramModel ? 
            <Text note>{"Instagram"}</Text>
              :
            <Text note>{this.props.provider}</Text>
          }
        </CardItem>

        <CardItem style={styles.cardItem}>
          <CardItem style={[styles.cardItem, {borderBottomWidth:0}]}>
            {instagramModel ?
              <Text style={{fontWeight:'normal'}}>{instagramModel.caption.text}</Text>
                :
              <Text style={{fontWeight:'normal'}}>{this.props.content}</Text>
            }
          </CardItem>
        </CardItem>

        <CardItem style={[styles.cardItem, {flex: 0}]}>
          {instagramModel ?
            <Image
              style={{flex:0, }}
              resizeMode='cover'
              source={{uri:largeDest}} />
                :
            <Image 
              resizeMode='cover'
              source={{uri:'https://liquiddandruff.github.io/reveal.js/cubesat.jpg'}} />
          }
        </CardItem>

        <CardItem style={[styles.cardItem, {flexDirection: 'row', justifyContent: 'space-around'}]}>
          <View>
            <Icon name='md-heart' style={{color : darkTheme.customIndigo}} />
          </View>
          <View>
            <Icon name='md-chatboxes' style={{color : darkTheme.customIndigo}} />
          </View>
          <View>
            <Icon name='md-share-alt' style={{color : darkTheme.customIndigo}} />
          </View>
        </CardItem>


      </Card>
    );<commit_msg>Fix weird things related to native-base, finish NewsItem header<commit_after>import React, { 
  Component, 
  PropTypes,
} from 'react';

import { 
  StyleSheet,
  View, 
  Image,
  Text, 
  TouchableOpacity, 
} from 'react-native';

import { 
  Container, 
  Content, 
  Card, 
  CardItem, 
  Thumbnail, 
  Icon,
  Button,
} from 'native-base';

import Immutable from 'immutable';
import darkTheme from '../themes/dark';

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  card: {
    borderWidth: 1,
    backgroundColor: '#fff',
    borderColor: 'rgba(0,0,0,0.1)',
    minHeight: 150,
    margin: 20,
    marginBottom: 0,
    shadowColor: '#ccc',
    shadowOffset: { width: 2, height: 2, },
    shadowOpacity: 0.5,
    shadowRadius: 3,
  },
  newCard: {
    flex: 1,
    flexDirection: 'column',
    padding: 0,
    marginBottom: 15,
  },
  cardItemH: {
    //borderBottomWidth: 0,
  },
  cardItem: {
    //borderBottomWidth: 0,
  },
});

export default class NewsItem extends Component {
  static propTypes = {
  };

  constructor(props) {
    super(props);
    this.state = {
      imageLoaded: false,
    }
    Image.getSize('https://liquiddandruff.github.io/reveal.js/cubesat.jpg', (width, height) => {
      let scaledWidth = 360;
      const scaleFactor = width / scaledWidth;
      let scaledHeight = height / scaleFactor;
      //console.log(`dl_W: ${width} dl_H: ${height} sf: ${scaleFactor} sh: ${scaledHeight}`);
      this.state = {
        imageWidth: width,
        imageHeight: height,
        imageWidthScaled: scaledWidth,
        imageHeightScaled: scaledHeight,
      };
    });
  }

  render() {
    const { counter, toCounter, tabStyle, instagramModel } = this.props;

    // get the large version of each image so it crops and looks nicer
    let largeDest = undefined;
    if(instagramModel) {
      largeDest = 'https://www.instagram.com/p/' + instagramModel.code + '/media/?size=l'
      //console.log(`largeDest: ${largeDest}`);
    }
    const { imageLoaded } = this.state;
    let imageLoadedStyle = {};
    if(imageLoaded) {
      imageLoadedStyle = {width: this.state.imageWidthScaled, height: this.state.imageHeightScaled};
    }

    return (
      <View 
        style={styles.newCard}
        onLayout={(event) => {
          const {x, y, width, height} = event.nativeEvent.layout;
          this.setState({cardWidth: width});
        }}
      >

        {/* Header */}
        {instagramModel ? 
          <View style={{flexDirection:'row', justifyContent:'space-between', paddingLeft:10, paddingRight:10}}>
            <View style={{flexDirection:'row'}}>
              <Thumbnail
                style={{marginRight:10}}
                size={40}
                resizeMode='cover'
                source={{uri:instagramModel.user.profile_picture}} />
              <View style={{justifyContent:'center'}}>
                <Text style={{fontWeight:'bold', color:'black'}}>{instagramModel.user.username}</Text>
                {instagramModel.location &&
                  <Text style={{color:'black'}}>{instagramModel.location.name}</Text>
                }
              </View>
            </View>
            <View style={{justifyContent:'center'}}>
              <Text style={{fontWeight:'bold', color:'black'}}>{"Instagram"}</Text>
            </View>
          </View>
            :
          <View style={{flexDirection:'row', }}>
            <Text style={{color:'black'}}>{this.props.provider}</Text>
          </View>
        }

        {/* Text */}
        <View style={{padding: 20}}>
          <Text style={{fontWeight:'normal', fontSize: 14, color:'black'}}>
            {instagramModel ? instagramModel.caption.text : this.props.content}
          </Text>
        </View>

        {/* Img */}
        <View>
          {instagramModel ?
            <Image
              style={imageLoadedStyle}
              resizeMode='cover'
              onLoad={() => this.setState({imageLoaded: true}) }
              source={{uri:largeDest}} />
                :
            <Image 
              style={{width: this.state.cardWidth, height: this.state.cardWidth}}
              resizeMode='cover'
              onLoad={() => this.setState({imageLoaded: true}) }
              source={{uri:'https://liquiddandruff.github.io/reveal.js/cubesat.jpg'}} />
          }
        </View>

        <CardItem style={[styles.cardItem, {flexDirection: 'row', justifyContent: 'space-around'}]}>
          <View>
            <Icon name='md-heart' style={{color : darkTheme.customIndigo}} />
          </View>
          <View>
            <Icon name='md-chatboxes' style={{color : darkTheme.customIndigo}} />
          </View>
          <View>
            <Icon name='md-share-alt' style={{color : darkTheme.customIndigo}} />
          </View>
        </CardItem>

      </View>
    );
{'fraction_non_alphanumeric': 0.1531336460964754, 'fraction_numerical': 0.009142307229640323, 'mean_word_length': 2.0987700335445396, 'pattern_counts': {'":': 0, '<': 77, '<?xml version=': 0, '>': 83, 'https://': 7, 'lorem ipsum': 0, 'www.': 2, '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': '5494805', 'n_tokens_mistral': 2655, 'n_tokens_neox': 2544, 'n_words': 485}