makin things work

frontend/src/Metamaps/Views/ChatView.js

@@ -59,6 +59,8 @@ const ChatView = {
       onClose: self.onClose,
       leaveCall: Realtime.leaveCall,
       joinCall: Realtime.joinCall,
+      inviteACall: Realtime.inviteACall,
+      inviteToJoin: Realtime.inviteToJoin,
       participants: self.participants.models.map(p => p.attributes),
       messages: self.messages.models.map(m => m.attributes),
       videoToggleClick: self.videoToggleClick,
@@ -92,7 +94,7 @@ const ChatView = {
     mapper && mapper.set('isParticipating', true)
     ChatView.render()
   },
-  mapperLeftCall: () => {
+  mapperLeftCall: id => {
     const mapper = ChatView.participants.findWhere({id})
     mapper && mapper.set('isParticipating', false)
     ChatView.render()

frontend/src/components/MapChat/Participant.js

@@ -13,11 +13,11 @@ class Participant extends Component {
 				</div>
 				{!self && !conversationLive && <button
 					className='button chat-participant-invite-call'
-					onClick={this.props.inviteACall} // Realtime.inviteACall(id)
+					onClick={() => this.props.inviteACall(id)} // Realtime.inviteACall(id)
 				/>}
 				{!self && mapperIsLive && !isParticipating && <button
 					className="button chat-participant-invite-join"
-					onClick={this.props.inviteToJoin} // Realtime.inviteToJoin(id)
+					onClick={() => this.props.inviteToJoin(id)} // Realtime.inviteToJoin(id)
 				/>}
 				{isParticipating && <span className="chat-participant-participating">
 					<div className="green-dot"></div>
@@ -37,7 +37,9 @@ Participant.propTypes = {
   id: PropTypes.number,
   image: PropTypes.string, // image url
   self: PropTypes.bool,
-  username: PropTypes.string
+  username: PropTypes.string,
+  inviteACall: PropTypes.func,
+  inviteToJoin: PropTypes.func
 }
 
 export default Participant

frontend/src/components/MapChat/index.js

@@ -79,7 +79,7 @@ class MapChat extends Component {
 
   render = () => {
     const rightOffset = this.state.open ? '0' : '-300px'
-    const { conversationLive, isParticipating, participants, messages } = this.props
+    const { conversationLive, isParticipating, participants, messages, inviteACall, inviteToJoin } = this.props
     const { videosShowing, cursorsShowing, alertSound, unreadMessages } = this.state
     return (
       <div className="chat-box"
@@ -103,6 +103,8 @@ class MapChat extends Component {
           {participants.map(participant => <Participant
             key={participant.id}
             {...participant}
+            inviteACall={inviteACall}
+            inviteToJoin={inviteToJoin}
             conversationLive={conversationLive}
             mapperIsLive={isParticipating}/>
           )}
@@ -138,6 +140,8 @@ MapChat.propTypes = {
   onClose: PropTypes.func,
   leaveCall: PropTypes.func,
   joinCall: PropTypes.func,
+  inviteACall: PropTypes.func,
+  inviteToJoin: PropTypes.func,
   videoToggleClick: PropTypes.func,
   cursorToggleClick: PropTypes.func,
   soundToggleClick: PropTypes.func,