refactor some of the ChatView functions

frontend/src/Metamaps/Views/ChatView.js

@@ -18,6 +18,8 @@ const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, pho
 
 const ChatView = {
   isOpen: false,
+  conversationLive: false,
+  isParticipating: false,
   mapChat: null,
   domId: 'chat-box-wrapper',
   init: function(urls) {
@@ -37,12 +39,13 @@ const ChatView = {
     const self = ChatView
     self.room = room
     self.mapper = mapper
-    self.messages = messages
+    self.messages = messages // is a backbone collection
-
+    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 = []
+    self.participants = new Backbone.Collection()
     self.render()
   },
   show: () => {
@@ -55,11 +58,13 @@ const ChatView = {
     if (!Active.Map) return    
     const self = ChatView
     self.mapChat = ReactDOM.render(React.createElement(MapChat, {
+      conversationLive: self.conversationLive,
+      isParticipating: self.isParticipating,
       onOpen: self.onOpen,
       onClose: self.onClose,
       leaveCall: Realtime.leaveCall,
       joinCall: Realtime.joinCall,
-      participants: self.participants,
+      participants: self.participants.models.map(p => p.attributes),
       messages: self.messages.models.map(m => m.attributes),
       videoToggleClick: self.videoToggleClick,
       cursorToggleClick: self.cursorToggleClick,
@@ -76,14 +81,11 @@ const ChatView = {
     $(document).trigger(ChatView.events.closeTray)
   },
   addParticipant: participant => {
-    // TODO this should probably be using a Backbone collection????
+    ChatView.participants.add(participant)
-    const p = participant.attributes ? clone(participant.attributes) : participant
-    ChatView.participants.push(p)
     ChatView.render()
   },
   removeParticipant: participant => {
-    const remove_id = participant.get('id')
+    ChatView.participants.remove(participant)
-    ChatView.participants = ChatView.participants.filter(p => p.id !== remove_id)
     ChatView.render()
   },
   addMessage: (message, isInitial, wasMe) => {
@@ -115,29 +117,56 @@ const ChatView = {
     if (!wasMe && !isInitial && self.alertSound) self.sound.play('receivechat')
   },
   handleInputMessage: text => {
-    // TODO use backbone
-    ChatView.addMessage(text, false, false)
     $(document).trigger(ChatView.events.message + '-' + self.room, [{ message: text }])
   },
   leaveConversation: () => {
     // TODO refactor
     // this.$participants.removeClass('is-participating')
+    ChatView.isParticipating = false
+    ChatView.render()
   },
-  mapperJoinedCall: () => {
+  mapperJoinedCall: id => {
     // TODO refactor
     // this.$participants.find('.participant-' + id).addClass('active')
+    const mapper = ChatView.participants.findWhere({id})
+    mapper && mapper.set('isParticipating', true)
+    ChatView.render()
   },
   mapperLeftCall: () => {
     // TODO refactor
     // this.$participants.find('.participant-' + id).removeClass('active')
+    const mapper = ChatView.participants.findWhere({id})
+    mapper && mapper.set('isParticipating', false)
+    ChatView.render()
   },
-  invitationPending: () => {
+  invitationPending: id => {
     // TODO refactor
     // this.$participants.find('.participant-' + id).addClass('pending')
+    const mapper = ChatView.participants.findWhere({id})
+    mapper && mapper.set('isPending', true)
+    ChatView.render()
   },
-  invitationAnswered: () => {
+  invitationAnswered: id => {
     // TODO refactor
     // this.$participants.find('.participant-' + id).removeClass('pending')
+    const mapper = ChatView.participants.findWhere({id})
+    mapper && mapper.set('isPending', false)
+    ChatView.render()
+  },
+  conversationInProgress: participating => {
+    ChatView.conversationLive = true
+    ChatView.isParticipating = participating
+    ChatView.render() 
+  },
+  conversationEnded: () => {
+    ChatView.conversationLive = false
+    ChatView.isParticipating = false
+    // go through and remove isParticipating from all other participants too
+    ChatView.render()
+  },
+  removeParticipants: () => {
+    ChatView.participants.remove(ChatView.participants.models)
+    ChatView.render()
   },
   close: () => {
     // TODO how to do focus with react
@@ -186,10 +215,6 @@ const ChatView = {
 //   this.$participants.find('.participant').removeClass('pending')
 // }
 
-// ChatView.prototype.removeParticipants = function() {
-//   this.participants.remove(this.participants.models)
-// }
-
 // ChatView.prototype.addMessage = function(message, isInitial, wasMe) {
 //   this.messages.add(message)
 //   Private.addMessage.call(this, message, isInitial, wasMe)
@@ -209,11 +234,6 @@ const ChatView = {
 //   this.$messages.empty()
 // }
 
-// ChatView.prototype.remove = function() {
-//   this.$button.off()
-//   this.$container.remove()
-// }
-
 /**
  * @class
  * @static

frontend/src/components/MapChat/Participant.js

@@ -2,7 +2,7 @@ import React, { PropTypes, Component } from 'react'
 
 class Participant extends Component {
   render() {
-    const { id, self, image, username, selfName, color } = this.props
+    const { conversationLive, mapperIsLive, isParticipating, isPending, id, self, image, username, selfName, color } = this.props
     return (
 			<div className={`participant participant-${id} ${self ? 'is-self' : ''}`}>
 				<div className="chat-participant-image">
@@ -11,17 +11,17 @@ class Participant extends Component {
 				<div className="chat-participant-name">
 					{username} {self ? '(me)' : ''}
 				</div>
-				<button
+				{!conversationLive && <button
 					className='button chat-participant-invite-call'
 					onClick={this.props.inviteACall} // Realtime.inviteACall(id)
-				/>
+				/>}
-				<button
+				{mapperIsLive && !isParticipating && <button
 					className="button chat-participant-invite-join"
 					onClick={this.props.inviteToJoin} // Realtime.inviteToJoin(id)
-				/>
+				/>}
-				<span className="chat-participant-participating">
+				{isParticipating && <span className="chat-participant-participating">
 					<div className="green-dot"></div>
-				</span>
+				</span>}
 				<div className="clearfloat"></div>
 			</div>
     )
@@ -29,6 +29,10 @@ class Participant extends Component {
 }
 
 Participant.propTypes = {
+  conversationLive: PropTypes.bool,
+  mapperIsLive: PropTypes.bool,
+  isParticipating: PropTypes.bool,
+  isPending: PropTypes.bool,
   color: PropTypes.string, // css color
   id: PropTypes.number,
   image: PropTypes.string, // image url

frontend/src/components/MapChat/index.js

@@ -68,6 +68,7 @@ class MapChat extends Component {
 
   render = () => {
     const rightOffset = this.state.open ? '0' : '-300px'
+    const { conversationLive } = this.props
     const { videosShowing, cursorsShowing, alertSound, unreadMessages } = this.state
     return (
       <div className="chat-box"
@@ -79,18 +80,21 @@ class MapChat extends Component {
           <div onClick={this.toggleCursorsShowing} className={`cursor-toggle ${cursorsShowing ? '' : 'active'}`} />
         </div>
         <div className="participants">
-          <div className="conversation-live">
+          {conversationLive && <div className="conversation-live">
             LIVE
-						<span className="call-action leave" onClick={this.props.leaveCall}>
+	      {isParticipating && <span className="call-action leave" onClick={this.props.leaveCall}>
-							LEAVE
+                LEAVE
-						</span>
+              </span>}
-						<span className="call-action join"  onClick={this.props.joinCall}>
+              {!isParticipating && <span className="call-action join"  onClick={this.props.joinCall}>
-							JOIN
+                JOIN
-						</span>
+              </span>}
-          </div>
+          </div>}
-          {this.props.participants.map(participant => {
+          {participants.map(participant => <Participant
-            return <Participant key={participant.id} {...participant} />
+            key={participant.id}
-          })}
+            {...participant}
+            conversationLive={conversationLive}
+            mapperIsLive={isParticipating}/>
+          )}
         </div>
         <div className="chat-header">
           CHAT
@@ -101,9 +105,7 @@ class MapChat extends Component {
           <Unread count={unreadMessages} />
         </div>
         <div className="chat-messages">
-          {this.props.messages.map(message => {
+          {messages.map(message => <Message key={message.id} {...message} />)}
-            return <Message key={message.id} {...message} />
-          })}
         </div>
         <textarea className="chat-input"
           placeholder="Send a message..."
@@ -119,6 +121,8 @@ class MapChat extends Component {
 }
 
 MapChat.propTypes = {
+  conversationLive: PropTypes.bool,
+  isParticipating: PropTypes.bool,
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   leaveCall: PropTypes.func,
@@ -131,7 +135,8 @@ MapChat.propTypes = {
     id: PropTypes.number,
     image: PropTypes.string, // image url
     self: PropTypes.bool,
-    username: PropTypes.string
+    username: PropTypes.string,
+    isParticipating: PropTypes.bool
   }))
 }