add unreadnotificationscount

sass/notifications.scss

@@ -81,67 +81,63 @@ $unread_notifications_dot_size: 8px;
   }
 }
 
-.controller-notifications {
+.notificationPage,
-  .notificationPage,
+.notificationsPage {
-  .notificationsPage {
+  font-family: 'din-regular', Sans-Serif;
-    font-family: 'din-regular', Sans-Serif;
 
-    & a:hover {
+  & a:hover {
-      text-decoration: none;
+    text-decoration: none;
+  }
+
+  & > .notification-title {
+    border-bottom: 1px solid #eee;
+    padding-bottom: 0.25em;
+    margin-bottom: 0.5em;
+  }
+
+  .back {
+    margin-top: 1em;
+  }
+}
+
+.notificationsPage {
+  header {
+    margin-bottom: 0;
+  }
+
+  .emptyInbox {
+    padding-top: 15px;
+  }
+}
+
+.notificationPage {
+  .thirty-two-avatar {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    border-radius: 16px;
+    vertical-align: middle;
+  }
+
+  .button {
+    line-height: 32px;
+
+    img {
+      margin-top: 8px;
     }
 
-    & > .notification-title {
+    &.decline {
-      border-bottom: 1px solid #eee;
+      background: #DB5D5D;
-      padding-bottom: 0.25em;
+      &:hover {
-      margin-bottom: 0.5em;
+        background: #DC4B4B;
-    }
+      }
-
-    .back {
-      margin-top: 1em;
     }
   }
 
-  .notificationsPage {
+  .notification-body {
-    header {
+    p, div {
-      margin-bottom: 0;
+      margin: 1em auto;
-    }
+      line-height: 20px;
-
-    .emptyInbox {
-      padding-top: 15px;
-    }
-  }
-
-
-
-  .notificationPage {
-    .thirty-two-avatar {
-      display: inline-block;
-      width: 32px;
-      height: 32px;
-      border-radius: 16px;
-      vertical-align: middle;
-    }
-
-    .button {
-      line-height: 32px;
-
-      img {
-        margin-top: 8px;
-      }
-
-      &.decline {
-        background: #DB5D5D;
-        &:hover {
-          background: #DC4B4B;
-        }
-      }
-    }
-
-    .notification-body {
-      p, div {
-        margin: 1em auto;
-        line-height: 20px;
-      }
     }
   }
 }

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