reactify notification icon

app/views/layouts/_upperelements.html.erb

@@ -71,15 +71,20 @@
   </a><!-- end addMap -->
   <% end %>
 
+  <script type="text/javascript">
+    Metamaps.ServerData.unreadNotificationsCount = <%= user_unread_notification_count %>
+  </script>
   <% if current_user.present? %>
-    <%= link_to notifications_path, class: "notificationsIcon upperRightEl upperRightIcon #{user_has_unread_notifications? ? 'unread' : 'read'}" do %>
-      <div class="tooltipsUnder">
-        Notifications
-      </div>
-      <% if user_has_unread_notifications? %>
-        <div class="unread-notifications-dot"></div>
+    <span id="notification_icon">
+      <%= link_to notifications_path, class: "notificationsIcon upperRightEl upperRightIcon #{user_has_unread_notifications? ? 'unread' : 'read'}" do %>
+        <div class="tooltipsUnder">
+          Notifications
+        </div>
+        <% if user_has_unread_notifications? %>
+          <div class="unread-notifications-dot"></div>
+        <% end %>
       <% end %>
-    <% end %>
+    </span>
   <% end %>
 
   <!-- Account / Sign in -->

app/views/notifications/mark_read.js.erb

@@ -4,3 +4,4 @@ $('#notification-<%= @notification.id %> .notification-read-unread > a')
 $('#notification-<%= @notification.id %>')
   .removeClass('unread')
   .addClass('read')
+Metamaps.GlobalUI.NotificationIcon.render(Metamaps.GlobalUI.NotificationIcon.unreadNotificationsCount - 1)

app/views/notifications/mark_unread.js.erb

@@ -4,3 +4,4 @@ $('#notification-<%= @notification.id %> .notification-read-unread > a')
 $('#notification-<%= @notification.id %>')
   .removeClass('read')
   .addClass('unread')
+Metamaps.GlobalUI.NotificationIcon.render(Metamaps.GlobalUI.NotificationIcon.unreadNotificationsCount + 1)

frontend/src/Metamaps/GlobalUI/NotificationIcon.js

@@ -0,0 +1,30 @@
+/* global $ */
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import Active from '../Active'
+import NotificationIconComponent from '../../components/NotificationIcon'
+
+const NotificationIcon = {
+  unreadNotificationsCount: null,
+  
+  init: function(serverData) {
+    const self = NotificationIcon
+    self.unreadNotificationsCount = serverData.unreadNotificationsCount
+    self.render()
+  },
+  render: function(newUnreadCount = null) {
+    if (newUnreadCount !== null) {
+      NotificationIcon.unreadNotificationsCount = newUnreadCount
+    }
+    
+    if (Active.Mapper !== null) {
+      ReactDOM.render(React.createElement(NotificationIconComponent, {
+        unreadNotificationsCount: NotificationIcon.unreadNotificationsCount
+      }), $('#notification_icon').get(0))
+    }
+  }
+}
+
+export default NotificationIcon

frontend/src/Metamaps/GlobalUI/index.js

@@ -8,6 +8,7 @@ import Search from './Search'
 import CreateMap from './CreateMap'
 import Account from './Account'
 import ImportDialog from './ImportDialog'
+import NotificationIcon from './NotificationIcon'
 
 const GlobalUI = {
   notifyTimeout: null,
@@ -19,6 +20,7 @@ const GlobalUI = {
     self.CreateMap.init(serverData)
     self.Account.init(serverData)
     self.ImportDialog.init(serverData, self.openLightbox, self.closeLightbox)
+    self.NotificationIcon.init(serverData)
 
     if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
 
@@ -127,5 +129,5 @@ const GlobalUI = {
   }
 }
 
-export { Search, CreateMap, Account, ImportDialog }
+export { Search, CreateMap, Account, ImportDialog, NotificationIcon }
 export default GlobalUI

frontend/src/Metamaps/index.js

@@ -8,7 +8,8 @@ import Create from './Create'
 import Debug from './Debug'
 import Filter from './Filter'
 import GlobalUI, {
-  Search, CreateMap, ImportDialog, Account as GlobalUIAccount
+  Search, CreateMap, ImportDialog, Account as GlobalUIAccount,
+  NotificationIcon
 } from './GlobalUI'
 import Import from './Import'
 import JIT from './JIT'
@@ -47,6 +48,7 @@ Metamaps.GlobalUI.Search = Search
 Metamaps.GlobalUI.CreateMap = CreateMap
 Metamaps.GlobalUI.Account = GlobalUIAccount
 Metamaps.GlobalUI.ImportDialog = ImportDialog
+Metamaps.GlobalUI.NotificationIcon = NotificationIcon
 Metamaps.Import = Import
 Metamaps.JIT = JIT
 Metamaps.Listeners = Listeners

frontend/src/components/NotificationIcon.js

@@ -0,0 +1,39 @@
+import React, { PropTypes, Component } from 'react'
+
+class NotificationIcon extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+    }
+  }
+
+  render = () => {
+    var linkClasses = "notificationsIcon upperRightEl upperRightIcon "
+    
+    if (this.props.unreadNotificationsCount > 0) {
+      linkClasses += "unread"
+    } else {
+      linkClasses += "read"
+    }
+    
+    return (
+      <a className={linkClasses} href="/notifications">
+        <div className="tooltipsUnder">
+          Notifications
+        </div>
+        {this.props.unreadNotificationsCount === 0 ? null : (
+          <div className="unread-notifications-dot"></div>
+        )}
+      </a>
+    
+      
+    )
+  }
+}
+
+NotificationIcon.propTypes = {
+  unreadNotificationsCount: PropTypes.number
+}
+
+export default NotificationIcon