1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
onion/js/components/header_notifications.js

162 lines
5.6 KiB
JavaScript
Raw Normal View History

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';
import NotificationActions from '../actions/notification_actions';
import NotificationStore from '../stores/notification_store';
2015-09-01 18:11:18 +02:00
import { currentUserShape } from './prop_types';
2015-09-01 18:11:18 +02:00
import { getLangText } from '../utils/lang_utils';
import { withCurrentUser } from '../utils/react_utils';
2015-09-01 18:11:18 +02:00
let HeaderNotifications = React.createClass({
propTypes: {
// Injected through HOCs
currentUser: currentUserShape.isRequired, // eslint-disable-line react/sort-prop-types
isLoggedIn: React.PropTypes.bool.isRequired // eslint-disable-line react/sort-prop-types
},
2015-09-01 18:11:18 +02:00
getInitialState() {
return NotificationStore.getState();
2015-09-01 18:11:18 +02:00
},
componentDidMount() {
NotificationStore.listen(this.onChange);
if (this.props.isLoggedIn) {
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() {
NotificationStore.unlisten(this.onChange);
2015-09-01 18:11:18 +02:00
},
onChange(state) {
this.setState(state);
},
refreshNotifications() {
NotificationActions.fetchPieceListNotifications();
NotificationActions.fetchEditionListNotifications();
},
renderNotifications({ notifications, isPiece }) {
2015-12-16 10:24:54 +01:00
if (notifications.length) {
return (
<div>
<div className="notification-header">
2015-12-16 10:24:54 +01:00
{`${(isPiece ? 'Artworks' : 'Editions')} (${notifications.length})`}
</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}`;
return (
2016-05-04 16:44:39 +02:00
<MenuItem
key={href}
eventKey={i + 2}
href={href}>
<NotificationListItem
2015-12-16 10:24:54 +01:00
notification={notification.notification}
2016-05-04 16:44:39 +02:00
pieceOrEdition={pieceOrEdition} />
</MenuItem>
2015-12-16 10:24:54 +01:00
);
})}
</div>
);
2015-12-16 10:24:54 +01:00
} else {
return null;
}
},
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) {
let numNotifications = 0;
2015-12-16 10:24:54 +01:00
if (pieceListNotifications.length) {
numNotifications += pieceListNotifications.length;
}
2015-12-16 10:24:54 +01:00
if (editionListNotifications.length) {
numNotifications += editionListNotifications.length;
}
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
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"/>
<span className="notification-amount">({numNotifications})</span>
2015-09-01 18:11:18 +02:00
</span>
}
className="notification-menu">
{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: {
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){
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;
}
});
export default withCurrentUser(HeaderNotifications);