make the unread count work

app/assets/stylesheets/junto.css.erb

@@ -117,7 +117,6 @@
   background: url(<%= asset_path 'junto_spinner_dark.gif' %>) no-repeat 2px 8px, url(<%= asset_path 'tray_tab.png' %>) no-repeat !important;
 }
 .chat-box .chat-button .chat-unread {
-  display: none;
   background: #DAB539;
   position: absolute;
   top: -3px;

frontend/src/Metamaps/Views/ChatView.js

@@ -17,6 +17,7 @@ const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, pho
 
 const ChatView = {
   isOpen: false,
+  mapChat: null,
   init: function(messages, mapper, room, opts = {}) {
     const self = ChatView
     self.room = room
@@ -26,7 +27,6 @@ const ChatView = {
     self.alertSound = true // whether to play sounds on arrival of new messages or not
     self.cursorsShowing = true
     self.videosShowing = true
-    self.unreadMessages = 0
     self.participants = []
 
     self.sound = new Howl({
@@ -43,14 +43,13 @@ const ChatView = {
   },
   render: () => {
     const self = ChatView
-    ReactDOM.render(React.createElement(MapChat, {
+    self.mapChat = ReactDOM.render(React.createElement(MapChat, {
       onOpen: self.onOpen,
       onClose: self.onClose,
       leaveCall: Realtime.leaveCall,
       joinCall: Realtime.joinCall,
       participants: self.participants,
       messages: self.messages.models.map(m => m.attributes),
-      unreadMessages: self.unreadMessages,
       videoToggleClick: self.videoToggleClick,
       cursorToggleClick: self.cursorToggleClick,
       soundToggleClick: self.soundToggleClick,
@@ -63,11 +62,9 @@ const ChatView = {
     }), document.getElementById('chat-box-wrapper'))
   },
   onOpen: () => {
-    ChatView.isOpen = true
     $(document).trigger(ChatView.events.openTray)
   },
   onClose: () => {
-    ChatView.isOpen = false
     $(document).trigger(ChatView.events.closeTray)
   },
   addParticipant: participant => {
@@ -81,13 +78,9 @@ const ChatView = {
     ChatView.participants = ChatView.participants.filter(p => p.id !== remove_id)
     ChatView.render()
   },
-  incrementUnread: (render = false) => {
-    ChatView.unreadMessages += 1
-    if (render) ChatView.render()
-  },
   addMessage: (message, isInitial, wasMe) => {
     const self = ChatView
-    if (!self.isOpen && !isInitial) ChatView.incrementUnread(false) // TODO don't need to render, right?
+    if (!isInitial) self.mapChat.newMessage() 
 
     function addZero(i) {
       if (i < 10) {
@@ -141,14 +134,14 @@ const ChatView = {
   close: () => {
     // TODO how to do focus with react
     // this.$messageInput.blur()
+    ChatView.mapChat.close()
   },
   open: () => {
-    ChatView.unreadMessages = 0
+    ChatView.mapChat.open()
     // TODO how to do focus with react
     // this.$messageInput.focus()
     // TODO reimplement scrollMessages
     // this.scrollMessages(0)
-    ChatView.render()
   },
   videoToggleClick: function() {
     const self = ChatView

frontend/src/components/MapChat/Unread.js

@@ -1,10 +1,7 @@
 import React from 'react'
 
 const Unread = props => {
-  if (props.count <= 0) {
-    return null
-  }
-  return <div className="chat-unread"></div>
+  return props.count ? <div className="chat-unread">{props.count}</div> : null
 }
 
 export default Unread

frontend/src/components/MapChat/index.js

@@ -8,20 +8,29 @@ class MapChat extends Component {
     super(props)
 
     this.state = {
+      unreadMessages: 0,
       open: false,
       messageText: ''
     }
   }
 
+  close = () => {
+    this.setState({open: false})
+    this.props.onClose()
+  }
+
+  open = () => {
+    this.setState({open: true, unreadMessages: 0})
+    this.props.onOpen()
+  }
+
+  newMessage = () => {
+    if (!this.state.open) this.setState({ unreadMessages: this.state.unreadMessages + 1 })
+  }
+
   toggleDrawer = () => {
-    if (this.state.open) {
-      this.setState({open: false})
-      this.props.onClose()
-    }
-    else if (!this.state.open) {
-      this.setState({open: true})
-      this.props.onOpen()
-    }
+    if (this.state.open) this.close()
+    else if (!this.state.open) this.open()
   }
 
   handleChange = key => e => {
@@ -42,6 +51,7 @@ class MapChat extends Component {
   render = () => {
     const rightOffset = this.state.open ? '0' : '-300px'
     const { videosShowing, cursorsShowing, alertSound } = this.props
+    const { unreadMessages } = this.state
     return (
       <div className="chat-box"
         style={{ right: rightOffset }}
@@ -71,7 +81,7 @@ class MapChat extends Component {
         </div>
         <div className="chat-button" onClick={this.toggleDrawer}>
           <div className="tooltips">Chat</div>
-          <Unread count={this.props.unreadMessages} />
+          <Unread count={unreadMessages} />
         </div>
         <div className="chat-messages">
           {this.props.messages.map(message => {