From 874aad05b8807c4fd91ec410f46238fd2f569851 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Wed, 16 Dec 2015 10:24:44 +0100 Subject: [PATCH 1/4] Use empty array as initial state of piece and edition list notifications --- js/actions/notification_actions.js | 2 +- js/fetchers/notification_fetcher.js | 2 +- js/stores/notification_store.js | 10 ++++++---- 3 files changed, 8 insertions(+), 6 deletions(-) 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/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); } From 114129588ed72bce96febaf5b8413d4fd3c2fc1b Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Wed, 16 Dec 2015 10:24:54 +0100 Subject: [PATCH 2/4] Improve DRYness of HeaderNotification --- js/components/header_notification.js | 64 +++++++++------------------- 1 file changed, 20 insertions(+), 44 deletions(-) diff --git a/js/components/header_notification.js b/js/components/header_notification.js index fe50e150..3ec50fa3 100644 --- a/js/components/header_notification.js +++ b/js/components/header_notification.js @@ -58,66 +58,42 @@ let HeaderNotifications = React.createClass({ this.refs.dropdownbutton.setDropdownState(false); }, - getPieceNotifications() { - if (this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) { + getNotifications({ notifications, isPiece }) { + if (notifications.length) { return (
- Artworks ({this.state.pieceListNotifications.length}) + {`${(isPiece ? 'Artworks' : 'Editions')} (${notifications.length})`}
- {this.state.pieceListNotifications.map((pieceNotification, i) => { + {notifications.map((notification, i) => { return ( - ); - } - )} + ); + })}
); + } else { + return null; } - return null; - }, - - getEditionNotifications() { - if (this.state.editionListNotifications && this.state.editionListNotifications.length > 0) { - return ( -
-
- Editions ({this.state.editionListNotifications.length}) -
- {this.state.editionListNotifications.map((editionNotification, i) => { - return ( - - - - ); - } - )} -
- ); - } - 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 ( ); From 30911b53955c1c132350b7fcd97093ff4985bafb Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Thu, 10 Mar 2016 13:41:36 +0100 Subject: [PATCH 3/4] Make notification fetching dependent on if the current user is available --- js/components/header.js | 2 +- js/components/header_notification.js | 27 ++++++++++++++++++++++----- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/js/components/header.js b/js/components/header.js index 181e14c0..487b3f20 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -218,7 +218,7 @@ let Header = React.createClass({ {account} {signup} - + {navRoutesLinks} diff --git a/js/components/header_notification.js b/js/components/header_notification.js index 3ec50fa3..8672f1db 100644 --- a/js/components/header_notification.js +++ b/js/components/header_notification.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,7 +70,12 @@ let HeaderNotifications = React.createClass({ this.refs.dropdownbutton.setDropdownState(false); }, - getNotifications({ notifications, isPiece }) { + refreshNotifications() { + NotificationActions.fetchPieceListNotifications(); + NotificationActions.fetchEditionListNotifications(); + }, + + renderNotifications({ notifications, isPiece }) { if (notifications.length) { return (
@@ -107,8 +124,8 @@ let HeaderNotifications = React.createClass({ } className="notification-menu"> - {this.getNotifications({ notifications: pieceListNotifications, isPiece: true })} - {this.getNotifications({ notifications: editionListNotifications, isPiece: false })} + {this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })} + {this.renderNotifications({ notifications: editionListNotifications, isPiece: false })} ); From 8f12e12bcc7434970314acbb84f0e0a46aef8368 Mon Sep 17 00:00:00 2001 From: Brett Sun Date: Thu, 10 Mar 2016 13:43:07 +0100 Subject: [PATCH 4/4] Move header_notification to be in sync with its component's name --- js/components/header.js | 2 +- .../{header_notification.js => header_notifications.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename js/components/{header_notification.js => header_notifications.js} (100%) diff --git a/js/components/header.js b/js/components/header.js index 487b3f20..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'; diff --git a/js/components/header_notification.js b/js/components/header_notifications.js similarity index 100% rename from js/components/header_notification.js rename to js/components/header_notifications.js