hidously mangle ChatView to start moving it to React

frontend/src/Metamaps/Realtime/index.js

@@ -189,7 +189,8 @@ let Realtime = {
       if (!Active.Map) {
         self.room.chat.$container.hide()
       }
-      $('body').prepend(self.room.chat.$container)
+      self.room.chat.addWrapper()
+      self.room.chat.render()
     } // if Active.Mapper
   },
   addJuntoListeners: function() {

frontend/src/Metamaps/Views/ChatView.js

@@ -8,6 +8,8 @@ import outdent from 'outdent'
 // TODO is this line good or bad
 // Backbone.$ = window.$
 
+import MapChat from '../../components/MapChat'
+
 const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, phone: false })
 
 var Private = {
@@ -226,29 +228,61 @@ var Handlers = {
   }
 }
 
-const ChatView = function(messages, mapper, room, opts = {}) {
+const ChatView = {
-  this.room = room
+  init: function(messages, mapper, room, opts = {}) {
-  this.mapper = mapper
+    const self = ChatView
-  this.messages = messages // backbone collection
+    self.room = room
+    self.mapper = mapper
+    self.messages = messages // backbone collection
 
-  this.isOpen = false
+    self.isOpen = false
-  this.alertSound = true // whether to play sounds on arrival of new messages or not
+    self.alertSound = true // whether to play sounds on arrival of new messages or not
-  this.cursorsShowing = true
+    self.cursorsShowing = true
-  this.videosShowing = true
+    self.videosShowing = true
-  this.unreadMessages = 0
+    self.unreadMessages = 0
-  this.participants = new Backbone.Collection()
+    self.participants = []
 
-  Private.templates.call(this)
+    // TODO reimplement
-  Private.createElements.call(this)
+    //Private.addEventListeners.call(this)
-  Private.attachElements.call(this)
+    //Private.initialMessages.call(this)
-  Private.addEventListeners.call(this)
+    //Private.initializeSounds.call(this, opts.soundUrls)
-  Private.initialMessages.call(this)
+    //this.$container.css({
-  Private.initializeSounds.call(this, opts.soundUrls)
+    //  right: '-300px'
-  this.$container.css({
+    //})
-    right: '-300px'
+  },
-  })
+  addWrapper: () => {
+    $('body').prepend('<div id="chat-box-wrapper"></div>')
+  },
+  render: () => {
+    const self = ChatView
+    ReactDOM.render(React.createElement(MapChat, {
+      show: self.show,
+      leaveCall: Realtime.leaveCall(),
+      joinCall: Realtime.joinCall(),
+      participants: self.participants
+    }))
+  }
+  show: () => {
+    ChatView.show = true
+    ChatView.render()
+  },
+  hide: () => {
+    ChatView.show = false
+    ChatView.render()
+  },
+  addParticipant: participant => {
+    const p = clone(participant.attributes)
+    ChatView.participants.push(p)
+    ChatView.render()
+  },
+  removeParticipant: participant => {
+    const remove_id = participant.get('id')
+    ChatView.participants = ChatView.participants.filter(p => p.id !== remove_id)
+    ChatView.render()
+  }
 }
 
+
 ChatView.prototype.conversationInProgress = function(participating) {
   this.$conversationInProgress.show()
   this.$participants.addClass('is-live')

frontend/src/components/MapChat/Message.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const Message = props => {
+  const { user_image, user_name, message, timestamp } = props
+  return (
+    <div className="chat-message">
+      <div className="chat-message-user">
+        <img src={user_image} title={user_name} />
+      </div>
+      <div className="chat-message-text">{message}</div>
+      <div className="chat-message-time">{timestamp}</div>
+      <div className="clearfloat"></div>
+    </div>
+  )
+}
+
+export default Message

frontend/src/components/MapChat/Participant.js

@@ -0,0 +1,39 @@
+import React, { PropTypes, Component } from 'react'
+
+class Participant extends Component {
+  render() {
+    const { id, self, image, username, selfName, color } = this.props
+    return (
+			<div className={`participant participant-${id} ${self ? 'is-self' : ''}`}>
+				<div className="chat-participant-image">
+					<img src={image} style={{ border: `2px solid ${color}`}} />
+				</div>
+				<div className="chat-participant-name">
+					{username} {self ? '(me)' : ''}
+				</div>
+				<button
+					className='button chat-participant-invite-call'
+					onClick={this.props.inviteACall} // Realtime.inviteACall(id)
+				/>
+				<button
+					className="button chat-participant-invite-join"
+					onClick={this.props.inviteToJoin} // Realtime.inviteToJoin(id)
+				/>
+				<span className="chat-participant-participating">
+					<div className="green-dot"></div>
+				</span>
+				<div className="clearfloat"></div>
+			</div>
+    )
+  }
+}
+
+ChatView.propTypes = {
+  color: PropTypes.string // css color
+  id: PropTypes.number,
+  image: PropTypes.string, // image url
+  self: PropTypes.bool,
+  username: PropTypes.string,
+}
+
+export default ChatView

frontend/src/components/MapChat/index.js

@@ -0,0 +1,54 @@
+import React, { PropTypes, Component } from 'react'
+
+class MapChat extends Component {
+  render() {
+    const rightOffset = this.props.show ? '-300px' : '0'
+    return (
+      <div className="chat-box"
+        style={{ right: rightOffset }}
+      >
+        <div className="junto-header">
+          PARTICIPANTS
+          <div className="video-toggle" />
+          <div className="cursor-toggle" />
+        </div>
+        <div className="participants">
+				  <div className="conversation-live">
+						LIVE
+						<span className="call-action leave" onClick={this.props.leaveCall}>
+							LEAVE
+						</span>
+						<span className="call-action join"  onClick={this.props.joinCall}>
+							JOIN
+						</span>
+					</div>
+        </div>
+        <div className="chat-header">
+          CHAT
+          <div className="sound-toggle"></div>
+        </div>
+        <div className="chat-button">
+          <div className="tooltips">Chat</div>
+          <div className="chat-unread"></div>
+        </div>
+        <div className="chat-messages"></div>
+        <textarea className="chat-input" placeholder="Send a message..." />
+      </div>
+    )
+  }
+}
+
+MapChat.propTypes = {
+  show: PropTypes.bool,
+  leaveCall: PropTypes.func,
+  joinCall: PropTypes.func,
+  participants: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string // css color
+    id: PropTypes.number,
+    image: PropTypes.string, // image url
+    self: PropTypes.bool,
+    username: PropTypes.string,
+  }))
+}
+
+export default MapChat