web-sdk-im/dist/components/Messages.js

React js components

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Box = _interopRequireDefault(require("@material-ui/core/Box"));

var _CssBaseline = _interopRequireDefault(require("@material-ui/core/CssBaseline"));

var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _AddOutlined = _interopRequireDefault(require("@material-ui/icons/AddOutlined"));

var _styles = require("@material-ui/core/styles");

var _layout = _interopRequireWildcard(require("@mui-treasury/layout"));

var _MessengerSearch = _interopRequireDefault(require("./MessengerSearch"));

var _ConversationHead = _interopRequireDefault(require("./ConversationHead"));

var _ChatBar = _interopRequireDefault(require("./ChatBar"));

var _ChatDialog = _interopRequireDefault(require("./ChatDialog"));

var _ChatListItem = _interopRequireDefault(require("./ChatListItem"));

var _ChatList = _interopRequireDefault(require("./ChatList"));

var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));

var _axios = _interopRequireDefault(require("axios"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var Header = (0, _layout.getHeader)(_styledComponents["default"]);
var Content = (0, _layout.getContent)(_styledComponents["default"]);
var Fullscreen = (0, _layout.getFullscreen)(_styledComponents["default"]);
var DrawerSidebar = (0, _layout.getDrawerSidebar)(_styledComponents["default"]);
var InsetFooter = (0, _layout.getInsetFooter)(_styledComponents["default"]);
var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    fullscreen: _defineProperty({
      marginLeft: '110px'
    }, theme.breakpoints.down('sm'), {
      marginLeft: '0px'
    }),
    header: {
      boxShadow: '0 1px 2px 0 rgba(0, 0, 0, .10)',
      backgroundColor: '#fff'
    },
    messageHeader: {
      fontSize: '18px',
      fontWeight: '700',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
    },
    insetBody: {
      borderLeft: '1px solid rgba(0, 0, 0, 0.08)',
      overflowY: 'auto',
      backgroundColor: '#fff'
    },
    edit: {
      backgroundColor: 'rgba(0,0,0,0.04)',
      marginLeft: '10px'
    },
    sidebar: _defineProperty({
      marginLeft: '84px'
    }, theme.breakpoints.down('sm'), {
      marginLeft: '0px',
      zIndex: '0',
      '&:hover': {
        width: '80% !important',
        zIndex: '999'
      }
    }),
    footer: _defineProperty({}, theme.breakpoints.down('sm'), {
      marginBottom: '15vh'
    })
  };
});
var isSSE = false;
var conversationHandler = null;
var theme = (0, _styles.responsiveFontSizes)((0, _styles.createMuiTheme)({
  palette: {
    primary: {
      main: 'rgb(0, 153, 255)'
    },
    background: {
      "default": '#fff'
    }
  },
  typography: {
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    body1: {
      fontSize: "".concat(15 / 16, "rem")
    }
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        'strong, b': {
          fontWeight: 'bold'
        }
      }
    }
  }
}));

var Messages = function Messages(_ref) {
  var contacts = _ref.contacts,
      user = _ref.user,
      config = _ref.config,
      getOrganizationContact = _ref.getOrganizationContact;
  var styles = useStyles();
  var scheme = (0, _layout["default"])();

  var _useState = (0, _react.useState)([]),
      _useState2 = _slicedToArray(_useState, 2),
      messageList = _useState2[0],
      setMessageList = _useState2[1];

  var _useState3 = (0, _react.useState)({}),
      _useState4 = _slicedToArray(_useState3, 2),
      draftContact = _useState4[0],
      setDraftContact = _useState4[1];

  var _useState5 = (0, _react.useState)(user),
      _useState6 = _slicedToArray(_useState5, 2),
      fromContact = _useState6[0],
      setFromContact = _useState6[1];

  var _useState7 = (0, _react.useState)({}),
      _useState8 = _slicedToArray(_useState7, 2),
      toContact = _useState8[0],
      setToContact = _useState8[1];

  var _useState9 = (0, _react.useState)(contacts),
      _useState10 = _slicedToArray(_useState9, 2),
      contactList = _useState10[0],
      setContactList = _useState10[1];

  var _useState11 = (0, _react.useState)([]),
      _useState12 = _slicedToArray(_useState11, 2),
      recentContacts = _useState12[0],
      setRecentContacts = _useState12[1];

  var _React$useState = _react["default"].useState('inline'),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      displayContact = _React$useState2[0],
      setDisplayContact = _React$useState2[1];

  var _React$useState3 = _react["default"].useState('none'),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      displayChat = _React$useState4[0],
      setDisplayChat = _React$useState4[1];

  var imServiceUrl = config.imServiceUrl;
  var contactHandler;
  (0, _react.useEffect)(function () {
    contactHandler = new EventSource(imServiceUrl + '/api/v1.0/recent-contacts/vinay@zkteco.in');

    contactHandler.onmessage = function (e) {
      return synchRecentContact(JSON.parse(e.data));
    };
  }, []);

  var searchContact = function searchContact(query) {
    return getOrganizationContact(query);
  };

  var handleContact = function handleContact(contact) {
    var contactInfoDTO = {
      user_id: contact.userId,
      user_email_id: fromContact.email,
      contact_email_id: contact.email,
      first_name: contact.firstName,
      last_name: contact.lastName,
      unread_message_count: null,
      updated_at: null
    };

    if (!recentContacts[recentContacts.findIndex(function (x) {
      return x.email == contact.email;
    })]) {
      setDraftContact(contact);
      setMessageList([]);

      if (conversationHandler != null) {
        conversationHandler.close();
      }

      setToContact(contact);
    } else {
      setMessageList([]);

      if (conversationHandler != null) {
        conversationHandler.close();
      }

      setToContact(contact);
      selectChatContact(contact);
    }
  };

  var synchRecentContact = function synchRecentContact(data) {
    setRecentContacts(data ? data.data : []);
  };

  var synchRecentMessages = function synchRecentMessages(messages) {
    setMessageList(messages ? messages.data : []);
  };

  var selectChatContact = function selectChatContact(contact) {
    setToContact(contact);
    setMessageList([]);

    if (!contact.channelId) {
      if (isSSE) {
        conversationHandler.close();
        isSSE = false;
        conversationHandler = new EventSource(imServiceUrl + '/api/v1.0/chat/' + fromContact.email + '/' + contact.email);

        conversationHandler.onmessage = function (e) {
          return synchRecentMessages(JSON.parse(e.data));
        };
      } else {
        if (conversationHandler != null) {
          conversationHandler.close();
        }

        isSSE = true;
        conversationHandler = new EventSource(imServiceUrl + '/api/v1.0/chat/' + fromContact.email + '/' + contact.email);

        conversationHandler.onmessage = function (e) {
          return synchRecentMessages(JSON.parse(e.data));
        };
      }
    }

    if (recentContacts[recentContacts.findIndex(function (x) {
      return x.email == contact.email;
    })]) {
      setDraftContact({});
    }
  };

  var sendMessage = function sendMessage(message) {
    var messageDTO = {
      message: message,
      user_id: fromContact.email,
      date: '2021-01-11',
      to_contact: toContact.email
    };

    if (Object.keys(draftContact).length > 0) {
      var contactInfoDTO = {
        user_id: draftContact.userId,
        user_email_id: fromContact.email,
        contact_email_id: draftContact.email,
        first_name: draftContact.firstName,
        last_name: draftContact.lastName,
        unread_message_count: null,
        updated_at: null
      };
      addContactAndSendMessage(contactInfoDTO, messageDTO);
    } else {
      sendChatMessages(messageDTO);
    }
  };

  var addContactAndSendMessage = function addContactAndSendMessage(contact, message) {
    var res = _axios["default"].post('/api/v1.0/contact/addContact', contact).then(function (result) {
      _axios["default"].post('/api/v1.0/chat', message);

      setDraftContact({});
    });
  };

  var sendChatMessages = function sendChatMessages(chatMessageDTO) {
    var res = _axios["default"].post('/api/v1.0/chat', chatMessageDTO);
  };

  var hideOrShowContact = function hideOrShowContact(state) {
    if (state) {
      setDisplayContact('inline');
      setDisplayChat('none');
    } else {
      setDisplayContact('none');
      setDisplayChat('inline');
    }
  };

  scheme.configureHeader(function (builder) {
    builder.create('appHeader').registerConfig('xs', {
      position: 'relative',
      initialHeight: 60
    });
  });
  scheme.configureEdgeSidebar(function (builder) {
    builder.create('primarySidebar', {
      anchor: 'left'
    }).registerPermanentConfig('xs', {
      width: '25%',
      collapsible: true,
      collapsedWidth: '70px',
      '&:hover': {
        collapsedWidth: '100%'
      }
    });
  });
  scheme.enableAutoCollapse('primarySidebar', 'sm');
  scheme.configureInsetSidebar(function (builder) {
    builder.create('secondarySidebar', {
      anchor: 'right'
    }).registerAbsoluteConfig('sm', {
      width: '33%'
    });
  });
  var draftContactItem;

  if (Object.keys(draftContact).length > 0) {
    draftContactItem = /*#__PURE__*/_react["default"].createElement(_ChatListItem["default"], _extends({}, draftContact, {
      onClick: selectChatContact,
      contact: draftContact
    }));
  }

  return /*#__PURE__*/_react["default"].createElement(Fullscreen, {
    className: styles.fullscreen
  }, /*#__PURE__*/_react["default"].createElement(_layout.Root, {
    theme: theme,
    scheme: scheme
  }, function (_ref2) {
    var sidebar = _ref2.state.sidebar;
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_CssBaseline["default"], null), /*#__PURE__*/_react["default"].createElement(Header, {
      className: styles.header
    }, /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
      disableGutters: true
    }, /*#__PURE__*/_react["default"].createElement(_ConversationHead["default"], {
      primary: toContact ? toContact.firstName : ''
    }))), /*#__PURE__*/_react["default"].createElement(DrawerSidebar, {
      sidebarId: 'primarySidebar',
      PaperProps: {
        className: styles.sidebar
      }
    }, sidebar.primarySidebar.collapsed ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
      display: "flex",
      p: 1
    }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
      p: 1
    }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
      src: 'https://www.pexels.com/photo/6872454/'
    })), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
      p: 1,
      flexGrow: 1,
      className: styles.messageHeader
    }, "Messages"), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
      p: 1
    }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
      className: styles.edit
    }, /*#__PURE__*/_react["default"].createElement(_AddOutlined["default"], null)))), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
      textAlign: 'center',
      my: 1,
      display: "flex",
      p: 1
    }, /*#__PURE__*/_react["default"].createElement(_MessengerSearch["default"], {
      getContactSuggestions: function getContactSuggestions(data) {
        return searchContact(data);
      },
      queryAction: function queryAction(data) {
        return handleContact(data);
      }
    }))) : /*#__PURE__*/_react["default"].createElement(_Box["default"], {
      display: "flex",
      p: 1
    }, /*#__PURE__*/_react["default"].createElement(_MessengerSearch["default"], {
      getContactSuggestions: function getContactSuggestions(data) {
        return searchContact(data);
      },
      queryAction: function queryAction(data) {
        return handleContact(data);
      }
    }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
      className: styles.edit
    }, /*#__PURE__*/_react["default"].createElement(_AddOutlined["default"], null))), draftContactItem, /*#__PURE__*/_react["default"].createElement(_ChatList["default"], {
      concise: sidebar.primarySidebar.collapsed,
      data: recentContacts,
      onClick: selectChatContact
    })), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(_ChatDialog["default"], {
      messageList: messageList,
      to: toContact
    })), /*#__PURE__*/_react["default"].createElement(InsetFooter, {
      ContainerProps: {
        disableGutters: true
      },
      className: styles.footer
    }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
      display: 'flex',
      alignItems: 'center',
      p: 1
    }, /*#__PURE__*/_react["default"].createElement(_ChatBar["default"], {
      concise: sidebar.primarySidebar.collapsed,
      onClick: sendMessage
    }))));
  }));
};

Messages.defaultProps = {
  config: {
    imServiceUrl: 'http://192.168.11.13:9089'
  },
  contacts: [{
    firstName: 'Harshitha',
    lastName: 'P',
    email: 'harshitha@zkteco.in',
    userId: 'harshitha'
  }, {
    firstName: 'Vinay',
    lastName: 'Gy',
    email: 'vinay@zkteco.in',
    userId: 'vinay'
  }, {
    firstName: 'Pratap',
    lastName: 'G',
    email: 'pratap@zkteco.in',
    userId: 'pratap'
  }, {
    firstName: 'Vinod',
    lastName: 'Choudhari',
    email: 'vinodchoudhari@zkteco.in',
    userId: 'vinodchoudhari'
  }, {
    firstName: 'Vincen',
    lastName: 'wen',
    email: 'vincen.wen@zkteco.in',
    userId: 'vincen'
  }, {
    firstName: 'Nanigopal',
    lastName: 'Jena',
    email: 'Nanigopal@zkteco.in',
    userId: 'Nanigopal'
  }],
  toContact: {},
  draftContact: {},
  user: {
    firstName: 'Vinay',
    email: 'vinay@zkteco.in',
    userId: 'vinay@zkteco.in'
  },
  recentContacts: [{
    email: 'harshitha@zkteco.in',
    firstName: 'Harshitha',
    lastName: 'P',
    sentTime: '2021-02-11',
    unreadMessageCount: 1,
    message: 'ggjghj',
    id: '0798f3af-07a4-4dac-a417-eefee695c99d'
  }, {
    email: 'vinay@zkteco.in',
    firstName: 'Vinay',
    lastName: 'Gy',
    sentTime: '2021-02-09',
    unreadMessageCount: 0,
    message: '123',
    id: '2e6eb0d0-aa89-4370-90b6-6aa8a58627ca'
  }],
  messageList: [],
  getOrganizationContact: function getOrganizationContact(query) {
    var contacts = [{
      firstName: 'Harshitha',
      lastName: 'P',
      email: 'harshitha@zkteco.in',
      userId: 'harshitha'
    }, {
      firstName: 'Vinay',
      lastName: 'Gy',
      email: 'vinay@zkteco.in',
      userId: 'vinay'
    }, {
      firstName: 'Pratap',
      lastName: 'G',
      email: 'pratap@zkteco.in',
      userId: 'pratap'
    }, {
      firstName: 'Vinod',
      lastName: 'Choudhari',
      email: 'vinodchoudhari@zkteco.in',
      userId: 'vinodchoudhari'
    }, {
      firstName: 'Vincen',
      lastName: 'wen',
      email: 'vincen.wen@zkteco.in',
      userId: 'vincen'
    }, {
      firstName: 'Nanigopal',
      lastName: 'Jena',
      email: 'Nanigopal@zkteco.in',
      userId: 'Nanigopal'
    }];
    if (!query) return [];
    var result = [];
    contacts.map(function (data, index) {
      if (data.email.includes(query)) {
        data.title = data.firstName + ' ' + data.lastName;
        result.push(data);
      }
    });
    return result;
  }
};
/*
    variant, href, as, type, value, size, block, active, disabled, onClick
*/

Messages.propTypes = {
  config: _propTypes["default"].object,
  contacts: _propTypes["default"].array,
  toContact: _propTypes["default"].object,
  draftContact: _propTypes["default"].object,
  user: _propTypes["default"].object,
  recentContacts: _propTypes["default"].array,
  messageList: _propTypes["default"].array,
  getOrganizationContact: _propTypes["default"].func
};
var _default = Messages;
exports["default"] = _default;