reactify notification icon

This commit is contained in:
Robert Best 2016-12-04 20:02:24 +00:00 committed by Devin Howard
parent 309534dcc1
commit 09a8e2ae67
7 changed files with 89 additions and 9 deletions

View file

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

View file

@ -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)

View file

@ -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)

View file

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

View file

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

View file

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

View file

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