Merge pull request #71 from ascribe/AD-1387-improve-redundancy-of-notifications

AD-1387 Improve robustness of notifications

js/actions/notification_actions.js

@@ -12,8 +12,8 @@ class NotificationActions {
             'flushPieceListNotifications',
             'updateEditionListNotifications',
             'flushEditionListNotifications',
-            'updateEditionNotifications',
             'updatePieceNotifications',
+            'updateEditionNotifications',
             'updateContractAgreementListNotifications',
             'flushContractAgreementListNotifications'
         );

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}
                         </Nav>
-                        <HeaderNotifications />
+                        <HeaderNotifications currentUser={currentUser} />
                         {navRoutesLinks}
                     </CollapsibleNav>
                 </Navbar>

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() {
+    refreshNotifications() {
-        if (this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) {
+        NotificationActions.fetchPieceListNotifications();
-            return (
+        NotificationActions.fetchEditionListNotifications();
-                <div>
-                    <div className="notification-header">
-                        Artworks ({this.state.pieceListNotifications.length})
-                    </div>
-                    {this.state.pieceListNotifications.map((pieceNotification, i) => {
-                        return (
-                            <MenuItem eventKey={i + 2}>
-                                <NotificationListItem
-                                    ref={i}
-                                    notification={pieceNotification.notification}
-                                    pieceOrEdition={pieceNotification.piece}
-                                    onClick={this.onMenuItemClick}/>
-                            </MenuItem>
-                            );
-                        }
-                    )}
-                </div>
-            );
-        }
-        return null;
     },
 
-    getEditionNotifications() {
+    renderNotifications({ notifications, isPiece }) {
-        if (this.state.editionListNotifications && this.state.editionListNotifications.length > 0) {
+        if (notifications.length) {
             return (
                 <div>
                     <div className="notification-header">
-                        Editions ({this.state.editionListNotifications.length})
+                        {`${(isPiece ? 'Artworks' : 'Editions')} (${notifications.length})`}
                     </div>
-                    {this.state.editionListNotifications.map((editionNotification, i) => {
+                    {notifications.map((notification, i) => {
                         return (
                             <MenuItem eventKey={i + 2}>
                                 <NotificationListItem
-                                    ref={'edition' + i}
+                                    notification={notification.notification}
-                                    notification={editionNotification.notification}
+                                    pieceOrEdition={isPiece ? notification.piece : notification.edition}
-                                    pieceOrEdition={editionNotification.edition}
                                     onClick={this.onMenuItemClick}/>
                             </MenuItem>
-                            );
+                        );
-                        }
+                    })}
-                    )}
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     render() {
-        if ((this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) ||
+        const { editionListNotifications, pieceListNotifications } = this.state;
-            (this.state.editionListNotifications && this.state.editionListNotifications.length > 0)) {
+        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) {
+            if (editionListNotifications.length) {
-                numNotifications += this.state.editionListNotifications.length;
+                numNotifications += editionListNotifications.length;
             }
+
             return (
                 <Nav navbar right>
                     <DropdownButton
@@ -131,8 +124,8 @@ let HeaderNotifications = React.createClass({
                             </span>
                         }
                         className="notification-menu">
-                        {this.getPieceNotifications()}
+                        {this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })}
-                        {this.getEditionNotifications()}
+                        {this.renderNotifications({ notifications: editionListNotifications, isPiece: false })}
                     </DropdownButton>
                 </Nav>
             );

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});
     },

js/stores/notification_store.js

@@ -8,13 +8,15 @@ import NotificationActions from '../actions/notification_actions';
 
 class NotificationStore {
     constructor() {
-        this.pieceListNotifications = {};
+        this.pieceListNotifications = [];
-        this.editionListNotifications = {};
+        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);
     }