@knocklabs/client 0.8.15 → 0.8.17

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

@@ -1,10 +1,7 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-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) { _defineProperty(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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { EventEmitter2 as EventEmitter } from "eventemitter2";
 import createStore from "./store";
 import { isRequestInFlight, NetworkStatus } from "../../networkStatus";
@@ -12,27 +9,20 @@ import { isRequestInFlight, NetworkStatus } from "../../networkStatus";
 var feedClientDefaults = {
   archived: "exclude"
 };
-
+var DEFAULT_DISCONNECT_DELAY = 2000;
 class Feed {
-  // The raw store instance, used for binding in React and other environments
   constructor(knock, feedId, options) {
     this.knock = knock;
     this.feedId = feedId;
-
     _defineProperty(this, "apiClient", void 0);
-
     _defineProperty(this, "userFeedId", void 0);
-
     _defineProperty(this, "channel", void 0);
-
     _defineProperty(this, "broadcaster", void 0);
-
     _defineProperty(this, "defaultOptions", void 0);
-
     _defineProperty(this, "broadcastChannel", void 0);
-
+    _defineProperty(this, "disconnectTimer", null);
+    // The raw store instance, used for binding in React and other environments
     _defineProperty(this, "store", void 0);
-
     this.apiClient = knock.client();
     this.feedId = feedId;
     this.userFeedId = this.buildUserFeedId();
@@ -41,55 +31,55 @@ class Feed {
       wildcard: true,
       delimiter: "."
     });
-    this.defaultOptions = _objectSpread(_objectSpread({}, feedClientDefaults), options); // In server environments we might not have a socket connection
+    this.defaultOptions = _objectSpread(_objectSpread({}, feedClientDefaults), options);
 
+    // In server environments we might not have a socket connection
     if (this.apiClient.socket) {
       this.channel = this.apiClient.socket.channel("feeds:".concat(this.userFeedId), this.defaultOptions);
       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)
-
+    }
 
+    // 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 = typeof self !== "undefined" && "BroadcastChannel" in self ? new BroadcastChannel("knock:feed:".concat(this.userFeedId)) : null;
+    if (options.auto_manage_socket_connection && this.apiClient.socket) {
+      this.setupAutoSocketManager(options.auto_manage_socket_connection_delay);
+    }
   }
+
   /**
    * Cleans up a feed instance by destroying the store and disconnecting
    * an open socket connection.
    */
-
-
   teardown() {
     if (this.channel) {
       this.channel.leave();
       this.channel.off("new-message");
     }
-
     this.broadcaster.removeAllListeners();
     this.store.destroy();
-
     if (this.broadcastChannel) {
       this.broadcastChannel.close();
     }
   }
+
   /*
     Initializes a real-time connection to Knock, connecting the websocket for the
     current ApiClient instance if the socket is not already connected.
   */
-
-
   listenForUpdates() {
     // Connect the socket only if we don't already have a connection
     if (this.apiClient.socket && !this.apiClient.socket.isConnected()) {
       this.apiClient.socket.connect();
-    } // Only join the channel if we're not already in a joining state
-
+    }
 
+    // Only join the channel if we're not already in a joining state
     if (this.channel && ["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)
-
+    }
 
+    // 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) {
@@ -107,45 +97,35 @@ class Feed {
             // maybe do this optimistically without the fetch.
             return this.fetch();
             break;
-
           default:
             return null;
         }
       };
     }
   }
-  /* Binds a handler to be invoked when event occurs */
-
 
+  /* Binds a handler to be invoked when event occurs */
   on(eventName, callback) {
     this.broadcaster.on(eventName, callback);
   }
-
   off(eventName, callback) {
     this.broadcaster.off(eventName, callback);
   }
-
   getState() {
     return this.store.getState();
   }
-
   markAsSeen(itemOrItems) {
     var _this = this;
-
     return _asyncToGenerator(function* () {
       var now = new Date().toISOString();
-
       _this.optimisticallyPerformStatusUpdate(itemOrItems, "seen", {
         seen_at: now
       }, "unseen_count");
-
       return _this.makeStatusUpdate(itemOrItems, "seen");
     })();
   }
-
   markAllAsSeen() {
     var _this2 = this;
-
     return _asyncToGenerator(function* () {
       // To mark all of the messages as seen we:
       // 1. Optimistically update *everything* we have in the store
@@ -166,10 +146,11 @@ class Feed {
         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
+      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,
@@ -185,52 +166,40 @@ class Feed {
         };
         var itemIds = items.map(item => item.id);
         setState(store => store.setItemAttrs(itemIds, attrs));
-      } // Issue the API request to the bulk status change API
-
+      }
 
+      // 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 _this3.makeStatusUpdate(itemOrItems, "unseen");
     })();
   }
-
   markAsRead(itemOrItems) {
     var _this4 = this;
-
     return _asyncToGenerator(function* () {
       var now = new Date().toISOString();
-
       _this4.optimisticallyPerformStatusUpdate(itemOrItems, "read", {
         read_at: now
       }, "unread_count");
-
       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
@@ -251,10 +220,11 @@ class Feed {
         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
+      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,
@@ -270,60 +240,48 @@ class Feed {
         };
         var itemIds = items.map(item => item.id);
         setState(store => store.setItemAttrs(itemIds, attrs));
-      } // Issue the API request to the bulk status change API
-
+      }
 
+      // 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 _this6 = this;
-
     return _asyncToGenerator(function* () {
       _this6.optimisticallyPerformStatusUpdate(itemOrItems, "unread", {
         read_at: null
       }, "unread_count");
-
       return _this6.makeStatusUpdate(itemOrItems, "unread");
     })();
   }
-
   markAsInteracted(itemOrItems) {
     var _this7 = this;
-
     return _asyncToGenerator(function* () {
       var now = new Date().toISOString();
-
       _this7.optimisticallyPerformStatusUpdate(itemOrItems, "interacted", {
         read_at: now,
         interacted_at: now
       }, "unread_count");
-
       return _this7.makeStatusUpdate(itemOrItems, "interacted");
     })();
   }
+
   /*
   Marking one or more items as archived should:
    - Decrement the badge count for any unread / unseen items
   - Remove the item from the feed list when the `archived` flag is "exclude" (default)
    TODO: how do we handle rollbacks?
   */
-
-
   markAsArchived(itemOrItems) {
     var _this8 = this;
-
     return _asyncToGenerator(function* () {
       var {
         getState,
@@ -333,6 +291,7 @@ class Feed {
       var shouldOptimisticallyRemoveItems = _this8.defaultOptions.archived === "exclude";
       var normalizedItems = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
       var itemIds = normalizedItems.map(item => item.id);
+
       /*
         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
@@ -356,15 +315,16 @@ class Feed {
         // If any of the items are unseen or unread, then capture as we'll want to decrement
         // the counts for these in the metadata we have
         var unseenCount = normalizedItems.filter(i => !i.seen_at).length;
-        var unreadCount = normalizedItems.filter(i => !i.read_at).length; // Build the new metadata
+        var unreadCount = normalizedItems.filter(i => !i.read_at).length;
 
+        // Build the new metadata
         var updatedMetadata = _objectSpread(_objectSpread({}, state.metadata), {}, {
           total_count: state.metadata.total_count - normalizedItems.length,
           unseen_count: state.metadata.unseen_count - unseenCount,
           unread_count: state.metadata.unread_count - unreadCount
-        }); // Remove the archiving entries
-
+        });
 
+        // Remove the archiving entries
         var entriesToSet = state.items.filter(item => !itemIds.includes(item.id));
         setState(state => state.setResult({
           entries: entriesToSet,
@@ -377,14 +337,11 @@ class Feed {
           archived_at: new Date().toISOString()
         });
       }
-
       return _this8.makeStatusUpdate(itemOrItems, "archived");
     })();
   }
-
   markAllAsArchived() {
     var _this9 = 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
@@ -395,11 +352,11 @@ class Feed {
       } = _this9.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
+      } = 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 = _this9.defaultOptions.archived === "exclude";
-
       if (shouldOptimisticallyRemoveItems) {
         // Reset the store to clear out all of items and reset the badge count
         setState(store => store.resetStore());
@@ -411,41 +368,33 @@ class Feed {
             archived_at: new Date().toISOString()
           });
         });
-      } // Issue the API request to the bulk status change API
-
+      }
 
+      // Issue the API request to the bulk status change API
       var result = yield _this9.makeBulkStatusUpdate("archive");
-
       _this9.broadcaster.emit("items:all_archived", {
         items
       });
-
       _this9.broadcastOverChannel("items:all_archived", {
         items
       });
-
       return result;
     })();
   }
-
   markAsUnarchived(itemOrItems) {
     var _this10 = this;
-
     return _asyncToGenerator(function* () {
       _this10.optimisticallyPerformStatusUpdate(itemOrItems, "unarchived", {
         archived_at: null
       });
-
       return _this10.makeStatusUpdate(itemOrItems, "unarchived");
     })();
   }
-  /* Fetches the feed content, appending it to the store */
-
 
+  /* Fetches the feed content, appending it to the store */
   fetch() {
     var _arguments = arguments,
-        _this11 = this;
-
+      _this11 = this;
     return _asyncToGenerator(function* () {
       var options = _arguments.length > 0 && _arguments[0] !== undefined ? _arguments[0] : {};
       var {
@@ -454,32 +403,31 @@ class Feed {
       } = _this11.store;
       var {
         networkStatus
-      } = getState(); // If there's an existing request in flight, then do nothing
+      } = getState();
 
+      // If there's an existing request in flight, then do nothing
       if (isRequestInFlight(networkStatus)) {
         return;
-      } // Set the loading type based on the request type it is
-
+      }
 
+      // Set the loading type based on the request type it is
       setState(store => {
         var _options$__loadingTyp;
-
         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
+      });
 
+      // Always include the default params, if they have been set
       var queryParams = _objectSpread(_objectSpread(_objectSpread({}, _this11.defaultOptions), options), {}, {
         // Unset options that should not be sent to the API
         __loadingType: undefined,
         __fetchSource: undefined,
         __experimentalCrossBrowserUpdates: undefined
       });
-
       var result = yield _this11.apiClient.makeRequest({
         method: "GET",
         url: "/v1/users/".concat(_this11.knock.userId, "/feeds/").concat(_this11.feedId),
         params: queryParams
       });
-
       if (result.statusCode === "error" || !result.body) {
         setState(store => store.setNetworkStatus(NetworkStatus.error));
         return {
@@ -487,13 +435,11 @@ class Feed {
           data: result.error || result.body
         };
       }
-
       var response = {
         entries: result.body.entries,
         meta: result.body.meta,
         page_info: result.body.page_info
       };
-
       if (options.before) {
         var opts = {
           shouldSetPage: false,
@@ -508,31 +454,27 @@ class Feed {
         setState(state => state.setResult(response, _opts));
       } else {
         setState(state => state.setResult(response));
-      } // Legacy `messages.new` event, should be removed in a future version
-
-
-      _this11.broadcast("messages.new", response); // Broadcast the appropriate event type depending on the fetch source
+      }
 
+      // Legacy `messages.new` event, should be removed in a future version
+      _this11.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";
       var eventPayload = {
         items: response.entries,
         metadata: response.meta,
         event: feedEventType
       };
-
       _this11.broadcast(eventPayload.event, eventPayload);
-
       return {
         data: response,
         status: result.statusCode
       };
     })();
   }
-
   fetchNextPage() {
     var _this12 = this;
-
     return _asyncToGenerator(function* () {
       // Attempts to fetch the next page of results (if we have any)
       var {
@@ -541,27 +483,23 @@ class Feed {
       var {
         pageInfo
       } = getState();
-
       if (!pageInfo.after) {
         // Nothing more to fetch
         return;
       }
-
       _this12.fetch({
         after: pageInfo.after,
         __loadingType: NetworkStatus.fetchMore
       });
     })();
   }
-
   broadcast(eventName, data) {
     this.broadcaster.emit(eventName, data);
-  } // Invoked when a new real-time message comes in from the socket
-
+  }
 
+  // Invoked when a new real-time message comes in from the socket
   onNewMessageReceived(_ref) {
     var _this13 = this;
-
     return _asyncToGenerator(function* () {
       var {
         metadata
@@ -574,21 +512,19 @@ class Feed {
       var {
         items
       } = getState();
-      var currentHead = items[0]; // Optimistically set the badge counts
-
-      setState(state => state.setMetadata(metadata)); // Fetch the items before the current head (if it exists)
-
+      var currentHead = items[0];
+      // Optimistically set the badge counts
+      setState(state => state.setMetadata(metadata));
+      // Fetch the items before the current head (if it exists)
       _this13.fetch({
         before: currentHead === null || currentHead === void 0 ? void 0 : currentHead.__cursor,
         __fetchSource: "socket"
       });
     })();
   }
-
   buildUserFeedId() {
     return "".concat(this.feedId, ":").concat(this.knock.userId);
   }
-
   optimisticallyPerformStatusUpdate(itemOrItems, type, attrs, badgeCountAttr) {
     var {
       getState,
@@ -596,47 +532,42 @@ class Feed {
     } = this.store;
     var normalizedItems = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
     var itemIds = normalizedItems.map(item => item.id);
-
     if (badgeCountAttr) {
       var {
         metadata
-      } = getState(); // We only want to update the counts of items that have not already been counted towards the
-      // badge count total to avoid updating the badge count unnecessarily.
+      } = getState();
 
+      // We only want to update the counts of items that have not already been counted towards the
+      // badge count total to avoid updating the badge count unnecessarily.
       var itemsToUpdate = normalizedItems.filter(item => {
         switch (type) {
           case "seen":
             return item.seen_at === null;
-
           case "unseen":
             return item.seen_at !== null;
-
           case "read":
           case "interacted":
             return item.read_at === null;
-
           case "unread":
             return item.read_at !== null;
-
           default:
             return true;
         }
-      }); // Tnis is a hack to determine the direction of whether we're
-      // adding or removing from the badge count
+      });
 
+      // Tnis is a hack to determine the direction of whether we're
+      // adding or removing from the badge count
       var direction = type.startsWith("un") ? itemsToUpdate.length : -itemsToUpdate.length;
       setState(store => store.setMetadata(_objectSpread(_objectSpread({}, metadata), {}, {
         [badgeCountAttr]: Math.max(0, metadata[badgeCountAttr] + direction)
       })));
-    } // Update the items with the given attributes
-
+    }
 
+    // Update the items with the given attributes
     setState(store => store.setItemAttrs(itemIds, attrs));
   }
-
   makeStatusUpdate(itemOrItems, type) {
     var _this14 = this;
-
     return _asyncToGenerator(function* () {
       // Always treat items as a batch to use the corresponding batch endpoint
       var items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
@@ -647,24 +578,21 @@ class Feed {
         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
+      });
 
+      // 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
       _this14.broadcaster.emit("items:".concat(type), {
         items
       });
-
       _this14.broadcastOverChannel("items:".concat(type), {
         items
       });
-
       return result;
     })();
   }
-
   makeBulkStatusUpdate(type) {
     var _this15 = this;
-
     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
@@ -684,15 +612,14 @@ class Feed {
       });
     })();
   }
-
   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
-
+    }
 
+    // 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({
@@ -704,7 +631,36 @@ class Feed {
     }
   }
 
-}
+  /**
+   * Listen for changes to document visibility and automatically disconnect
+   * or reconnect the socket after a delay
+   */
+  setupAutoSocketManager(autoManageSocketConnectionDelay) {
+    var disconnectDelay = autoManageSocketConnectionDelay !== null && autoManageSocketConnectionDelay !== void 0 ? autoManageSocketConnectionDelay : DEFAULT_DISCONNECT_DELAY;
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "hidden") {
+        // When the tab is hidden, clean up the socket connection after a delay
+        this.disconnectTimer = setTimeout(() => {
+          this.apiClient.disconnectSocket();
+          this.disconnectTimer = null;
+        }, disconnectDelay);
+      } else if (document.visibilityState === "visible") {
+        var _this$apiClient$socke;
+        // When the tab is visible, clear the disconnect timer if active to cancel disconnecting
+        // This handles cases where the tab is only briefly hidden to avoid unnecessary disconnects
+        if (this.disconnectTimer) {
+          clearTimeout(this.disconnectTimer);
+          this.disconnectTimer = null;
+        }
 
+        // If the socket is not connected, try to reconnect
+        if (!((_this$apiClient$socke = this.apiClient.socket) !== null && _this$apiClient$socke !== void 0 && _this$apiClient$socke.isConnected())) {
+          this.apiClient.reconnectSocket();
+          this.fetch();
+        }
+      }
+    });
+  }
+}
 export default Feed;
 //# sourceMappingURL=feed.js.map