add unreadnotificationscount

sass/notifications.scss

@@ -81,9 +81,8 @@ $unread_notifications_dot_size: 8px;
   }
 }
 
-.controller-notifications {
-  .notificationPage,
-  .notificationsPage {
+.notificationPage,
+.notificationsPage {
   font-family: 'din-regular', Sans-Serif;
 
   & a:hover {
@@ -99,9 +98,9 @@ $unread_notifications_dot_size: 8px;
   .back {
     margin-top: 1em;
   }
-  }
+}
 
-  .notificationsPage {
+.notificationsPage {
   header {
     margin-bottom: 0;
   }
@@ -109,11 +108,9 @@ $unread_notifications_dot_size: 8px;
   .emptyInbox {
     padding-top: 15px;
   }
-  }
+}
 
-
-
-  .notificationPage {
+.notificationPage {
   .thirty-two-avatar {
     display: inline-block;
     width: 32px;
@@ -143,7 +140,6 @@ $unread_notifications_dot_size: 8px;
       line-height: 20px;
     }
   }
-  }
 }
 
 ul.notifications {

src/Metamaps/GlobalUI/Notifications.js

@@ -7,7 +7,7 @@ const Notifications = {
   notificationsLoading: false,
   unreadNotificationsCount: 0,
   init: serverData => {
-    Notifications.unreadNotificationsCount = serverData.unreadNotificationsCount
+    Notifications.unreadNotificationsCount = serverData.ActiveMapper.unread_notifications_count
   },
   fetchNotifications: render => {
     Notifications.notificationsLoading = true

src/components/NotificationBox.js

@@ -61,11 +61,11 @@ class NotificationBox extends Component {
   }
 
   render = () => {
-    const { loading } = this.props
+    const { notifications, loading } = this.props
     return <div className='notificationsBox'>
       <div className='notificationsBoxTriangle' />
       <ul className='notifications'>
-        {loading ?  this.showLoading() : this.showNotifications()}
+        {notifications.length === 0 && loading ?  this.showLoading() : this.showNotifications()}
       </ul>
     </div>
   }

src/routes/Notifications/Notifications.js

@@ -27,7 +27,7 @@ class Notifications extends Component {
   render = () => {
     const { notificationsLoading, markAsRead, markAsUnread } = this.props
     const notifications = (this.props.notifications || []).filter(n => !(BLACKLIST.indexOf(n.type) > -1 && (!n.data.object || !n.data.map)))
-    if (notificationsLoading) {
+    if (notifications.length === 0 && notificationsLoading) {
       return (
         <div>
           <LoadingPage />