UNPKG

web-sdk-im

Version:
558 lines (489 loc) 20.1 kB
"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;