@sendbird/uikit-react-native/lib/commonjs/fragments/createMessageSearchFragment.js

Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _message = require("@sendbird/chat/message");
var _uikitUtils = require("@sendbird/uikit-utils");
var _MessageSearchResultItem = _interopRequireDefault(require("../components/MessageSearchResultItem"));
var _StatusComposition = _interopRequireDefault(require("../components/StatusComposition"));
var _messageSearch = require("../domain/messageSearch");
var _useContext = require("../hooks/useContext");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function getMessageSearchQuery(sdk, options) {
  if (options.queryCreator) return options.queryCreator(options);
  return sdk.createMessageSearchQuery(options);
}
const createMessageSearchFragment = initModule => {
  const MessageSearchModule = (0, _messageSearch.createMessageSearchModule)(initModule);
  return ({
    onPressHeaderLeft = _uikitUtils.NOOP,
    channel,
    queryCreator,
    renderSearchResultItem,
    onPressSearchResultItem
  }) => {
    const padding = (0, _uikitUtils.useSafeAreaPadding)(['left', 'right', 'bottom']);
    const {
      sdk
    } = (0, _useContext.useSendbirdChat)();
    const {
      keyword,
      setKeyword,
      search,
      searchResults,
      loading,
      next,
      error,
      query
    } = useMessageSearch(sdk, {
      channel,
      queryCreator
    });
    const renderItem = (0, _uikitUtils.useFreshCallback)(props => {
      if (renderSearchResultItem) return renderSearchResultItem(props);
      return /*#__PURE__*/_react.default.createElement(_MessageSearchResultItem.default, props);
    });
    return /*#__PURE__*/_react.default.createElement(MessageSearchModule.Provider, null, /*#__PURE__*/_react.default.createElement(MessageSearchModule.Header, {
      keyword: keyword,
      onChangeKeyword: setKeyword,
      onPressHeaderLeft: onPressHeaderLeft,
      onPressHeaderRight: search
    }), /*#__PURE__*/_react.default.createElement(_StatusComposition.default, {
      loading: loading,
      LoadingComponent: /*#__PURE__*/_react.default.createElement(MessageSearchModule.StatusLoading, null),
      error: Boolean(error),
      ErrorComponent: /*#__PURE__*/_react.default.createElement(MessageSearchModule.StatusError, {
        onPressRetry: search
      })
    }, query && /*#__PURE__*/_react.default.createElement(MessageSearchModule.List, {
      channel: channel,
      onPressSearchResultItem: onPressSearchResultItem,
      messages: searchResults,
      renderSearchResultItem: renderItem,
      flatListProps: {
        keyboardDismissMode: 'on-drag',
        keyboardShouldPersistTaps: 'handled',
        onEndReached: next,
        ListEmptyComponent: MessageSearchModule.StatusEmpty,
        contentContainerStyle: {
          flexGrow: 1,
          ...padding
        }
      }
    })));
  };
};
const useMessageSearch = (sdk, {
  channel,
  queryCreator
}) => {
  const [query, setQuery] = (0, _react.useState)();
  const [keyword, setKeyword] = (0, _react.useState)('');
  const [loading, setLoading] = (0, _react.useState)(false);
  const [error, setError] = (0, _react.useState)(null);
  const [searchResults, setSearchResults] = (0, _react.useState)([]);
  const queryInProgress = (0, _react.useRef)(false);
  const search = (0, _uikitUtils.useFreshCallback)(async () => {
    if (keyword.length <= 0) return;
    if (queryInProgress.current) return;
    const query = getMessageSearchQuery(sdk, {
      keyword,
      channelUrl: channel.url,
      messageTimestampFrom: channel.messageOffsetTimestamp,
      order: _message.MessageSearchOrder.TIMESTAMP,
      queryCreator
    });
    setQuery(query);
    setLoading(true);
    setError(null);
    try {
      queryInProgress.current = true;
      const result = await query.next();
      setSearchResults(result);
    } catch (err) {
      _uikitUtils.Logger.warn('[MessageSearchFragment] search failure', err);
      setError(err);
    } finally {
      queryInProgress.current = false;
      setLoading(false);
    }
  });
  const next = (0, _uikitUtils.useFreshCallback)(async () => {
    if (!(query !== null && query !== void 0 && query.hasNext)) return;
    if (queryInProgress.current) return;
    try {
      queryInProgress.current = true;
      const result = await query.next();
      setSearchResults(prev => [...prev, ...result]);
    } catch (err) {
      _uikitUtils.Logger.warn('[MessageSearchFragment] next failure', err);
      setError(err);
    } finally {
      queryInProgress.current = false;
    }
  });
  return {
    keyword,
    setKeyword,
    query,
    loading,
    error,
    searchResults,
    search,
    next
  };
};
var _default = exports.default = createMessageSearchFragment;
//# sourceMappingURL=createMessageSearchFragment.js.map