From 79b6f74a5c59b093abfaf6fb4137c3568871cddd Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Sun, 18 Dec 2016 22:40:41 -0500 Subject: [PATCH] hidously mangle ChatView to start moving it to React --- frontend/src/Metamaps/Realtime/index.js | 3 +- frontend/src/Metamaps/Views/ChatView.js | 72 ++++++++++++++----- frontend/src/components/MapChat/Message.js | 17 +++++ .../src/components/MapChat/Participant.js | 39 ++++++++++ frontend/src/components/MapChat/index.js | 54 ++++++++++++++ 5 files changed, 165 insertions(+), 20 deletions(-) create mode 100644 frontend/src/components/MapChat/Message.js create mode 100644 frontend/src/components/MapChat/Participant.js create mode 100644 frontend/src/components/MapChat/index.js diff --git a/frontend/src/Metamaps/Realtime/index.js b/frontend/src/Metamaps/Realtime/index.js index 318753f0..6ffc6c7c 100644 --- a/frontend/src/Metamaps/Realtime/index.js +++ b/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() { diff --git a/frontend/src/Metamaps/Views/ChatView.js b/frontend/src/Metamaps/Views/ChatView.js index 590dd775..ef6c9e95 100644 --- a/frontend/src/Metamaps/Views/ChatView.js +++ b/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 = {}) { - this.room = room - this.mapper = mapper - this.messages = messages // backbone collection +const ChatView = { + init: function(messages, mapper, room, opts = {}) { + const self = ChatView + self.room = room + self.mapper = mapper + self.messages = messages // backbone collection - this.isOpen = false - this.alertSound = true // whether to play sounds on arrival of new messages or not - this.cursorsShowing = true - this.videosShowing = true - this.unreadMessages = 0 - this.participants = new Backbone.Collection() + self.isOpen = false + 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 = [] - Private.templates.call(this) - Private.createElements.call(this) - Private.attachElements.call(this) - Private.addEventListeners.call(this) - Private.initialMessages.call(this) - Private.initializeSounds.call(this, opts.soundUrls) - this.$container.css({ - right: '-300px' - }) + // TODO reimplement + //Private.addEventListeners.call(this) + //Private.initialMessages.call(this) + //Private.initializeSounds.call(this, opts.soundUrls) + //this.$container.css({ + // right: '-300px' + //}) + }, + addWrapper: () => { + $('body').prepend('
') + }, + 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') diff --git a/frontend/src/components/MapChat/Message.js b/frontend/src/components/MapChat/Message.js new file mode 100644 index 00000000..21c3098c --- /dev/null +++ b/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 ( +
+
+ +
+
{message}
+
{timestamp}
+
+
+ ) +} + +export default Message diff --git a/frontend/src/components/MapChat/Participant.js b/frontend/src/components/MapChat/Participant.js new file mode 100644 index 00000000..b6f28617 --- /dev/null +++ b/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 ( +
+
+ +
+
+ {username} {self ? '(me)' : ''} +
+
+ ) + } +} + +ChatView.propTypes = { + color: PropTypes.string // css color + id: PropTypes.number, + image: PropTypes.string, // image url + self: PropTypes.bool, + username: PropTypes.string, +} + +export default ChatView diff --git a/frontend/src/components/MapChat/index.js b/frontend/src/components/MapChat/index.js new file mode 100644 index 00000000..5f282f84 --- /dev/null +++ b/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 ( +
+
+ PARTICIPANTS +
+
+
+
+
+ LIVE + + LEAVE + + + JOIN + +
+
+
+ CHAT +
+
+
+
Chat
+
+
+
+