{"size": 4781, "ext": "js", "max_stars_repo_path": "app/src/main/js/component/askRecommend.js", "max_stars_repo_name": "mehrdad-shokri/hunt-android", "max_stars_repo_stars_event_min_datetime": "2018-01-08T16:51:44.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-06T22:23:21.000Z", "max_issues_repo_path": "app/src/main/js/component/askRecommend.js", "max_issues_repo_name": "mehrdad-shokri/hunt-android", "max_issues_repo_issues_event_min_datetime": "2018-01-18T12:19:58.000Z", "max_issues_repo_issues_event_max_datetime": "2018-03-29T06:26:30.000Z", "max_forks_repo_path": "app/src/main/js/component/askRecommend.js", "max_forks_repo_name": "mehrdad-shokri/hunt-android", "max_forks_repo_forks_event_min_datetime": "2018-01-15T13:27:38.000Z", "max_forks_repo_forks_event_max_datetime": "2020-06-24T04:30:13.000Z"}
{"max_stars_count": 50, "max_issues_count": 3, "max_forks_count": 13, "avg_line_length": 27.7965116279, "max_line_length": 113, "alphanum_fraction": 0.4998954194}
import React, {Component} from 'react';
import {Image, StyleSheet, Text, TouchableWithoutFeedback, View} from 'react-native';
import {getAvatarUrl, getImageUrl, trimHtml} from "../util/stringUtils";
import TextStyle from '../style/textStyle'
import PropTypes from 'prop-types';
import Styles from '../style/style';
import {colors, dimens} from "../style/resource";

export const ACTION_NAVIGATE = "NAVIGATE";

export default class AskRecommendItem extends Component {

    render() {
        const recommend = this.props.recommend;
        const posts = recommend.product.posts.edges.map(item => item.node);
        const description = posts.length > 0 ? posts[0].tagline : "";
        const descriptionView = description !== "" ? <Text style={[TextStyle.body, {
            paddingTop: dimens.space_medium,
            paddingBottom: dimens.space_medium
        }]}>
            {description}
        </Text> : null;

        const comments = recommend.recommendations.edges
            .map(item => item.node);

        const commentsView = comments.length > 0 ? <RecommendComment payload={comments}/> : null;

        return (
            <View style={styles.verticalLayout}>
                <View style={styles.mainContainer}>
                    <View style={styles.verticalLayout}>
                        <TouchableWithoutFeedback
                            onPress={this.props.onActionClick.bind(this, {
                                type: ACTION_NAVIGATE,
                                payload: recommend.product.id
                            })}>
                            <Image style={styles.product}
                                   source={{uri: getImageUrl(recommend.product.thumbnail_media.image_uuid, 384)}}
                            />
                        </TouchableWithoutFeedback>

                        {descriptionView}
                    </View>

                    <View style={Styles.separator}/>

                    <View style={[styles.horizontalLayout, styles.footer]}>
                        <View style={[styles.horizontalLayout, styles.footerAction]}>

                            <Image style={styles.footerIcon}
                                   source={{uri: 'ic_like'}}/>

                            <Text style={styles.indicator}>
                                {recommend.votes_count}
                            </Text>
                        </View>

                        <TouchableWithoutFeedback>

                            <Image style={[styles.footerAction, styles.footerIcon]}
                                   source={{uri: 'ic_comment'}}/>

                        </TouchableWithoutFeedback>

                    </View>

                </View>

                {commentsView}

            </View>
        )
    }
}


class RecommendComment extends Component {

    render() {
        const first = this.props.payload[0];
        const user = first.user;
        return (
            <View style={[styles.horizontalLayout, styles.commentContainer]}>
                <Image style={styles.avatar}
                       source={{uri: getAvatarUrl(user.id, 64)}}
                />

                <View style={[styles.verticalLayout, {marginLeft: 8}]}>
                    <Text style={TextStyle.userName}>
                        {user.name}
                    </Text>
                    <Text numberOfLines={4}
                          ellipsizeMode="tail">
                        {trimHtml(first.body_html)}
                    </Text>
                </View>
            </View>
        )
    }
}

AskRecommendItem.propTypes = {
    recommend: PropTypes.object,
    onActionClick: PropTypes.func
};

RecommendComment.propTypes = {
    payload: PropTypes.array,
};

const styles = StyleSheet.create({

    commentContainer: {
        backgroundColor: colors.light_grey,
        paddingTop: 8,
        paddingBottom: 8,
        paddingLeft: 16,
        paddingRight: 16
    },

    mainContainer: {
        backgroundColor: 'white',
        paddingTop: 8,
        paddingBottom: 8,
        paddingLeft: 16,
        paddingRight: 16
    },

    verticalLayout: {
        flex: 1,
        flexDirection: 'column',
    },

    horizontalLayout: {
        flexDirection: 'row',
    },

    avatar: {
        resizeMode: 'contain',
        height: 36,
        width: 36,
        borderRadius: 36
    },

    product: {
        flex: 1,
        resizeMode: 'cover',
        height: 220,
    },

    indicator: {
        paddingLeft: 4,
        textAlignVertical: 'bottom'
    },

    footer: {
        marginTop: 4,
    },

    footerAction: {
        flex: 1,
        justifyContent: 'center'
    },

    footerIcon: {
        resizeMode: 'contain',
        height: 20,
        width: 20,
    },
});
