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 ''
}
}
|