-
Notifications
You must be signed in to change notification settings - Fork 1
/
NotificationList.jsx
56 lines (52 loc) · 2.09 KB
/
NotificationList.jsx
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 dateFormat from 'date-fns/format'
import PropTypes from 'prop-types'
import React, {Component} from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import nl2br from 'react-nl2br'
import DateFromNow from './DateFromNow'
export default class NotificationList extends Component {
getEventsString (events) {
return events
? events.reduce((eventList, {type, datetime}) => {
return eventList.concat(`${type}: ${dateFormat(datetime, 'D MMMM YYYY h:mm A')}`)
}, []).join('\n')
: ''
}
render () {
const {notifications} = this.props
return (
<ReactCSSTransitionGroup component='ul' className='timeline timeline-centered marker-outline'
transitionName='fade' transitionEnterTimeout={400} transitionLeaveTimeout={200}>
{notifications.map(({_id, id, datetime, channel, title, text, tags, userId, events, isFromUser}) => (
<li key={_id} className={`timeline-item ${isFromUser ? 'right' : 'left'}`}>
<div className='timeline-info'>
<a className='no-link' href={userId ? `/conversation/${userId}` : null}>
<div className='datetime'>
<DateFromNow date={datetime} />
</div>
<div>
{(tags || []).map((tag, i) => (
<span key={i} className='badge badge-pill badge-secondary'>{tag}</span>
))}
<span className='channel badge badge-pill badge-info' title={this.getEventsString(events)}>
{channel}
</span>
</div>
</a>
</div>
<div className='timeline-marker' />
<div className='timeline-content'>
<a className='no-link' href={`/notification/${id ? `id/${id}` : `_id/${_id}`}`}>
<h3 className='timeline-title'>{title}</h3>
<p>{nl2br(text)}</p>
</a>
</div>
</li>
))}
</ReactCSSTransitionGroup>
)
}
}
NotificationList.propTypes = {
notifications: PropTypes.array.isRequired
}