add unreadnotificationscount

sass/notifications.scss

@@ -81,7 +81,6 @@ $unread_notifications_dot_size: 8px;
   }
 }
 
-.controller-notifications {
 .notificationPage,
 .notificationsPage {
   font-family: 'din-regular', Sans-Serif;
@@ -111,8 +110,6 @@ $unread_notifications_dot_size: 8px;
   }
 }
 
-
-
 .notificationPage {
   .thirty-two-avatar {
     display: inline-block;
@@ -144,7 +141,6 @@ $unread_notifications_dot_size: 8px;
     }
   }
 }
-}
 
 ul.notifications {
   list-style: none;

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 />