stream-chat-react-native-core 4.15.0-beta.2 → 5.0.0-beta.1

package/lib/commonjs/components/Channel/Channel.js

@@ -191,7 +191,7 @@ var _excluded = ["attachments", "mentioned_users", "parent_id", "text"],
     _excluded2 = ["__html", "attachments", "created_at", "html", "id", "mentioned_users", "parent_id", "quoted_message", "reactions", "status", "text", "type", "updated_at", "user"];
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Channel/Channel.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Channel/Channel.tsx";
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -232,10 +232,9 @@ var debounceOptions = {
   leading: true,
   trailing: true
 };
-var unreadMessagesOnInitialLoadLimit = 2;
 
 var ChannelWithContext = function ChannelWithContext(props) {
-  var _client$user, _channel$data, _ref21, _ref22;
+  var _client$user, _channel$data, _ref22, _ref23;
 
   var additionalKeyboardAvoidingViewProps = props.additionalKeyboardAvoidingViewProps,
       additionalTextInputProps = props.additionalTextInputProps,
@@ -312,8 +311,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
       giphyEnabled = props.giphyEnabled,
       _props$giphyVersion = props.giphyVersion,
       giphyVersion = _props$giphyVersion === void 0 ? 'fixed_height' : _props$giphyVersion,
-      _props$globalUnreadCo = props.globalUnreadCountLimit,
-      globalUnreadCountLimit = _props$globalUnreadCo === void 0 ? 255 : _props$globalUnreadCo,
       handleBlock = props.handleBlock,
       handleCopy = props.handleCopy,
       handleDelete = props.handleDelete,
@@ -544,14 +541,19 @@ var ChannelWithContext = function ChannelWithContext(props) {
       syncingChannel = _useState26[0],
       setSyncingChannel = _useState26[1];
 
-  var _useTargetedMessage = (0, _useTargetedMessage2.useTargetedMessage)(messageId),
+  var _useState27 = (0, _react.useState)(true),
+      _useState28 = (0, _slicedToArray2["default"])(_useState27, 2),
+      hasNoMoreRecentMessagesToLoad = _useState28[0],
+      setHasNoMoreRecentMessagesToLoad = _useState28[1];
+
+  var _useTargetedMessage = (0, _useTargetedMessage2.useTargetedMessage)(),
       setTargetedMessage = _useTargetedMessage.setTargetedMessage,
       targetedMessage = _useTargetedMessage.targetedMessage;
 
   var channelId = (channel == null ? void 0 : channel.id) || '';
   (0, _react.useEffect)(function () {
     var initChannel = function initChannel() {
-      if (!channel || !shouldSyncChannel) return;
+      if (!channel || !shouldSyncChannel || channel.staticState) return;
 
       if (!channel.initialized) {
         loadChannel();
@@ -559,7 +561,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       }
 
       if (messageId) {
-        loadChannelAtMessage({
+        loadChannelAroundMessage({
           messageId: messageId
         });
         return;
@@ -714,34 +716,31 @@ var ChannelWithContext = function ChannelWithContext(props) {
       });
     };
   }, [channelId, connectionChangedHandler, connectionRecoveredHandler, handleEvent]);
-
-  var channelQueryCall = function () {
-    var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
-      var queryCall,
+  var channelQueryCallRef = (0, _react.useRef)(function () {
+    var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(queryCall) {
+      var onAfterQueryCall,
           _args = arguments;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              queryCall = _args.length > 0 && _args[0] !== undefined ? _args[0] : function () {
-                return null;
-              };
+              onAfterQueryCall = _args.length > 1 && _args[1] !== undefined ? _args[1] : undefined;
               setError(false);
-              setLoading(!(channel != null && channel.state.messages.length));
-              _context.prev = 3;
-              _context.next = 6;
+              _context.prev = 2;
+              _context.next = 5;
               return queryCall();
 
-            case 6:
+            case 5:
               setLastRead(new Date());
               setHasMore(true);
               copyChannelState();
+              onAfterQueryCall == null ? void 0 : onAfterQueryCall();
               _context.next = 16;
               break;
 
             case 11:
               _context.prev = 11;
-              _context.t0 = _context["catch"](3);
+              _context.t0 = _context["catch"](2);
 
               if (_context.t0 instanceof Error) {
                 setError(_context.t0);
@@ -757,108 +756,104 @@ var ChannelWithContext = function ChannelWithContext(props) {
               return _context.stop();
           }
         }
-      }, _callee, null, [[3, 11]]);
+      }, _callee, null, [[2, 11]]);
     }));
 
-    return function channelQueryCall() {
+    return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }();
+  }());
 
   var loadChannelAtFirstUnreadMessage = function loadChannelAtFirstUnreadMessage() {
     if (!channel) return;
     var unreadCount = channel.countUnread();
     if (unreadCount <= scrollToFirstUnreadThreshold) return;
-    channel.state.clearMessages();
-    channel.state.setIsUpToDate(false);
-    return channelQueryCall((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
-      var offset, mostRecentMessage, _mostRecentMessage;
-
+    setMessages([]);
+    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
+      var lastReadDate;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              if (!(unreadCount < globalUnreadCountLimit)) {
-                _context2.next = 10;
-                break;
-              }
-
-              offset = unreadCount - unreadMessagesOnInitialLoadLimit;
+              setLoading(true);
+              lastReadDate = channel.lastRead() || new Date(0);
               _context2.next = 4;
-              return query(offset, 30);
-
-            case 4:
-              if (!(channel.state.messages.length && channel.state.messages.length <= scrollToFirstUnreadThreshold && !channel.state.isUpToDate)) {
-                _context2.next = 8;
-                break;
-              }
-
-              mostRecentMessage = channel.state.messages[channel.state.messages.length - 1];
-              _context2.next = 8;
-              return queryAfterMessage(mostRecentMessage.id, 10 - channel.state.messages.length);
-
-            case 8:
-              _context2.next = 21;
-              break;
-
-            case 10:
-              _context2.next = 12;
               return channel.query({
                 messages: {
-                  created_at_before_or_equal: channel.lastRead() || new Date(0),
-                  limit: 30
+                  created_at_around: lastReadDate,
+                  limit: 25
                 }
               });
 
-            case 12:
-              if (!(channel.state.messages.length <= unreadMessagesOnInitialLoadLimit && !channel.state.isUpToDate)) {
-                _context2.next = 21;
-                break;
-              }
+            case 4:
+              setLoading(false);
+
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+  };
 
-              if (!(channel.state.messages.length > 0)) {
-                _context2.next = 19;
+  var loadChannelAroundMessage = function loadChannelAroundMessage(_ref3) {
+    var messageId = _ref3.messageId;
+    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              setHasNoMoreRecentMessagesToLoad(false);
+              setLoading(true);
+
+              if (!messageId) {
+                _context3.next = 7;
                 break;
               }
 
-              _mostRecentMessage = channel.state.messages[channel.state.messages.length - 1];
-              _context2.next = 17;
-              return queryAfterMessage(_mostRecentMessage.id, 5);
+              _context3.next = 5;
+              return channel.state.loadMessageIntoState(messageId);
 
-            case 17:
-              _context2.next = 21;
+            case 5:
+              _context3.next = 10;
               break;
 
-            case 19:
-              _context2.next = 21;
-              return channel.query({
-                messages: {
-                  created_at_after: channel.lastRead() || new Date(0),
-                  limit: 10
-                }
-              });
+            case 7:
+              _context3.next = 9;
+              return channel.state.loadMessageIntoState('latest');
 
-            case 21:
+            case 9:
+              channel.state.setIsUpToDate(true);
+
+            case 10:
+              setLoading(false);
+
+            case 11:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
-    })));
+      }, _callee3);
+    })), function () {
+      if (messageId) {
+        setTargetedMessage(messageId);
+      }
+    });
   };
 
-  var loadChannelAtMessage = function loadChannelAtMessage(_ref3) {
-    var _ref3$after = _ref3.after,
-        after = _ref3$after === void 0 ? 2 : _ref3$after,
-        _ref3$before = _ref3.before,
-        before = _ref3$before === void 0 ? 30 : _ref3$before,
-        messageId = _ref3.messageId;
-    return channelQueryCall((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
+  var loadChannelAtMessage = function loadChannelAtMessage(_ref5) {
+    var _ref5$after = _ref5.after,
+        after = _ref5$after === void 0 ? 2 : _ref5$after,
+        _ref5$before = _ref5.before,
+        before = _ref5$before === void 0 ? 30 : _ref5$before,
+        messageId = _ref5.messageId;
+    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context3.next = 2;
+              _context4.next = 2;
               return queryAtMessage({
                 after: after,
                 before: before,
@@ -872,78 +867,85 @@ var ChannelWithContext = function ChannelWithContext(props) {
 
             case 3:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3);
+      }, _callee4);
     })));
   };
 
   var loadChannel = function loadChannel() {
-    return channelQueryCall((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
+    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
+      return _regenerator["default"].wrap(function _callee5$(_context5) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context5.prev = _context5.next) {
             case 0:
               if (!(!(channel != null && channel.initialized) || !channel.state.isUpToDate)) {
-                _context4.next = 4;
+                _context5.next = 7;
                 break;
               }
 
-              _context4.next = 3;
+              _context5.next = 3;
               return channel == null ? void 0 : channel.watch();
 
             case 3:
+              setHasNoMoreRecentMessagesToLoad(true);
               channel == null ? void 0 : channel.state.setIsUpToDate(true);
+              _context5.next = 9;
+              break;
 
-            case 4:
-              return _context4.abrupt("return");
+            case 7:
+              _context5.next = 9;
+              return channel.state.loadMessageIntoState('latest');
 
-            case 5:
+            case 9:
+              return _context5.abrupt("return");
+
+            case 10:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
         }
-      }, _callee4);
+      }, _callee5);
     })));
   };
 
   var reloadThread = function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
+    var _ref8 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
       var parentID, limit, queryResponse, updatedHasMore, updatedThreadMessages, _yield$channel$getMes, _messages, _messages2, threadMessage, formattedMessage;
 
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
+      return _regenerator["default"].wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
               if (!(!channel || !(thread != null && thread.id))) {
-                _context5.next = 2;
+                _context6.next = 2;
                 break;
               }
 
-              return _context5.abrupt("return");
+              return _context6.abrupt("return");
 
             case 2:
               setThreadLoadingMore(true);
-              _context5.prev = 3;
+              _context6.prev = 3;
               parentID = thread.id;
               limit = 50;
               channel.state.threads[parentID] = [];
-              _context5.next = 9;
+              _context6.next = 9;
               return channel.getReplies(parentID, {
                 limit: limit
               });
 
             case 9:
-              queryResponse = _context5.sent;
+              queryResponse = _context6.sent;
               updatedHasMore = queryResponse.messages.length === limit;
               updatedThreadMessages = channel.state.threads[parentID] || [];
               loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
-              _context5.next = 15;
+              _context6.next = 15;
               return channel.getMessagesById([parentID]);
 
             case 15:
-              _yield$channel$getMes = _context5.sent;
+              _yield$channel$getMes = _context6.sent;
               _messages = _yield$channel$getMes.messages;
               _messages2 = (0, _slicedToArray2["default"])(_messages, 1), threadMessage = _messages2[0];
 
@@ -952,56 +954,56 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 setThread(formattedMessage);
               }
 
-              _context5.next = 27;
+              _context6.next = 27;
               break;
 
             case 21:
-              _context5.prev = 21;
-              _context5.t0 = _context5["catch"](3);
-              console.warn('Thread loading request failed with error', _context5.t0);
+              _context6.prev = 21;
+              _context6.t0 = _context6["catch"](3);
+              console.warn('Thread loading request failed with error', _context6.t0);
 
-              if (_context5.t0 instanceof Error) {
-                setError(_context5.t0);
+              if (_context6.t0 instanceof Error) {
+                setError(_context6.t0);
               } else {
                 setError(true);
               }
 
               setThreadLoadingMore(false);
-              throw _context5.t0;
+              throw _context6.t0;
 
             case 27:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
         }
-      }, _callee5, null, [[3, 21]]);
+      }, _callee6, null, [[3, 21]]);
     }));
 
     return function reloadThread() {
-      return _ref6.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
 
   var resyncChannel = function () {
-    var _ref7 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
+    var _ref9 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
       var _messages$, state, oldListTopMessage, oldListTopMessageId, oldListBottomMessage, newListTopMessage, newListBottomMessage, parseMessage, failedMessages, failedThreadMessages, oldListTopMessageCreatedAt, oldListBottomMessageCreatedAt, newListTopMessageCreatedAt, newListBottomMessageCreatedAt, finalMessages, index;
 
-      return _regenerator["default"].wrap(function _callee6$(_context6) {
+      return _regenerator["default"].wrap(function _callee7$(_context7) {
         while (1) {
-          switch (_context6.prev = _context6.next) {
+          switch (_context7.prev = _context7.next) {
             case 0:
               if (!(!channel || syncingChannel)) {
-                _context6.next = 2;
+                _context7.next = 2;
                 break;
               }
 
-              return _context6.abrupt("return");
+              return _context7.abrupt("return");
 
             case 2:
               setSyncingChannel(true);
               setError(false);
-              _context6.prev = 4;
-              _context6.next = 7;
+              _context7.prev = 4;
+              _context7.next = 7;
               return channel.watch({
                 messages: {
                   limit: messages.length + 30
@@ -1009,7 +1011,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               });
 
             case 7:
-              state = _context6.sent;
+              state = _context7.sent;
               oldListTopMessage = messages[0];
               oldListTopMessageId = (_messages$ = messages[0]) == null ? void 0 : _messages$.id;
               oldListBottomMessage = messages[messages.length - 1];
@@ -1017,7 +1019,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               newListBottomMessage = state.messages[state.messages.length - 1];
 
               if (!(!oldListTopMessage || !oldListBottomMessage || !newListTopMessage || !newListBottomMessage)) {
-                _context6.next = 19;
+                _context7.next = 19;
                 break;
               }
 
@@ -1025,7 +1027,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               channel.state.setIsUpToDate(true);
               channel.state.addMessagesSorted(state.messages);
               copyChannelState();
-              return _context6.abrupt("return");
+              return _context7.abrupt("return");
 
             case 19:
               parseMessage = function parseMessage(message) {
@@ -1059,6 +1061,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 finalMessages = state.messages;
               }
 
+              setHasNoMoreRecentMessagesToLoad(true);
               channel.state.setIsUpToDate(true);
               channel.state.clearMessages();
               channel.state.addMessagesSorted(finalMessages);
@@ -1070,122 +1073,79 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 copyChannelState();
               }
 
-              _context6.next = 36;
+              _context7.next = 37;
               return reloadThread();
 
-            case 36:
+            case 37:
               if (thread && failedThreadMessages.length) {
                 channel.state.addMessagesSorted(failedThreadMessages);
                 setThreadMessages((0, _toConsumableArray2["default"])(channel.state.threads[thread.id]));
               }
 
-              _context6.next = 43;
+              _context7.next = 44;
               break;
 
-            case 39:
-              _context6.prev = 39;
-              _context6.t0 = _context6["catch"](4);
+            case 40:
+              _context7.prev = 40;
+              _context7.t0 = _context7["catch"](4);
 
-              if (_context6.t0 instanceof Error) {
-                setError(_context6.t0);
+              if (_context7.t0 instanceof Error) {
+                setError(_context7.t0);
               } else {
                 setError(true);
               }
 
               setLoading(false);
 
-            case 43:
+            case 44:
               setSyncingChannel(false);
 
-            case 44:
+            case 45:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
         }
-      }, _callee6, null, [[4, 39]]);
+      }, _callee7, null, [[4, 40]]);
     }));
 
     return function resyncChannel() {
-      return _ref7.apply(this, arguments);
+      return _ref9.apply(this, arguments);
     };
   }();
 
   var reloadChannel = function reloadChannel() {
-    return channelQueryCall((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
-      return _regenerator["default"].wrap(function _callee7$(_context7) {
-        while (1) {
-          switch (_context7.prev = _context7.next) {
-            case 0:
-              _context7.next = 2;
-              return channel == null ? void 0 : channel.watch();
-
-            case 2:
-              channel == null ? void 0 : channel.state.setIsUpToDate(true);
-
-            case 3:
-            case "end":
-              return _context7.stop();
-          }
-        }
-      }, _callee7);
-    })));
-  };
-
-  var query = function () {
-    var _ref9 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee8() {
-      var offset,
-          limit,
-          _args8 = arguments;
+    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee8() {
       return _regenerator["default"].wrap(function _callee8$(_context8) {
         while (1) {
           switch (_context8.prev = _context8.next) {
             case 0:
-              offset = _args8.length > 0 && _args8[0] !== undefined ? _args8[0] : 0;
-              limit = _args8.length > 1 && _args8[1] !== undefined ? _args8[1] : 30;
-
-              if (channel) {
-                _context8.next = 4;
-                break;
-              }
-
-              return _context8.abrupt("return");
-
-            case 4:
-              channel.state.clearMessages();
-              _context8.next = 7;
-              return channel.query({
-                messages: {
-                  limit: limit,
-                  offset: offset
-                },
-                watch: true
-              });
+              setLoading(true);
+              _context8.next = 3;
+              return channel.state.loadMessageIntoState('latest');
 
-            case 7:
-              channel.state.setIsUpToDate(offset === 0);
+            case 3:
+              setLoading(false);
+              setHasNoMoreRecentMessagesToLoad(true);
+              channel == null ? void 0 : channel.state.setIsUpToDate(true);
 
-            case 8:
+            case 6:
             case "end":
               return _context8.stop();
           }
         }
       }, _callee8);
-    }));
-
-    return function query() {
-      return _ref9.apply(this, arguments);
-    };
-  }();
+    })));
+  };
 
   var queryAtMessage = function () {
-    var _ref11 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee9(_ref10) {
-      var _ref10$after, after, _ref10$before, before, messageId;
+    var _ref12 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee9(_ref11) {
+      var _ref11$after, after, _ref11$before, before, messageId;
 
       return _regenerator["default"].wrap(function _callee9$(_context9) {
         while (1) {
           switch (_context9.prev = _context9.next) {
             case 0:
-              _ref10$after = _ref10.after, after = _ref10$after === void 0 ? 10 : _ref10$after, _ref10$before = _ref10.before, before = _ref10$before === void 0 ? 10 : _ref10$before, messageId = _ref10.messageId;
+              _ref11$after = _ref11.after, after = _ref11$after === void 0 ? 10 : _ref11$after, _ref11$before = _ref11.before, before = _ref11$before === void 0 ? 10 : _ref11$before, messageId = _ref11.messageId;
 
               if (channel) {
                 _context9.next = 3;
@@ -1232,13 +1192,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
       }, _callee9);
     }));
 
-    return function queryAtMessage(_x) {
-      return _ref11.apply(this, arguments);
+    return function queryAtMessage(_x2) {
+      return _ref12.apply(this, arguments);
     };
   }();
 
   var queryBeforeMessage = function () {
-    var _ref12 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee10(messageId) {
+    var _ref13 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee10(messageId) {
       var limit,
           _args10 = arguments;
       return _regenerator["default"].wrap(function _callee10$(_context10) {
@@ -1275,13 +1235,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
       }, _callee10);
     }));
 
-    return function queryBeforeMessage(_x2) {
-      return _ref12.apply(this, arguments);
+    return function queryBeforeMessage(_x3) {
+      return _ref13.apply(this, arguments);
     };
   }();
 
   var queryAfterMessage = function () {
-    var _ref13 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee11(messageId) {
+    var _ref14 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee11(messageId) {
       var limit,
           state,
           _args11 = arguments;
@@ -1325,8 +1285,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
       }, _callee11);
     }));
 
-    return function queryAfterMessage(_x3) {
-      return _ref13.apply(this, arguments);
+    return function queryAfterMessage(_x4) {
+      return _ref14.apply(this, arguments);
     };
   }();
 
@@ -1370,12 +1330,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
     }
   };
 
-  var createMessagePreview = function createMessagePreview(_ref14) {
-    var attachments = _ref14.attachments,
-        mentioned_users = _ref14.mentioned_users,
-        parent_id = _ref14.parent_id,
-        text = _ref14.text,
-        extraFields = (0, _objectWithoutProperties2["default"])(_ref14, _excluded);
+  var createMessagePreview = function createMessagePreview(_ref15) {
+    var attachments = _ref15.attachments,
+        mentioned_users = _ref15.mentioned_users,
+        parent_id = _ref15.parent_id,
+        text = _ref15.text,
+        extraFields = (0, _objectWithoutProperties2["default"])(_ref15, _excluded);
     var preview = (0, _extends2["default"])({
       __html: text,
       attachments: attachments,
@@ -1409,7 +1369,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
   };
 
   var sendMessageRequest = function () {
-    var _ref15 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(message, retrying) {
+    var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(message, retrying) {
       var __html, attachments, created_at, html, id, mentioned_users, parent_id, quoted_message, reactions, status, text, type, updated_at, user, extraFields, messageData, messageResponse;
 
       return _regenerator["default"].wrap(function _callee12$(_context12) {
@@ -1483,13 +1443,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
       }, _callee12, null, [[2, 17]]);
     }));
 
-    return function sendMessageRequest(_x4, _x5) {
-      return _ref15.apply(this, arguments);
+    return function sendMessageRequest(_x5, _x6) {
+      return _ref16.apply(this, arguments);
     };
   }();
 
   var sendMessage = function () {
-    var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(message) {
+    var _ref17 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(message) {
       var _channel$state;
 
       var messagePreview;
@@ -1529,13 +1489,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
       }, _callee13);
     }));
 
-    return function sendMessage(_x6) {
-      return _ref16.apply(this, arguments);
+    return function sendMessage(_x7) {
+      return _ref17.apply(this, arguments);
     };
   }();
 
   var retrySendMessage = function () {
-    var _ref17 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14(message) {
+    var _ref18 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14(message) {
       var statusPendingMessage;
       return _regenerator["default"].wrap(function _callee14$(_context14) {
         while (1) {
@@ -1556,8 +1516,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
       }, _callee14);
     }));
 
-    return function retrySendMessage(_x7) {
-      return _ref17.apply(this, arguments);
+    return function retrySendMessage(_x8) {
+      return _ref18.apply(this, arguments);
     };
   }();
 
@@ -1569,7 +1529,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
   }, defaultDebounceInterval, debounceOptions)).current;
 
   var loadMore = function () {
-    var _ref18 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15() {
+    var _ref19 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15() {
       var limit,
           oldestMessage,
           oldestID,
@@ -1632,13 +1592,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
               loadMoreFinished(updatedHasMore, channel.state.messages);
 
             case 17:
-              _context15.next = 25;
+              _context15.next = 24;
               break;
 
             case 19:
               _context15.prev = 19;
               _context15.t0 = _context15["catch"](10);
-              console.warn('Message pagination request failed with error', _context15.t0);
 
               if (_context15.t0 instanceof Error) {
                 setError(_context15.t0);
@@ -1649,7 +1608,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               setLoadingMore(false);
               throw _context15.t0;
 
-            case 25:
+            case 24:
             case "end":
               return _context15.stop();
           }
@@ -1658,14 +1617,15 @@ var ChannelWithContext = function ChannelWithContext(props) {
     }));
 
     return function loadMore() {
-      return _ref18.apply(this, arguments);
+      return _ref19.apply(this, arguments);
     };
   }();
 
   var loadMoreRecent = function () {
-    var _ref19 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee16() {
+    var _ref20 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee16() {
       var limit,
           recentMessage,
+          state,
           _args16 = arguments;
       return _regenerator["default"].wrap(function _callee16$(_context16) {
         while (1) {
@@ -1673,7 +1633,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             case 0:
               limit = _args16.length > 0 && _args16[0] !== undefined ? _args16[0] : 5;
 
-              if (!(channel != null && channel.state.isUpToDate)) {
+              if (!hasNoMoreRecentMessagesToLoad) {
                 _context16.next = 3;
                 break;
               }
@@ -1696,22 +1656,30 @@ var ChannelWithContext = function ChannelWithContext(props) {
               _context16.prev = 8;
 
               if (!channel) {
-                _context16.next = 13;
+                _context16.next = 15;
                 break;
               }
 
               _context16.next = 12;
-              return queryAfterMessage(recentMessage.id, limit);
+              return channel.query({
+                messages: {
+                  id_gte: recentMessage.id,
+                  limit: limit
+                },
+                watch: true
+              });
 
             case 12:
+              state = _context16.sent;
+              setHasNoMoreRecentMessagesToLoad(state.messages.length < limit);
               loadMoreRecentFinished(channel.state.messages);
 
-            case 13:
-              _context16.next = 21;
+            case 15:
+              _context16.next = 23;
               break;
 
-            case 15:
-              _context16.prev = 15;
+            case 17:
+              _context16.prev = 17;
               _context16.t0 = _context16["catch"](8);
               console.warn('Message pagination request failed with error', _context16.t0);
 
@@ -1724,16 +1692,16 @@ var ChannelWithContext = function ChannelWithContext(props) {
               setLoadingMoreRecent(false);
               throw _context16.t0;
 
-            case 21:
+            case 23:
             case "end":
               return _context16.stop();
           }
         }
-      }, _callee16, null, [[8, 15]]);
+      }, _callee16, null, [[8, 17]]);
     }));
 
     return function loadMoreRecent() {
-      return _ref19.apply(this, arguments);
+      return _ref20.apply(this, arguments);
     };
   }();
 
@@ -1793,7 +1761,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
   }, defaultDebounceInterval, debounceOptions)).current;
 
   var loadMoreThread = function () {
-    var _ref20 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee17() {
+    var _ref21 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee17() {
       var _threadMessages$, parentID, oldestMessageID, limit, queryResponse, updatedHasMore, updatedThreadMessages;
 
       return _regenerator["default"].wrap(function _callee17$(_context17) {
@@ -1859,7 +1827,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     }));
 
     return function loadMoreThread() {
-      return _ref20.apply(this, arguments);
+      return _ref21.apply(this, arguments);
     };
   }();
 
@@ -1874,7 +1842,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     enableMessageGroupingByUser: enableMessageGroupingByUser,
     enforceUniqueReaction: enforceUniqueReaction,
     error: error,
-    giphyEnabled: giphyEnabled != null ? giphyEnabled : !!((_ref21 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref21.some(function (command) {
+    giphyEnabled: giphyEnabled != null ? giphyEnabled : !!((_ref22 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref22.some(function (command) {
       return command.name === 'giphy';
     })),
     hideDateSeparators: hideDateSeparators,
@@ -1884,6 +1852,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     isModerator: isModerator,
     isOwner: isOwner,
     lastRead: lastRead,
+    loadChannelAroundMessage: loadChannelAroundMessage,
     loadChannelAtMessage: loadChannelAtMessage,
     loading: loading,
     LoadingIndicator: LoadingIndicator,
@@ -1928,7 +1897,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     InputEditingStateHeader: InputEditingStateHeader,
     InputGiphySearch: InputGiphySearch,
     InputReplyStateHeader: InputReplyStateHeader,
-    maxMessageLength: (_ref22 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref22 : undefined,
+    maxMessageLength: (_ref23 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref23 : undefined,
     maxNumberOfFiles: maxNumberOfFiles,
     mentionAllAppUsersEnabled: mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery: mentionAllAppUsersQuery,
@@ -1948,6 +1917,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
   var messageListContext = (0, _useCreatePaginatedMessageListContext.useCreatePaginatedMessageListContext)({
     channelId: channelId,
     hasMore: hasMore,
+    hasNoMoreRecentMessagesToLoad: hasNoMoreRecentMessagesToLoad,
     loadingMore: loadingMoreProp !== undefined ? loadingMoreProp : loadingMore,
     loadingMoreRecent: loadingMoreRecentProp !== undefined ? loadingMoreRecentProp : loadingMoreRecent,
     loadMore: loadMore,
@@ -1993,7 +1963,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     handleThreadReply: handleThreadReply,
     ImageLoadingFailedIndicator: ImageLoadingFailedIndicator,
     ImageLoadingIndicator: ImageLoadingIndicator,
-    initialScrollToFirstUnreadMessage: initialScrollToFirstUnreadMessage,
+    initialScrollToFirstUnreadMessage: !messageId && initialScrollToFirstUnreadMessage,
     InlineDateSeparator: InlineDateSeparator,
     InlineUnreadIndicator: InlineUnreadIndicator,
     isAttachmentEqual: isAttachmentEqual,
@@ -2066,7 +2036,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1786,
+        lineNumber: 1751,
         columnNumber: 12
       }
     });
@@ -2081,7 +2051,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1791,
+        lineNumber: 1756,
         columnNumber: 7
       }
     }, t('Please select a channel first'));
@@ -2095,7 +2065,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1798,
+      lineNumber: 1763,
       columnNumber: 5
     }
   }), _react["default"].createElement(_ChannelContext.ChannelProvider, {
@@ -2103,7 +2073,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1804,
+      lineNumber: 1769,
       columnNumber: 7
     }
   }, _react["default"].createElement(_OwnCapabilitiesContext.OwnCapabilitiesProvider, {
@@ -2111,7 +2081,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1805,
+      lineNumber: 1770,
       columnNumber: 9
     }
   }, _react["default"].createElement(_TypingContext.TypingProvider, {
@@ -2119,7 +2089,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1806,
+      lineNumber: 1771,
       columnNumber: 11
     }
   }, _react["default"].createElement(_PaginatedMessageListContext.PaginatedMessageListProvider, {
@@ -2127,7 +2097,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1807,
+      lineNumber: 1772,
       columnNumber: 13
     }
   }, _react["default"].createElement(_MessagesContext.MessagesProvider, {
@@ -2135,7 +2105,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1808,
+      lineNumber: 1773,
       columnNumber: 15
     }
   }, _react["default"].createElement(_ThreadContext.ThreadProvider, {
@@ -2143,7 +2113,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1809,
+      lineNumber: 1774,
       columnNumber: 17
     }
   }, _react["default"].createElement(_SuggestionsContext.SuggestionsProvider, {
@@ -2151,7 +2121,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1810,
+      lineNumber: 1775,
       columnNumber: 19
     }
   }, _react["default"].createElement(_MessageInputContext.MessageInputProvider, {
@@ -2159,7 +2129,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1811,
+      lineNumber: 1776,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -2169,7 +2139,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1812,
+      lineNumber: 1777,
       columnNumber: 23
     }
   }, children))))))))));
@@ -2224,7 +2194,7 @@ var Channel = function Channel(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1869,
+      lineNumber: 1834,
       columnNumber: 5
     }
   }));