meses-messaging/dist/ui/index.js

Meses messaging SDK in JavaScript

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _MessagingButton = require('./components/MessagingButton');

var _MessagingButton2 = _interopRequireDefault(_MessagingButton);

var _MessagingPopup = require('./components/MessagingPopup');

var _MessagingPopup2 = _interopRequireDefault(_MessagingPopup);

var _app = require('../app');

var _app2 = _interopRequireDefault(_app);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var styles = {
  'base': 'styles-base-3C3W5'
};

var MesesMessagingUI = function (_React$Component) {
  _inherits(MesesMessagingUI, _React$Component);

  function MesesMessagingUI() {
    _classCallCheck(this, MesesMessagingUI);

    var _this = _possibleConstructorReturn(this, (MesesMessagingUI.__proto__ || Object.getPrototypeOf(MesesMessagingUI)).call(this));

    _this.CLASS_TAG = '[MESES_MESSAGING_UI]';
    return _this;
  }

  _createClass(MesesMessagingUI, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.setState({
        buttonVisible: false,
        popupVisible: false,
        messageListVisible: false,
        conversationList: [],
        messageList: [],
        messageBuffer: [],
        hasMoreMessage: true,
        totalUnreadCount: 0,
        lastConversationScrollTop: 0
      });

      var _props = this.props,
          targetUri = _props.targetUri,
          applicationId = _props.applicationId,
          username = _props.username;

      this._app = new _app2.default(targetUri, applicationId);
      this._handleConnect(username);
    }
  }, {
    key: 'handleMessagingButtonOnClick',
    value: function handleMessagingButtonOnClick() {
      var _state = this.state,
          popupVisible = _state.popupVisible,
          conversationList = _state.conversationList;


      this.setState({ popupVisible: !popupVisible });
    }
  }, {
    key: 'handleConversationEntryOnClick',
    value: function handleConversationEntryOnClick(conversationName, scrollTop) {
      this._handlePrepareConversation(conversationName, scrollTop);
    }
  }, {
    key: 'handleBackButtonOnClick',
    value: function handleBackButtonOnClick() {
      this.setState({ messageList: [], messageBuffer: [], messageListVisible: false });
      this._app.detachUpdateHandler(this.activeConversation.conversationName);
      this.activeConversation = null;
    }
  }, {
    key: 'handleSendButtonOnClick',
    value: function handleSendButtonOnClick(message) {
      message = message.trim();
      if (message.length > 0) this._handleSendMessageAction(message);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          buttonIcon = _props2.buttonIcon,
          buttonClass = _props2.buttonClass,
          popupClass = _props2.popupClass;
      var _state2 = this.state,
          buttonVisible = _state2.buttonVisible,
          popupVisible = _state2.popupVisible,
          messageListVisible = _state2.messageListVisible;
      var _state3 = this.state,
          hasMoreMessage = _state3.hasMoreMessage,
          hasMoreConversation = _state3.hasMoreConversation,
          lastConversationScrollTop = _state3.lastConversationScrollTop;
      var _state4 = this.state,
          conversationList = _state4.conversationList,
          messageList = _state4.messageList,
          messageBuffer = _state4.messageBuffer;
      var _state5 = this.state,
          activeTitle = _state5.activeTitle,
          connectedUser = _state5.connectedUser,
          totalUnreadCount = _state5.totalUnreadCount;


      var messagingPopup = popupVisible ? _react2.default.createElement(_MessagingPopup2.default, {
        className: popupClass,
        conversationList: conversationList,
        messageList: messageList,
        messageBuffer: messageBuffer,
        messageListVisible: messageListVisible,
        hasMoreConversation: hasMoreConversation,
        hasMoreMessage: hasMoreMessage,
        title: activeTitle, connectedUser: connectedUser,
        lastConversationScrollTop: lastConversationScrollTop,
        conversationEntryOnClick: this.handleConversationEntryOnClick.bind(this),
        backButtonOnClick: this.handleBackButtonOnClick.bind(this),
        sendButtonOnClick: this.handleSendButtonOnClick.bind(this),
        loadMoreConversation: this._handleLoadConversation.bind(this),
        loadMoreMessage: this._handleLoadMessage.bind(this)
      }) : '';

      var messagingButton = buttonVisible ? _react2.default.createElement(_MessagingButton2.default, {
        className: buttonClass,
        buttonIcon: buttonIcon,
        totalUnreadCount: !popupVisible ? totalUnreadCount : 0,
        onClick: this.handleMessagingButtonOnClick.bind(this)
      }) : '';

      return _react2.default.createElement(
        'div',
        { className: styles.base },
        messagingPopup,
        messagingButton
      );
    }
  }, {
    key: '_handleConnect',
    value: function _handleConnect(username) {
      var _this2 = this;

      this._app.connect(username).then(function (result) {
        this.prevConvListQuery = this._app.createPreviousConversationListQuery();
        this.setState({ connectedUser: result, buttonVisible: true });
        this.activeConversation = null;
        this._handleLoadConversation();
        this._handleConversationUpdate();
      }.bind(this)).catch(function (err) {
        return console.error(_this2.CLASS_TAG, err);
      });
    }
  }, {
    key: '_handleLoadConversation',
    value: function _handleLoadConversation() {
      var _this3 = this;

      var fetchConversationSize = this.props.fetchConversationSize;
      var _state6 = this.state,
          conversationList = _state6.conversationList,
          totalUnreadCount = _state6.totalUnreadCount;


      this.prevConvListQuery.load(fetchConversationSize ? fetchConversationSize : 10).then(function (result) {
        var tmpCount = result.map(function (x) {
          return x.unreadCount;
        }).reduce(function (sum, value) {
          return sum + value;
        });
        this.setState({
          conversationList: conversationList.concat(result),
          totalUnreadCount: totalUnreadCount + tmpCount,
          hasMoreConversation: this.prevConvListQuery.hasMore()
        });
      }.bind(this)).catch(function (err) {
        return console.error(_this3.CLASS_TAG, err);
      });
    }
  }, {
    key: '_handleLoadMessage',
    value: function _handleLoadMessage() {
      var _this4 = this;

      var fetchMessageSize = this.props.fetchMessageSize;
      var messageList = this.state.messageList;


      this.prevMsgListQuery.load(fetchMessageSize ? fetchMessageSize : 20).then(function (result) {
        result.reverse();
        this.setState({
          messageList: result.concat(messageList),
          messageListVisible: true,
          hasMoreMessage: this.prevMsgListQuery.hasMore()
        });
      }.bind(this)).catch(function (err) {
        return console.error(_this4.CLASS_TAG, err);
      });
    }
  }, {
    key: '_handlePrepareConversation',
    value: function _handlePrepareConversation(conversationName, scrollTop) {
      var _this5 = this;

      this._app.getConversation(conversationName).then(function (conversation) {
        this.activeConversation = conversation;
        this.prevMsgListQuery = conversation.createPreviousMessageListQuery();
        this.setState({
          messageListVisible: true,
          activeTitle: conversation.title ? conversation.title : conversation.conversationName,
          lastConversationScrollTop: scrollTop
        });
        this._handleMessageUpdate();
        this._handleMarkAsRead(conversationName);
        this._handleLoadMessage();
      }.bind(this)).catch(function (err) {
        return console.error(_this5.CLASS_TAG, err);
      });
    }
  }, {
    key: '_handleMarkAsRead',
    value: function _handleMarkAsRead(conversationName) {
      var _state7 = this.state,
          conversationList = _state7.conversationList,
          totalUnreadCount = _state7.totalUnreadCount;


      var conversation = conversationList.find(function (c) {
        return c.conversationName === conversationName;
      });
      var count = conversation.unreadCount;conversation.unreadCount = 0;
      this.setState({ conversationList: conversationList, totalUnreadCount: totalUnreadCount - count });
      this.activeConversation.markAsRead();
    }
  }, {
    key: '_handleSendMessageAction',
    value: function _handleSendMessageAction(message) {
      var _this6 = this;

      var _state8 = this.state,
          connectedUser = _state8.connectedUser,
          messageBuffer = _state8.messageBuffer;


      this.activeConversation.sendMessage(message, { displayName: connectedUser.displayName }).then(function (message) {
        messageBuffer.push(message);
        this.setState({ messageBuffer: messageBuffer });
        this.activeConversation.markAsRead();
      }.bind(this)).catch(function (err) {
        return console.error(_this6.CLASS_TAG, err);
      });
    }
  }, {
    key: '_handleConversationUpdate',
    value: function _handleConversationUpdate() {
      var refreshRate = this.props.refreshRate;


      if (refreshRate) {
        var handler = this._app.createConversationUpdateHandler('conv-update-handler', this._conversationUpdateCallback.bind(this), refreshRate);
        this._app.attachUpdateHandler(handler);
      }
    }
  }, {
    key: '_handleMessageUpdate',
    value: function _handleMessageUpdate() {
      var refreshRate = this.props.refreshRate;


      if (refreshRate) {
        var handler = this.activeConversation.createNewMessageUpdateHandler(this.activeConversation.conversationName, this._newMessageUpdateCallback.bind(this), refreshRate);
        this._app.attachUpdateHandler(handler);
      }
    }
  }, {
    key: '_conversationUpdateCallback',
    value: function _conversationUpdateCallback(err, result) {
      var _this7 = this;

      var _state9 = this.state,
          conversationList = _state9.conversationList,
          totalUnreadCount = _state9.totalUnreadCount;

      var tmpUnreadCount = 0;

      if (err) console.error(this.CLASS_TAG, err);else if (result.updatedConversationPayloads.length > 0) {
        result.updatedConversationPayloads.map(function (x) {
          var found = conversationList.find(function (c) {
            return c.conversationName === x.conversationName;
          });
          if (found) {
            tmpUnreadCount -= found.unreadCount;
            found.lastMessageText = x.lastMessageText;
            found.lastMessageTime = x.lastMessageTime;
            if (_this7.activeConversation == null || _this7.activeConversation.conversationName != x.conversationName) found.unreadCount = x.unreadCount;
          } else {
            conversationList.push(x);
          }
          tmpUnreadCount += x.unreadCount;
        });
        conversationList.sort(function (a, b) {
          return b.lastMessageTime - a.lastMessageTime;
        });
        this.setState({ conversationList: conversationList, totalUnreadCount: totalUnreadCount + tmpUnreadCount });
      }
    }
  }, {
    key: '_newMessageUpdateCallback',
    value: function _newMessageUpdateCallback(err, result) {
      var _state10 = this.state,
          messageList = _state10.messageList,
          messageBuffer = _state10.messageBuffer;


      if (err) console.error(this.CLASS_TAG, err);else if (result.messages.length > 0) {
        result.messages.reverse();
        result.messages.map(function (x) {
          var idx = messageBuffer.findIndex(function (message) {
            return message.messageId === x.messageId;
          });
          if (idx != -1) messageBuffer.splice(idx, 1);
          messageList.push(x);
        });
        this.setState({ messageList: messageList, messageBuffer: messageBuffer });
      }
    }
  }]);

  return MesesMessagingUI;
}(_react2.default.Component);

exports.default = MesesMessagingUI;