{"size": 1834, "ext": "js", "max_stars_repo_path": "frontend/src/components/Comments/Commentary.js", "max_stars_repo_name": "danilovroque/reactnd-projeto-leitura", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "frontend/src/components/Comments/Commentary.js", "max_issues_repo_name": "danilovroque/reactnd-projeto-leitura", "max_issues_repo_issues_event_min_datetime": "2020-09-06T08:29:12.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T14:49:14.000Z", "max_forks_repo_path": "frontend/src/components/Comments/Commentary.js", "max_forks_repo_name": "danilovroque/reactnd-projeto-leitura", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 7, "max_forks_count": null, "avg_line_length": 34.6037735849, "max_line_length": 121, "alphanum_fraction": 0.5103598691}
import React from 'react'
import {
    Comment, Button, Icon
} from 'semantic-ui-react'
import { formatDate } from '../../utils/helpers'
import { VOTE } from '../../actions/comments'
import CommentDeleteModal from './CommentDeleteModal'
import CommentEditModal from './CommentEditModal';

function Commentary(props) {
    const { comment, handleVote } = props
    const {
        author, body, timestamp, voteScore
    } = comment

    if (comment === null || comment === undefined) {
        return <p>Comentário não encontrado</p>
    }

    return (
        <Comment>
            <Comment.Avatar></Comment.Avatar>
            <Comment.Content>
                <Comment.Author as='span'>{author}</Comment.Author>
                <Comment.Metadata>
                    {voteScore} likes - {formatDate(timestamp)}
                </Comment.Metadata>
                <Comment.Text>
                    {body}
                </Comment.Text>
                <Comment.Actions className='commentsActionsContainer'>
                    <Button className='buttonAction' size='mini' onClick={() => handleVote(VOTE.UP, comment.id)} basic>
                        <Icon name='thumbs up outline' color='green' />
                    </Button>
                    <Button className='buttonAction' size='mini' onClick={() => handleVote(VOTE.DOWN, comment.id)} basic>
                        <Icon name='thumbs down outline' color='red' />
                    </Button>
                    
                    <CommentEditModal
                        comment={comment}
                     />

                    <CommentDeleteModal 
                        commentId={comment.id}
                    />
                    
                </Comment.Actions>
            </Comment.Content>
        </Comment>
    )
}

export default Commentary