diff --git a/js/actions/notification_actions.js b/js/actions/notification_actions.js index 5d80e1e7..dd396baf 100644 --- a/js/actions/notification_actions.js +++ b/js/actions/notification_actions.js @@ -12,8 +12,8 @@ class NotificationActions { 'flushPieceListNotifications', 'updateEditionListNotifications', 'flushEditionListNotifications', - 'updateEditionNotifications', 'updatePieceNotifications', + 'updateEditionNotifications', 'updateContractAgreementListNotifications', 'flushContractAgreementListNotifications' ); diff --git a/js/components/header.js b/js/components/header.js index 181e14c0..6863dc5d 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -19,7 +19,7 @@ import EventActions from '../actions/event_actions'; import PieceListStore from '../stores/piece_list_store'; import AclProxy from './acl_proxy'; -import HeaderNotifications from './header_notification'; +import HeaderNotifications from './header_notifications'; import HeaderNotificationDebug from './header_notification_debug'; import NavRoutesLinks from './nav_routes_links'; @@ -218,7 +218,7 @@ let Header = React.createClass({ {account} {signup} - + {navRoutesLinks} diff --git a/js/components/header_notification.js b/js/components/header_notifications.js similarity index 69% rename from js/components/header_notification.js rename to js/components/header_notifications.js index fe50e150..8672f1db 100644 --- a/js/components/header_notification.js +++ b/js/components/header_notifications.js @@ -15,14 +15,26 @@ import { getLangText } from '../utils/lang_utils'; let HeaderNotifications = React.createClass({ + propTypes: { + currentUser: React.PropTypes.object.isRequired + }, + getInitialState() { return NotificationStore.getState(); }, componentDidMount() { NotificationStore.listen(this.onChange); - NotificationActions.fetchPieceListNotifications(); - NotificationActions.fetchEditionListNotifications(); + + if (this.props.currentUser.email) { + this.refreshNotifications(); + } + }, + + componentWillReceiveProps(nextProps) { + if (nextProps.currentUser && nextProps.currentUser.email !== this.props.currentUser.email) { + this.refreshNotifications(); + } }, componentWillUnmount() { @@ -58,66 +70,47 @@ let HeaderNotifications = React.createClass({ this.refs.dropdownbutton.setDropdownState(false); }, - getPieceNotifications() { - if (this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) { - return ( -
-
- Artworks ({this.state.pieceListNotifications.length}) -
- {this.state.pieceListNotifications.map((pieceNotification, i) => { - return ( - - - - ); - } - )} -
- ); - } - return null; + refreshNotifications() { + NotificationActions.fetchPieceListNotifications(); + NotificationActions.fetchEditionListNotifications(); }, - getEditionNotifications() { - if (this.state.editionListNotifications && this.state.editionListNotifications.length > 0) { + renderNotifications({ notifications, isPiece }) { + if (notifications.length) { return (
- Editions ({this.state.editionListNotifications.length}) + {`${(isPiece ? 'Artworks' : 'Editions')} (${notifications.length})`}
- {this.state.editionListNotifications.map((editionNotification, i) => { + {notifications.map((notification, i) => { return ( - ); - } - )} + ); + })}
); + } else { + return null; } - return null; }, render() { - if ((this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) || - (this.state.editionListNotifications && this.state.editionListNotifications.length > 0)) { + const { editionListNotifications, pieceListNotifications } = this.state; + if (pieceListNotifications.length || editionListNotifications.length) { let numNotifications = 0; - if (this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) { - numNotifications += this.state.pieceListNotifications.length; + + if (pieceListNotifications.length) { + numNotifications += pieceListNotifications.length; } - if (this.state.editionListNotifications && this.state.editionListNotifications.length > 0) { - numNotifications += this.state.editionListNotifications.length; + if (editionListNotifications.length) { + numNotifications += editionListNotifications.length; } + return ( ); diff --git a/js/fetchers/notification_fetcher.js b/js/fetchers/notification_fetcher.js index 48606b70..8be00f29 100644 --- a/js/fetchers/notification_fetcher.js +++ b/js/fetchers/notification_fetcher.js @@ -16,7 +16,7 @@ let NotificationFetcher = { fetchEditionListNotifications() { return requests.get('notification_editionlist'); }, - + fetchEditionNotifications(editionId) { return requests.get('notification_edition', {'edition_id': editionId}); }, diff --git a/js/stores/notification_store.js b/js/stores/notification_store.js index 515a3730..856f9981 100644 --- a/js/stores/notification_store.js +++ b/js/stores/notification_store.js @@ -8,13 +8,15 @@ import NotificationActions from '../actions/notification_actions'; class NotificationStore { constructor() { - this.pieceListNotifications = {}; - this.editionListNotifications = {}; + this.pieceListNotifications = []; + this.pieceNotifications = null; + this.editionListNotifications = []; + this.editionNotifications = null; + // Need to determine if contract agreement notifications have been loaded or not, // so we use null here instead of an empty array this.contractAgreementListNotifications = null; - this.editionNotifications = null; - this.pieceNotifications = null; + this.bindActions(NotificationActions); }