fixup mapchat stuff

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -157,6 +157,7 @@ const ReactApp = {
   getChatProps: function() {
     const self = ReactApp
     return {
+      unreadMessages: ChatView.unreadMessages,
       conversationLive: ChatView.conversationLive,
       isParticipating: ChatView.isParticipating,
       onOpen: ChatView.onOpen,

frontend/src/Metamaps/Realtime/index.js

@@ -151,8 +151,6 @@ let Realtime = {
         config: { DOUBLE_CLICK_TOLERANCE: 200 }
       })
       self.room.videoAdded(self.handleVideoAdded)
-
-      self.startActiveMap()
     } // if Active.Mapper
   },
   addJuntoListeners: function() {
@@ -201,9 +199,6 @@ let Realtime = {
     self.leaveMap()
     $('.collabCompass').remove()
     if (self.room) self.room.leave()
-    ChatView.hide()
-    ChatView.close()
-    ChatView.reset()
     Cable.unsubscribeFromMap()
   },
   turnOn: function(notify) {
@@ -228,7 +223,6 @@ let Realtime = {
     ChatView.setNewMap()
     ChatView.addParticipant(self.activeMapper)
     ChatView.addMessages(new DataModel.MessageCollection(DataModel.Messages), true)
-    ChatView.show()
   },
   setupLocalEvents: function() {
     var self = Realtime

frontend/src/Metamaps/Views/ChatView.js

@@ -14,10 +14,10 @@ import ReactApp from '../GlobalUI/ReactApp'
 
 const ChatView = {
   isOpen: false,
+  unreadMessages: 0,
   messages: new Backbone.Collection(),
   conversationLive: false,
   isParticipating: false,
-  mapChat: null,
   domId: 'chat-box-wrapper',
   init: function(urls) {
     const self = ChatView
@@ -34,29 +34,32 @@ const ChatView = {
   },
   setNewMap: function() {
     const self = ChatView
+    self.unreadMessages = 0
+    self.isOpen = false
     self.conversationLive = false
     self.isParticipating = false
     self.alertSound = true // whether to play sounds on arrival of new messages or not
     self.cursorsShowing = true
     self.videosShowing = true
     self.participants = new Backbone.Collection()
+    self.messages = new Backbone.Collection()
     self.render()
   },
-  show: () => {
-    $('#' + ChatView.domId).show()
-  },
-  hide: () => {
-    $('#' + ChatView.domId).hide()
-  },
   render: () => {
     if (!Active.Map) return
     const self = ChatView
     ReactApp.render()
   },
   onOpen: () => {
+    const self = ChatView
+    self.isOpen = true
+    self.unreadMessages = 0
+    self.render()
     $(document).trigger(ChatView.events.openTray)
   },
   onClose: () => {
+    const self = ChatView
+    self.isOpen = false
     $(document).trigger(ChatView.events.closeTray)
   },
   addParticipant: participant => {
@@ -102,12 +105,6 @@ const ChatView = {
     ChatView.participants.forEach(p => p.set({isParticipating: false, isPending: false}))
     ChatView.render()
   },
-  close: () => {
-    ChatView.mapChat && ChatView.mapChat.close()
-  },
-  open: () => {
-    ChatView.mapChat && ChatView.mapChat.open()
-  },
   videoToggleClick: function() {
     ChatView.videosShowing = !ChatView.videosShowing
     $(document).trigger(ChatView.videosShowing ? ChatView.events.videosOn : ChatView.events.videosOff)
@@ -127,11 +124,10 @@ const ChatView = {
   },
   addMessage: (message, isInitial, wasMe) => {
     const self = ChatView
-    if (!isInitial) self.mapChat.newMessage()
+    if (!isInitial && !self.isOpen) self.unreadMessages += 1
     if (!wasMe && !isInitial && self.alertSound) self.sound.play('receivechat')
     self.messages.add(message)
     self.render()
-    if (!isInitial) self.mapChat.scroll()
   },
   sendChatMessage: message => {
     var self = ChatView
@@ -157,23 +153,9 @@ const ChatView = {
   // passed to this function
   addMessages: (messages, isInitial, wasMe) => {
     messages.models.forEach(m => ChatView.addMessage(m, isInitial, wasMe))
-  },
-  reset: () => {
-    ChatView.mapChat && ChatView.mapChat.reset()
-    ChatView.participants && ChatView.participants.reset()
-    ChatView.messages && ChatView.messages.reset()
-    ChatView.render()
   }
 }
 
-// ChatView.prototype.scrollMessages = function(duration) {
-//   duration = duration || 0
-
-//   this.$messages.animate({
-//     scrollTop: this.$messages[0].scrollHeight
-//   }, duration)
-// }
-
 /**
  * @class
  * @static

frontend/src/Metamaps/Views/TopicCard.js

@@ -43,7 +43,6 @@ const TopicCard = {
     var self = TopicCard
     var topic = node.getData('topic')
     self.openTopic = topic
-    // populate the card that's about to show with the right topics data
     self.render()
     $('.showcard').fadeIn('fast', () => {
       $('.showcard').draggable({

frontend/src/components/MapView/MapChat/index.js

@@ -26,7 +26,6 @@ class MapChat extends Component {
     super(props)
 
     this.state = {
-      unreadMessages: 0,
       messageText: '',
       alertSound: true, // whether to play sounds on arrival of new messages or not
       cursorsShowing: true,
@@ -34,9 +33,14 @@ class MapChat extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    const { messages } = this.props
+    const prevMessages = prevProps.messages
+    if (messages.length !== prevMessages.length) setTimeout(() => this.scroll(), 50)
+  }
+
   reset = () => {
     this.setState({
-      unreadMessages: 0,
       messageText: '',
       alertSound: true, // whether to play sounds on arrival of new messages or not
       cursorsShowing: true,
@@ -46,22 +50,16 @@ class MapChat extends Component {
 
   close = () => {
     this.props.onClose()
-    this.messageInput.blur()
   }
 
   open = () => {
-    this.scroll()
-    this.setState({unreadMessages: 0})
     this.props.onOpen()
-    this.messageInput.focus()
+    setTimeout(() => this.scroll(), 50)
-  }
-
-  newMessage = () => {
-    if (!this.state.open) this.setState({unreadMessages: this.state.unreadMessages + 1})
   }
 
   scroll = () => {
-    this.messagesDiv.scrollTop = this.messagesDiv.scrollHeight
+    // hack: figure out how to do this right
+    this.messagesDiv.scrollTop = this.messagesDiv.scrollHeight + 100
   }
 
   toggleDrawer = () => {
@@ -99,14 +97,10 @@ class MapChat extends Component {
     }
   }
 
-  focusMessageInput = () => {
-    if (!this.messageInput) return
-    this.messageInput.focus()
-  }
-
   render = () => {
-    const { chatOpen, conversationLive, isParticipating, participants, messages, inviteACall, inviteToJoin } = this.props
+    const { unreadMessages, chatOpen, conversationLive,
-    const { videosShowing, cursorsShowing, alertSound, unreadMessages } = this.state
+            isParticipating, participants, messages, inviteACall, inviteToJoin } = this.props
+    const { videosShowing, cursorsShowing, alertSound } = this.state
     const rightOffset = chatOpen ? '0' : '-300px'
     return (
       <div id="chat-box-wrapper">
@@ -153,7 +147,7 @@ class MapChat extends Component {
             handleChange={this.handleChange('messageText')}
             textAreaProps={{
               className: 'chat-input',
-              ref: textarea => { this.messageInput = textarea },
+              ref: textarea => { textarea && textarea.focus() },
               placeholder: 'Send a message...',
               onKeyUp: this.handleTextareaKeyUp,
               onFocus: this.props.inputFocus,
@@ -167,6 +161,7 @@ class MapChat extends Component {
 }
 
 MapChat.propTypes = {
+  unreadMessages: PropTypes.number,
   chatOpen: PropTypes.bool,
   conversationLive: PropTypes.bool,
   isParticipating: PropTypes.bool,

frontend/src/components/MapView/index.js

@@ -42,6 +42,7 @@ class MapView extends Component {
     this.setState({
       chatOpen: false
     })
+    this.mapChat.reset()
     this.props.endActiveMap()
   }
 
@@ -82,7 +83,7 @@ class MapView extends Component {
                   filterBoxHtml={filterBoxHtml} />
       <DataVis />
       <TopicCard {...this.props} />
-      {currentUser && <MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} />}
+      {currentUser && <MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} ref={x => this.mapChat = x} />}
       <MapControls onClickZoomExtents={onZoomExtents}
                    onClickZoomIn={onZoomIn}
                    onClickZoomOut={onZoomOut} />