2015-09-01 18:11:18 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
|
|
|
|
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
|
|
|
|
import MenuItem from 'react-bootstrap/lib/MenuItem';
|
|
|
|
|
|
|
|
import Nav from 'react-bootstrap/lib/Nav';
|
|
|
|
|
2015-09-03 14:15:00 +02:00
|
|
|
import NotificationActions from '../actions/notification_actions';
|
|
|
|
import NotificationStore from '../stores/notification_store';
|
2015-09-01 18:11:18 +02:00
|
|
|
|
2016-06-06 18:52:05 +02:00
|
|
|
import { currentUserShape } from './prop_types';
|
|
|
|
|
2015-09-01 18:11:18 +02:00
|
|
|
import { getLangText } from '../utils/lang_utils';
|
2016-06-06 18:52:05 +02:00
|
|
|
import { withCurrentUser } from '../utils/react_utils';
|
2015-09-01 18:11:18 +02:00
|
|
|
|
|
|
|
|
|
|
|
let HeaderNotifications = React.createClass({
|
2016-03-10 13:41:36 +01:00
|
|
|
propTypes: {
|
2016-06-06 18:52:05 +02:00
|
|
|
// Injected through HOCs
|
|
|
|
currentUser: currentUserShape.isRequired, // eslint-disable-line react/sort-prop-types
|
2016-03-10 13:41:36 +01:00
|
|
|
},
|
|
|
|
|
2015-09-01 18:11:18 +02:00
|
|
|
getInitialState() {
|
2016-02-05 10:39:24 +01:00
|
|
|
return NotificationStore.getState();
|
2015-09-01 18:11:18 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
componentDidMount() {
|
2015-09-03 14:15:00 +02:00
|
|
|
NotificationStore.listen(this.onChange);
|
2016-03-10 13:41:36 +01:00
|
|
|
|
|
|
|
if (this.props.currentUser.email) {
|
|
|
|
this.refreshNotifications();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
if (nextProps.currentUser && nextProps.currentUser.email !== this.props.currentUser.email) {
|
|
|
|
this.refreshNotifications();
|
|
|
|
}
|
2015-09-01 18:11:18 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2015-09-03 14:15:00 +02:00
|
|
|
NotificationStore.unlisten(this.onChange);
|
2015-09-01 18:11:18 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
onChange(state) {
|
|
|
|
this.setState(state);
|
|
|
|
},
|
|
|
|
|
2016-03-10 13:41:36 +01:00
|
|
|
refreshNotifications() {
|
|
|
|
NotificationActions.fetchPieceListNotifications();
|
|
|
|
NotificationActions.fetchEditionListNotifications();
|
|
|
|
},
|
|
|
|
|
|
|
|
renderNotifications({ notifications, isPiece }) {
|
2015-12-16 10:24:54 +01:00
|
|
|
if (notifications.length) {
|
2015-09-03 14:15:00 +02:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div className="notification-header">
|
2015-12-16 10:24:54 +01:00
|
|
|
{`${(isPiece ? 'Artworks' : 'Editions')} (${notifications.length})`}
|
2015-09-03 14:15:00 +02:00
|
|
|
</div>
|
2015-12-16 10:24:54 +01:00
|
|
|
{notifications.map((notification, i) => {
|
2016-05-04 16:44:39 +02:00
|
|
|
const pieceOrEdition = isPiece ? notification.piece : notification.edition;
|
|
|
|
const href = isPiece ? `/pieces/${pieceOrEdition.id}`
|
|
|
|
: `/editions/${pieceOrEdition.bitcoin_id}`;
|
|
|
|
|
2015-09-03 14:15:00 +02:00
|
|
|
return (
|
2016-05-04 16:44:39 +02:00
|
|
|
<MenuItem
|
|
|
|
key={href}
|
|
|
|
eventKey={i + 2}
|
|
|
|
href={href}>
|
2015-09-03 14:15:00 +02:00
|
|
|
<NotificationListItem
|
2015-12-16 10:24:54 +01:00
|
|
|
notification={notification.notification}
|
2016-05-04 16:44:39 +02:00
|
|
|
pieceOrEdition={pieceOrEdition} />
|
2015-09-03 14:15:00 +02:00
|
|
|
</MenuItem>
|
2015-12-16 10:24:54 +01:00
|
|
|
);
|
|
|
|
})}
|
2015-09-03 14:15:00 +02:00
|
|
|
</div>
|
|
|
|
);
|
2015-12-16 10:24:54 +01:00
|
|
|
} else {
|
|
|
|
return null;
|
2015-09-03 14:15:00 +02:00
|
|
|
}
|
2015-09-01 18:38:24 +02:00
|
|
|
},
|
|
|
|
|
2015-09-01 18:11:18 +02:00
|
|
|
render() {
|
2015-12-16 10:24:54 +01:00
|
|
|
const { editionListNotifications, pieceListNotifications } = this.state;
|
|
|
|
if (pieceListNotifications.length || editionListNotifications.length) {
|
2015-09-03 14:15:00 +02:00
|
|
|
let numNotifications = 0;
|
2015-12-16 10:24:54 +01:00
|
|
|
|
|
|
|
if (pieceListNotifications.length) {
|
|
|
|
numNotifications += pieceListNotifications.length;
|
2015-09-03 14:15:00 +02:00
|
|
|
}
|
2015-12-16 10:24:54 +01:00
|
|
|
if (editionListNotifications.length) {
|
|
|
|
numNotifications += editionListNotifications.length;
|
2015-09-03 14:15:00 +02:00
|
|
|
}
|
2015-12-16 10:24:54 +01:00
|
|
|
|
2015-09-01 18:11:18 +02:00
|
|
|
return (
|
2016-05-04 16:44:39 +02:00
|
|
|
<Nav navbar pullRight>
|
2015-09-01 18:11:18 +02:00
|
|
|
<DropdownButton
|
2016-02-05 10:39:24 +01:00
|
|
|
ref='dropdownButton'
|
2016-02-05 10:38:59 +01:00
|
|
|
id="header-notification-dropdown"
|
2015-09-01 18:11:18 +02:00
|
|
|
eventKey="1"
|
|
|
|
title={
|
|
|
|
<span>
|
|
|
|
<Glyphicon glyph='envelope' color="green"/>
|
2015-09-03 14:15:00 +02:00
|
|
|
<span className="notification-amount">({numNotifications})</span>
|
2015-09-01 18:11:18 +02:00
|
|
|
</span>
|
|
|
|
}
|
2015-09-03 14:15:00 +02:00
|
|
|
className="notification-menu">
|
2016-03-10 13:41:36 +01:00
|
|
|
{this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })}
|
|
|
|
{this.renderNotifications({ notifications: editionListNotifications, isPiece: false })}
|
2015-09-01 18:11:18 +02:00
|
|
|
</DropdownButton>
|
|
|
|
</Nav>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
let NotificationListItem = React.createClass({
|
|
|
|
propTypes: {
|
2015-09-03 14:15:00 +02:00
|
|
|
notification: React.PropTypes.array,
|
|
|
|
pieceOrEdition: React.PropTypes.object,
|
|
|
|
},
|
2015-09-03 17:25:22 +02:00
|
|
|
|
|
|
|
getNotificationText(){
|
|
|
|
let numNotifications = null;
|
|
|
|
if (this.props.notification.length > 1){
|
2015-09-30 18:30:50 +02:00
|
|
|
numNotifications = <div>+ {this.props.notification.length - 1} {getLangText('more...')}</div>;
|
2015-09-03 17:25:22 +02:00
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div className="notification-action">
|
|
|
|
{this.props.notification[0].action_str}
|
|
|
|
{numNotifications}
|
|
|
|
</div>);
|
|
|
|
},
|
|
|
|
|
2015-09-01 18:11:18 +02:00
|
|
|
render() {
|
|
|
|
if (this.props.pieceOrEdition) {
|
|
|
|
return (
|
2016-05-04 16:44:39 +02:00
|
|
|
<div className="row notification-wrapper">
|
|
|
|
<div className="col-xs-4 clear-paddings">
|
|
|
|
<div className="thumbnail-wrapper">
|
|
|
|
<img src={this.props.pieceOrEdition.thumbnail.url_safe}/>
|
2015-09-01 18:11:18 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2016-05-04 16:44:39 +02:00
|
|
|
<div className="col-xs-8 notification-list-item-header">
|
|
|
|
<h1>{this.props.pieceOrEdition.title}</h1>
|
|
|
|
<div className="sub-header">by {this.props.pieceOrEdition.artist_name}</div>
|
|
|
|
{this.getNotificationText()}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
2015-09-01 18:11:18 +02:00
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2016-06-06 18:52:05 +02:00
|
|
|
export default withCurrentUser(HeaderNotifications);
|