All files / client/components/Notification NotificationItemContent.tsx

0% Statements 0/9
0% Branches 0/2
0% Functions 0/2
0% Lines 0/9

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                                                                                                               
import React from 'react'
import styled from 'styled-components'
import Icon, { IconName } from '../Common/Icon'
import UserDate from '../Common/UserDate'
import UserPicture from '../User/UserPicture'
import { Notification } from 'client/types/crowi'
 
const NotificationImage = styled.div`
  img {
    margin-right: 16px;
  }
`
 
const NotificationTime = styled.div`
  padding-top: 0.3em;
  font-size: small;
`
 
interface Props {
  children: React.ReactNode
  notification: Notification
  icon: IconName
}
 
export default class NotificationContent extends React.Component<Props> {
  static defaultProps = { icon: 'checkbox-blank-circle' }
 
  getUserImage() {
    const actionUsers = this.props.notification.actionUsers
 
    if (actionUsers.length < 1) {
      // what is this case?
      return ''
    }
 
    return <UserPicture user={actionUsers[0]} />
  }
 
  render() {
    const notification = this.props.notification
 
    return (
      <>
        <NotificationImage>{this.getUserImage()}</NotificationImage>
        <div>
          <div>{this.props.children}</div>
          <NotificationTime>
            <Icon name={this.props.icon} />
            <UserDate className="ml-1" dateTime={notification.createdAt} format="fromNow" />
          </NotificationTime>
        </div>
      </>
    )
  }
}