All files / client/components/Comment CommentItem.tsx

0% Statements 0/14
0% Branches 0/8
0% Functions 0/3
0% Lines 0/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90                                                                                                                                                                                   
import React, { FC } from 'react'
import styled, { css } from 'styled-components'
import UserPicture from 'components/User/UserPicture'
import CommentBody from './CommentBody'
import * as styles from 'client/constants/styles'
import { CommonProps } from 'client/types/component'
import Crowi from 'client/util/Crowi'
 
type PageCommentContainerProps = Props & {
  isOwn: boolean
  isOld: boolean
}
 
const PageCommentContainer = styled.div<PageCommentContainerProps>`
  display: flex;
  margin-top: 8px;
  padding-top: 8px;
  border-top: solid 1px #ccc;
 
  ${({ isOwn }: PageCommentContainerProps) =>
    isOwn &&
    css`
      color: ${styles.header.background};
    `}
 
  ${({ isOld }: PageCommentContainerProps) =>
    isOld &&
    css`
      opacity: 0.7;
 
      &:hover {
        opacity: 1;
      }
    `}
`
 
const CommentUserPicture = styled(UserPicture)`
  width: 24px;
  height: 24px;
`
 
const PageComment = styled.div`
  margin-left: 16px;
`
 
const CommentCreator = styled.div`
  font-weight: bold;
`
 
const CommentMeta = styled.div`
  color: #aaa;
  font-size: 0.9em;
`
 
const CommentAt = styled.span`
  margin-right: 0.5em;
`
 
type Props = CommonProps & {
  crowi: Crowi
  revisionId: string | null
  comment: Record<string, any>
}
 
const CommentItem: FC<Props> = props => {
  const { crowi, revisionId, comment, ...others } = props
  const { revision, creator, comment: commentBody, createdAt } = comment
  const badgeType = revision === revisionId ? 'badge-primary' : 'badge-secondary'
 
  const me = crowi.getUser() || {}
 
  return (
    <PageCommentContainer isOwn={me.id === creator._id} isOld={revision !== revisionId} {...others}>
      <CommentUserPicture user={creator} />
      <PageComment>
        <CommentCreator>{creator.username}</CommentCreator>
        <CommentBody comment={commentBody} />
        <CommentMeta>
          <CommentAt>{createdAt}</CommentAt>
          <a className={`badge ${badgeType}`} href={`?revision=${revision}`}>
            {revision.substr(0, 8)}
          </a>
        </CommentMeta>
      </PageComment>
    </PageCommentContainer>
  )
}
 
export default CommentItem