@sendbird/uikit-react 3.0.0-beta.6 → 3.0.0-rc.2

package/cjs/{MemberList-015c1075.js → MemberList-3e3448b2.js}

@@ -1,18 +1,18 @@
 'use strict';
 
 var React = require('react');
-var ui_Button = require('./index-2180f74f.js');
+var ui_Button = require('./index-7ef68704.js');
 var ui_IconButton = require('./ui/IconButton.js');
 var ui_Icon = require('./ui/Icon.js');
 var ui_ContextMenu = require('./ui/ContextMenu.js');
 var ChannelSettings_components_UserListItem = require('./ChannelSettings/components/UserListItem.js');
-var tslib_es6 = require('./tslib.es6-a7af7bb8.js');
+var tslib_es6 = require('./tslib.es6-4b76ba01.js');
 var ui_Modal = require('./ui/Modal.js');
 var ui_UserListItem = require('./ui/UserListItem.js');
-var utils = require('./utils-0d5ecf05.js');
+var utils = require('./utils-52a504d9.js');
 var ChannelSettings_context = require('./ChannelSettings/context.js');
 var useSendbirdStateContext = require('./useSendbirdStateContext.js');
-var uuid = require('./uuid-03009a31.js');
+var uuid = require('./uuid-d0e513e8.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,17 +31,14 @@ function MembersModal(_a) {
       memberQuery = _d[0],
       setMemberQuery = _d[1];
 
-  var channel = ChannelSettings_context.useChannelSettings().channel;
+  var channel = ChannelSettings_context.useChannelSettingsContext().channel;
   var state = useSendbirdStateContext();
   var currentUser = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.userId;
   React.useEffect(function () {
-    var memberListQuery = channel.createMemberListQuery();
-    memberListQuery.limit = 20;
-    memberListQuery.next(function (members, error) {
-      if (error) {
-        return;
-      }
-
+    var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+      limit: 20
+    });
+    memberListQuery.next().then(function (members) {
       setMembers(members);
     });
     setMemberQuery(memberListQuery);
@@ -61,11 +58,7 @@ function MembersModal(_a) {
       var fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
 
       if (hasNext && fetchMore) {
-        memberQuery.next(function (o, error) {
-          if (error) {
-            return;
-          }
-
+        memberQuery.next().then(function (o) {
           setMembers(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], members, true), o, true));
         });
       }
@@ -78,7 +71,7 @@ function MembersModal(_a) {
       action: function action(_a) {
         var parentRef = _a.parentRef,
             actionRef = _a.actionRef;
-        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, channel.myRole === 'operator' && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (channel === null || channel === void 0 ? void 0 : channel.myRole) === 'operator' && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
           menuTrigger: function menuTrigger(toggleDropdown) {
             return /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
               className: "sendbird-user-message__more__menu",
@@ -102,7 +95,7 @@ function MembersModal(_a) {
             }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
               onClick: function onClick() {
                 if (member.role !== 'operator') {
-                  channel.addOperators([member.userId], function () {
+                  channel === null || channel === void 0 ? void 0 : channel.addOperators([member.userId]).then(function () {
                     setMembers(members.map(function (m) {
                       if (m.userId === member.userId) {
                         return tslib_es6.__assign(tslib_es6.__assign({}, member), {
@@ -115,7 +108,7 @@ function MembersModal(_a) {
                     closeDropdown();
                   });
                 } else {
-                  channel.removeOperators([member.userId], function () {
+                  channel === null || channel === void 0 ? void 0 : channel.removeOperators([member.userId]).then(function () {
                     setMembers(members.map(function (m) {
                       if (m.userId === member.userId) {
                         return tslib_es6.__assign(tslib_es6.__assign({}, member), {
@@ -129,11 +122,11 @@ function MembersModal(_a) {
                   });
                 }
               }
-            }, member.role !== 'operator' ? 'Promote to operator' : 'Demote operator'), // No muted members in broadcast channel
-            !channel.isBroadcast && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+            }, member.role !== 'operator' ? 'Register as operator' : 'Unregister operator'), // No muted members in broadcast channel
+            !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
               onClick: function onClick() {
                 if (member.isMuted) {
-                  channel.unmuteUser(member, function () {
+                  channel === null || channel === void 0 ? void 0 : channel.unmuteUser(member).then(function () {
                     setMembers(members.map(function (m) {
                       if (m.userId === member.userId) {
                         return tslib_es6.__assign(tslib_es6.__assign({}, member), {
@@ -146,7 +139,7 @@ function MembersModal(_a) {
                     closeDropdown();
                   });
                 } else {
-                  channel.muteUser(member, function () {
+                  channel === null || channel === void 0 ? void 0 : channel.muteUser(member).then(function () {
                     setMembers(members.map(function (m) {
                       if (m.userId === member.userId) {
                         return tslib_es6.__assign(tslib_es6.__assign({}, member), {
@@ -162,7 +155,7 @@ function MembersModal(_a) {
               }
             }, member.isMuted ? 'Unmute' : 'Mute'), /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
               onClick: function onClick() {
-                channel.banUser(member, -1, '', function () {
+                channel === null || channel === void 0 ? void 0 : channel.banUser(member, -1, '').then(function () {
                   setMembers(members.filter(function (_a) {
                     var userId = _a.userId;
                     return userId !== member.userId;
@@ -177,7 +170,7 @@ function MembersModal(_a) {
   }))));
 }
 
-function InviteMembers(_a) {
+function InviteUsers(_a) {
   var _b, _c;
 
   var _onCancel = _a.onCancel,
@@ -197,14 +190,10 @@ function InviteMembers(_a) {
 
   var state = useSendbirdStateContext();
   var sdk = (_c = (_b = state === null || state === void 0 ? void 0 : state.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
-  var channel = ChannelSettings_context.useChannelSettings().channel;
+  var channel = ChannelSettings_context.useChannelSettingsContext().channel;
   React.useEffect(function () {
     var userListQuery = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery();
-    userListQuery.next(function (members, error) {
-      if (error) {
-        return;
-      }
-
+    userListQuery.next().then(function (members) {
       setMembers(members);
     });
     setUserQuery(userListQuery);
@@ -220,7 +209,7 @@ function InviteMembers(_a) {
       var members = Object.keys(selectedMembers).filter(function (m) {
         return selectedMembers[m];
       });
-      channel.inviteWithUserIds(members).then(function () {
+      channel === null || channel === void 0 ? void 0 : channel.inviteWithUserIds(members).then(function () {
         _onSubmit(members);
       });
     },
@@ -233,11 +222,7 @@ function InviteMembers(_a) {
       var fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
 
       if (hasNext && fetchMore) {
-        userQuery.next(function (users, error) {
-          if (error) {
-            return;
-          }
-
+        userQuery.next().then(function (users) {
           setMembers(tslib_es6.__spreadArray(tslib_es6.__spreadArray([], members, true), users, true));
         });
       }
@@ -281,12 +266,12 @@ var MemberList = function MemberList() {
       setShowAllMembers = _f[1];
 
   var _g = React.useState(false),
-      showInviteMembers = _g[0],
-      setShowInviteMembers = _g[1];
+      showInviteUsers = _g[0],
+      setShowInviteUsers = _g[1];
 
   var state = useSendbirdStateContext();
 
-  var _h = ChannelSettings_context.useChannelSettings(),
+  var _h = ChannelSettings_context.useChannelSettingsContext(),
       channel = _h.channel,
       setChannelUpdateId = _h.setChannelUpdateId;
 
@@ -298,13 +283,10 @@ var MemberList = function MemberList() {
       return;
     }
 
-    var memberUserListQuery = channel.createMemberListQuery();
-    memberUserListQuery.limit = 10;
-    memberUserListQuery.next(function (members, error) {
-      if (error) {
-        return;
-      }
-
+    var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+      limit: 10
+    });
+    memberUserListQuery.next().then(function (members) {
       setMembers(members);
       setHasNext(memberUserListQuery.hasNext);
     });
@@ -315,13 +297,10 @@ var MemberList = function MemberList() {
       return;
     }
 
-    var memberUserListQuery = channel.createMemberListQuery();
-    memberUserListQuery.limit = 10;
-    memberUserListQuery.next(function (members, error) {
-      if (error) {
-        return;
-      }
-
+    var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+      limit: 10
+    });
+    memberUserListQuery.next().then(function (members) {
       setMembers(members);
       setHasNext(memberUserListQuery.hasNext);
       setChannelUpdateId(uuid.uuidv4());
@@ -359,27 +338,27 @@ var MemberList = function MemberList() {
             }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
               onClick: function onClick() {
                 if (member.role !== 'operator') {
-                  channel.addOperators([member.userId], function () {
+                  channel === null || channel === void 0 ? void 0 : channel.addOperators([member.userId]).then(function () {
                     refershList();
                     closeDropdown();
                   });
                 } else {
-                  channel.removeOperators([member.userId], function () {
+                  channel === null || channel === void 0 ? void 0 : channel.removeOperators([member.userId]).then(function () {
                     refershList();
                     closeDropdown();
                   });
                 }
               }
-            }, member.role !== 'operator' ? 'Promote to operator' : 'Demote operator'), // No muted members in broadcast channel
-            !channel.isBroadcast && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+            }, member.role !== 'operator' ? 'Register as operator' : 'Unregister operator'), // No muted members in broadcast channel
+            !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
               onClick: function onClick() {
                 if (member.isMuted) {
-                  channel.unmuteUser(member, function () {
+                  channel === null || channel === void 0 ? void 0 : channel.unmuteUser(member).then(function () {
                     refershList();
                     closeDropdown();
                   });
                 } else {
-                  channel.muteUser(member, function () {
+                  channel === null || channel === void 0 ? void 0 : channel.muteUser(member).then(function () {
                     refershList();
                     closeDropdown();
                   });
@@ -387,7 +366,7 @@ var MemberList = function MemberList() {
               }
             }, member.isMuted ? 'Unmute' : 'Mute'), /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
               onClick: function onClick() {
-                channel.banUser(member, -1, '', function () {
+                channel === null || channel === void 0 ? void 0 : channel.banUser(member, -1, '').then(function () {
                   refershList();
                   closeDropdown();
                 });
@@ -409,23 +388,23 @@ var MemberList = function MemberList() {
     type: ui_Button.ButtonTypes.SECONDARY,
     size: ui_Button.ButtonSizes.SMALL,
     onClick: function onClick() {
-      return setShowInviteMembers(true);
+      return setShowInviteUsers(true);
     }
   }, "Invite members")), showAllMembers && /*#__PURE__*/React__default["default"].createElement(MembersModal, {
     onCancel: function onCancel() {
       setShowAllMembers(false);
       refershList();
     }
-  }), showInviteMembers && /*#__PURE__*/React__default["default"].createElement(InviteMembers, {
+  }), showInviteUsers && /*#__PURE__*/React__default["default"].createElement(InviteUsers, {
     onSubmit: function onSubmit() {
-      setShowInviteMembers(false);
+      setShowInviteUsers(false);
       refershList();
     },
     onCancel: function onCancel() {
-      return setShowInviteMembers(false);
+      return setShowInviteUsers(false);
     }
   }));
 };
 
 exports.MemberList = MemberList;
-//# sourceMappingURL=MemberList-015c1075.js.map
+//# sourceMappingURL=MemberList-3e3448b2.js.map

package/cjs/MemberList-3e3448b2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MemberList-3e3448b2.js","sources":["../../src/smart-components/ChannelSettings/components/ModerationPanel/MembersModal.tsx","../../src/smart-components/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx","../../src/smart-components/ChannelSettings/components/ModerationPanel/MemberList.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  useEffect,\n  useState,\n} from 'react'\n\nimport Modal from '../../../../ui/Modal';\nimport UserListItem from '../../../../ui/UserListItem';\nimport IconButton from '../../../../ui/IconButton';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport ContextMenu, { MenuItem, MenuItems } from '../../../../ui/ContextMenu';\nimport { noop } from '../../../../utils/utils';\n\nimport { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\ninterface Props {\n  onCancel(): void;\n}\n\nexport default function MembersModal({ onCancel }: Props): ReactElement {\n  const [members, setMembers] = useState([]);\n  const [memberQuery, setMemberQuery] = useState(null);\n\n  const { channel } = useChannelSettingsContext();\n  const state = useSendbirdStateContext();\n  const currentUser = state?.config?.userId;\n\n  useEffect(() => {\n    const memberListQuery = channel?.createMemberListQuery({\n      limit: 20,\n    });\n    memberListQuery.next().then((members) => {\n      setMembers(members);\n    });\n    setMemberQuery(memberListQuery);\n  }, [])\n  return (\n    <div>\n      <Modal\n        hideFooter\n        onCancel={() => onCancel()}\n        onSubmit={noop}\n        titleText=\"All Members\"\n      >\n        <div\n          className=\"sendbird-more-members__popup-scroll\"\n          onScroll={(e) => {\n            const { hasNext } = memberQuery;\n            const target = e.target as HTMLTextAreaElement;\n            const fetchMore = (\n              target.clientHeight + target.scrollTop === target.scrollHeight\n            );\n\n            if (hasNext && fetchMore) {\n              memberQuery.next().then((o) => {\n                setMembers([\n                  ...members,\n                  ...o,\n                ])\n              });\n            }\n          }}\n        >\n          { members.map((member) => (\n            <UserListItem\n              user={member}\n              key={member.userId}\n              currentUser={currentUser}\n              action={({ parentRef, actionRef }) => (\n                <>\n                  {channel?.myRole === 'operator' && (\n                    <ContextMenu\n                      menuTrigger={(toggleDropdown) => (\n                        <IconButton\n                          className=\"sendbird-user-message__more__menu\"\n                          width=\"32px\"\n                          height=\"32px\"\n                          onClick={toggleDropdown}\n                        >\n                          <Icon\n                            width=\"24px\"\n                            height=\"24px\"\n                            type={IconTypes.MORE}\n                            fillColor={IconColors.CONTENT_INVERSE}\n                          />\n                        </IconButton>\n                      )}\n                      menuItems={(closeDropdown) => (\n                        <MenuItems\n                          parentContainRef={parentRef}\n                          parentRef={actionRef} // for catching location(x, y) of MenuItems\n                          closeDropdown={closeDropdown}\n                          openLeft\n                        >\n                          <MenuItem\n                            onClick={() => {\n                              if ((member.role !== 'operator')) {\n                                channel?.addOperators([member.userId]).then(() => {\n                                  setMembers(members.map(m => {\n                                    if(m.userId === member.userId) {\n                                      return {\n                                        ...member,\n                                        role: 'operator',\n                                      };\n                                    }\n                                    return m;\n                                  }));\n                                  closeDropdown();\n                                });\n                              } else {\n                                channel?.removeOperators([member.userId]).then(() => {\n                                  setMembers(members.map(m => {\n                                    if(m.userId === member.userId) {\n                                      return {\n                                        ...member,\n                                        role: '',\n                                      };\n                                    }\n                                    return m;\n                                  }));\n                                  closeDropdown();\n                                });\n                              }\n                            }}\n                          >\n                            { member.role !== 'operator' ? 'Register as operator' : 'Unregister operator'}\n                          </MenuItem>\n                          {\n                            // No muted members in broadcast channel\n                            !channel?.isBroadcast && (\n                              <MenuItem\n                                onClick={() => {\n                                  if (member.isMuted) {\n                                    channel?.unmuteUser(member).then(() => {\n                                      setMembers(members.map(m => {\n                                        if(m.userId === member.userId) {\n                                          return {\n                                            ...member,\n                                            isMuted: false,\n                                          };\n                                        }\n                                        return m;\n                                      }));\n                                      closeDropdown();\n                                    })\n                                  } else {\n                                    channel?.muteUser(member).then(() => {\n                                      setMembers(members.map(m => {\n                                        if(m.userId === member.userId) {\n                                          return {\n                                            ...member,\n                                            isMuted: true,\n                                          };\n                                        }\n                                        return m;\n                                      }));\n                                      closeDropdown();\n                                    });\n                                  }\n                                }}\n                              >\n                                { member.isMuted ? 'Unmute' : 'Mute' }\n                              </MenuItem>\n                            )\n                          }\n                          <MenuItem\n                            onClick={() => {\n                              channel?.banUser(member, -1, '').then(() => {\n                                setMembers(members.filter(({ userId }) => {\n                                  return userId !== member.userId;\n                                }));\n                              });\n                            }}\n                          >\n                            Ban\n                          </MenuItem>\n                        </MenuItems>\n                      )}\n                    />\n                  )}\n                </>\n              )}\n            />\n          ))}\n        </div>\n      </Modal>\n    </div>\n  );\n}\n","import React, { ReactElement, useEffect, useState } from 'react'\n\nimport Modal from '../../../../ui/Modal';\nimport { Type as ButtonType } from '../../../../ui/Button/type';\nimport UserListItem from '../../../../ui/UserListItem';\nimport { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\ninterface Props {\n  onCancel(): void;\n  onSubmit(members: Array<string>): void;\n}\n\nexport default function InviteUsers({\n  onCancel,\n  onSubmit,\n}: Props): ReactElement {\n  const [members, setMembers] = useState([]);\n  const [selectedMembers, setSelectedMembers] = useState({});\n  const [userQuery, setUserQuery] = useState(null);\n\n  const state = useSendbirdStateContext();\n  const sdk = state?.stores?.sdkStore?.sdk;\n\n  const { channel } = useChannelSettingsContext();\n\n  useEffect(() => {\n    const userListQuery = sdk?.createApplicationUserListQuery();\n    userListQuery.next().then((members) => {\n      setMembers(members);\n    });\n    setUserQuery(userListQuery);\n  }, [sdk])\n  return (\n    <div>\n      <Modal\n        disabled={Object.keys(selectedMembers).length === 0}\n        submitText=\"Invite\"\n        type={ButtonType.PRIMARY}\n        onCancel={() => onCancel()}\n        onSubmit={() => {\n          const members = Object.keys(selectedMembers).filter((m) => selectedMembers[m]);\n          channel?.inviteWithUserIds(members).then(() => {\n            onSubmit(members);\n          });\n        }}\n        titleText=\"Select members\"\n      >\n        <div\n          className=\"sendbird-more-members__popup-scroll\"\n          onScroll={(e) => {\n            const { hasNext } = userQuery;\n            const target = e.target as HTMLTextAreaElement;\n            const fetchMore = (\n              target.clientHeight + target.scrollTop === target.scrollHeight\n            );\n            if (hasNext && fetchMore) {\n              userQuery.next().then((users) => {\n                setMembers([\n                  ...members,\n                  ...users,\n                ])\n              });\n            }\n          }}\n        >\n          <div className=\"sendbird-more-members__popup-scroll__inner\">\n            { members.map((member) => (\n              <UserListItem\n                checkBox\n                checked={selectedMembers[member.userId]}\n                onChange={\n                  (event) => {\n                    const modifiedSelectedMembers = {\n                      ...selectedMembers,\n                      [event.target.id]: event.target.checked,\n                    };\n                    if (!event.target.checked) {\n                      delete modifiedSelectedMembers[event.target.id];\n                    }\n                    setSelectedMembers(modifiedSelectedMembers);\n                  }\n                }\n                user={member}\n                key={member.userId}\n              />\n            ))}\n          </div>\n        </div>\n      </Modal>\n    </div>\n  );\n}\n","import React, {\n  ReactElement,\n  useEffect,\n  useState,\n  useCallback,\n} from 'react';\n\nimport Button, { ButtonTypes, ButtonSizes } from '../../../../ui/Button';\nimport IconButton from '../../../../ui/IconButton';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport ContextMenu, { MenuItem, MenuItems } from '../../../../ui/ContextMenu';\n\nimport UserListItem from '../UserListItem';\nimport MembersModal from './MembersModal';\nimport InviteUsers from './InviteUsersModal';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';\nimport uuidv4 from '../../../../utils/uuid';\n\nexport const MemberList = (): ReactElement => {\n  const [members, setMembers] = useState([]);\n  const [hasNext, setHasNext] = useState(false);\n  const [showAllMembers, setShowAllMembers] = useState(false);\n  const [showInviteUsers, setShowInviteUsers] = useState(false);\n\n  const state = useSendbirdStateContext();\n  const {\n    channel,\n    setChannelUpdateId,\n  } = useChannelSettingsContext();\n\n  const sdk = state?.stores?.sdkStore?.sdk;\n  const userId = state?.config?.userId;\n\n  useEffect(() => {\n    if (!channel) {\n      setMembers([]);\n      return;\n    }\n\n    const memberUserListQuery = channel?.createMemberListQuery({\n      limit: 10,\n    });\n    memberUserListQuery.next().then((members) => {\n      setMembers(members);\n      setHasNext(memberUserListQuery.hasNext);\n    });\n  }, [channel]);\n\n  const refershList = useCallback(\n    () => {\n      if (!channel) {\n        setMembers([]);\n        return;\n      }\n      const memberUserListQuery = channel?.createMemberListQuery({\n        limit: 10,\n      });\n      memberUserListQuery.next().then((members) => {\n        setMembers(members);\n        setHasNext(memberUserListQuery.hasNext);\n        setChannelUpdateId(uuidv4());\n      });\n    },\n    [channel],\n  );\n\n  return (\n    <>\n      {\n        members.map((member) => (\n          <UserListItem\n            key={member.userId}\n            user={member}\n            currentUser={sdk.currentUser.userId}\n            action={\n              (userId !== member.userId)\n                ? ({ actionRef, parentRef }) => (\n                  <ContextMenu\n                    menuTrigger={(toggleDropdown) => (\n                      <IconButton\n                        className=\"sendbird-user-message__more__menu\"\n                        width=\"32px\"\n                        height=\"32px\"\n                        onClick={toggleDropdown}\n                      >\n                        <Icon\n                          width=\"24px\"\n                          height=\"24px\"\n                          type={IconTypes.MORE}\n                          fillColor={IconColors.CONTENT_INVERSE}\n                        />\n                      </IconButton>\n                    )}\n                    menuItems={(closeDropdown) => (\n                      <MenuItems\n                        parentContainRef={parentRef}\n                        parentRef={actionRef} // for catching location(x, y) of MenuItems\n                        closeDropdown={closeDropdown}\n                        openLeft\n                      >\n                        <MenuItem\n                          onClick={() => {\n                            if ((member.role !== 'operator')) {\n                              channel?.addOperators([member.userId]).then(() => {\n                                refershList();\n                                closeDropdown();\n                              });\n                            } else {\n                              channel?.removeOperators([member.userId]).then(() => {\n                                refershList();\n                                closeDropdown();\n                              });\n                            }\n                          }}\n                        >\n                          {member.role !== 'operator' ? 'Register as operator' : 'Unregister operator'}\n                        </MenuItem>\n                        {\n                          // No muted members in broadcast channel\n                          !channel?.isBroadcast && (\n                            <MenuItem\n                              onClick={() => {\n                                if (member.isMuted) {\n                                  channel?.unmuteUser(member).then(() => {\n                                    refershList();\n                                    closeDropdown();\n                                  })\n                                } else {\n                                  channel?.muteUser(member).then(() => {\n                                    refershList();\n                                    closeDropdown();\n                                  });\n                                }\n                              }}\n                            >\n                              { member.isMuted ? 'Unmute' : 'Mute'}\n                            </MenuItem>\n                          )\n                        }\n                        <MenuItem\n                          onClick={() => {\n                            channel?.banUser(member, -1, '').then(() => {\n                              refershList();\n                              closeDropdown();\n                            });\n                          }}\n                        >\n                          Ban\n                    </MenuItem>\n                      </MenuItems>\n                    )}\n                  />\n                )\n                : null\n            }\n          />\n        ))\n      }\n      <div\n        className=\"sendbird-channel-settings-accordion__footer\"\n      >\n        {\n          hasNext && (\n            <Button\n              type={ButtonTypes.SECONDARY}\n              size={ButtonSizes.SMALL}\n              onClick={() => setShowAllMembers(true)}\n            >\n              All members\n            </Button>\n          )\n        }\n        <Button\n          type={ButtonTypes.SECONDARY}\n          size={ButtonSizes.SMALL}\n          onClick={() => setShowInviteUsers(true)}\n        >\n          Invite members\n        </Button>\n      </div>\n      {\n        showAllMembers && (\n          <MembersModal\n            onCancel={() => {\n              setShowAllMembers(false);\n              refershList();\n            }}\n          />\n        )\n      }\n      {\n        showInviteUsers && (\n          <InviteUsers\n            onSubmit={() => {\n              setShowInviteUsers(false);\n              refershList();\n            }}\n            onCancel={() => setShowInviteUsers(false)}\n          />\n        )\n      }\n    </>\n  );\n}\n\nexport default MemberList;\n"],"names":["MembersModal","_a","onCancel","_c","useState","members","setMembers","_d","memberQuery","setMemberQuery","channel","useChannelSettingsContext","state","useSendbirdStateContext","currentUser","config","userId","useEffect","memberListQuery","createMemberListQuery","limit","next","then","React","Modal","noop","e","hasNext","target","fetchMore","clientHeight","scrollTop","scrollHeight","o","map","member","UserListItem","parentRef","actionRef","myRole","ContextMenu","toggleDropdown","IconButton","Icon","IconTypes","MORE","IconColors","CONTENT_INVERSE","closeDropdown","MenuItems","MenuItem","role","addOperators","m","removeOperators","isBroadcast","isMuted","unmuteUser","muteUser","banUser","filter","InviteUsers","onSubmit","_e","selectedMembers","setSelectedMembers","_f","userQuery","setUserQuery","sdk","stores","sdkStore","userListQuery","createApplicationUserListQuery","Object","keys","length","ButtonType","PRIMARY","inviteWithUserIds","users","event","modifiedSelectedMembers","id","checked","MemberList","setHasNext","showAllMembers","setShowAllMembers","_g","showInviteUsers","setShowInviteUsers","_h","setChannelUpdateId","memberUserListQuery","refershList","useCallback","uuidv4","Button","ButtonTypes","SECONDARY","ButtonSizes","SMALL"],"mappings":"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"}

package/cjs/MessageSearch/components/MessageSearchUI.js

@@ -3,26 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var LocalizationContext = require('../../LocalizationContext-79514649.js');
+var LocalizationContext = require('../../LocalizationContext-65b97b58.js');
 var MessageSearch_context = require('../context.js');
 var ui_MessageSearchItem = require('../../ui/MessageSearchItem.js');
-var ui_PlaceHolder = require('../../index-d25a7cbf.js');
+var ui_PlaceHolder = require('../../index-a66b1af1.js');
 var ui_MessageSearchFileItem = require('../../ui/MessageSearchFileItem.js');
-require('../../stringSet-ae448472.js');
-require('../../index-0b2e2c2a.js');
+require('../../stringSet-da976cc5.js');
+require('../../index-bf350acc.js');
 require('../../useSendbirdStateContext.js');
-require('../../withSendBird.js');
-require('../../_rollupPluginBabelHelpers-f802e0e8.js');
-require('../../tslib.es6-a7af7bb8.js');
-require('../../index-cb53adf5.js');
-require('../../index-5615eab4.js');
-require('../../index-07623c8b.js');
+require('../../withSendbird.js');
+require('../../_rollupPluginBabelHelpers-0d29c748.js');
+require('../../tslib.es6-4b76ba01.js');
+require('../../index-481324b7.js');
+require('../../index-a372cc51.js');
+require('../../index-119a7a34.js');
 require('../../ui/Avatar.js');
 require('../../ui/ImageRenderer.js');
 require('prop-types');
 require('../../ui/Icon.js');
-require('../../uuid-03009a31.js');
-require('../../index-a20b40c4.js');
+require('../../uuid-d0e513e8.js');
+require('../../index-574ef41e.js');
 require('../../ui/Loader.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -37,7 +37,7 @@ var MessageSearchUI = function MessageSearchUI(_a) {
       renderPlaceHolderEmptyList = _a.renderPlaceHolderEmptyList,
       renderSearchItem = _a.renderSearchItem;
 
-  var _b = MessageSearch_context.useMessageSearch(),
+  var _b = MessageSearch_context.useMessageSearchContext(),
       isInvalid = _b.isInvalid,
       searchString = _b.searchString,
       requestString = _b.requestString,
@@ -129,7 +129,7 @@ var MessageSearchUI = function MessageSearchUI(_a) {
 
     if (message.messageType === 'file') {
       return /*#__PURE__*/React__default["default"].createElement(ui_MessageSearchFileItem, {
-        className: COMPONENT_CLASS_NAME + "__message-search-item",
+        className: "".concat(COMPONENT_CLASS_NAME, "__message-search-item"),
         message: message,
         key: message.messageId,
         selected: selectedMessageId === message.messageId,
@@ -141,7 +141,7 @@ var MessageSearchUI = function MessageSearchUI(_a) {
     }
 
     return /*#__PURE__*/React__default["default"].createElement(ui_MessageSearchItem, {
-      className: COMPONENT_CLASS_NAME + "__message-search-item",
+      className: "".concat(COMPONENT_CLASS_NAME, "__message-search-item"),
       message: message,
       key: message.messageId,
       selected: selectedMessageId === message.messageId,

package/cjs/MessageSearch/components/MessageSearchUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageSearchUI.js","sources":["../../../../src/smart-components/MessageSearch/components/MessageSearchUI/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport './index.scss';\n\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport { useMessageSearch } from '../../context/MessageSearchProvider';\n\nimport MessageSearchItem from '../../../../ui/MessageSearchItem';\nimport PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';\nimport MessageSearchFileItem from '../../../../ui/MessageSearchFileItem';\nimport { ClientSentMessages } from '../../../../types';\n\n\nconst COMPONENT_CLASS_NAME = 'sendbird-message-search';\n\nexport interface MessageSearchUIProps {\n  renderPlaceHolderError?: (props: void) => React.ReactNode;\n  renderPlaceHolderLoading?: (props: void) => React.ReactNode;\n  renderPlaceHolderNoString?: (props: void) => React.ReactNode;\n  renderPlaceHolderEmptyList?: (props: void) => React.ReactNode;\n  renderSearchItem?(\n    {\n      message,\n      onResultClick,\n    }: {\n      message: ClientSentMessages,\n      onResultClick?: (message: ClientSentMessages) => void,\n    }\n  ): JSX.Element;\n}\n\nexport const MessageSearchUI: React.FC<MessageSearchUIProps> = ({\n  renderPlaceHolderError,\n  renderPlaceHolderLoading,\n  renderPlaceHolderNoString,\n  renderPlaceHolderEmptyList,\n  renderSearchItem,\n}: MessageSearchUIProps) => {\n  const {\n    isInvalid,\n    searchString,\n    requestString,\n    currentChannel,\n    retryCount,\n    setRetryCount,\n    loading,\n    scrollRef,\n    hasMoreResult,\n    onScroll,\n    allMessages,\n    onResultClick,\n    selectedMessageId,\n    setSelectedMessageId,\n  } = useMessageSearch();\n\n  const { stringSet } = useContext(LocalizationContext);\n\n  const handleRetryToConnect = () => {\n    setRetryCount(retryCount + 1);\n  };\n\n  const handleOnScroll = (e) => {\n    const scrollElement = e.target;\n    const {\n      scrollTop,\n      scrollHeight,\n      clientHeight,\n    } = scrollElement;\n\n    if (!hasMoreResult) {\n      return;\n    }\n    if (scrollTop + clientHeight >= scrollHeight - 1) {\n      onScroll(() => {\n        // after load more searched messages\n      });\n    }\n  };\n\n  const getChannelName = () => {\n    if (currentChannel && currentChannel?.name && currentChannel?.name !== 'Group Channel') {\n      return currentChannel?.name;\n    }\n    if (currentChannel && (currentChannel?.name === 'Group Channel' || !currentChannel?.name)) {\n      return currentChannel.members.map((member) => member.nickname || stringSet.NO_NAME).join(', ');\n    }\n    return stringSet.NO_TITLE;\n  };\n\n  if (isInvalid && searchString && requestString) {\n    return renderPlaceHolderError?.() || (\n      <div className={COMPONENT_CLASS_NAME}>\n        <PlaceHolder\n          type={PlaceHolderTypes.WRONG}\n          retryToConnect={handleRetryToConnect}\n        />\n      </div>\n    );\n  }\n\n  if (loading && searchString && requestString) {\n    return renderPlaceHolderLoading?.() || (\n      <div className={COMPONENT_CLASS_NAME}>\n        <PlaceHolder type={PlaceHolderTypes.SEARCHING} />\n      </div>\n    );\n  }\n\n  if (!searchString) {\n    return renderPlaceHolderNoString?.() || (\n      <div className={COMPONENT_CLASS_NAME}>\n        <PlaceHolder\n          type={PlaceHolderTypes.SEARCH_IN}\n          searchInString={getChannelName()}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={COMPONENT_CLASS_NAME}\n      onScroll={handleOnScroll}\n      ref={scrollRef}\n    >\n      {\n        (allMessages.length > 0)\n          ? (\n            allMessages.map((message) => {\n              if (renderSearchItem) {\n                return renderSearchItem({ message, onResultClick });\n              }\n              if (message.messageType === 'file') {\n                return (\n                  <MessageSearchFileItem\n                    className={`${COMPONENT_CLASS_NAME}__message-search-item`}\n                    message={message}\n                    key={message.messageId}\n                    selected={(selectedMessageId === message.messageId)}\n                    onClick={() => {\n                      onResultClick(message);\n                      setSelectedMessageId(message.messageId);\n                    }}\n                  />\n                );\n              }\n              return (\n                <MessageSearchItem\n                  className={`${COMPONENT_CLASS_NAME}__message-search-item`}\n                  message={message}\n                  key={message.messageId}\n                  selected={(selectedMessageId === message.messageId)}\n                  onClick={() => {\n                    onResultClick(message);\n                    setSelectedMessageId(message.messageId);\n                  }}\n                />\n              );\n            })\n          )\n          : renderPlaceHolderEmptyList?.() || (\n            <PlaceHolder type={PlaceHolderTypes.NO_RESULTS} />\n          )\n      }\n    </div>\n  );\n};\n\nexport default MessageSearchUI;\n"],"names":["COMPONENT_CLASS_NAME","MessageSearchUI","_a","renderPlaceHolderError","renderPlaceHolderLoading","renderPlaceHolderNoString","renderPlaceHolderEmptyList","renderSearchItem","_b","useMessageSearch","isInvalid","searchString","requestString","currentChannel","retryCount","setRetryCount","loading","scrollRef","hasMoreResult","onScroll","allMessages","onResultClick","selectedMessageId","setSelectedMessageId","stringSet","useContext","LocalizationContext","handleRetryToConnect","handleOnScroll","e","scrollElement","target","scrollTop","scrollHeight","clientHeight","getChannelName","name","members","map","member","nickname","NO_NAME","join","NO_TITLE","React","PlaceHolder","PlaceHolderTypes","WRONG","SEARCHING","SEARCH_IN","length","message","messageType","MessageSearchFileItem","messageId","MessageSearchItem","NO_RESULTS"],"mappings":"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"}
+{"version":3,"file":"MessageSearchUI.js","sources":["../../../../src/smart-components/MessageSearch/components/MessageSearchUI/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport type { FileMessage, UserMessage } from '@sendbird/chat/message';\nimport './index.scss';\n\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport { useMessageSearchContext } from '../../context/MessageSearchProvider';\n\nimport MessageSearchItem from '../../../../ui/MessageSearchItem';\nimport PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';\nimport MessageSearchFileItem from '../../../../ui/MessageSearchFileItem';\nimport { ClientSentMessages } from '../../../../types';\n\n\nconst COMPONENT_CLASS_NAME = 'sendbird-message-search';\n\nexport interface MessageSearchUIProps {\n  renderPlaceHolderError?: (props: void) => React.ReactNode;\n  renderPlaceHolderLoading?: (props: void) => React.ReactNode;\n  renderPlaceHolderNoString?: (props: void) => React.ReactNode;\n  renderPlaceHolderEmptyList?: (props: void) => React.ReactNode;\n  renderSearchItem?(\n    {\n      message,\n      onResultClick,\n    }: {\n      message: ClientSentMessages,\n      onResultClick?: (message: ClientSentMessages) => void,\n    }\n  ): JSX.Element;\n}\n\nexport const MessageSearchUI: React.FC<MessageSearchUIProps> = ({\n  renderPlaceHolderError,\n  renderPlaceHolderLoading,\n  renderPlaceHolderNoString,\n  renderPlaceHolderEmptyList,\n  renderSearchItem,\n}: MessageSearchUIProps) => {\n  const {\n    isInvalid,\n    searchString,\n    requestString,\n    currentChannel,\n    retryCount,\n    setRetryCount,\n    loading,\n    scrollRef,\n    hasMoreResult,\n    onScroll,\n    allMessages,\n    onResultClick,\n    selectedMessageId,\n    setSelectedMessageId,\n  } = useMessageSearchContext();\n\n  const { stringSet } = useContext(LocalizationContext);\n\n  const handleRetryToConnect = () => {\n    setRetryCount(retryCount + 1);\n  };\n\n  const handleOnScroll = (e) => {\n    const scrollElement = e.target;\n    const {\n      scrollTop,\n      scrollHeight,\n      clientHeight,\n    } = scrollElement;\n\n    if (!hasMoreResult) {\n      return;\n    }\n    if (scrollTop + clientHeight >= scrollHeight - 1) {\n      onScroll(() => {\n        // after load more searched messages\n      });\n    }\n  };\n\n  const getChannelName = () => {\n    if (currentChannel && currentChannel?.name && currentChannel?.name !== 'Group Channel') {\n      return currentChannel?.name;\n    }\n    if (currentChannel && (currentChannel?.name === 'Group Channel' || !currentChannel?.name)) {\n      return currentChannel.members.map((member) => member.nickname || stringSet.NO_NAME).join(', ');\n    }\n    return stringSet.NO_TITLE;\n  };\n\n  if (isInvalid && searchString && requestString) {\n    return renderPlaceHolderError?.() || (\n      <div className={COMPONENT_CLASS_NAME}>\n        <PlaceHolder\n          type={PlaceHolderTypes.WRONG}\n          retryToConnect={handleRetryToConnect}\n        />\n      </div>\n    );\n  }\n\n  if (loading && searchString && requestString) {\n    return renderPlaceHolderLoading?.() || (\n      <div className={COMPONENT_CLASS_NAME}>\n        <PlaceHolder type={PlaceHolderTypes.SEARCHING} />\n      </div>\n    );\n  }\n\n  if (!searchString) {\n    return renderPlaceHolderNoString?.() || (\n      <div className={COMPONENT_CLASS_NAME}>\n        <PlaceHolder\n          type={PlaceHolderTypes.SEARCH_IN}\n          searchInString={getChannelName()}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={COMPONENT_CLASS_NAME}\n      onScroll={handleOnScroll}\n      ref={scrollRef}\n    >\n      {\n        (allMessages.length > 0)\n          ? (\n            allMessages.map((message) => {\n              if (renderSearchItem) {\n                return renderSearchItem({ message, onResultClick });\n              }\n              if (message.messageType === 'file') {\n                return (\n                  <MessageSearchFileItem\n                    className={`${COMPONENT_CLASS_NAME}__message-search-item`}\n                    message={message as FileMessage}\n                    key={message.messageId}\n                    selected={(selectedMessageId === message.messageId)}\n                    onClick={() => {\n                      onResultClick(message);\n                      setSelectedMessageId(message.messageId);\n                    }}\n                  />\n                );\n              }\n              return (\n                <MessageSearchItem\n                  className={`${COMPONENT_CLASS_NAME}__message-search-item`}\n                  message={message as UserMessage}\n                  key={message.messageId}\n                  selected={(selectedMessageId === message.messageId)}\n                  onClick={() => {\n                    onResultClick(message);\n                    setSelectedMessageId(message.messageId);\n                  }}\n                />\n              );\n            })\n          )\n          : renderPlaceHolderEmptyList?.() || (\n            <PlaceHolder type={PlaceHolderTypes.NO_RESULTS} />\n          )\n      }\n    </div>\n  );\n};\n\nexport default MessageSearchUI;\n"],"names":["COMPONENT_CLASS_NAME","MessageSearchUI","_a","renderPlaceHolderError","renderPlaceHolderLoading","renderPlaceHolderNoString","renderPlaceHolderEmptyList","renderSearchItem","_b","useMessageSearchContext","isInvalid","searchString","requestString","currentChannel","retryCount","setRetryCount","loading","scrollRef","hasMoreResult","onScroll","allMessages","onResultClick","selectedMessageId","setSelectedMessageId","stringSet","useContext","LocalizationContext","handleRetryToConnect","handleOnScroll","e","scrollElement","target","scrollTop","scrollHeight","clientHeight","getChannelName","name","members","map","member","nickname","NO_NAME","join","NO_TITLE","React","PlaceHolder","PlaceHolderTypes","WRONG","SEARCHING","SEARCH_IN","length","message","messageType","MessageSearchFileItem","messageId","MessageSearchItem","NO_RESULTS"],"mappings":"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"}

package/cjs/MessageSearch/context.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var tslib_es6 = require('../tslib.es6-a7af7bb8.js');
-require('../withSendBird.js');
-require('../_rollupPluginBabelHelpers-f802e0e8.js');
+var tslib_es6 = require('../tslib.es6-4b76ba01.js');
+require('../withSendbird.js');
+require('../_rollupPluginBabelHelpers-0d29c748.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -122,20 +122,18 @@ function useSetChannel(_a, _b) {
       logger = _b.logger,
       messageSearchDispatcher = _b.messageSearchDispatcher;
   React.useEffect(function () {
-    if (channelUrl && sdkInit && sdk && (sdk.OpenChannel || sdk.GroupChannel)) {
-      sdk.GroupChannel.getChannel(channelUrl, function (groupChannel, error) {
-        if (!error) {
-          logger.info('MessageSearch | useSetChannel group channel', groupChannel);
-          messageSearchDispatcher({
-            type: SET_CURRENT_CHANNEL,
-            payload: groupChannel
-          });
-        } else {
-          messageSearchDispatcher({
-            type: CHANNEL_INVALID,
-            payload: null
-          });
-        }
+    if (channelUrl && sdkInit && (sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel)) {
+      sdk.groupChannel.getChannel(channelUrl).then(function (groupChannel) {
+        logger.info('MessageSearch | useSetChannel group channel', groupChannel);
+        messageSearchDispatcher({
+          type: SET_CURRENT_CHANNEL,
+          payload: groupChannel
+        });
+      }).catch(function () {
+        messageSearchDispatcher({
+          type: CHANNEL_INVALID,
+          payload: null
+        });
       });
     }
   }, [channelUrl, sdkInit]);
@@ -162,34 +160,33 @@ function useGetSearchedMessages(_a, _b) {
         var inputSearchMessageQueryObject = tslib_es6.__assign(tslib_es6.__assign({}, messageSearchQuery), {
           order: 'ts',
           channelUrl: channelUrl,
-          messageTimestampFrom: currentChannel.invitedAt
+          messageTimestampFrom: currentChannel.invitedAt,
+          keyword: requestString
         });
 
-        var createdQuery_1 = sdk.createMessageSearchQuery(requestString, inputSearchMessageQueryObject);
-        createdQuery_1.next(function (messages, error) {
-          if (!error) {
-            logger.info('MessageSearch | useGetSearchedMessages: succeeded getting messages', messages);
-            messageSearchDispatcher({
-              type: GET_SEARCHED_MESSAGES,
-              payload: {
-                messages: messages,
-                createdQuery: createdQuery_1
-              }
-            });
-
-            if (onResultLoaded && typeof onResultLoaded === 'function') {
-              onResultLoaded(messages, null);
-            }
-          } else {
-            logger.warning('MessageSearch | useGetSearchedMessages: getting failed', error);
-            messageSearchDispatcher({
-              type: SET_QUERY_INVALID,
-              payload: null
-            });
-
-            if (onResultLoaded && typeof onResultLoaded === 'function') {
-              onResultLoaded(null, error);
+        var createdQuery_1 = sdk.createMessageSearchQuery(inputSearchMessageQueryObject);
+        createdQuery_1.next().then(function (messages) {
+          logger.info('MessageSearch | useGetSearchedMessages: succeeded getting messages', messages);
+          messageSearchDispatcher({
+            type: GET_SEARCHED_MESSAGES,
+            payload: {
+              messages: messages,
+              createdQuery: createdQuery_1
             }
+          });
+
+          if (onResultLoaded && typeof onResultLoaded === 'function') {
+            onResultLoaded(messages, null);
+          }
+        }).catch(function (error) {
+          logger.warning('MessageSearch | useGetSearchedMessages: getting failed', error);
+          messageSearchDispatcher({
+            type: SET_QUERY_INVALID,
+            payload: null
+          });
+
+          if (onResultLoaded && typeof onResultLoaded === 'function') {
+            onResultLoaded(null, error);
           }
         });
         messageSearchDispatcher({
@@ -215,25 +212,23 @@ function useScrollCallback(_a, _b) {
     }
 
     if (currentMessageSearchQuery && currentMessageSearchQuery.hasNext) {
-      currentMessageSearchQuery.next(function (messages, error) {
-        if (!error) {
-          logger.info('MessageSearch | useScrollCallback: succeeded getting searched messages', messages);
-          messageSearchDispatcher({
-            type: GET_NEXT_SEARCHED_MESSAGES,
-            payload: messages
-          });
-          cb(messages, null);
+      currentMessageSearchQuery.next().then(function (messages) {
+        logger.info('MessageSearch | useScrollCallback: succeeded getting searched messages', messages);
+        messageSearchDispatcher({
+          type: GET_NEXT_SEARCHED_MESSAGES,
+          payload: messages
+        });
+        cb(messages, null);
 
-          if (onResultLoaded && typeof onResultLoaded === 'function') {
-            onResultLoaded(messages, null);
-          }
-        } else {
-          logger.warning('MessageSearch | useScrollCallback: failed getting searched messages', error);
-          cb(null, error);
+        if (onResultLoaded && typeof onResultLoaded === 'function') {
+          onResultLoaded(messages, null);
+        }
+      }).catch(function (error) {
+        logger.warning('MessageSearch | useScrollCallback: failed getting searched messages', error);
+        cb(null, error);
 
-          if (onResultLoaded && typeof onResultLoaded === 'function') {
-            onResultLoaded(null, error);
-          }
+        if (onResultLoaded && typeof onResultLoaded === 'function') {
+          onResultLoaded(null, error);
         }
       });
     } else {
@@ -392,10 +387,10 @@ var MessageSearchProvider = function MessageSearchProvider(props) {
   }, props === null || props === void 0 ? void 0 : props.children);
 };
 
-var useMessageSearch = function useMessageSearch() {
+var useMessageSearchContext = function useMessageSearchContext() {
   return React__default["default"].useContext(MessageSearchContext);
 };
 
 exports.MessageSearchProvider = MessageSearchProvider;
-exports.useMessageSearch = useMessageSearch;
+exports.useMessageSearchContext = useMessageSearchContext;
 //# sourceMappingURL=context.js.map