stream-chat-react-native-core/lib/module/components/ChannelList/hooks/usePaginatedChannels.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.usePaginatedChannels = void 0;
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _ActiveChannelsRefContext = require("../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext");
var _ChatContext = require("../../../contexts/chatContext/ChatContext");
var _hooks = require("../../../hooks");
var _useIsMountedRef = require("../../../hooks/useIsMountedRef");
var RETRY_INTERVAL_IN_MS = 5000;
var selector = nextValue => ({
  channelListInitialized: nextValue.initialized,
  channels: nextValue.channels,
  error: nextValue.error,
  pagination: nextValue.pagination
});
var usePaginatedChannels = ({
  channelManager,
  enableOfflineSupport,
  filters = {},
  options = {},
  sort = {}
}) => {
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    staticChannelsActive = _useState2[0],
    setStaticChannelsActive = _useState2[1];
  var _useState3 = (0, _react.useState)('queryLocalDB'),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    activeQueryType = _useState4[0],
    setActiveQueryType = _useState4[1];
  var activeChannels = (0, _ActiveChannelsRefContext.useActiveChannelsRefContext)();
  var isMountedRef = (0, _useIsMountedRef.useIsMountedRef)();
  var _useChatContext = (0, _ChatContext.useChatContext)(),
    client = _useChatContext.client;
  var _ref = (0, _hooks.useStateStore)(channelManager?.state, selector) ?? {},
    channelListInitialized = _ref.channelListInitialized,
    channels = _ref.channels,
    pagination = _ref.pagination,
    error = _ref.error;
  var hasNextPage = pagination?.hasNext;
  var filtersRef = (0, _react.useRef)(null);
  var optionsRef = (0, _react.useRef)(null);
  var sortRef = (0, _react.useRef)(null);
  var activeRequestId = (0, _react.useRef)(0);
  var isQueryingRef = (0, _react.useRef)(false);
  var lastRefresh = (0, _react.useRef)(Date.now());
  var queryChannels = function () {
    var _ref2 = (0, _asyncToGenerator2.default)(function* (queryType = 'loadChannels') {
      if (!client || !isMountedRef.current) {
        return;
      }
      var hasUpdatedData = queryType === 'loadChannels' || queryType === 'refresh' || queryType === 'backgroundRefresh' || JSON.stringify(filtersRef.current) !== JSON.stringify(filters) || JSON.stringify(optionsRef.current) !== JSON.stringify(options) || JSON.stringify(sortRef.current) !== JSON.stringify(sort);
      var isQueryStale = () => !isMountedRef || activeRequestId.current !== currentRequestId;
      if (!hasUpdatedData) {
        if (activeQueryType === null) {
          return;
        }
      }
      filtersRef.current = filters;
      optionsRef.current = options;
      sortRef.current = sort;
      isQueryingRef.current = true;
      activeRequestId.current++;
      var currentRequestId = activeRequestId.current;
      setActiveQueryType(queryType);
      var newOptions = {
        offset: 0,
        ...options
      };
      try {
        if (isQueryStale() || !isMountedRef.current) {
          return;
        }
        if (queryType === 'loadChannels') {
          yield channelManager.loadNext();
        } else {
          yield channelManager.queryChannels(filters, sort, newOptions, {
            skipInitialization: enableOfflineSupport ? undefined : activeChannels.current
          });
        }
        setStaticChannelsActive(false);
        isQueryingRef.current = false;
      } catch (err) {
        isQueryingRef.current = false;
        if (isQueryStale()) {
          return;
        }
        console.warn(err);
      }
      setActiveQueryType(null);
    });
    return function queryChannels() {
      return _ref2.apply(this, arguments);
    };
  }();
  var refreshList = function () {
    var _ref3 = (0, _asyncToGenerator2.default)(function* ({
      isBackground = false
    } = {}) {
      var now = Date.now();
      if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
        return;
      }
      lastRefresh.current = Date.now();
      yield queryChannels(isBackground ? 'backgroundRefresh' : 'refresh');
    });
    return function refreshList() {
      return _ref3.apply(this, arguments);
    };
  }();
  var reloadList = function () {
    var _ref4 = (0, _asyncToGenerator2.default)(function* () {
      yield queryChannels('reload');
    });
    return function reloadList() {
      return _ref4.apply(this, arguments);
    };
  }();
  var filterStr = (0, _react.useMemo)(() => JSON.stringify(filters), [filters]);
  var optionsStr = (0, _react.useMemo)(() => JSON.stringify(options), [options]);
  var sortStr = (0, _react.useMemo)(() => JSON.stringify(sort), [sort]);
  (0, _react.useEffect)(() => {
    var listener = client.on('connection.changed', function () {
      var _ref5 = (0, _asyncToGenerator2.default)(function* (event) {
        if (event.online) {
          yield refreshList({
            isBackground: true
          });
        }
      });
      return function (_x) {
        return _ref5.apply(this, arguments);
      };
    }());
    reloadList();
    return () => listener?.unsubscribe?.();
  }, [filterStr, optionsStr, sortStr, channelManager]);
  return {
    channelListInitialized,
    channels,
    error,
    hasNextPage,
    loadingChannels: activeQueryType === 'queryLocalDB' ? true : pagination?.isLoading || !channelListInitialized && channels.length === 0 && !error,
    loadingNextPage: pagination?.isLoadingNext,
    loadNextPage: channelManager.loadNext,
    refreshing: activeQueryType === 'refresh',
    refreshList: () => refreshList(),
    reloadList,
    staticChannelsActive
  };
};
exports.usePaginatedChannels = usePaginatedChannels;
//# sourceMappingURL=usePaginatedChannels.js.map