| 36 | } |
| 37 | |
| 38 | render () { |
| 39 | const { |
| 40 | comment, |
| 41 | user, |
| 42 | language, |
| 43 | commentedText = '', |
| 44 | admin = [], |
| 45 | replyCallback, |
| 46 | likeCallback |
| 47 | } = this.props |
| 48 | const enableEdit = user && comment.user.login === user.login |
| 49 | const isAdmin = ~[] |
| 50 | .concat(admin) |
| 51 | .map(a => a.toLowerCase()) |
| 52 | .indexOf(comment.user.login.toLowerCase()) |
| 53 | const reactions = comment.reactions |
| 54 | |
| 55 | let reactionTotalCount = '' |
| 56 | if (reactions && reactions.totalCount) { |
| 57 | reactionTotalCount = reactions.totalCount |
| 58 | if ( |
| 59 | reactions.totalCount === 100 && |
| 60 | reactions.pageInfo && |
| 61 | reactions.pageInfo.hasNextPage |
| 62 | ) { |
| 63 | reactionTotalCount = '100+' |
| 64 | } |
| 65 | } |
| 66 | |
| 67 | return ( |
| 68 | <div ref={node => { this.node = node }} className={`gt-comment ${isAdmin ? 'gt-comment-admin' : ''}`}> |
| 69 | <Avatar |
| 70 | className="gt-comment-avatar" |
| 71 | src={comment.user && comment.user.avatar_url} |
| 72 | alt={comment.user && comment.user.login} |
| 73 | /> |
| 74 | |
| 75 | <div className="gt-comment-content"> |
| 76 | <div className="gt-comment-header"> |
| 77 | <div className={`gt-comment-block-${user ? '2' : '1'}`} /> |
| 78 | <a |
| 79 | className="gt-comment-username" |
| 80 | href={comment.user && comment.user.html_url} |
| 81 | > |
| 82 | {comment.user && comment.user.login} |
| 83 | </a> |
| 84 | <span className="gt-comment-text">{commentedText}</span> |
| 85 | <span className="gt-comment-date"> |
| 86 | {formatDistanceToNow( |
| 87 | parseISO(comment.created_at), |
| 88 | { |
| 89 | addSuffix: true, |
| 90 | locale: window.GT_i18n_LocaleMap[language] |
| 91 | } |
| 92 | )} |
| 93 | </span> |
| 94 | |
| 95 | {reactions && ( |