stream-chat-react-native-core 6.7.0 → 6.7.1-beta.2

package/lib/commonjs/components/MessageList/MessageList.js

@@ -75,8 +75,27 @@ var keyExtractor = function keyExtractor(item) {
 var flatListViewabilityConfig = {
   viewAreaCoveragePercentThreshold: 1
 };
+var hasReadLastMessage = function hasReadLastMessage(channel, userId) {
+  var _channel$state$latest, _channel$state$read$u;
+  var latestMessageIdInChannel = (_channel$state$latest = channel.state.latestMessages.slice(-1)[0]) == null ? void 0 : _channel$state$latest.id;
+  var lastReadMessageIdServer = (_channel$state$read$u = channel.state.read[userId]) == null ? void 0 : _channel$state$read$u.last_read_message_id;
+  return latestMessageIdInChannel === lastReadMessageIdServer;
+};
+var getPreviousLastMessage = function getPreviousLastMessage(messages, newMessage) {
+  if (!newMessage) return;
+  var previousLastMessage;
+  for (var i = messages.length - 1; i >= 0; i--) {
+    var msg = messages[i];
+    if (!(msg != null && msg.id)) break;
+    if (msg.id !== newMessage.id) {
+      previousLastMessage = msg;
+      break;
+    }
+  }
+  return previousLastMessage;
+};
 var MessageListWithContext = function MessageListWithContext(props) {
-  var _getLastReceivedMessa;
+  var _getLastReceivedMessa, _client$user3;
   var LoadingMoreRecentIndicator = props.threadList ? _InlineLoadingMoreRecentThreadIndicator.InlineLoadingMoreRecentThreadIndicator : _InlineLoadingMoreRecentIndicator.InlineLoadingMoreRecentIndicator;
   var additionalFlatListProps = props.additionalFlatListProps,
     channel = props.channel,
@@ -120,6 +139,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     reloadChannel = props.reloadChannel,
     ScrollToBottomButton = props.ScrollToBottomButton,
     selectedPicker = props.selectedPicker,
+    setChannelUnreadState = props.setChannelUnreadState,
     setFlatListRef = props.setFlatListRef,
     setMessages = props.setMessages,
     setSelectedPicker = props.setSelectedPicker,
@@ -229,10 +249,15 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
     var lastItem = viewableItems[viewableItems.length - 1];
     if (lastItem) {
-      var lastItemCreatedAt = lastItem.item.created_at;
+      var lastItemMessage = lastItem.item;
+      var lastItemCreatedAt = lastItemMessage.created_at;
       var unreadIndicatorDate = channelUnreadState == null ? void 0 : channelUnreadState.last_read.getTime();
       var lastItemDate = lastItemCreatedAt.getTime();
-      if (!channel.state.messagePagination.hasPrev && processedMessageList[processedMessageList.length - 1].id === lastItem.item.id) {
+      if (!channel.state.messagePagination.hasPrev && processedMessageList[processedMessageList.length - 1].id === lastItemMessage.id) {
+        setIsUnreadNotificationOpen(false);
+        return;
+      }
+      if (viewableItems.length === 1 && channel.countUnread() === 0 && lastItemMessage.user.id === client.userID) {
         setIsUnreadNotificationOpen(false);
         return;
       }
@@ -271,18 +296,55 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
   }, [disabled]);
   (0, _react.useEffect)(function () {
-    var listener = channel.on('message.new', function (event) {
-      var _event$message, _event$message2;
-      var newMessageToCurrentChannel = event.cid === channel.cid;
-      var mainChannelUpdated = !((_event$message = event.message) != null && _event$message.parent_id) || ((_event$message2 = event.message) == null ? void 0 : _event$message2.show_in_channel);
-      if (newMessageToCurrentChannel && mainChannelUpdated && !scrollToBottomButtonVisible) {
-        markRead();
-      }
-    });
+    var shouldMarkRead = function shouldMarkRead() {
+      var _client$user, _client$user2;
+      return !(channelUnreadState != null && channelUnreadState.first_unread_message_id) && !scrollToBottomButtonVisible && ((_client$user = client.user) == null ? void 0 : _client$user.id) && !hasReadLastMessage(channel, (_client$user2 = client.user) == null ? void 0 : _client$user2.id);
+    };
+    var handleEvent = function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(event) {
+        var _event$message, _event$message2;
+        var mainChannelUpdated;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              mainChannelUpdated = !((_event$message = event.message) != null && _event$message.parent_id) || ((_event$message2 = event.message) == null ? void 0 : _event$message2.show_in_channel);
+              if (!(scrollToBottomButtonVisible || channelUnreadState != null && channelUnreadState.first_unread_message_id)) {
+                _context.next = 5;
+                break;
+              }
+              setChannelUnreadState(function (prev) {
+                var _prev$unread_messages, _prev$last_read;
+                var previousUnreadCount = (_prev$unread_messages = prev == null ? void 0 : prev.unread_messages) != null ? _prev$unread_messages : 0;
+                var previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
+                return Object.assign({}, prev || {}, {
+                  last_read: (_prev$last_read = prev == null ? void 0 : prev.last_read) != null ? _prev$last_read : previousUnreadCount === 0 && previousLastMessage != null && previousLastMessage.created_at ? new Date(previousLastMessage.created_at) : new Date(0),
+                  unread_messages: previousUnreadCount + 1
+                });
+              });
+              _context.next = 8;
+              break;
+            case 5:
+              if (!(mainChannelUpdated && shouldMarkRead())) {
+                _context.next = 8;
+                break;
+              }
+              _context.next = 8;
+              return markRead();
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function handleEvent(_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    var listener = channel.on('message.new', handleEvent);
     return function () {
       listener == null || listener.unsubscribe();
     };
-  }, [channel, markRead, scrollToBottomButtonVisible]);
+  }, [channel, channelUnreadState == null ? void 0 : channelUnreadState.first_unread_message_id, (_client$user3 = client.user) == null ? void 0 : _client$user3.id, markRead, scrollToBottomButtonVisible, setChannelUnreadState, threadList]);
   (0, _react.useEffect)(function () {
     var lastReceivedMessage = (0, _getLastReceivedMessage.getLastReceivedMessage)(processedMessageList);
     setLastReceivedId(lastReceivedMessage == null ? void 0 : lastReceivedMessage.id);
@@ -305,6 +367,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
         setTimeout(function () {
           channelResyncScrollSet.current = true;
           if (channel.countUnread() > 0) {
+            console.log('marking read');
             markRead();
           }
         }, 500);
@@ -354,31 +417,31 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
   }, [channel, rawMessageList, threadList]);
   var goToMessage = function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(messageId) {
+    var _ref4 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2(messageId) {
       var indexOfParentInMessageList;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             indexOfParentInMessageList = processedMessageList.findIndex(function (message) {
               return (message == null ? void 0 : message.id) === messageId;
             });
-            _context.prev = 1;
+            _context2.prev = 1;
             if (!(indexOfParentInMessageList === -1)) {
-              _context.next = 8;
+              _context2.next = 8;
               break;
             }
-            _context.next = 5;
+            _context2.next = 5;
             return loadChannelAroundMessage({
               messageId: messageId
             });
           case 5:
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 8:
             if (flatListRef.current) {
-              _context.next = 10;
+              _context2.next = 10;
               break;
             }
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 10:
             clearTimeout(failScrollTimeoutId.current);
             scrollToIndexFailedRetryCountRef.current = 0;
@@ -389,54 +452,54 @@ var MessageListWithContext = function MessageListWithContext(props) {
               index: indexOfParentInMessageList,
               viewPosition: 0.5
             });
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 16:
-            _context.next = 21;
+            _context2.next = 21;
             break;
           case 18:
-            _context.prev = 18;
-            _context.t0 = _context["catch"](1);
-            console.warn('Error while scrolling to message', _context.t0);
+            _context2.prev = 18;
+            _context2.t0 = _context2["catch"](1);
+            console.warn('Error while scrolling to message', _context2.t0);
           case 21:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee, null, [[1, 18]]);
+      }, _callee2, null, [[1, 18]]);
     }));
-    return function goToMessage(_x) {
-      return _ref3.apply(this, arguments);
+    return function goToMessage(_x2) {
+      return _ref4.apply(this, arguments);
     };
   }();
   (0, _react.useEffect)(function () {
     if (!targetedMessage) {
       return;
     }
-    scrollToDebounceTimeoutRef.current = setTimeout((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
+    scrollToDebounceTimeoutRef.current = setTimeout((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
       var indexOfParentInMessageList;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
             indexOfParentInMessageList = processedMessageList.findIndex(function (message) {
               return (message == null ? void 0 : message.id) === targetedMessage;
             });
             if (!(indexOfParentInMessageList === -1)) {
-              _context2.next = 6;
+              _context3.next = 6;
               break;
             }
-            _context2.next = 4;
+            _context3.next = 4;
             return loadChannelAroundMessage({
               messageId: targetedMessage,
               setTargetedMessage: setTargetedMessage
             });
           case 4:
-            _context2.next = 13;
+            _context3.next = 13;
             break;
           case 6:
             if (flatListRef.current) {
-              _context2.next = 8;
+              _context3.next = 8;
               break;
             }
-            return _context2.abrupt("return");
+            return _context3.abrupt("return");
           case 8:
             clearTimeout(scrollToDebounceTimeoutRef.current);
             clearTimeout(failScrollTimeoutId.current);
@@ -449,16 +512,16 @@ var MessageListWithContext = function MessageListWithContext(props) {
             setTargetedMessage(undefined);
           case 13:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2);
+      }, _callee3);
     })), WAIT_FOR_SCROLL_TIMEOUT);
   }, [targetedMessage]);
   var shouldApplyAndroidWorkaround = inverted && _reactNative.Platform.OS === 'android';
-  var renderItem = function renderItem(_ref5) {
+  var renderItem = function renderItem(_ref6) {
     var _message$user;
-    var index = _ref5.index,
-      message = _ref5.item;
+    var index = _ref6.index,
+      message = _ref6.item;
     if (!channel || channel.disconnected || !channel.initialized && !channel.offlineMode) {
       return null;
     }
@@ -504,16 +567,16 @@ var MessageListWithContext = function MessageListWithContext(props) {
     });
   };
   var maybeCallOnStartReached = function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
+    var _ref7 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
       var callback, onError;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
           case 0:
             if (!(processedMessageList != null && processedMessageList.length && onStartReachedTracker.current[processedMessageList.length])) {
-              _context3.next = 2;
+              _context4.next = 2;
               break;
             }
-            return _context3.abrupt("return");
+            return _context4.abrupt("return");
           case 2:
             if (processedMessageList != null && processedMessageList.length) {
               onStartReachedTracker.current[processedMessageList.length] = true;
@@ -528,34 +591,34 @@ var MessageListWithContext = function MessageListWithContext(props) {
               }, 2000);
             };
             if (!onEndReachedInPromise.current) {
-              _context3.next = 8;
+              _context4.next = 8;
               break;
             }
-            _context3.next = 8;
+            _context4.next = 8;
             return onEndReachedInPromise.current;
           case 8:
             onStartReachedInPromise.current = (threadList && !!threadInstance && loadMoreRecentThread ? loadMoreRecentThread({}) : loadMoreRecent()).then(callback)["catch"](onError);
           case 9:
           case "end":
-            return _context3.stop();
+            return _context4.stop();
         }
-      }, _callee3);
+      }, _callee4);
     }));
     return function maybeCallOnStartReached() {
-      return _ref6.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   var maybeCallOnEndReached = function () {
-    var _ref7 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
+    var _ref8 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
       var callback, onError;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
+      return _regenerator["default"].wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
           case 0:
             if (!(processedMessageList != null && processedMessageList.length && onEndReachedTracker.current[processedMessageList.length])) {
-              _context4.next = 2;
+              _context5.next = 2;
               break;
             }
-            return _context4.abrupt("return");
+            return _context5.abrupt("return");
           case 2:
             if (processedMessageList != null && processedMessageList.length) {
               onEndReachedTracker.current[processedMessageList.length] = true;
@@ -570,21 +633,21 @@ var MessageListWithContext = function MessageListWithContext(props) {
               }, 2000);
             };
             if (!onStartReachedInPromise.current) {
-              _context4.next = 8;
+              _context5.next = 8;
               break;
             }
-            _context4.next = 8;
+            _context5.next = 8;
             return onStartReachedInPromise.current;
           case 8:
             onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback)["catch"](onError);
           case 9:
           case "end":
-            return _context4.stop();
+            return _context5.stop();
         }
-      }, _callee4);
+      }, _callee5);
     }));
     return function maybeCallOnEndReached() {
-      return _ref7.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
   var onUserScrollEvent = function onUserScrollEvent(event) {
@@ -617,21 +680,21 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
   };
   var goToNewMessages = function () {
-    var _ref8 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
+    var _ref9 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
       var isNotLatestSet;
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+      return _regenerator["default"].wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
             isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
             if (!isNotLatestSet) {
-              _context5.next = 7;
+              _context6.next = 7;
               break;
             }
             resetPaginationTrackersRef.current();
-            _context5.next = 5;
+            _context6.next = 5;
             return reloadChannel();
           case 5:
-            _context5.next = 8;
+            _context6.next = 8;
             break;
           case 7:
             if (flatListRef.current) {
@@ -642,14 +705,18 @@ var MessageListWithContext = function MessageListWithContext(props) {
             }
           case 8:
             setScrollToBottomButtonVisible(false);
-          case 9:
+            _context6.next = 11;
+            return markRead({
+              updateChannelUnreadState: false
+            });
+          case 11:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
-      }, _callee5);
+      }, _callee6);
     }));
     return function goToNewMessages() {
-      return _ref8.apply(this, arguments);
+      return _ref9.apply(this, arguments);
     };
   }();
   var scrollToIndexFailedRetryCountRef = (0, _react.useRef)(0);
@@ -723,22 +790,22 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
   };
   var onUnreadNotificationClose = function () {
-    var _ref9 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
-      return _regenerator["default"].wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
+    var _ref10 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
+      return _regenerator["default"].wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
-            _context6.next = 2;
+            _context7.next = 2;
             return markRead();
           case 2:
             setIsUnreadNotificationOpen(false);
           case 3:
           case "end":
-            return _context6.stop();
+            return _context7.stop();
         }
-      }, _callee6);
+      }, _callee7);
     }));
     return function onUnreadNotificationClose() {
-      return _ref9.apply(this, arguments);
+      return _ref10.apply(this, arguments);
     };
   }();
   var debugRef = (0, _DebugContext.useDebugContext)();
@@ -875,6 +942,7 @@ var MessageList = exports.MessageList = function MessageList(props) {
     NetworkDownIndicator = _useChannelContext.NetworkDownIndicator,
     reloadChannel = _useChannelContext.reloadChannel,
     scrollToFirstUnreadThreshold = _useChannelContext.scrollToFirstUnreadThreshold,
+    setChannelUnreadState = _useChannelContext.setChannelUnreadState,
     setTargetedMessage = _useChannelContext.setTargetedMessage,
     StickyHeader = _useChannelContext.StickyHeader,
     targetedMessage = _useChannelContext.targetedMessage,
@@ -943,6 +1011,7 @@ var MessageList = exports.MessageList = function MessageList(props) {
     ScrollToBottomButton: ScrollToBottomButton,
     scrollToFirstUnreadThreshold: scrollToFirstUnreadThreshold,
     selectedPicker: selectedPicker,
+    setChannelUnreadState: setChannelUnreadState,
     setMessages: setMessages,
     setSelectedPicker: setSelectedPicker,
     setTargetedMessage: setTargetedMessage,