{"size": 2345, "ext": "js", "max_stars_repo_path": "lib/components/BlogComment/commentContent.js", "max_stars_repo_name": "dankhrapiyush/blog", "max_stars_repo_stars_event_min_datetime": "2020-11-17T07:51:39.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-24T13:13:57.000Z", "max_issues_repo_path": "lib/components/BlogComment/commentContent.js", "max_issues_repo_name": "dankhrapiyush/blog", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "lib/components/BlogComment/commentContent.js", "max_forks_repo_name": "dankhrapiyush/blog", "max_forks_repo_forks_event_min_datetime": "2020-11-17T15:28:52.000Z", "max_forks_repo_forks_event_max_datetime": "2021-09-21T18:56:10.000Z"}
{"max_stars_count": 9, "max_issues_count": null, "max_forks_count": 3, "avg_line_length": 30.0641025641, "max_line_length": 84, "alphanum_fraction": 0.4886993603}
import React, { Fragment } from 'react';
import { FormattedMessage } from 'react-intl';
import { arrayOf, number, shape, string } from 'prop-types';
import { useStyle } from '@magento/venia-ui/lib/classify';

import defaultClasses from './comment.css';

const CommentContent = props => {
    const { data } = props;
    const classes = useStyle(defaultClasses, props.classes);

    const listItems = data && data.items ? data.items.map(blog => {
        const { comment_id: id, text, author_nickname, creation_time } = blog;
        const formattedDate = new Date(creation_time).toLocaleDateString(
            undefined,
            {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            }
        );

        return (
            <li key={id} className={classes.cComment}>
                <div className={classes.cPost}>
                    <div className={classes.pName}>
                        {author_nickname}
                    </div>
                    <div className={classes.pText}>
                        {text}
                    </div>
                    <div className={classes.cActions}>
                        <span className={classes.publishDate}>{formattedDate}</span>
                    </div>
                </div>
            </li>
        );
    }) : '';

    const loadMore = () => {
        props.loadComments(data.items.length);
    };

    const cnt = data && data.total_count ? data.total_count : 0;
    const len = data && data.items ? data.items.length : 0;

    return (
        <Fragment>
            {cnt > 0 &&
                <ul className={classes.cComments}>{listItems}</ul>
            }
            {cnt > len &&
                <button className={classes.cAction} onClick={loadMore}>
                    <FormattedMessage
                        id={'commentContent.loadMore'}
                        defaultMessage={'Load more'}
                    />
                </button>
            }
        </Fragment>
    );
};

CommentContent.prototype = {
    data: shape({
        items: arrayOf(
            shape({
                text: number.isRequired,
                author_nickname: string,
                creation_time: string
            })
        ),
        total_count: number
    }).isRequired
};

export default CommentContent;
