@knocklabs/client 0.8.2 → 0.8.4

package/dist/esm/clients/feed/feed.js

@@ -8,12 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { EventEmitter2 as EventEmitter } from "eventemitter2";
 import createStore from "./store";
 import { isRequestInFlight, NetworkStatus } from "../../networkStatus";
-
-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"
 };
@@ -34,6 +29,8 @@ class Feed {
 
     _defineProperty(this, "defaultOptions", void 0);
 
+    _defineProperty(this, "broadcastChannel", void 0);
+
     _defineProperty(this, "store", void 0);
 
     this.apiClient = knock.client();
@@ -46,7 +43,10 @@ class Feed {
     });
     this.defaultOptions = _objectSpread(_objectSpread({}, feedClientDefaults), options);
     this.channel = this.apiClient.socket.channel("feeds:".concat(this.userFeedId), this.defaultOptions);
-    this.channel.on("new-message", resp => this.onNewMessageReceived(resp));
+    this.channel.on("new-message", resp => 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
@@ -59,6 +59,10 @@ class Feed {
     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
@@ -75,6 +79,32 @@ class Feed {
 
     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 = 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 this.fetch();
+            break;
+
+          default:
+            return null;
+        }
+      };
     }
   }
   /* Binds a handler to be invoked when event occurs */
@@ -106,41 +136,159 @@ class Feed {
     })();
   }
 
-  markAsUnseen(itemOrItems) {
+  markAllAsSeen() {
     var _this2 = this;
 
     return _asyncToGenerator(function* () {
-      _this2.optimisticallyPerformStatusUpdate(itemOrItems, "unseen", {
+      // 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.
+      var {
+        getState,
+        setState
+      } = _this2.store;
+      var {
+        metadata,
+        items
+      } = getState();
+      var isViewingOnlyUnseen = _this2.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(store => 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(store => store.setMetadata(_objectSpread(_objectSpread({}, metadata), {}, {
+          unseen_count: 0
+        })));
+        var attrs = {
+          seen_at: new Date().toISOString()
+        };
+        var itemIds = items.map(item => item.id);
+        setState(store => store.setItemAttrs(itemIds, attrs));
+      } // Issue the API request to the bulk status change API
+
+
+      var result = yield _this2.makeBulkStatusUpdate("seen");
+
+      _this2.broadcaster.emit("items:all_seen", {
+        items
+      });
+
+      _this2.broadcastOverChannel("items:all_seen", {
+        items
+      });
+
+      return result;
+    })();
+  }
+
+  markAsUnseen(itemOrItems) {
+    var _this3 = this;
+
+    return _asyncToGenerator(function* () {
+      _this3.optimisticallyPerformStatusUpdate(itemOrItems, "unseen", {
         seen_at: null
       }, "unseen_count");
 
-      return _this2.makeStatusUpdate(itemOrItems, "unseen");
+      return _this3.makeStatusUpdate(itemOrItems, "unseen");
     })();
   }
 
   markAsRead(itemOrItems) {
-    var _this3 = this;
+    var _this4 = this;
 
     return _asyncToGenerator(function* () {
       var now = new Date().toISOString();
 
-      _this3.optimisticallyPerformStatusUpdate(itemOrItems, "read", {
+      _this4.optimisticallyPerformStatusUpdate(itemOrItems, "read", {
         read_at: now
       }, "unread_count");
 
-      return _this3.makeStatusUpdate(itemOrItems, "read");
+      return _this4.makeStatusUpdate(itemOrItems, "read");
+    })();
+  }
+
+  markAllAsRead() {
+    var _this5 = this;
+
+    return _asyncToGenerator(function* () {
+      // 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.
+      var {
+        getState,
+        setState
+      } = _this5.store;
+      var {
+        metadata,
+        items
+      } = getState();
+      var isViewingOnlyUnread = _this5.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(store => 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(store => store.setMetadata(_objectSpread(_objectSpread({}, metadata), {}, {
+          unread_count: 0
+        })));
+        var attrs = {
+          read_at: new Date().toISOString()
+        };
+        var itemIds = items.map(item => item.id);
+        setState(store => store.setItemAttrs(itemIds, attrs));
+      } // Issue the API request to the bulk status change API
+
+
+      var result = yield _this5.makeBulkStatusUpdate("read");
+
+      _this5.broadcaster.emit("items:all_read", {
+        items
+      });
+
+      _this5.broadcastOverChannel("items:all_read", {
+        items
+      });
+
+      return result;
     })();
   }
 
   markAsUnread(itemOrItems) {
-    var _this4 = this;
+    var _this6 = this;
 
     return _asyncToGenerator(function* () {
-      _this4.optimisticallyPerformStatusUpdate(itemOrItems, "unread", {
+      _this6.optimisticallyPerformStatusUpdate(itemOrItems, "unread", {
         read_at: null
       }, "unread_count");
 
-      return _this4.makeStatusUpdate(itemOrItems, "unread");
+      return _this6.makeStatusUpdate(itemOrItems, "unread");
     })();
   }
   /*
@@ -152,19 +300,19 @@ class Feed {
 
 
   markAsArchived(itemOrItems) {
-    var _this5 = this;
+    var _this7 = this;
 
     return _asyncToGenerator(function* () {
       var {
         getState,
         setState
-      } = _this5.store;
+      } = _this7.store;
       var state = getState();
-      var shouldOptimisticallyRemoveItems = _this5.defaultOptions.archived === "exclude";
+      var shouldOptimisticallyRemoveItems = _this7.defaultOptions.archived === "exclude";
       var normalizedItems = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
       var itemIds = normalizedItems.map(item => 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
@@ -208,19 +356,65 @@ class Feed {
         });
       }
 
-      return _this5.makeStatusUpdate(itemOrItems, "archived");
+      return _this7.makeStatusUpdate(itemOrItems, "archived");
+    })();
+  }
+
+  markAllAsArchived() {
+    var _this8 = this;
+
+    return _asyncToGenerator(function* () {
+      // 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.
+      var {
+        setState,
+        getState
+      } = _this8.store;
+      var {
+        items
+      } = getState(); // 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
+
+      var shouldOptimisticallyRemoveItems = _this8.defaultOptions.archived === "exclude";
+
+      if (shouldOptimisticallyRemoveItems) {
+        // Reset the store to clear out all of items and reset the badge count
+        setState(store => store.resetStore());
+      } else {
+        // Mark all the entries being updated as archived either way so the state is correct
+        setState(store => {
+          var itemIds = items.map(i => i.id);
+          store.setItemAttrs(itemIds, {
+            archived_at: new Date().toISOString()
+          });
+        });
+      } // Issue the API request to the bulk status change API
+
+
+      var result = yield _this8.makeBulkStatusUpdate("archive");
+
+      _this8.broadcaster.emit("items:all_archived", {
+        items
+      });
+
+      _this8.broadcastOverChannel("items:all_archived", {
+        items
+      });
+
+      return result;
     })();
   }
 
   markAsUnarchived(itemOrItems) {
-    var _this6 = this;
+    var _this9 = this;
 
     return _asyncToGenerator(function* () {
-      _this6.optimisticallyPerformStatusUpdate(itemOrItems, "unarchived", {
+      _this9.optimisticallyPerformStatusUpdate(itemOrItems, "unarchived", {
         archived_at: null
       });
 
-      return _this6.makeStatusUpdate(itemOrItems, "unarchived");
+      return _this9.makeStatusUpdate(itemOrItems, "unarchived");
     })();
   }
   /* Fetches the feed content, appending it to the store */
@@ -228,14 +422,14 @@ class Feed {
 
   fetch() {
     var _arguments = arguments,
-        _this7 = this;
+        _this10 = this;
 
     return _asyncToGenerator(function* () {
       var options = _arguments.length > 0 && _arguments[0] !== undefined ? _arguments[0] : {};
       var {
         setState,
         getState
-      } = _this7.store;
+      } = _this10.store;
       var {
         networkStatus
       } = getState(); // If there's an existing request in flight, then do nothing
@@ -251,11 +445,16 @@ class Feed {
         return store.setNetworkStatus((_options$__loadingTyp = options.__loadingType) !== null && _options$__loadingTyp !== void 0 ? _options$__loadingTyp : NetworkStatus.loading);
       }); // Always include the default params, if they have been set
 
-      var queryParams = _objectSpread(_objectSpread({}, _this7.defaultOptions), options);
+      var queryParams = _objectSpread(_objectSpread(_objectSpread({}, _this10.defaultOptions), options), {}, {
+        // Unset options that should not be sent to the API
+        __loadingType: undefined,
+        __fetchSource: undefined,
+        __experimentalCrossBrowserUpdates: undefined
+      });
 
-      var result = yield _this7.apiClient.makeRequest({
+      var result = yield _this10.apiClient.makeRequest({
         method: "GET",
-        url: "/v1/users/".concat(_this7.knock.userId, "/feeds/").concat(_this7.feedId),
+        url: "/v1/users/".concat(_this10.knock.userId, "/feeds/").concat(_this10.feedId),
         params: queryParams
       });
 
@@ -290,7 +489,7 @@ class Feed {
       } // Legacy `messages.new` event, should be removed in a future version
 
 
-      _this7.broadcast("messages.new", response); // Broadcast the appropriate event type depending on the fetch source
+      _this10.broadcast("messages.new", response); // Broadcast the appropriate event type depending on the fetch source
 
 
       var feedEventType = options.__fetchSource === "socket" ? "items.received.realtime" : "items.received.page";
@@ -300,7 +499,7 @@ class Feed {
         event: feedEventType
       };
 
-      _this7.broadcast(eventPayload.event, eventPayload);
+      _this10.broadcast(eventPayload.event, eventPayload);
 
       return {
         data: response,
@@ -310,13 +509,13 @@ class Feed {
   }
 
   fetchNextPage() {
-    var _this8 = this;
+    var _this11 = this;
 
     return _asyncToGenerator(function* () {
       // Attempts to fetch the next page of results (if we have any)
       var {
         getState
-      } = _this8.store;
+      } = _this11.store;
       var {
         pageInfo
       } = getState();
@@ -326,7 +525,7 @@ class Feed {
         return;
       }
 
-      _this8.fetch({
+      _this11.fetch({
         after: pageInfo.after,
         __loadingType: NetworkStatus.fetchMore
       });
@@ -339,7 +538,7 @@ class Feed {
 
 
   onNewMessageReceived(_ref) {
-    var _this9 = this;
+    var _this12 = this;
 
     return _asyncToGenerator(function* () {
       var {
@@ -349,7 +548,7 @@ class Feed {
       var {
         getState,
         setState
-      } = _this9.store;
+      } = _this12.store;
       var {
         items
       } = getState();
@@ -357,7 +556,7 @@ class Feed {
 
       setState(state => state.setMetadata(metadata)); // Fetch the items before the current head (if it exists)
 
-      _this9.fetch({
+      _this12.fetch({
         before: currentHead === null || currentHead === void 0 ? void 0 : currentHead.__cursor,
         __fetchSource: "socket"
       });
@@ -392,38 +591,75 @@ class Feed {
   }
 
   makeStatusUpdate(itemOrItems, type) {
-    var _this10 = this;
+    var _this13 = this;
 
     return _asyncToGenerator(function* () {
-      // If we're interacting with an array, then we want to send this as a batch
-      if (Array.isArray(itemOrItems)) {
-        var itemIds = itemOrItems.map(item => item.id);
-        return yield _this10.apiClient.makeRequest({
-          method: "POST",
-          url: "/v1/messages/batch/".concat(type),
-          data: {
-            message_ids: itemIds
-          }
-        });
-      } // Handle unx actions
+      // Always treat items as a batch to use the corresponding batch endpoint
+      var items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
+      var itemIds = items.map(item => item.id);
+      var result = yield _this13.apiClient.makeRequest({
+        method: "POST",
+        url: "/v1/messages/batch/".concat(type),
+        data: {
+          message_ids: itemIds
+        }
+      }); // 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
+
+      _this13.broadcaster.emit("items:".concat(type), {
+        items
+      });
 
+      _this13.broadcastOverChannel("items:".concat(type), {
+        items
+      });
 
-      if (type.startsWith("un")) {
-        return yield _this10.apiClient.makeRequest({
-          method: "DELETE",
-          url: "/v1/messages/".concat(itemOrItems.id, "/").concat(invertStatus(type))
-        });
-      } // If its a single then we can just call the regular endpoint
+      return result;
+    })();
+  }
 
+  makeBulkStatusUpdate(type) {
+    var _this14 = this;
 
-      var result = yield _this10.apiClient.makeRequest({
-        method: "PUT",
-        url: "/v1/messages/".concat(itemOrItems.id, "/").concat(type)
+    return _asyncToGenerator(function* () {
+      // 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.
+      var options = {
+        user_ids: [_this14.knock.userId],
+        engagement_status: _this14.defaultOptions.status !== "all" ? _this14.defaultOptions.status : undefined,
+        archived: _this14.defaultOptions.archived,
+        has_tenant: _this14.defaultOptions.has_tenant,
+        tenants: _this14.defaultOptions.tenant ? [_this14.defaultOptions.tenant] : undefined
+      };
+      return yield _this14.apiClient.makeRequest({
+        method: "POST",
+        url: "/v1/channels/".concat(_this14.feedId, "/messages/bulk/").concat(type),
+        data: options
       });
-      return result;
     })();
   }
 
+  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,
+        payload: stringifiedPayload
+      });
+    } catch (e) {
+      console.warn("Could not broadcast ".concat(type, ", got error: ").concat(e));
+    }
+  }
+
 }
 
 export default Feed;