42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
|
import React, { Component } from 'react'
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
|
||
|
|
import onClickOutsideAddon from 'react-onclickoutside'
|
||
|
|
|
||
|
|
class NotificationBox extends Component {
|
||
|
|
|
||
|
|
static propTypes = {
|
||
|
|
notifications: PropTypes.array,
|
||
|
|
fetchNotifications: PropTypes.func.isRequired,
|
||
|
|
toggleNotificationsBox: PropTypes.func.isRequired
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount = () => {
|
||
|
|
const { notifications, fetchNotifications } = this.props
|
||
|
|
if (!notifications) {
|
||
|
|
fetchNotifications()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
handleClickOutside = () => {
|
||
|
|
this.props.toggleNotificationsBox()
|
||
|
|
}
|
||
|
|
|
||
|
|
render = () => {
|
||
|
|
const { notifications } = this.props
|
||
|
|
return <div className='notificationsBox'>
|
||
|
|
<div className='notificationsBoxTriangle' />
|
||
|
|
<ul>
|
||
|
|
{!notifications && <li>loading...</li>}
|
||
|
|
<li>A notification</li>
|
||
|
|
<li>A notification</li>
|
||
|
|
<li>A notification</li>
|
||
|
|
<li>A notification</li>
|
||
|
|
</ul>
|
||
|
|
<a href='/notifications' className='notificationsBoxSeeAll'>See all</a>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default onClickOutsideAddon(NotificationBox)
|