All files / client/components/Notification NotificationItemContent.tsx

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>
      </>
    )
  }
}