@knocklabs/client 0.8.2 → 0.8.4

package/dist/cjs/clients/feed/feed.js

@@ -27,11 +27,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function invertStatus(status) {
-  return status.startsWith("un") ? status.substring(2, status.length) : "un".concat(status);
-} // Default options to apply
-
-
+// Default options to apply
 var feedClientDefaults = {
   archived: "exclude"
 };
@@ -49,6 +45,7 @@ var Feed = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "channel", void 0);
     (0, _defineProperty2["default"])(this, "broadcaster", void 0);
     (0, _defineProperty2["default"])(this, "defaultOptions", void 0);
+    (0, _defineProperty2["default"])(this, "broadcastChannel", void 0);
     (0, _defineProperty2["default"])(this, "store", void 0);
     this.apiClient = knock.client();
     this.feedId = feedId;
@@ -62,7 +59,10 @@ var Feed = /*#__PURE__*/function () {
     this.channel = this.apiClient.socket.channel("feeds:".concat(this.userFeedId), this.defaultOptions);
     this.channel.on("new-message", function (resp) {
       return _this.onNewMessageReceived(resp);
-    });
+    }); // Attempt to bind to listen to other events from this feed in different tabs
+    // Note: here we ensure `self` is available (it's not in server rendered envs)
+
+    this.broadcastChannel = self && "BroadcastChannel" in self ? new BroadcastChannel("knock:feed:".concat(this.userFeedId)) : null;
   }
   /**
    * Cleans up a feed instance by destroying the store and disconnecting
@@ -77,6 +77,10 @@ var Feed = /*#__PURE__*/function () {
       this.broadcaster.removeAllListeners();
       this.channel.off("new-message");
       this.store.destroy();
+
+      if (this.broadcastChannel) {
+        this.broadcastChannel.close();
+      }
     }
     /*
       Initializes a real-time connection to Knock, connecting the websocket for the
@@ -86,6 +90,8 @@ var Feed = /*#__PURE__*/function () {
   }, {
     key: "listenForUpdates",
     value: function listenForUpdates() {
+      var _this2 = this;
+
       // Connect the socket only if we don't already have a connection
       if (!this.apiClient.socket.isConnected()) {
         this.apiClient.socket.connect();
@@ -94,6 +100,32 @@ var Feed = /*#__PURE__*/function () {
 
       if (["closed", "errored"].includes(this.channel.state)) {
         this.channel.join();
+      } // Opt into receiving updates from _other tabs for the same user / feed_ via the broadcast
+      // channel (iff it's enabled and exists)
+
+
+      if (this.broadcastChannel && this.defaultOptions.__experimentalCrossBrowserUpdates === true) {
+        this.broadcastChannel.onmessage = function (e) {
+          switch (e.data.type) {
+            case "items:archived":
+            case "items:unarchived":
+            case "items:seen":
+            case "items:unseen":
+            case "items:read":
+            case "items:unread":
+            case "items:all_read":
+            case "items:all_seen":
+            case "items:all_archived":
+              // When items are updated in any other tab, simply refetch to get the latest state
+              // to make sure that the state gets updated accordingly. In the future here we could
+              // maybe do this optimistically without the fetch.
+              return _this2.fetch();
+              break;
+
+            default:
+              return null;
+          }
+        };
       }
     }
     /* Binds a handler to be invoked when event occurs */
@@ -143,24 +175,104 @@ var Feed = /*#__PURE__*/function () {
       return markAsSeen;
     }()
   }, {
-    key: "markAsUnseen",
+    key: "markAllAsSeen",
     value: function () {
-      var _markAsUnseen = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(itemOrItems) {
+      var _markAllAsSeen = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        var _this$store, getState, setState, _getState, metadata, items, isViewingOnlyUnseen, attrs, itemIds, result;
+
         return _regenerator["default"].wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
+              case 0:
+                // To mark all of the messages as seen we:
+                // 1. Optimistically update *everything* we have in the store
+                // 2. We decrement the `unseen_count` to zero optimistically
+                // 3. We issue the API call to the endpoint
+                //
+                // Note: there is the potential for a race condition here because the bulk
+                // update is an async method, so if a new message comes in during this window before
+                // the update has been processed we'll effectively reset the `unseen_count` to be what it was.
+                //
+                // Note: here we optimistically handle the case whereby the feed is scoped to show only `unseen`
+                // items by removing everything from view.
+                _this$store = this.store, getState = _this$store.getState, setState = _this$store.setState;
+                _getState = getState(), metadata = _getState.metadata, items = _getState.items;
+                isViewingOnlyUnseen = this.defaultOptions.status === "unseen"; // If we're looking at the unseen view, then we want to remove all of the items optimistically
+                // from the store given that nothing should be visible. We do this by resetting the store state
+                // and setting the current metadata counts to 0
+
+                if (isViewingOnlyUnseen) {
+                  setState(function (store) {
+                    return store.resetStore(_objectSpread(_objectSpread({}, metadata), {}, {
+                      total_count: 0,
+                      unseen_count: 0
+                    }));
+                  });
+                } else {
+                  // Otherwise we want to update the metadata and mark all of the items in the store as seen
+                  setState(function (store) {
+                    return store.setMetadata(_objectSpread(_objectSpread({}, metadata), {}, {
+                      unseen_count: 0
+                    }));
+                  });
+                  attrs = {
+                    seen_at: new Date().toISOString()
+                  };
+                  itemIds = items.map(function (item) {
+                    return item.id;
+                  });
+                  setState(function (store) {
+                    return store.setItemAttrs(itemIds, attrs);
+                  });
+                } // Issue the API request to the bulk status change API
+
+
+                _context2.next = 6;
+                return this.makeBulkStatusUpdate("seen");
+
+              case 6:
+                result = _context2.sent;
+                this.broadcaster.emit("items:all_seen", {
+                  items: items
+                });
+                this.broadcastOverChannel("items:all_seen", {
+                  items: items
+                });
+                return _context2.abrupt("return", result);
+
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function markAllAsSeen() {
+        return _markAllAsSeen.apply(this, arguments);
+      }
+
+      return markAllAsSeen;
+    }()
+  }, {
+    key: "markAsUnseen",
+    value: function () {
+      var _markAsUnseen = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(itemOrItems) {
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 this.optimisticallyPerformStatusUpdate(itemOrItems, "unseen", {
                   seen_at: null
                 }, "unseen_count");
-                return _context2.abrupt("return", this.makeStatusUpdate(itemOrItems, "unseen"));
+                return _context3.abrupt("return", this.makeStatusUpdate(itemOrItems, "unseen"));
 
               case 2:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
 
       function markAsUnseen(_x2) {
@@ -172,24 +284,24 @@ var Feed = /*#__PURE__*/function () {
   }, {
     key: "markAsRead",
     value: function () {
-      var _markAsRead = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(itemOrItems) {
+      var _markAsRead = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(itemOrItems) {
         var now;
-        return _regenerator["default"].wrap(function _callee3$(_context3) {
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
                 now = new Date().toISOString();
                 this.optimisticallyPerformStatusUpdate(itemOrItems, "read", {
                   read_at: now
                 }, "unread_count");
-                return _context3.abrupt("return", this.makeStatusUpdate(itemOrItems, "read"));
+                return _context4.abrupt("return", this.makeStatusUpdate(itemOrItems, "read"));
 
               case 3:
               case "end":
-                return _context3.stop();
+                return _context4.stop();
             }
           }
-        }, _callee3, this);
+        }, _callee4, this);
       }));
 
       function markAsRead(_x3) {
@@ -198,25 +310,105 @@ var Feed = /*#__PURE__*/function () {
 
       return markAsRead;
     }()
+  }, {
+    key: "markAllAsRead",
+    value: function () {
+      var _markAllAsRead = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+        var _this$store2, getState, setState, _getState2, metadata, items, isViewingOnlyUnread, attrs, itemIds, result;
+
+        return _regenerator["default"].wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                // To mark all of the messages as read we:
+                // 1. Optimistically update *everything* we have in the store
+                // 2. We decrement the `unread_count` to zero optimistically
+                // 3. We issue the API call to the endpoint
+                //
+                // Note: there is the potential for a race condition here because the bulk
+                // update is an async method, so if a new message comes in during this window before
+                // the update has been processed we'll effectively reset the `unread_count` to be what it was.
+                //
+                // Note: here we optimistically handle the case whereby the feed is scoped to show only `unread`
+                // items by removing everything from view.
+                _this$store2 = this.store, getState = _this$store2.getState, setState = _this$store2.setState;
+                _getState2 = getState(), metadata = _getState2.metadata, items = _getState2.items;
+                isViewingOnlyUnread = this.defaultOptions.status === "unread"; // If we're looking at the unread view, then we want to remove all of the items optimistically
+                // from the store given that nothing should be visible. We do this by resetting the store state
+                // and setting the current metadata counts to 0
+
+                if (isViewingOnlyUnread) {
+                  setState(function (store) {
+                    return store.resetStore(_objectSpread(_objectSpread({}, metadata), {}, {
+                      total_count: 0,
+                      unread_count: 0
+                    }));
+                  });
+                } else {
+                  // Otherwise we want to update the metadata and mark all of the items in the store as seen
+                  setState(function (store) {
+                    return store.setMetadata(_objectSpread(_objectSpread({}, metadata), {}, {
+                      unread_count: 0
+                    }));
+                  });
+                  attrs = {
+                    read_at: new Date().toISOString()
+                  };
+                  itemIds = items.map(function (item) {
+                    return item.id;
+                  });
+                  setState(function (store) {
+                    return store.setItemAttrs(itemIds, attrs);
+                  });
+                } // Issue the API request to the bulk status change API
+
+
+                _context5.next = 6;
+                return this.makeBulkStatusUpdate("read");
+
+              case 6:
+                result = _context5.sent;
+                this.broadcaster.emit("items:all_read", {
+                  items: items
+                });
+                this.broadcastOverChannel("items:all_read", {
+                  items: items
+                });
+                return _context5.abrupt("return", result);
+
+              case 10:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5, this);
+      }));
+
+      function markAllAsRead() {
+        return _markAllAsRead.apply(this, arguments);
+      }
+
+      return markAllAsRead;
+    }()
   }, {
     key: "markAsUnread",
     value: function () {
-      var _markAsUnread = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(itemOrItems) {
-        return _regenerator["default"].wrap(function _callee4$(_context4) {
+      var _markAsUnread = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(itemOrItems) {
+        return _regenerator["default"].wrap(function _callee6$(_context6) {
           while (1) {
-            switch (_context4.prev = _context4.next) {
+            switch (_context6.prev = _context6.next) {
               case 0:
                 this.optimisticallyPerformStatusUpdate(itemOrItems, "unread", {
                   read_at: null
                 }, "unread_count");
-                return _context4.abrupt("return", this.makeStatusUpdate(itemOrItems, "unread"));
+                return _context6.abrupt("return", this.makeStatusUpdate(itemOrItems, "unread"));
 
               case 2:
               case "end":
-                return _context4.stop();
+                return _context6.stop();
             }
           }
-        }, _callee4, this);
+        }, _callee6, this);
       }));
 
       function markAsUnread(_x4) {
@@ -235,14 +427,14 @@ var Feed = /*#__PURE__*/function () {
   }, {
     key: "markAsArchived",
     value: function () {
-      var _markAsArchived = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(itemOrItems) {
-        var _this$store, getState, setState, state, shouldOptimisticallyRemoveItems, normalizedItems, itemIds, unseenCount, unreadCount, updatedMetadata, entriesToSet;
+      var _markAsArchived = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7(itemOrItems) {
+        var _this$store3, getState, setState, state, shouldOptimisticallyRemoveItems, normalizedItems, itemIds, unseenCount, unreadCount, updatedMetadata, entriesToSet;
 
-        return _regenerator["default"].wrap(function _callee5$(_context5) {
+        return _regenerator["default"].wrap(function _callee7$(_context7) {
           while (1) {
-            switch (_context5.prev = _context5.next) {
+            switch (_context7.prev = _context7.next) {
               case 0:
-                _this$store = this.store, getState = _this$store.getState, setState = _this$store.setState;
+                _this$store3 = this.store, getState = _this$store3.getState, setState = _this$store3.setState;
                 state = getState();
                 shouldOptimisticallyRemoveItems = this.defaultOptions.archived === "exclude";
                 normalizedItems = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
@@ -250,7 +442,7 @@ var Feed = /*#__PURE__*/function () {
                   return item.id;
                 });
                 /*
-                  In the proceeding code here we want to optimistically update counts and items
+                  In the code here we want to optimistically update counts and items
                   that are persisted such that we can display updates immediately on the feed
                   without needing to make a network request.
                    Note: right now this does *not* take into account offline handling or any extensive retry
@@ -301,14 +493,14 @@ var Feed = /*#__PURE__*/function () {
                   });
                 }
 
-                return _context5.abrupt("return", this.makeStatusUpdate(itemOrItems, "archived"));
+                return _context7.abrupt("return", this.makeStatusUpdate(itemOrItems, "archived"));
 
               case 7:
               case "end":
-                return _context5.stop();
+                return _context7.stop();
             }
           }
-        }, _callee5, this);
+        }, _callee7, this);
       }));
 
       function markAsArchived(_x5) {
@@ -317,25 +509,89 @@ var Feed = /*#__PURE__*/function () {
 
       return markAsArchived;
     }()
+  }, {
+    key: "markAllAsArchived",
+    value: function () {
+      var _markAllAsArchived = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+        var _this$store4, setState, getState, _getState3, items, shouldOptimisticallyRemoveItems, result;
+
+        return _regenerator["default"].wrap(function _callee8$(_context8) {
+          while (1) {
+            switch (_context8.prev = _context8.next) {
+              case 0:
+                // Note: there is the potential for a race condition here because the bulk
+                // update is an async method, so if a new message comes in during this window before
+                // the update has been processed we'll effectively reset the `unseen_count` to be what it was.
+                _this$store4 = this.store, setState = _this$store4.setState, getState = _this$store4.getState;
+                _getState3 = getState(), items = _getState3.items; // Here if we're looking at a feed that excludes all of the archived items by default then we
+                // will want to optimistically remove all of the items from the feed as they are now all excluded
+
+                shouldOptimisticallyRemoveItems = this.defaultOptions.archived === "exclude";
+
+                if (shouldOptimisticallyRemoveItems) {
+                  // Reset the store to clear out all of items and reset the badge count
+                  setState(function (store) {
+                    return store.resetStore();
+                  });
+                } else {
+                  // Mark all the entries being updated as archived either way so the state is correct
+                  setState(function (store) {
+                    var itemIds = items.map(function (i) {
+                      return i.id;
+                    });
+                    store.setItemAttrs(itemIds, {
+                      archived_at: new Date().toISOString()
+                    });
+                  });
+                } // Issue the API request to the bulk status change API
+
+
+                _context8.next = 6;
+                return this.makeBulkStatusUpdate("archive");
+
+              case 6:
+                result = _context8.sent;
+                this.broadcaster.emit("items:all_archived", {
+                  items: items
+                });
+                this.broadcastOverChannel("items:all_archived", {
+                  items: items
+                });
+                return _context8.abrupt("return", result);
+
+              case 10:
+              case "end":
+                return _context8.stop();
+            }
+          }
+        }, _callee8, this);
+      }));
+
+      function markAllAsArchived() {
+        return _markAllAsArchived.apply(this, arguments);
+      }
+
+      return markAllAsArchived;
+    }()
   }, {
     key: "markAsUnarchived",
     value: function () {
-      var _markAsUnarchived = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(itemOrItems) {
-        return _regenerator["default"].wrap(function _callee6$(_context6) {
+      var _markAsUnarchived = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9(itemOrItems) {
+        return _regenerator["default"].wrap(function _callee9$(_context9) {
           while (1) {
-            switch (_context6.prev = _context6.next) {
+            switch (_context9.prev = _context9.next) {
               case 0:
                 this.optimisticallyPerformStatusUpdate(itemOrItems, "unarchived", {
                   archived_at: null
                 });
-                return _context6.abrupt("return", this.makeStatusUpdate(itemOrItems, "unarchived"));
+                return _context9.abrupt("return", this.makeStatusUpdate(itemOrItems, "unarchived"));
 
               case 2:
               case "end":
-                return _context6.stop();
+                return _context9.stop();
             }
           }
-        }, _callee6, this);
+        }, _callee9, this);
       }));
 
       function markAsUnarchived(_x6) {
@@ -349,12 +605,12 @@ var Feed = /*#__PURE__*/function () {
   }, {
     key: "fetch",
     value: function () {
-      var _fetch = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+      var _fetch = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
         var options,
-            _this$store2,
+            _this$store5,
             setState,
             getState,
-            _getState,
+            _getState4,
             networkStatus,
             queryParams,
             result,
@@ -363,22 +619,22 @@ var Feed = /*#__PURE__*/function () {
             _opts,
             feedEventType,
             eventPayload,
-            _args7 = arguments;
+            _args10 = arguments;
 
-        return _regenerator["default"].wrap(function _callee7$(_context7) {
+        return _regenerator["default"].wrap(function _callee10$(_context10) {
           while (1) {
-            switch (_context7.prev = _context7.next) {
+            switch (_context10.prev = _context10.next) {
               case 0:
-                options = _args7.length > 0 && _args7[0] !== undefined ? _args7[0] : {};
-                _this$store2 = this.store, setState = _this$store2.setState, getState = _this$store2.getState;
-                _getState = getState(), networkStatus = _getState.networkStatus; // If there's an existing request in flight, then do nothing
+                options = _args10.length > 0 && _args10[0] !== undefined ? _args10[0] : {};
+                _this$store5 = this.store, setState = _this$store5.setState, getState = _this$store5.getState;
+                _getState4 = getState(), networkStatus = _getState4.networkStatus; // If there's an existing request in flight, then do nothing
 
                 if (!(0, _networkStatus.isRequestInFlight)(networkStatus)) {
-                  _context7.next = 5;
+                  _context10.next = 5;
                   break;
                 }
 
-                return _context7.abrupt("return");
+                return _context10.abrupt("return");
 
               case 5:
                 // Set the loading type based on the request type it is
@@ -388,8 +644,13 @@ var Feed = /*#__PURE__*/function () {
                   return store.setNetworkStatus((_options$__loadingTyp = options.__loadingType) !== null && _options$__loadingTyp !== void 0 ? _options$__loadingTyp : _networkStatus.NetworkStatus.loading);
                 }); // Always include the default params, if they have been set
 
-                queryParams = _objectSpread(_objectSpread({}, this.defaultOptions), options);
-                _context7.next = 9;
+                queryParams = _objectSpread(_objectSpread(_objectSpread({}, this.defaultOptions), options), {}, {
+                  // Unset options that should not be sent to the API
+                  __loadingType: undefined,
+                  __fetchSource: undefined,
+                  __experimentalCrossBrowserUpdates: undefined
+                });
+                _context10.next = 9;
                 return this.apiClient.makeRequest({
                   method: "GET",
                   url: "/v1/users/".concat(this.knock.userId, "/feeds/").concat(this.feedId),
@@ -397,17 +658,17 @@ var Feed = /*#__PURE__*/function () {
                 });
 
               case 9:
-                result = _context7.sent;
+                result = _context10.sent;
 
                 if (!(result.statusCode === "error" || !result.body)) {
-                  _context7.next = 13;
+                  _context10.next = 13;
                   break;
                 }
 
                 setState(function (store) {
                   return store.setNetworkStatus(_networkStatus.NetworkStatus.error);
                 });
-                return _context7.abrupt("return", {
+                return _context10.abrupt("return", {
                   status: result.statusCode,
                   data: result.error || result.body
                 });
@@ -451,17 +712,17 @@ var Feed = /*#__PURE__*/function () {
                   event: feedEventType
                 };
                 this.broadcast(eventPayload.event, eventPayload);
-                return _context7.abrupt("return", {
+                return _context10.abrupt("return", {
                   data: response,
                   status: result.statusCode
                 });
 
               case 20:
               case "end":
-                return _context7.stop();
+                return _context10.stop();
             }
           }
-        }, _callee7, this);
+        }, _callee10, this);
       }));
 
       function fetch() {
@@ -473,23 +734,23 @@ var Feed = /*#__PURE__*/function () {
   }, {
     key: "fetchNextPage",
     value: function () {
-      var _fetchNextPage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
-        var getState, _getState2, pageInfo;
+      var _fetchNextPage = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+        var getState, _getState5, pageInfo;
 
-        return _regenerator["default"].wrap(function _callee8$(_context8) {
+        return _regenerator["default"].wrap(function _callee11$(_context11) {
           while (1) {
-            switch (_context8.prev = _context8.next) {
+            switch (_context11.prev = _context11.next) {
               case 0:
                 // Attempts to fetch the next page of results (if we have any)
                 getState = this.store.getState;
-                _getState2 = getState(), pageInfo = _getState2.pageInfo;
+                _getState5 = getState(), pageInfo = _getState5.pageInfo;
 
                 if (pageInfo.after) {
-                  _context8.next = 4;
+                  _context11.next = 4;
                   break;
                 }
 
-                return _context8.abrupt("return");
+                return _context11.abrupt("return");
 
               case 4:
                 this.fetch({
@@ -499,10 +760,10 @@ var Feed = /*#__PURE__*/function () {
 
               case 5:
               case "end":
-                return _context8.stop();
+                return _context11.stop();
             }
           }
-        }, _callee8, this);
+        }, _callee11, this);
       }));
 
       function fetchNextPage() {
@@ -520,17 +781,17 @@ var Feed = /*#__PURE__*/function () {
   }, {
     key: "onNewMessageReceived",
     value: function () {
-      var _onNewMessageReceived = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9(_ref) {
-        var metadata, _this$store3, getState, setState, _getState3, items, currentHead;
+      var _onNewMessageReceived = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12(_ref) {
+        var metadata, _this$store6, getState, setState, _getState6, items, currentHead;
 
-        return _regenerator["default"].wrap(function _callee9$(_context9) {
+        return _regenerator["default"].wrap(function _callee12$(_context12) {
           while (1) {
-            switch (_context9.prev = _context9.next) {
+            switch (_context12.prev = _context12.next) {
               case 0:
                 metadata = _ref.metadata;
                 // Handle the new message coming in
-                _this$store3 = this.store, getState = _this$store3.getState, setState = _this$store3.setState;
-                _getState3 = getState(), items = _getState3.items;
+                _this$store6 = this.store, getState = _this$store6.getState, setState = _this$store6.setState;
+                _getState6 = getState(), items = _getState6.items;
                 currentHead = items[0]; // Optimistically set the badge counts
 
                 setState(function (state) {
@@ -544,10 +805,10 @@ var Feed = /*#__PURE__*/function () {
 
               case 6:
               case "end":
-                return _context9.stop();
+                return _context12.stop();
             }
           }
-        }, _callee9, this);
+        }, _callee12, this);
       }));
 
       function onNewMessageReceived(_x7) {
@@ -564,16 +825,16 @@ var Feed = /*#__PURE__*/function () {
   }, {
     key: "optimisticallyPerformStatusUpdate",
     value: function optimisticallyPerformStatusUpdate(itemOrItems, type, attrs, badgeCountAttr) {
-      var _this$store4 = this.store,
-          getState = _this$store4.getState,
-          setState = _this$store4.setState;
+      var _this$store7 = this.store,
+          getState = _this$store7.getState,
+          setState = _this$store7.setState;
       var itemIds = Array.isArray(itemOrItems) ? itemOrItems.map(function (item) {
         return item.id;
       }) : [itemOrItems.id];
 
       if (badgeCountAttr) {
-        var _getState4 = getState(),
-            metadata = _getState4.metadata; // Tnis is a hack to determine the direction of whether we're
+        var _getState7 = getState(),
+            metadata = _getState7.metadata; // Tnis is a hack to determine the direction of whether we're
         // adding or removing from the badge count
 
 
@@ -591,21 +852,18 @@ var Feed = /*#__PURE__*/function () {
   }, {
     key: "makeStatusUpdate",
     value: function () {
-      var _makeStatusUpdate = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10(itemOrItems, type) {
-        var itemIds, result;
-        return _regenerator["default"].wrap(function _callee10$(_context10) {
+      var _makeStatusUpdate = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13(itemOrItems, type) {
+        var items, itemIds, result;
+        return _regenerator["default"].wrap(function _callee13$(_context13) {
           while (1) {
-            switch (_context10.prev = _context10.next) {
+            switch (_context13.prev = _context13.next) {
               case 0:
-                if (!Array.isArray(itemOrItems)) {
-                  _context10.next = 5;
-                  break;
-                }
-
-                itemIds = itemOrItems.map(function (item) {
+                // Always treat items as a batch to use the corresponding batch endpoint
+                items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
+                itemIds = items.map(function (item) {
                   return item.id;
                 });
-                _context10.next = 4;
+                _context13.next = 4;
                 return this.apiClient.makeRequest({
                   method: "POST",
                   url: "/v1/messages/batch/".concat(type),
@@ -615,48 +873,95 @@ var Feed = /*#__PURE__*/function () {
                 });
 
               case 4:
-                return _context10.abrupt("return", _context10.sent);
-
-              case 5:
-                if (!type.startsWith("un")) {
-                  _context10.next = 9;
-                  break;
-                }
-
-                _context10.next = 8;
-                return this.apiClient.makeRequest({
-                  method: "DELETE",
-                  url: "/v1/messages/".concat(itemOrItems.id, "/").concat(invertStatus(type))
+                result = _context13.sent;
+                // Emit the event that these items had their statuses changed
+                // Note: we do this after the update to ensure that the server event actually completed
+                this.broadcaster.emit("items:".concat(type), {
+                  items: items
                 });
+                this.broadcastOverChannel("items:".concat(type), {
+                  items: items
+                });
+                return _context13.abrupt("return", result);
 
               case 8:
-                return _context10.abrupt("return", _context10.sent);
+              case "end":
+                return _context13.stop();
+            }
+          }
+        }, _callee13, this);
+      }));
 
-              case 9:
-                _context10.next = 11;
+      function makeStatusUpdate(_x8, _x9) {
+        return _makeStatusUpdate.apply(this, arguments);
+      }
+
+      return makeStatusUpdate;
+    }()
+  }, {
+    key: "makeBulkStatusUpdate",
+    value: function () {
+      var _makeBulkStatusUpdate = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14(type) {
+        var options;
+        return _regenerator["default"].wrap(function _callee14$(_context14) {
+          while (1) {
+            switch (_context14.prev = _context14.next) {
+              case 0:
+                // The base scope for the call should take into account all of the options currently
+                // set on the feed, as well as being scoped for the current user. We do this so that
+                // we ONLY make changes to the messages that are currently in view on this feed, and not
+                // all messages that exist.
+                options = {
+                  user_ids: [this.knock.userId],
+                  engagement_status: this.defaultOptions.status !== "all" ? this.defaultOptions.status : undefined,
+                  archived: this.defaultOptions.archived,
+                  has_tenant: this.defaultOptions.has_tenant,
+                  tenants: this.defaultOptions.tenant ? [this.defaultOptions.tenant] : undefined
+                };
+                _context14.next = 3;
                 return this.apiClient.makeRequest({
-                  method: "PUT",
-                  url: "/v1/messages/".concat(itemOrItems.id, "/").concat(type)
+                  method: "POST",
+                  url: "/v1/channels/".concat(this.feedId, "/messages/bulk/").concat(type),
+                  data: options
                 });
 
-              case 11:
-                result = _context10.sent;
-                return _context10.abrupt("return", result);
+              case 3:
+                return _context14.abrupt("return", _context14.sent);
 
-              case 13:
+              case 4:
               case "end":
-                return _context10.stop();
+                return _context14.stop();
             }
           }
-        }, _callee10, this);
+        }, _callee14, this);
       }));
 
-      function makeStatusUpdate(_x8, _x9) {
-        return _makeStatusUpdate.apply(this, arguments);
+      function makeBulkStatusUpdate(_x10) {
+        return _makeBulkStatusUpdate.apply(this, arguments);
       }
 
-      return makeStatusUpdate;
+      return makeBulkStatusUpdate;
     }()
+  }, {
+    key: "broadcastOverChannel",
+    value: function broadcastOverChannel(type, payload) {
+      // The broadcastChannel may not be available in non-browser environments
+      if (!this.broadcastChannel) {
+        return;
+      } // Here we stringify our payload and try and send as JSON such that we
+      // don't get any `An object could not be cloned` errors when trying to broadcast
+
+
+      try {
+        var stringifiedPayload = JSON.parse(JSON.stringify(payload));
+        this.broadcastChannel.postMessage({
+          type: type,
+          payload: stringifiedPayload
+        });
+      } catch (e) {
+        console.warn("Could not broadcast ".concat(type, ", got error: ").concat(e));
+      }
+    }
   }]);
   return Feed;
 }();