All files / client/components/Notification Notification.tsx

0% Statements 0/24
0% Branches 0/9
0% Functions 0/5
0% Lines 0/24

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                                                                                                                                         
import React from 'react'
import UserPicture from '../User/UserPicture'
 
import PageCommentNotification from './ModelAction/PageCommentNotification'
import PageLikeNotification from './ModelAction/PageLikeNotification'
 
import { Notification as NotificationType } from 'client/types/crowi'
 
interface Props {
  notification: NotificationType
  onClick: Function
}
 
export default class Notification extends React.Component<Props> {
  onClick() {
    this.props.onClick(this.props.notification)
  }
 
  getActionUsers() {
    const notification = this.props.notification
    const latestActionUsers = notification.actionUsers.slice(0, 3)
    const latestUsers = latestActionUsers.map(user => {
      return '@' + user.username
    })
 
    let actionedUsers = ''
    const latestUsersCount = latestUsers.length
    if (latestUsersCount === 1) {
      actionedUsers = latestUsers[0]
    } else if (notification.actionUsers.length >= 4) {
      actionedUsers = latestUsers.slice(0, 2).join(', ') + ` and ${notification.actionUsers.length - 2} others`
    } else {
      actionedUsers = latestUsers.join(', ')
    }
 
    return actionedUsers
  }
 
  getUserImage() {
    const latestActionUsers = this.props.notification.actionUsers.slice(0, 3)
 
    if (latestActionUsers.length < 1) {
      // what is this case?
      return ''
    }
 
    return <UserPicture user={latestActionUsers[0]} />
  }
 
  render() {
    const notification = this.props.notification
    const componentName = `${notification.targetModel}:${notification.action}`
    const props = {
      actionUsers: this.getActionUsers(),
      ...this.props,
    }
 
    switch (componentName) {
      case 'Page:COMMENT':
        return <PageCommentNotification {...props} onClick={this.onClick.bind(this)} />
      case 'Page:LIKE':
        return <PageLikeNotification {...props} onClick={this.onClick.bind(this)} />
      default:
    }
 
    return ''
  }
}