Add livestream message support

Author: balramgoyal

dist/browser.min.js

@@ -1,4 +1,5 @@
-import { 
+import {
+  CONNECTING, 
   CONNECT_SUCCESS,
   CONNECT_FAIL,
   DISCONNECT_SUCCESS,
@@ -40,8 +41,21 @@ const _connect = (client, userId, accessToken) => {
   });
 };
 
+export const setConnected = (value = true) => {
+  return dispatch => {
+    dispatch({
+      type: CONNECT_SUCCESS,
+      payload: {}
+    });
+  }
+}
+
 export const chConnect = (client, userId, accessToken) => {
   return dispatch => {
+    dispatch({
+      type: CONNECTING,
+      payload: {}
+    });
     return _connect(client, userId, accessToken)
       .then(response => connectSuccess(dispatch, response))
       .catch(error => connectFail(dispatch, error));

dist/browser.min.js.map

@@ -12,7 +12,8 @@ import {
   LOAD_MORE_MESSAGES_SUCCESS,
   LOAD_MORE_MESSAGES_FAIL,
   SET_ACTIVE_CONVERSATION,
-  SET_ACTIVE_USERID
+  SET_ACTIVE_USERID,
+  NEW_MESSAGE_RECEIVED_EVENT
 } from '../constants';
 
 export const sendFileToConversation = (client, conversation, file, body, attachmentType) => {
@@ -155,4 +156,19 @@ export const setActiveUserId = (userId) => {
       payload: userId
     });
   };
-};
+};
+
+export const registerConversationEventHandlers = (conversation) => {
+  return dispatch => {
+    if (!conversation.__isWatching) {
+      return
+    }
+
+    conversation.on('watcher.message.created', (response) => {
+      dispatch({
+        type: NEW_MESSAGE_RECEIVED_EVENT,
+        payload: response
+      });
+    });
+  }
+}

dist/css/compactLayout.css

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { 
   chConnect,
-  registerEventHandlers
+  registerEventHandlers,
+  setConnected
 } from "../actions";
 import { IMAGES } from "../constants";
 import { ChannelizeProvider } from '../context';
@@ -20,7 +21,12 @@ class App extends PureComponent {
 
   componentDidMount() {
     const { client, userId, accessToken } = this.props;
-    this.props.chConnect(client, userId, accessToken);
+    if (!client.connected) {
+      this.props.chConnect(client, userId, accessToken);
+      return
+    }
+
+    this.props.setConnected(true)
   }
 
   componentDidUpdate(prevProps) {
@@ -55,7 +61,7 @@ const mapStateToProps = ({client}) => {
 
 App = connect(
   mapStateToProps,
-  { chConnect, registerEventHandlers }
+  { chConnect, registerEventHandlers, setConnected }
 )(App);
 
 export { App };

dist/css/fullViewLayout.css

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { Header } from "./Header";
 import { Loader } from "./Loader";
-import { MessagePreview } from "./MessagePreview";
+import { MessageSimple } from "./MessageSimple";
 import { modifyConversation, modifyMessageList } from "../utils";
 import { connect } from 'react-redux';
 import { LANGUAGE_PHRASES, IMAGES } from "../constants";
@@ -12,10 +12,13 @@ import {
   sendMessageToUserId,
   sendFileToConversation,
   loadMoreMessages as loadMoreMessagesAction,
-  setActiveConversation
+  setActiveConversation,
+  setActiveUserId,
+  registerConversationEventHandlers
 } from '../actions';
 import moment from 'moment';
 import throttle from 'lodash/throttle';
+import PropTypes from 'prop-types';
 
 class ConversationWindow extends PureComponent {
 
@@ -163,8 +166,30 @@ class ConversationWindow extends PureComponent {
   }
 
   _init = () => {
-    const { client, conversation, userId } = this.props;
+    const { client, conversation, userId, ownProps } = this.props;
+
     if (!conversation && !userId) {
+      // Handle ownProps
+      if (Object.keys(ownProps).length) {
+        if (ownProps.conversation) {
+          let conversation = ownProps.conversation;
+
+          if (conversation.type != 'open' || conversation.__isWatching) {
+            this.props.setActiveConversation(conversation);
+            return;
+          }
+
+          // Start watching open conversation
+          conversation.startWatching((err, res) => {
+            this.props.setActiveConversation(conversation);
+          })
+          return;
+        }
+        if (ownProps.userId) {
+          this.props.setActiveUserId(ownProps.userId);
+          return;
+        }
+      }
       return
     }
 
@@ -198,6 +223,9 @@ class ConversationWindow extends PureComponent {
       return
     }
 
+    // Register conversation event handlers
+    this.props.registerConversationEventHandlers(conversation);
+
     // Load messages
     let messageListQuery = conversation.createMessageListQuery();
     messageListQuery.limit = this.limit;
@@ -303,7 +331,9 @@ class ConversationWindow extends PureComponent {
       showCloseIcon,
       showChevron,
       disableComposer,
-      disableComposerMessage
+      disableComposerMessage,
+      Message,
+      renderHeader
     } = this.props;
     const { text, dummyConversation } = this.state;
 
@@ -349,10 +379,10 @@ class ConversationWindow extends PureComponent {
     }
 
     const user = client.getCurrentUser();
-
 		return (
   		<div id="ch_conv_window" className="ch-conv-window">
-  			{ conversation && <Header 
+        { conversation && renderHeader && renderHeader(conversation) }
+  			{ conversation && !renderHeader && <Header 
           profileImageUrl={headerImage}
           title={headerTitle}
           subtitle={headerSubtitle}
@@ -393,7 +423,7 @@ class ConversationWindow extends PureComponent {
 
     				{
     					list.map(message => {
-                return <MessagePreview key={message.id} message={message}/>
+                return <Message key={message.id} message={message}/>
               })
     				}
           </div>
@@ -439,8 +469,16 @@ class ConversationWindow extends PureComponent {
 
 ConversationWindow = withChannelizeContext(ConversationWindow);
 
-const mapStateToProps = ({message, client}) => {
-  return {...message, ...client}
+ConversationWindow.propTypes = {
+  Message: PropTypes.elementType,
+}
+
+ConversationWindow.defaultProps = {
+  Message: MessageSimple
+};
+
+const mapStateToProps = ({message, client}, ownProps) => {
+  return {...message, ...client, ownProps: ownProps}
 }
 
 ConversationWindow = connect(
@@ -451,7 +489,10 @@ ConversationWindow = connect(
     sendMessageToUserId,
     sendFileToConversation,
     loadMoreMessagesAction,
-    setActiveConversation }
+    setActiveConversation,
+    setActiveUserId,
+    registerConversationEventHandlers
+   }
 )(ConversationWindow);
 
 export { ConversationWindow }