From b4ad51e69d2c4534427e14791cd438f57ec74910 Mon Sep 17 00:00:00 2001
From: Robert Best <chessscholar@gmail.com>
Date: Sun, 4 Dec 2016 20:02:24 +0000
Subject: [PATCH] reactify notification icon

---
 app/views/layouts/_upperelements.html.erb     | 19 +++++----
 app/views/notifications/mark_read.js.erb      |  1 +
 app/views/notifications/mark_unread.js.erb    |  1 +
 .../src/Metamaps/GlobalUI/NotificationIcon.js | 30 ++++++++++++++
 frontend/src/Metamaps/GlobalUI/index.js       |  4 +-
 frontend/src/Metamaps/index.js                |  4 +-
 frontend/src/components/NotificationIcon.js   | 39 +++++++++++++++++++
 7 files changed, 89 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/Metamaps/GlobalUI/NotificationIcon.js
 create mode 100644 frontend/src/components/NotificationIcon.js

diff --git a/app/views/layouts/_upperelements.html.erb b/app/views/layouts/_upperelements.html.erb
index 8b2882ce..515bfcd4 100644
--- a/app/views/layouts/_upperelements.html.erb
+++ b/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 -->
diff --git a/app/views/notifications/mark_read.js.erb b/app/views/notifications/mark_read.js.erb
index 5b28f453..cbf2cf13 100644
--- a/app/views/notifications/mark_read.js.erb
+++ b/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)
\ No newline at end of file
diff --git a/app/views/notifications/mark_unread.js.erb b/app/views/notifications/mark_unread.js.erb
index 46744388..3fffab24 100644
--- a/app/views/notifications/mark_unread.js.erb
+++ b/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)
\ No newline at end of file
diff --git a/frontend/src/Metamaps/GlobalUI/NotificationIcon.js b/frontend/src/Metamaps/GlobalUI/NotificationIcon.js
new file mode 100644
index 00000000..2f13adba
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/frontend/src/Metamaps/GlobalUI/index.js b/frontend/src/Metamaps/GlobalUI/index.js
index 95e484f8..932e3319 100644
--- a/frontend/src/Metamaps/GlobalUI/index.js
+++ b/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
diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js
index dfad4d95..be218aff 100644
--- a/frontend/src/Metamaps/index.js
+++ b/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
diff --git a/frontend/src/components/NotificationIcon.js b/frontend/src/components/NotificationIcon.js
new file mode 100644
index 00000000..b886f557
--- /dev/null
+++ b/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