<commit_before>import React, { Component } from 'react';
import {
    Platform,
    View,
    Image,
    Text,
    ScrollView,
    RefreshControl
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { KortCoin } from '../common';
import { updateUser } from '../../actions/AuthActions';

class ProfileOverview extends Component {

    componentDidMount() {
        Actions.refresh({ rightTitle: this.props.loggedIn ? 'Logout' : 'Login' });
    }

    onRefresh() {
        if (!this.props.loggedIn) {
            Actions.pop();
        } else {
            this.props.updateUser(this.props.user);
        }
    }

    renderProviderImage() {
        return (
            <Image 
                source={{ uri: this.props.user.oauth_provider }}
                style={styles.providerImageStyle}
            />
        );
    }

    renderMissionsToday() {
        let starName = 'star';
        if (this.props.user.mission_count_today < 6) {
            starName = 'star-half-o';
        }
        if (this.props.user.mission_count_today < 3) {
            starName = 'star-o';
        }
        console.log(starName);
        return (
            <FontAwesome 
                style={{ color: '#a1a336', alignSelf: 'center' }}
                size={60} 
                name={starName}
            />
        );
    }

    renderProfileView() {
        if (this.props.loggedIn) {
            return (
                <View style={styles.userViewStyle}>
                    <View style={styles.headerBoxStyle}>
                        <Image
                            source={{ uri: this.props.user.pic_url }}
                            style={styles.imageStyle}
                            defaultSource={{ uri: 'placeholderBadge' }}
                        >
                        {this.renderProviderImage()}
                        </Image>
                        <View style={styles.usernameBoxStyle}>
                            <Text style={styles.textStyle}>{this.props.user.username}</Text>
                        </View>
                    </View>

                <View style={styles.bodyStyle}>
                    <View style={styles.iconStyle}>
                        <KortCoin>K</KortCoin>
                        <Icon 
                            style={{ color: '#90201E', alignSelf: 'center' }}
                            size={60} 
                            name='map-marker-multiple' 
                        />
                        {this.renderMissionsToday()}
                    </View>
                    <View style={styles.descriptionStyle}>
                        <Text style={styles.textStyle}>{this.props.user.koin_count} koins</Text>
                        <Text style={styles.textStyle}>{this.props.user.mission_count} missions</Text>
                        <Text style={styles.textStyle}>{this.props.user.mission_count_today} missions today</Text>
                    </View>
                </View>
            </View>
            );
        } 
        return <Text style={[styles.textStyle, { paddingTop: 100, alignSelf: 'center' }]}>Please log in</Text>;
    }

    render() {
        return (
            <ScrollView 
                style={styles.bgColor}
                refreshControl={
                    <RefreshControl
                        refreshing={this.props.loading}
                        onRefresh={this.onRefresh.bind(this)}
                        colors={['white']}
                        tintColor='white'
                    />}
            >
                {this.renderProfileView()}
            </ScrollView>
        );
    }
}

const styles = {
    descriptionStyle: {
        height: 250,
        justifyContent: 'space-between',
        paddingBottom: 20,
        paddingTop: 20
    },
    iconStyle: {
        width: 60,
        height: 250,
        justifyContent: 'space-between',
        marginRight: 30
    },
    categoryStyle: {
        flexDirection: 'row',
                paddingBottom: 20,
    },
    bodyStyle: {
        flexDirection: 'row',
        borderColor: 'white',
        borderWidth: 1,
        paddingLeft: 30,
        paddingRight: 20,
        paddingTop: 20,
        paddingBottom: 20,
    },
    usernameBoxStyle: {
        flex: 1,
        alignSelf: 'center',
    },
    headerBoxStyle: {
        marginTop: 20,
        marginBottom: 20,
        height: 100,
        paddingLeft: 20,
        paddingRight: 20,
        flexDirection: 'row',
        borderColor: 'white',
        borderWidth: 1<commit_msg>more space for profile pic<commit_after>import React, { Component } from 'react';
import {
    Platform,
    View,
    Image,
    Text,
    ScrollView,
    RefreshControl
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import { KortCoin } from '../common';
import { updateUser } from '../../actions/AuthActions';

class ProfileOverview extends Component {

    componentDidMount() {
        Actions.refresh({ rightTitle: this.props.loggedIn ? 'Logout' : 'Login' });
    }

    onRefresh() {
        if (!this.props.loggedIn) {
            Actions.pop();
        } else {
            this.props.updateUser(this.props.user);
        }
    }

    renderProviderImage() {
        return (
            <Image 
                source={{ uri: this.props.user.oauth_provider }}
                style={styles.providerImageStyle}
            />
        );
    }

    renderMissionsToday() {
        let starName = 'star';
        if (this.props.user.mission_count_today < 6) {
            starName = 'star-half-o';
        }
        if (this.props.user.mission_count_today < 3) {
            starName = 'star-o';
        }
        console.log(starName);
        return (
            <FontAwesome 
                style={{ color: '#a1a336', alignSelf: 'center' }}
                size={60} 
                name={starName}
            />
        );
    }

    renderProfileView() {
        if (this.props.loggedIn) {
            return (
                <View style={styles.userViewStyle}>
                    <View style={styles.headerBoxStyle}>
                        <Image
                            source={{ uri: this.props.user.pic_url }}
                            style={styles.imageStyle}
                            defaultSource={{ uri: 'placeholderBadge' }}
                        >
                        {this.renderProviderImage()}
                        </Image>
                        <View style={styles.usernameBoxStyle}>
                            <Text style={styles.textStyle}>{this.props.user.username}</Text>
                        </View>
                    </View>

                <View style={styles.bodyStyle}>
                    <View style={styles.iconStyle}>
                        <KortCoin>K</KortCoin>
                        <Icon 
                            style={{ color: '#90201E', alignSelf: 'center' }}
                            size={60} 
                            name='map-marker-multiple' 
                        />
                        {this.renderMissionsToday()}
                    </View>
                    <View style={styles.descriptionStyle}>
                        <Text style={styles.textStyle}>{this.props.user.koin_count} koins</Text>
                        <Text style={styles.textStyle}>{this.props.user.mission_count} missions</Text>
                        <Text style={styles.textStyle}>{this.props.user.mission_count_today} missions today</Text>
                    </View>
                </View>
            </View>
            );
        } 
        return <Text style={[styles.textStyle, { paddingTop: 100, alignSelf: 'center' }]}>Please log in</Text>;
    }

    render() {
        return (
            <ScrollView 
                style={styles.bgColor}
                refreshControl={
                    <RefreshControl
                        refreshing={this.props.loading}
                        onRefresh={this.onRefresh.bind(this)}
                        colors={['white']}
                        tintColor='white'
                    />}
            >
                {this.renderProfileView()}
            </ScrollView>
        );
    }
}

const styles = {
    descriptionStyle: {
        height: 250,
        justifyContent: 'space-between',
        paddingBottom: 20,
        paddingTop: 20
    },
    iconStyle: {
        width: 60,
        height: 250,
        justifyContent: 'space-between',
        marginRight: 30
    },
    categoryStyle: {
        flexDirection: 'row',
                paddingBottom: 20,
    },
    bodyStyle: {
        flexDirection: 'row',
        borderColor: 'white',
        borderWidth: 1,
        paddingLeft: 30,
        paddingRight: 20,
        paddingTop: 20,
        paddingBottom: 20,
    },
    usernameBoxStyle: {
        flex: 1,
        alignSelf: 'center',
    },
    headerBoxStyle: {
        marginTop: 20,
        paddingBottom: 20,
        paddingTop: 20,
        marginBottom: 20,
        paddingLeft: 20,
        paddingRight: 20,
        flexDirection: 'row',
        borderColor: 'white',
        borderWidth: 1
{'fraction_non_alphanumeric': 0.11625698913387487, 'fraction_numerical': 0.011921088722439075, 'mean_word_length': 1.335550628233555, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 67, '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': '4431683', 'n_tokens_mistral': 2632, 'n_tokens_neox': 2418, 'n_words': 451}