stream-chat-react-native-core 4.0.0 → 4.1.0

package/lib/module/components/ChannelList/hooks/usePaginatedChannels.js

@@ -17,21 +17,27 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _utils = require("../utils");
-
 var _ActiveChannelsRefContext = require("../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext");
 
 var _ChatContext = require("../../../contexts/chatContext/ChatContext");
 
-var wait = function wait(ms) {
+var _useIsMountedRef = require("../../../hooks/useIsMountedRef");
+
+var _date = require("../../../utils/date");
+
+var _utils = require("../utils");
+
+var waitSeconds = function waitSeconds(seconds) {
   return new Promise(function (resolve) {
-    setTimeout(resolve, ms);
+    setTimeout(resolve, seconds * _date.ONE_SECOND_IN_MS);
   });
 };
 
 var DEFAULT_OPTIONS = {
   message_limit: 10
 };
+var MAX_NUMBER_OF_RETRIES = 3;
+var RETRY_INTERVAL_IN_MS = 5000;
 
 var usePaginatedChannels = function usePaginatedChannels(_ref) {
   var _ref$filters = _ref.filters,
@@ -44,14 +50,14 @@ var usePaginatedChannels = function usePaginatedChannels(_ref) {
   var _useChatContext = (0, _ChatContext.useChatContext)(),
       client = _useChatContext.client;
 
-  var activeChannels = (0, _ActiveChannelsRefContext.useActiveChannelsRefContext)();
-
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       channels = _useState2[0],
       setChannels = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var activeChannels = (0, _ActiveChannelsRefContext.useActiveChannelsRefContext)();
+
+  var _useState3 = (0, _react.useState)(),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       error = _useState4[0],
       setError = _useState4[1];
@@ -62,26 +68,17 @@ var usePaginatedChannels = function usePaginatedChannels(_ref) {
       setHasNextPage = _useState6[1];
 
   var lastRefresh = (0, _react.useRef)(Date.now());
+  var isQueryingRef = (0, _react.useRef)(false);
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)(),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      loadingChannels = _useState8[0],
-      setLoadingChannels = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      loadingNextPage = _useState10[0],
-      setLoadingNextPage = _useState10[1];
+      activeQueryType = _useState8[0],
+      setActiveQueryType = _useState8[1];
 
-  var _useState11 = (0, _react.useState)(0),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      offset = _useState12[0],
-      setOffset = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(false),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      refreshing = _useState14[0],
-      setRefreshing = _useState14[1];
+  var isMountedRef = (0, _useIsMountedRef.useIsMountedRef)();
+  var filtersRef = (0, _react.useRef)(null);
+  var sortRef = (0, _react.useRef)(null);
+  var activeRequestId = (0, _react.useRef)(0);
 
   var queryChannels = function () {
     var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
@@ -89,6 +86,9 @@ var usePaginatedChannels = function usePaginatedChannels(_ref) {
 
       var queryType,
           retryCount,
+          hasUpdatedData,
+          isQueryStale,
+          currentRequestId,
           newOptions,
           channelQueryResponse,
           newChannels,
@@ -97,10 +97,10 @@ var usePaginatedChannels = function usePaginatedChannels(_ref) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              queryType = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
+              queryType = _args.length > 0 && _args[0] !== undefined ? _args[0] : 'loadChannels';
               retryCount = _args.length > 1 && _args[1] !== undefined ? _args[1] : 0;
 
-              if (!(!client || loadingChannels || loadingNextPage || refreshing)) {
+              if (!(!client || !isMountedRef.current)) {
                 _context.next = 4;
                 break;
               }
@@ -108,69 +108,102 @@ var usePaginatedChannels = function usePaginatedChannels(_ref) {
               return _context.abrupt("return");
 
             case 4:
-              if (queryType === 'reload') {
-                setLoadingChannels(true);
-              } else if (queryType === 'refresh') {
-                setRefreshing(true);
-              } else if (!queryType) {
-                setLoadingNextPage(true);
+              hasUpdatedData = queryType === 'loadChannels' || [JSON.stringify(filtersRef.current) !== JSON.stringify(filters), JSON.stringify(sortRef.current) !== JSON.stringify(sort)].some(Boolean);
+
+              isQueryStale = function isQueryStale() {
+                return !isMountedRef || activeRequestId.current !== currentRequestId;
+              };
+
+              if (hasUpdatedData) {
+                _context.next = 9;
+                break;
+              }
+
+              if (!(activeQueryType === null)) {
+                _context.next = 9;
+                break;
               }
 
+              return _context.abrupt("return");
+
+            case 9:
+              filtersRef.current = filters;
+              sortRef.current = sort;
+              isQueryingRef.current = true;
+              setError(undefined);
+              activeRequestId.current++;
+              currentRequestId = activeRequestId.current;
+              setActiveQueryType(queryType);
               newOptions = (0, _extends2["default"])({
                 limit: (_options$limit = options == null ? void 0 : options.limit) != null ? _options$limit : _utils.MAX_QUERY_CHANNELS_LIMIT,
-                offset: queryType === 'reload' || queryType === 'refresh' ? 0 : offset
+                offset: queryType === 'loadChannels' ? channels.length : 0
               }, options);
-              _context.prev = 6;
-              _context.next = 9;
+              _context.prev = 17;
+              _context.next = 20;
               return client.queryChannels(filters, sort, newOptions, {
                 skipInitialization: activeChannels.current
               });
 
-            case 9:
+            case 20:
               channelQueryResponse = _context.sent;
+
+              if (!(isQueryStale() || !isMountedRef.current)) {
+                _context.next = 23;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 23:
               channelQueryResponse.forEach(function (channel) {
                 return channel.state.setIsUpToDate(true);
               });
-              newChannels = queryType === 'reload' || queryType === 'refresh' ? channelQueryResponse : [].concat((0, _toConsumableArray2["default"])(channels), (0, _toConsumableArray2["default"])(channelQueryResponse));
+              newChannels = queryType === 'loadChannels' ? [].concat((0, _toConsumableArray2["default"])(channels), (0, _toConsumableArray2["default"])(channelQueryResponse)) : channelQueryResponse;
               setChannels(newChannels);
               setHasNextPage(channelQueryResponse.length >= newOptions.limit);
-              setOffset(newChannels.length);
-              setError(false);
-              _context.next = 29;
+              setError(undefined);
+              isQueryingRef.current = false;
+              _context.next = 44;
               break;
 
-            case 18:
-              _context.prev = 18;
-              _context.t0 = _context["catch"](6);
-              _context.next = 22;
-              return wait(2000);
+            case 31:
+              _context.prev = 31;
+              _context.t0 = _context["catch"](17);
+              isQueryingRef.current = false;
+              _context.next = 36;
+              return waitSeconds(2);
+
+            case 36:
+              if (!isQueryStale()) {
+                _context.next = 38;
+                break;
+              }
+
+              return _context.abrupt("return");
 
-            case 22:
-              if (!(retryCount === 3)) {
-                _context.next = 28;
+            case 38:
+              if (!(retryCount === MAX_NUMBER_OF_RETRIES && !isQueryingRef.current)) {
+                _context.next = 43;
                 break;
               }
 
-              setLoadingChannels(false);
-              setLoadingNextPage(false);
-              setRefreshing(false);
+              setActiveQueryType(null);
               console.warn(_context.t0);
-              return _context.abrupt("return", setError(true));
+              setError(new Error("Maximum number of retries reached in queryChannels. Last error message is: " + _context.t0));
+              return _context.abrupt("return");
 
-            case 28:
+            case 43:
               return _context.abrupt("return", queryChannels(queryType, retryCount + 1));
 
-            case 29:
-              setLoadingChannels(false);
-              setLoadingNextPage(false);
-              setRefreshing(false);
+            case 44:
+              setActiveQueryType(null);
 
-            case 32:
+            case 45:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[6, 18]]);
+      }, _callee, null, [[17, 31]]);
     }));
 
     return function queryChannels() {
@@ -183,7 +216,7 @@ var usePaginatedChannels = function usePaginatedChannels(_ref) {
   var refreshList = function refreshList() {
     var now = Date.now();
 
-    if (now - lastRefresh.current < 5000 && !error) {
+    if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
       return;
     }
 
@@ -208,10 +241,10 @@ var usePaginatedChannels = function usePaginatedChannels(_ref) {
     channels: channels,
     error: error,
     hasNextPage: hasNextPage,
-    loadingChannels: loadingChannels,
-    loadingNextPage: loadingNextPage,
+    loadingChannels: activeQueryType === 'reload',
+    loadingNextPage: activeQueryType === 'loadChannels',
     loadNextPage: loadNextPage,
-    refreshing: refreshing,
+    refreshing: activeQueryType === 'refresh',
     refreshList: refreshList,
     reloadList: reloadList,
     setChannels: setChannels

package/lib/module/components/ChannelList/hooks/usePaginatedChannels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePaginatedChannels.ts"],"names":["wait","ms","Promise","resolve","setTimeout","DEFAULT_OPTIONS","message_limit","usePaginatedChannels","filters","options","sort","client","activeChannels","channels","setChannels","error","setError","hasNextPage","setHasNextPage","lastRefresh","Date","now","loadingChannels","setLoadingChannels","loadingNextPage","setLoadingNextPage","offset","setOffset","refreshing","setRefreshing","queryChannels","queryType","retryCount","newOptions","limit","MAX_QUERY_CHANNELS_LIMIT","skipInitialization","current","channelQueryResponse","forEach","channel","state","setIsUpToDate","newChannels","length","console","warn","loadNextPage","undefined","refreshList","reloadList","filterStr","JSON","stringify","sortStr"],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { MAX_QUERY_CHANNELS_LIMIT } from '../utils';\n\nimport { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext';\nimport { useChatContext } from '../../../contexts/chatContext/ChatContext';\n\nimport type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';\n\nimport type {\n  DefaultAttachmentType,\n  DefaultChannelType,\n  DefaultCommandType,\n  DefaultEventType,\n  DefaultMessageType,\n  DefaultReactionType,\n  DefaultUserType,\n  UnknownType,\n} from '../../../types/types';\n\nconst wait = (ms: number) =>\n  new Promise((resolve) => {\n    setTimeout(resolve, ms);\n  });\n\ntype Parameters<\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Us extends UnknownType = DefaultUserType,\n> = {\n  filters: ChannelFilters<Ch, Co, Us>;\n  options: ChannelOptions;\n  sort: ChannelSort<Ch>;\n};\n\nconst DEFAULT_OPTIONS = {\n  message_limit: 10,\n};\n\nexport const usePaginatedChannels = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>({\n  filters = {},\n  options = DEFAULT_OPTIONS,\n  sort = {},\n}: Parameters<Ch, Co, Us>) => {\n  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();\n  const activeChannels = useActiveChannelsRefContext();\n\n  const [channels, setChannels] = useState<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>([]);\n  const [error, setError] = useState(false);\n  const [hasNextPage, setHasNextPage] = useState(true);\n  const lastRefresh = useRef(Date.now());\n  const [loadingChannels, setLoadingChannels] = useState(false);\n  const [loadingNextPage, setLoadingNextPage] = useState(false);\n  const [offset, setOffset] = useState(0);\n  const [refreshing, setRefreshing] = useState(false);\n\n  const queryChannels = async (queryType = '', retryCount = 0): Promise<void> => {\n    if (!client || loadingChannels || loadingNextPage || refreshing) return;\n\n    if (queryType === 'reload') {\n      setLoadingChannels(true);\n    } else if (queryType === 'refresh') {\n      setRefreshing(true);\n    } else if (!queryType) {\n      setLoadingNextPage(true);\n    }\n\n    const newOptions = {\n      limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,\n      offset: queryType === 'reload' || queryType === 'refresh' ? 0 : offset,\n      ...options,\n    };\n\n    try {\n      const channelQueryResponse = await client.queryChannels(filters, sort, newOptions, {\n        skipInitialization: activeChannels.current,\n      });\n\n      channelQueryResponse.forEach((channel) => channel.state.setIsUpToDate(true));\n\n      const newChannels =\n        queryType === 'reload' || queryType === 'refresh'\n          ? channelQueryResponse\n          : [...channels, ...channelQueryResponse];\n\n      setChannels(newChannels);\n      setHasNextPage(channelQueryResponse.length >= newOptions.limit);\n      setOffset(newChannels.length);\n      setError(false);\n    } catch (err) {\n      await wait(2000);\n\n      if (retryCount === 3) {\n        setLoadingChannels(false);\n        setLoadingNextPage(false);\n        setRefreshing(false);\n        console.warn(err);\n        return setError(true);\n      }\n\n      return queryChannels(queryType, retryCount + 1);\n    }\n\n    setLoadingChannels(false);\n    setLoadingNextPage(false);\n    setRefreshing(false);\n  };\n\n  const loadNextPage = hasNextPage ? queryChannels : undefined;\n  const refreshList = () => {\n    const now = Date.now();\n    // Only allow pull-to-refresh 5 seconds after last successful refresh.\n    if (now - lastRefresh.current < 5000 && !error) {\n      return;\n    }\n\n    lastRefresh.current = Date.now();\n    return queryChannels('refresh');\n  };\n  const reloadList = () => queryChannels('reload');\n\n  /**\n   * Equality check using stringified filters/sort ensure that we don't make un-necessary queryChannels api calls\n   * for the scenario:\n   *\n   * <ChannelList\n   *    filters={{\n   *      members: { $in: ['vishal'] }\n   *    }}\n   *    ...\n   * />\n   *\n   * Here we have passed filters as inline object, which means on every re-render of\n   * parent component, ChannelList will receive new object reference (even though value is same), which\n   * in return will trigger useEffect. To avoid this, we can add a value check.\n   */\n  const filterStr = useMemo(() => JSON.stringify(filters), [filters]);\n  const sortStr = useMemo(() => JSON.stringify(sort), [sort]);\n\n  useEffect(() => {\n    reloadList();\n  }, [filterStr, sortStr]);\n\n  return {\n    channels,\n    error,\n    hasNextPage,\n    loadingChannels,\n    loadingNextPage,\n    loadNextPage,\n    refreshing,\n    refreshList,\n    reloadList,\n    setChannels,\n  };\n};\n"]}
+{"version":3,"sources":["usePaginatedChannels.ts"],"names":["waitSeconds","seconds","Promise","resolve","setTimeout","ONE_SECOND_IN_MS","DEFAULT_OPTIONS","message_limit","MAX_NUMBER_OF_RETRIES","RETRY_INTERVAL_IN_MS","usePaginatedChannels","filters","options","sort","client","channels","setChannels","activeChannels","error","setError","hasNextPage","setHasNextPage","lastRefresh","Date","now","isQueryingRef","activeQueryType","setActiveQueryType","isMountedRef","filtersRef","sortRef","activeRequestId","queryChannels","queryType","retryCount","current","hasUpdatedData","JSON","stringify","some","Boolean","isQueryStale","currentRequestId","undefined","newOptions","limit","MAX_QUERY_CHANNELS_LIMIT","offset","length","skipInitialization","channelQueryResponse","forEach","channel","state","setIsUpToDate","newChannels","console","warn","Error","loadNextPage","refreshList","reloadList","filterStr","sortStr","loadingChannels","loadingNextPage","refreshing"],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\n\nimport type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';\n\nimport { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext';\nimport { useChatContext } from '../../../contexts/chatContext/ChatContext';\nimport { useIsMountedRef } from '../../../hooks/useIsMountedRef';\n\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport { ONE_SECOND_IN_MS } from '../../../utils/date';\nimport { MAX_QUERY_CHANNELS_LIMIT } from '../utils';\n\nconst waitSeconds = (seconds: number) =>\n  new Promise((resolve) => {\n    setTimeout(resolve, seconds * ONE_SECOND_IN_MS);\n  });\n\ntype Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =\n  {\n    filters: ChannelFilters<StreamChatGenerics>;\n    options: ChannelOptions;\n    sort: ChannelSort<StreamChatGenerics>;\n  };\n\nconst DEFAULT_OPTIONS = {\n  message_limit: 10,\n};\n\nconst MAX_NUMBER_OF_RETRIES = 3;\nconst RETRY_INTERVAL_IN_MS = 5000;\n\ntype QueryType = 'reload' | 'refresh' | 'loadChannels';\nexport type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;\n\nexport const usePaginatedChannels = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  filters = {},\n  options = DEFAULT_OPTIONS,\n  sort = {},\n}: Parameters<StreamChatGenerics>) => {\n  const { client } = useChatContext<StreamChatGenerics>();\n  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[]>([]);\n  const activeChannels = useActiveChannelsRefContext();\n\n  const [error, setError] = useState<Error>();\n  const [hasNextPage, setHasNextPage] = useState(true);\n  const lastRefresh = useRef(Date.now());\n  const isQueryingRef = useRef(false);\n  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>();\n  const isMountedRef = useIsMountedRef();\n  const filtersRef = useRef<typeof filters | null>(null);\n  const sortRef = useRef<typeof sort | null>(null);\n  const activeRequestId = useRef<number>(0);\n\n  const queryChannels: QueryChannels = async (\n    queryType: QueryType = 'loadChannels',\n    retryCount = 0,\n  ): Promise<void> => {\n    if (!client || !isMountedRef.current) return;\n\n    const hasUpdatedData =\n      queryType === 'loadChannels' ||\n      [\n        JSON.stringify(filtersRef.current) !== JSON.stringify(filters),\n        JSON.stringify(sortRef.current) !== JSON.stringify(sort),\n      ].some(Boolean);\n\n    const isQueryStale = () => !isMountedRef || activeRequestId.current !== currentRequestId;\n\n    /**\n     * We don't need to make another call to query channels if we don't\n     * have new data for the query to include\n     * */\n    if (!hasUpdatedData) {\n      if (activeQueryType === null) return;\n    }\n\n    filtersRef.current = filters;\n    sortRef.current = sort;\n    isQueryingRef.current = true;\n    setError(undefined);\n    activeRequestId.current++;\n    const currentRequestId = activeRequestId.current;\n    setActiveQueryType(queryType);\n\n    const newOptions = {\n      limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,\n      offset: queryType === 'loadChannels' ? channels.length : 0,\n      ...options,\n    };\n\n    try {\n      const channelQueryResponse = await client.queryChannels(filters, sort, newOptions, {\n        skipInitialization: activeChannels.current,\n      });\n\n      if (isQueryStale() || !isMountedRef.current) {\n        return;\n      }\n\n      channelQueryResponse.forEach((channel) => channel.state.setIsUpToDate(true));\n\n      const newChannels =\n        queryType === 'loadChannels'\n          ? [...channels, ...channelQueryResponse]\n          : channelQueryResponse;\n\n      setChannels(newChannels);\n      setHasNextPage(channelQueryResponse.length >= newOptions.limit);\n      setError(undefined);\n      isQueryingRef.current = false;\n    } catch (err: unknown) {\n      isQueryingRef.current = false;\n      await waitSeconds(2);\n\n      if (isQueryStale()) {\n        return;\n      }\n\n      // querying.current check is needed in order to make sure the next query call doesnt flick an error\n      // state and then succeed (reconnect case)\n      if (retryCount === MAX_NUMBER_OF_RETRIES && !isQueryingRef.current) {\n        setActiveQueryType(null);\n        console.warn(err);\n        setError(\n          new Error(\n            `Maximum number of retries reached in queryChannels. Last error message is: ${err}`,\n          ),\n        );\n        return;\n      }\n\n      return queryChannels(queryType, retryCount + 1);\n    }\n\n    setActiveQueryType(null);\n  };\n\n  const loadNextPage = hasNextPage ? queryChannels : undefined;\n\n  const refreshList = () => {\n    const now = Date.now();\n    // Only allow pull-to-refresh 5 seconds after last successful refresh.\n    if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {\n      return;\n    }\n\n    lastRefresh.current = Date.now();\n    return queryChannels('refresh');\n  };\n\n  const reloadList = () => queryChannels('reload');\n\n  /**\n   * Equality check using stringified filters/sort ensure that we don't make un-necessary queryChannels api calls\n   * for the scenario:\n   *\n   * <ChannelList\n   *    filters={{\n   *      members: { $in: ['vishal'] }\n   *    }}\n   *    ...\n   * />\n   *\n   * Here we have passed filters as inline object, which means on every re-render of\n   * parent component, ChannelList will receive new object reference (even though value is same), which\n   * in return will trigger useEffect. To avoid this, we can add a value check.\n   */\n  const filterStr = useMemo(() => JSON.stringify(filters), [filters]);\n  const sortStr = useMemo(() => JSON.stringify(sort), [sort]);\n\n  useEffect(() => {\n    reloadList();\n  }, [filterStr, sortStr]);\n\n  return {\n    channels,\n    error,\n    hasNextPage,\n    loadingChannels: activeQueryType === 'reload',\n    loadingNextPage: activeQueryType === 'loadChannels',\n    loadNextPage,\n    refreshing: activeQueryType === 'refresh',\n    refreshList,\n    reloadList,\n    setChannels,\n  };\n};\n"]}

package/lib/module/components/ChannelList/utils.js

@@ -3,7 +3,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAX_QUERY_CHANNELS_LIMIT = exports.DEFAULT_QUERY_CHANNELS_LIMIT = exports.getChannel = exports.moveChannelUp = void 0;
+exports.moveChannelUp = exports.getChannel = exports.MAX_QUERY_CHANNELS_LIMIT = exports.DEFAULT_QUERY_CHANNELS_LIMIT = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 

package/lib/module/components/ChannelList/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils.ts"],"names":["moveChannelUp","cid","channels","index","findIndex","c","channel","splice","unshift","getChannel","client","id","type","watch","DEFAULT_QUERY_CHANNELS_LIMIT","MAX_QUERY_CHANNELS_LIMIT"],"mappings":";;;;;;;;;;;;;AA0BO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,OAWqB;AAAA,MAFhDC,GAEgD,QAFhDA,GAEgD;AAAA,2BADhDC,QACgD;AAAA,MADhDA,QACgD,8BADrC,EACqC;AAEhD,MAAMC,KAAK,GAAGD,QAAQ,CAACE,SAAT,CAAmB,UAACC,CAAD;AAAA,WAAOA,CAAC,CAACJ,GAAF,KAAUA,GAAjB;AAAA,GAAnB,CAAd;AACA,MAAIE,KAAK,IAAI,CAAb,EAAgB,OAAOD,QAAP;AAChB,MAAMI,OAAO,GAAGJ,QAAQ,CAACC,KAAD,CAAxB;AAGAD,EAAAA,QAAQ,CAACK,MAAT,CAAgBJ,KAAhB,EAAuB,CAAvB;AACAD,EAAAA,QAAQ,CAACM,OAAT,CAAiBF,OAAjB;AAEA,6CAAWJ,QAAX;AACD,CAtBM;;;;AAsCA,IAAMO,UAAU;AAAA,8EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AASxBC,YAAAA,MATwB,SASxBA,MATwB,EAUxBC,EAVwB,SAUxBA,EAVwB,EAWxBC,IAXwB,SAWxBA,IAXwB;AAalBN,YAAAA,OAbkB,GAaRI,MAAM,CAACJ,OAAP,CAAeM,IAAf,EAAqBD,EAArB,CAbQ;AAAA;AAAA,mBAclBL,OAAO,CAACO,KAAR,EAdkB;;AAAA;AAAA,6CAejBP,OAfiB;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAH;;AAAA,kBAAVG,UAAU;AAAA;AAAA;AAAA,GAAhB;;;AAkBA,IAAMK,4BAA4B,GAAG,EAArC;;AACA,IAAMC,wBAAwB,GAAG,EAAjC","sourcesContent":["import type { Channel, StreamChat } from 'stream-chat';\n\nimport type {\n  DefaultAttachmentType,\n  DefaultChannelType,\n  DefaultCommandType,\n  DefaultEventType,\n  DefaultMessageType,\n  DefaultReactionType,\n  DefaultUserType,\n  UnknownType,\n} from '../../types/types';\n\ntype MoveParameters<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n> = {\n  channels: Channel<At, Ch, Co, Ev, Me, Re, Us>[];\n  cid: string;\n};\n\nexport const moveChannelUp = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>({\n  cid,\n  channels = [],\n}: MoveParameters<At, Ch, Co, Ev, Me, Re, Us>) => {\n  // get channel from channels\n  const index = channels.findIndex((c) => c.cid === cid);\n  if (index <= 0) return channels;\n  const channel = channels[index];\n\n  // remove channel from current position and add to start\n  channels.splice(index, 1);\n  channels.unshift(channel);\n\n  return [...channels];\n};\n\ntype GetParameters<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n> = {\n  client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>;\n  id: string;\n  type: string;\n};\n\nexport const getChannel = async <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>({\n  client,\n  id,\n  type,\n}: GetParameters<At, Ch, Co, Ev, Me, Re, Us>) => {\n  const channel = client.channel(type, id);\n  await channel.watch();\n  return channel;\n};\n\nexport const DEFAULT_QUERY_CHANNELS_LIMIT = 10;\nexport const MAX_QUERY_CHANNELS_LIMIT = 30;\n"]}
+{"version":3,"sources":["utils.ts"],"names":["moveChannelUp","cid","channels","index","findIndex","c","channel","splice","unshift","getChannel","client","id","type","watch","DEFAULT_QUERY_CHANNELS_LIMIT","MAX_QUERY_CHANNELS_LIMIT"],"mappings":";;;;;;;;;;;;;AAWO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,OAKa;AAAA,MAFxCC,GAEwC,QAFxCA,GAEwC;AAAA,2BADxCC,QACwC;AAAA,MADxCA,QACwC,8BAD7B,EAC6B;AAExC,MAAMC,KAAK,GAAGD,QAAQ,CAACE,SAAT,CAAmB,UAACC,CAAD;AAAA,WAAOA,CAAC,CAACJ,GAAF,KAAUA,GAAjB;AAAA,GAAnB,CAAd;AACA,MAAIE,KAAK,IAAI,CAAb,EAAgB,OAAOD,QAAP;AAChB,MAAMI,OAAO,GAAGJ,QAAQ,CAACC,KAAD,CAAxB;AAGAD,EAAAA,QAAQ,CAACK,MAAT,CAAgBJ,KAAhB,EAAuB,CAAvB;AACAD,EAAAA,QAAQ,CAACM,OAAT,CAAiBF,OAAjB;AAEA,6CAAWJ,QAAX;AACD,CAhBM;;;;AA0BA,IAAMO,UAAU;AAAA,8EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAGxBC,YAAAA,MAHwB,SAGxBA,MAHwB,EAIxBC,EAJwB,SAIxBA,EAJwB,EAKxBC,IALwB,SAKxBA,IALwB;AAOlBN,YAAAA,OAPkB,GAORI,MAAM,CAACJ,OAAP,CAAeM,IAAf,EAAqBD,EAArB,CAPQ;AAAA;AAAA,mBAQlBL,OAAO,CAACO,KAAR,EARkB;;AAAA;AAAA,6CASjBP,OATiB;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAH;;AAAA,kBAAVG,UAAU;AAAA;AAAA;AAAA,GAAhB;;;AAYA,IAAMK,4BAA4B,GAAG,EAArC;;AACA,IAAMC,wBAAwB,GAAG,EAAjC","sourcesContent":["import type { Channel, StreamChat } from 'stream-chat';\n\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\ntype MoveParameters<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n  channels: Channel<StreamChatGenerics>[];\n  cid: string;\n};\n\nexport const moveChannelUp = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  cid,\n  channels = [],\n}: MoveParameters<StreamChatGenerics>) => {\n  // get channel from channels\n  const index = channels.findIndex((c) => c.cid === cid);\n  if (index <= 0) return channels;\n  const channel = channels[index];\n\n  // remove channel from current position and add to start\n  channels.splice(index, 1);\n  channels.unshift(channel);\n\n  return [...channels];\n};\n\ntype GetParameters<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n  client: StreamChat<StreamChatGenerics>;\n  id: string;\n  type: string;\n};\n\nexport const getChannel = async <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  client,\n  id,\n  type,\n}: GetParameters<StreamChatGenerics>) => {\n  const channel = client.channel(type, id);\n  await channel.watch();\n  return channel;\n};\n\nexport const DEFAULT_QUERY_CHANNELS_LIMIT = 10;\nexport const MAX_QUERY_CHANNELS_LIMIT = 30;\n"]}

package/lib/module/components/ChannelPreview/ChannelAvatar.js

@@ -16,7 +16,7 @@ var _Avatar = require("../Avatar/Avatar");
 var _GroupAvatar = require("../Avatar/GroupAvatar");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ChannelPreview/ChannelAvatar.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/ChannelPreview/ChannelAvatar.tsx";
 
 var ChannelAvatar = function ChannelAvatar(props) {
   var channel = props.channel;
@@ -31,7 +31,7 @@ var ChannelAvatar = function ChannelAvatar(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 52,
+        lineNumber: 29,
         columnNumber: 12
       }
     });
@@ -45,7 +45,7 @@ var ChannelAvatar = function ChannelAvatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 56,
+      lineNumber: 33,
       columnNumber: 5
     }
   });

package/lib/module/components/ChannelPreview/ChannelAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChannelAvatar.tsx"],"names":["ChannelAvatar","props","channel","displayAvatar","displayPresence","images","names","image","name"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAEA;;AACA;;;;;AA4BO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAS3BC,KAT2B,EAUxB;AACH,MAAQC,OAAR,GAAoBD,KAApB,CAAQC,OAAR;AAEA,MAAMC,aAAa,GAAG,oEAA+BD,OAA/B,CAAtB;AACA,MAAME,eAAe,GAAG,wEAAiCF,OAAjC,CAAxB;;AAEA,MAAIC,aAAa,CAACE,MAAlB,EAA0B;AACxB,WAAO,gCAAC,wBAAD;AAAa,MAAA,MAAM,EAAEF,aAAa,CAACE,MAAnC;AAA2C,MAAA,KAAK,EAAEF,aAAa,CAACG,KAAhE;AAAuE,MAAA,IAAI,EAAE,EAA7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAP;AACD;;AAED,SACE,gCAAC,cAAD;AACE,IAAA,KAAK,EAAEH,aAAa,CAACI,KADvB;AAEE,IAAA,IAAI,EAAEJ,aAAa,CAACK,IAFtB;AAGE,IAAA,MAAM,EAAEJ,eAHV;AAIE,IAAA,IAAI,EAAE,EAJR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF;AAQD,CA5BM","sourcesContent":["import React from 'react';\n\nimport { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplayAvatar';\nimport { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence';\n\nimport { Avatar } from '../Avatar/Avatar';\nimport { GroupAvatar } from '../Avatar/GroupAvatar';\n\nimport type { ChannelPreviewProps } from './ChannelPreview';\n\nimport type {\n  DefaultAttachmentType,\n  DefaultChannelType,\n  DefaultCommandType,\n  DefaultEventType,\n  DefaultMessageType,\n  DefaultReactionType,\n  DefaultUserType,\n  UnknownType,\n} from '../../types/types';\n\nexport type ChannelAvatarProps<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n> = Pick<ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>, 'channel'>;\n\n/**\n * This UI component displays an avatar for a particular channel.\n */\nexport const ChannelAvatar = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  props: ChannelAvatarProps<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const { channel } = props;\n\n  const displayAvatar = useChannelPreviewDisplayAvatar(channel);\n  const displayPresence = useChannelPreviewDisplayPresence(channel);\n\n  if (displayAvatar.images) {\n    return <GroupAvatar images={displayAvatar.images} names={displayAvatar.names} size={40} />;\n  }\n\n  return (\n    <Avatar\n      image={displayAvatar.image}\n      name={displayAvatar.name}\n      online={displayPresence}\n      size={40}\n    />\n  );\n};\n"]}
+{"version":3,"sources":["ChannelAvatar.tsx"],"names":["ChannelAvatar","props","channel","displayAvatar","displayPresence","images","names","image","name"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AAGA;;AACA;;;;;AASO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAG3BC,KAH2B,EAIxB;AACH,MAAQC,OAAR,GAAoBD,KAApB,CAAQC,OAAR;AAEA,MAAMC,aAAa,GAAG,oEAA+BD,OAA/B,CAAtB;AACA,MAAME,eAAe,GAAG,wEAAiCF,OAAjC,CAAxB;;AAEA,MAAIC,aAAa,CAACE,MAAlB,EAA0B;AACxB,WAAO,gCAAC,wBAAD;AAAa,MAAA,MAAM,EAAEF,aAAa,CAACE,MAAnC;AAA2C,MAAA,KAAK,EAAEF,aAAa,CAACG,KAAhE;AAAuE,MAAA,IAAI,EAAE,EAA7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAP;AACD;;AAED,SACE,gCAAC,cAAD;AACE,IAAA,KAAK,EAAEH,aAAa,CAACI,KADvB;AAEE,IAAA,IAAI,EAAEJ,aAAa,CAACK,IAFtB;AAGE,IAAA,MAAM,EAAEJ,eAHV;AAIE,IAAA,IAAI,EAAE,EAJR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF;AAQD,CAtBM","sourcesContent":["import React from 'react';\n\nimport type { ChannelPreviewProps } from './ChannelPreview';\nimport { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplayAvatar';\nimport { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence';\n\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { GroupAvatar } from '../Avatar/GroupAvatar';\n\nexport type ChannelAvatarProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;\n\n/**\n * This UI component displays an avatar for a particular channel.\n */\nexport const ChannelAvatar = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelAvatarProps<StreamChatGenerics>,\n) => {\n  const { channel } = props;\n\n  const displayAvatar = useChannelPreviewDisplayAvatar(channel);\n  const displayPresence = useChannelPreviewDisplayPresence(channel);\n\n  if (displayAvatar.images) {\n    return <GroupAvatar images={displayAvatar.images} names={displayAvatar.names} size={40} />;\n  }\n\n  return (\n    <Avatar\n      image={displayAvatar.image}\n      name={displayAvatar.name}\n      online={displayPresence}\n      size={40}\n    />\n  );\n};\n"]}

package/lib/module/components/ChannelPreview/ChannelPreview.js

@@ -15,12 +15,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _useLatestMessagePreview = require("./hooks/useLatestMessagePreview");
 
-var _ChatContext = require("../../contexts/chatContext/ChatContext");
-
 var _ChannelsContext = require("../../contexts/channelsContext/ChannelsContext");
 
+var _ChatContext = require("../../contexts/chatContext/ChatContext");
+
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ChannelPreview/ChannelPreview.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/ChannelPreview/ChannelPreview.tsx";
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -105,7 +105,7 @@ var ChannelPreviewWithContext = function ChannelPreviewWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 121,
+      lineNumber: 100,
       columnNumber: 10
     }
   });
@@ -125,7 +125,7 @@ var ChannelPreview = function ChannelPreview(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 149,
+      lineNumber: 116,
       columnNumber: 10
     }
   }));

package/lib/module/components/ChannelPreview/ChannelPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChannelPreview.tsx"],"names":["ChannelPreviewWithContext","props","channel","client","Preview","state","messages","length","lastMessage","setLastMessage","forceUpdate","setForceUpdate","countUnread","unread","setUnread","latestMessagePreview","channelLastMessage","channelLastMessageString","id","updated_at","newUnreadCount","handleEvent","event","message","type","on","off","handleReadEvent","user","userID","prev","ChannelPreview"],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { useLatestMessagePreview } from './hooks/useLatestMessagePreview';\n\nimport { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';\nimport {\n  ChannelsContextValue,\n  useChannelsContext,\n} from '../../contexts/channelsContext/ChannelsContext';\n\nimport type { Channel, ChannelState, Event, MessageResponse } from 'stream-chat';\n\nimport type {\n  DefaultAttachmentType,\n  DefaultChannelType,\n  DefaultCommandType,\n  DefaultEventType,\n  DefaultMessageType,\n  DefaultReactionType,\n  DefaultUserType,\n  UnknownType,\n} from '../../types/types';\n\nexport type ChannelPreviewPropsWithContext<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n> = Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &\n  Pick<ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'Preview'> & {\n    /**\n     * The previewed channel\n     */\n    channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;\n  };\n\n/**\n * This component manages state for the ChannelPreviewMessenger UI component and receives\n * all props from the ChannelListMessenger component.\n */\nconst ChannelPreviewWithContext = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  props: ChannelPreviewPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const { channel, client, Preview } = props;\n\n  const [lastMessage, setLastMessage] = useState<\n    | ReturnType<ChannelState<At, Ch, Co, Ev, Me, Re, Us>['formatMessage']>\n    | MessageResponse<At, Ch, Co, Me, Re, Us>\n    | undefined\n  >(channel.state.messages[channel.state.messages.length - 1]);\n  const [forceUpdate, setForceUpdate] = useState(0);\n  const [unread, setUnread] = useState(channel.countUnread());\n\n  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);\n\n  const channelLastMessage = channel.lastMessage();\n  const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;\n\n  useEffect(() => {\n    if (\n      channelLastMessage &&\n      (channelLastMessage.id !== lastMessage?.id ||\n        channelLastMessage.updated_at !== lastMessage?.updated_at)\n    ) {\n      setLastMessage(channelLastMessage);\n    }\n\n    const newUnreadCount = channel.countUnread();\n\n    if (newUnreadCount !== unread) {\n      setUnread(newUnreadCount);\n    }\n  }, [channelLastMessageString]);\n\n  useEffect(() => {\n    const handleEvent = (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {\n      if (event.message) {\n        setLastMessage(event.message);\n      }\n\n      if (event.type === 'message.new') {\n        setUnread(channel.countUnread());\n      }\n    };\n\n    channel.on('message.new', handleEvent);\n    channel.on('message.updated', handleEvent);\n    channel.on('message.deleted', handleEvent);\n\n    return () => {\n      channel.off('message.new', handleEvent);\n      channel.off('message.updated', handleEvent);\n      channel.off('message.deleted', handleEvent);\n    };\n  }, []);\n\n  useEffect(() => {\n    const handleReadEvent = (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {\n      if (event.user?.id === client.userID) {\n        setUnread(0);\n      } else if (event.user?.id) {\n        setForceUpdate((prev) => prev + 1);\n      }\n    };\n\n    channel.on('message.read', handleReadEvent);\n    return () => channel.off('message.read', handleReadEvent);\n  }, []);\n\n  return <Preview channel={channel} latestMessagePreview={latestMessagePreview} unread={unread} />;\n};\n\nexport type ChannelPreviewProps<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n> = Partial<Omit<ChannelPreviewPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'channel'>> &\n  Pick<ChannelPreviewPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'channel'>;\n\nexport const ChannelPreview = <\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  props: ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>,\n) => {\n  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();\n  const { Preview } = useChannelsContext<At, Ch, Co, Ev, Me, Re, Us>();\n\n  return <ChannelPreviewWithContext {...{ client, Preview }} {...props} />;\n};\n"]}
+{"version":3,"sources":["ChannelPreview.tsx"],"names":["ChannelPreviewWithContext","props","channel","client","Preview","state","messages","length","lastMessage","setLastMessage","forceUpdate","setForceUpdate","countUnread","unread","setUnread","latestMessagePreview","channelLastMessage","channelLastMessageString","id","updated_at","newUnreadCount","handleEvent","event","message","type","on","off","handleReadEvent","user","userID","prev","ChannelPreview"],"mappings":";;;;;;;;;;;;;AAAA;;AAIA;;AAEA;;AAIA;;;;;;;;;AAkBA,IAAMA,yBAAyB,GAAG,SAA5BA,yBAA4B,CAGhCC,KAHgC,EAI7B;AACH,MAAQC,OAAR,GAAqCD,KAArC,CAAQC,OAAR;AAAA,MAAiBC,MAAjB,GAAqCF,KAArC,CAAiBE,MAAjB;AAAA,MAAyBC,OAAzB,GAAqCH,KAArC,CAAyBG,OAAzB;;AAEA,kBAAsC,qBAIpCF,OAAO,CAACG,KAAR,CAAcC,QAAd,CAAuBJ,OAAO,CAACG,KAAR,CAAcC,QAAd,CAAuBC,MAAvB,GAAgC,CAAvD,CAJoC,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AAKA,mBAAsC,qBAAS,CAAT,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,mBAA4B,qBAAST,OAAO,CAACU,WAAR,EAAT,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA,MAAMC,oBAAoB,GAAG,sDAAwBb,OAAxB,EAAiCQ,WAAjC,EAA8CF,WAA9C,CAA7B;AAEA,MAAMQ,kBAAkB,GAAGd,OAAO,CAACM,WAAR,EAA3B;AACA,MAAMS,wBAAwB,SAAMD,kBAAN,oBAAMA,kBAAkB,CAAEE,EAA1B,KAA+BF,kBAA/B,oBAA+BA,kBAAkB,CAAEG,UAAnD,CAA9B;AAEA,wBAAU,YAAM;AACd,QACEH,kBAAkB,KACjBA,kBAAkB,CAACE,EAAnB,MAA0BV,WAA1B,oBAA0BA,WAAW,CAAEU,EAAvC,KACCF,kBAAkB,CAACG,UAAnB,MAAkCX,WAAlC,oBAAkCA,WAAW,CAAEW,UAA/C,CAFgB,CADpB,EAIE;AACAV,MAAAA,cAAc,CAACO,kBAAD,CAAd;AACD;;AAED,QAAMI,cAAc,GAAGlB,OAAO,CAACU,WAAR,EAAvB;;AAEA,QAAIQ,cAAc,KAAKP,MAAvB,EAA+B;AAC7BC,MAAAA,SAAS,CAACM,cAAD,CAAT;AACD;AACF,GAdD,EAcG,CAACH,wBAAD,CAdH;AAgBA,wBAAU,YAAM;AACd,QAAMI,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAsC;AACxD,UAAIA,KAAK,CAACC,OAAV,EAAmB;AACjBd,QAAAA,cAAc,CAACa,KAAK,CAACC,OAAP,CAAd;AACD;;AAED,UAAID,KAAK,CAACE,IAAN,KAAe,aAAnB,EAAkC;AAChCV,QAAAA,SAAS,CAACZ,OAAO,CAACU,WAAR,EAAD,CAAT;AACD;AACF,KARD;;AAUAV,IAAAA,OAAO,CAACuB,EAAR,CAAW,aAAX,EAA0BJ,WAA1B;AACAnB,IAAAA,OAAO,CAACuB,EAAR,CAAW,iBAAX,EAA8BJ,WAA9B;AACAnB,IAAAA,OAAO,CAACuB,EAAR,CAAW,iBAAX,EAA8BJ,WAA9B;AAEA,WAAO,YAAM;AACXnB,MAAAA,OAAO,CAACwB,GAAR,CAAY,aAAZ,EAA2BL,WAA3B;AACAnB,MAAAA,OAAO,CAACwB,GAAR,CAAY,iBAAZ,EAA+BL,WAA/B;AACAnB,MAAAA,OAAO,CAACwB,GAAR,CAAY,iBAAZ,EAA+BL,WAA/B;AACD,KAJD;AAKD,GApBD,EAoBG,EApBH;AAsBA,wBAAU,YAAM;AACd,QAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACL,KAAD,EAAsC;AAAA;;AAC5D,UAAI,gBAAAA,KAAK,CAACM,IAAN,iCAAYV,EAAZ,MAAmBf,MAAM,CAAC0B,MAA9B,EAAsC;AACpCf,QAAAA,SAAS,CAAC,CAAD,CAAT;AACD,OAFD,MAEO,oBAAIQ,KAAK,CAACM,IAAV,aAAI,aAAYV,EAAhB,EAAoB;AACzBP,QAAAA,cAAc,CAAC,UAACmB,IAAD;AAAA,iBAAUA,IAAI,GAAG,CAAjB;AAAA,SAAD,CAAd;AACD;AACF,KAND;;AAQA5B,IAAAA,OAAO,CAACuB,EAAR,CAAW,cAAX,EAA2BE,eAA3B;AACA,WAAO;AAAA,aAAMzB,OAAO,CAACwB,GAAR,CAAY,cAAZ,EAA4BC,eAA5B,CAAN;AAAA,KAAP;AACD,GAXD,EAWG,EAXH;AAaA,SAAO,gCAAC,OAAD;AAAS,IAAA,OAAO,EAAEzB,OAAlB;AAA2B,IAAA,oBAAoB,EAAEa,oBAAjD;AAAuE,IAAA,MAAM,EAAEF,MAA/E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAP;AACD,CAxED;;AA+EO,IAAMkB,cAAc,GAAG,SAAjBA,cAAiB,CAG5B9B,KAH4B,EAIzB;AACH,wBAAmB,kCAAnB;AAAA,MAAQE,MAAR,mBAAQA,MAAR;;AACA,4BAAoB,0CAApB;AAAA,MAAQC,OAAR,uBAAQA,OAAR;;AAEA,SAAO,gCAAC,yBAAD;AAAiCD,IAAAA,MAAM,EAANA,MAAjC;AAAyCC,IAAAA,OAAO,EAAPA;AAAzC,KAAwDH,KAAxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAP;AACD,CATM","sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport type { Channel, ChannelState, Event, MessageResponse } from 'stream-chat';\n\nimport { useLatestMessagePreview } from './hooks/useLatestMessagePreview';\n\nimport {\n  ChannelsContextValue,\n  useChannelsContext,\n} from '../../contexts/channelsContext/ChannelsContext';\nimport { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';\n\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\nexport type ChannelPreviewPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &\n  Pick<ChannelsContextValue<StreamChatGenerics>, 'Preview'> & {\n    /**\n     * The previewed channel\n     */\n    channel: Channel<StreamChatGenerics>;\n  };\n\n/**\n * This component manages state for the ChannelPreviewMessenger UI component and receives\n * all props from the ChannelListMessenger component.\n */\nconst ChannelPreviewWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { channel, client, Preview } = props;\n\n  const [lastMessage, setLastMessage] = useState<\n    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>\n    | MessageResponse<StreamChatGenerics>\n    | undefined\n  >(channel.state.messages[channel.state.messages.length - 1]);\n  const [forceUpdate, setForceUpdate] = useState(0);\n  const [unread, setUnread] = useState(channel.countUnread());\n\n  const latestMessagePreview = useLatestMessagePreview(channel, forceUpdate, lastMessage);\n\n  const channelLastMessage = channel.lastMessage();\n  const channelLastMessageString = `${channelLastMessage?.id}${channelLastMessage?.updated_at}`;\n\n  useEffect(() => {\n    if (\n      channelLastMessage &&\n      (channelLastMessage.id !== lastMessage?.id ||\n        channelLastMessage.updated_at !== lastMessage?.updated_at)\n    ) {\n      setLastMessage(channelLastMessage);\n    }\n\n    const newUnreadCount = channel.countUnread();\n\n    if (newUnreadCount !== unread) {\n      setUnread(newUnreadCount);\n    }\n  }, [channelLastMessageString]);\n\n  useEffect(() => {\n    const handleEvent = (event: Event<StreamChatGenerics>) => {\n      if (event.message) {\n        setLastMessage(event.message);\n      }\n\n      if (event.type === 'message.new') {\n        setUnread(channel.countUnread());\n      }\n    };\n\n    channel.on('message.new', handleEvent);\n    channel.on('message.updated', handleEvent);\n    channel.on('message.deleted', handleEvent);\n\n    return () => {\n      channel.off('message.new', handleEvent);\n      channel.off('message.updated', handleEvent);\n      channel.off('message.deleted', handleEvent);\n    };\n  }, []);\n\n  useEffect(() => {\n    const handleReadEvent = (event: Event<StreamChatGenerics>) => {\n      if (event.user?.id === client.userID) {\n        setUnread(0);\n      } else if (event.user?.id) {\n        setForceUpdate((prev) => prev + 1);\n      }\n    };\n\n    channel.on('message.read', handleReadEvent);\n    return () => channel.off('message.read', handleReadEvent);\n  }, []);\n\n  return <Preview channel={channel} latestMessagePreview={latestMessagePreview} unread={unread} />;\n};\n\nexport type ChannelPreviewProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<Omit<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>> &\n  Pick<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>;\n\nexport const ChannelPreview = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewProps<StreamChatGenerics>,\n) => {\n  const { client } = useChatContext<StreamChatGenerics>();\n  const { Preview } = useChannelsContext<StreamChatGenerics>();\n\n  return <ChannelPreviewWithContext {...{ client, Preview }} {...props} />;\n};\n"]}

package/lib/module/components/ChannelPreview/ChannelPreviewMessage.js

@@ -12,7 +12,7 @@ var _reactNative = require("react-native");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   bold: {
@@ -24,8 +24,8 @@ var styles = _reactNative.StyleSheet.create({
   }
 });
 
-var ChannelPreviewMessage = function ChannelPreviewMessage(_ref) {
-  var latestMessagePreview = _ref.latestMessagePreview;
+var ChannelPreviewMessage = function ChannelPreviewMessage(props) {
+  var latestMessagePreview = props.latestMessagePreview;
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
@@ -40,7 +40,7 @@ var ChannelPreviewMessage = function ChannelPreviewMessage(_ref) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 49,
+      lineNumber: 39,
       columnNumber: 5
     }
   }, latestMessagePreview.previews.map(function (preview, index) {
@@ -48,11 +48,11 @@ var ChannelPreviewMessage = function ChannelPreviewMessage(_ref) {
       key: preview.text + "_" + index,
       style: [{
         color: grey
-      }, preview.bold ? styles.bold : {}],
+      }, preview.bold ? styles.bold : {}, message],
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 52,
+        lineNumber: 42,
         columnNumber: 11
       }
     }, preview.text) : null;

package/lib/module/components/ChannelPreview/ChannelPreviewMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ChannelPreviewMessage.tsx"],"names":["styles","StyleSheet","create","bold","fontWeight","message","flexShrink","fontSize","ChannelPreviewMessage","latestMessagePreview","theme","channelPreview","grey","colors","color","previews","map","preview","index","text"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;AAeA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE;AAAd,GADyB;AAE/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,EAAE,CADL;AAEPC,IAAAA,QAAQ,EAAE;AAFH;AAFsB,CAAlB,CAAf;;AAmBO,IAAMC,qBAA2D,GAAG,SAA9DA,qBAA8D,OAErE;AAAA,MADJC,oBACI,QADJA,oBACI;;AACJ,kBAKI,6BALJ;AAAA,kCACEC,KADF;AAAA,MAEsBL,OAFtB,mBAEIM,cAFJ,CAEsBN,OAFtB;AAAA,MAGcO,IAHd,mBAGIC,MAHJ,CAGcD,IAHd;;AAOA,SACE,gCAAC,iBAAD;AAAM,IAAA,aAAa,EAAE,CAArB;AAAwB,IAAA,KAAK,EAAE,CAACZ,MAAM,CAACK,OAAR,EAAiB;AAAES,MAAAA,KAAK,EAAEF;AAAT,KAAjB,EAAkCP,OAAlC,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGI,oBAAoB,CAACM,QAArB,CAA8BC,GAA9B,CAAkC,UAACC,OAAD,EAAUC,KAAV;AAAA,WACjCD,OAAO,CAACE,IAAR,GACE,gCAAC,iBAAD;AACE,MAAA,GAAG,EAAKF,OAAO,CAACE,IAAb,SAAqBD,KAD1B;AAEE,MAAA,KAAK,EAAE,CAAC;AAAEJ,QAAAA,KAAK,EAAEF;AAAT,OAAD,EAAkBK,OAAO,CAACd,IAAR,GAAeH,MAAM,CAACG,IAAtB,GAA6B,EAA/C,CAFT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAIGc,OAAO,CAACE,IAJX,CADF,GAOI,IAR6B;AAAA,GAAlC,CADH,CADF;AAcD,CAxBM","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nimport type { LatestMessagePreview } from './hooks/useLatestMessagePreview';\n\nimport type {\n  DefaultAttachmentType,\n  DefaultChannelType,\n  DefaultCommandType,\n  DefaultEventType,\n  DefaultMessageType,\n  DefaultReactionType,\n  DefaultUserType,\n  UnknownType,\n} from '../../types/types';\n\nconst styles = StyleSheet.create({\n  bold: { fontWeight: '600' },\n  message: {\n    flexShrink: 1,\n    fontSize: 12,\n  },\n});\n\nexport type ChannelPreviewMessageProps<\n  At extends UnknownType = DefaultAttachmentType,\n  Ch extends UnknownType = DefaultChannelType,\n  Co extends string = DefaultCommandType,\n  Ev extends UnknownType = DefaultEventType,\n  Me extends UnknownType = DefaultMessageType,\n  Re extends UnknownType = DefaultReactionType,\n  Us extends UnknownType = DefaultUserType,\n> = {\n  latestMessagePreview: LatestMessagePreview<At, Ch, Co, Ev, Me, Re, Us>;\n};\nexport const ChannelPreviewMessage: React.FC<ChannelPreviewMessageProps> = ({\n  latestMessagePreview,\n}) => {\n  const {\n    theme: {\n      channelPreview: { message },\n      colors: { grey },\n    },\n  } = useTheme();\n\n  return (\n    <Text numberOfLines={1} style={[styles.message, { color: grey }, message]}>\n      {latestMessagePreview.previews.map((preview, index) =>\n        preview.text ? (\n          <Text\n            key={`${preview.text}_${index}`}\n            style={[{ color: grey }, preview.bold ? styles.bold : {}]}\n          >\n            {preview.text}\n          </Text>\n        ) : null,\n      )}\n    </Text>\n  );\n};\n"]}
+{"version":3,"sources":["ChannelPreviewMessage.tsx"],"names":["styles","StyleSheet","create","bold","fontWeight","message","flexShrink","fontSize","ChannelPreviewMessage","props","latestMessagePreview","theme","channelPreview","grey","colors","color","previews","map","preview","index","text"],"mappings":";;;;;;;AAAA;;AACA;;AAIA;;;;;AAIA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,UAAU,EAAE;AAAd,GADyB;AAE/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,EAAE,CADL;AAEPC,IAAAA,QAAQ,EAAE;AAFH;AAFsB,CAAlB,CAAf;;AAcO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAGnCC,KAHmC,EAIhC;AACH,MAAQC,oBAAR,GAAiCD,KAAjC,CAAQC,oBAAR;;AAEA,kBAKI,6BALJ;AAAA,kCACEC,KADF;AAAA,MAEsBN,OAFtB,mBAEIO,cAFJ,CAEsBP,OAFtB;AAAA,MAGcQ,IAHd,mBAGIC,MAHJ,CAGcD,IAHd;;AAOA,SACE,gCAAC,iBAAD;AAAM,IAAA,aAAa,EAAE,CAArB;AAAwB,IAAA,KAAK,EAAE,CAACb,MAAM,CAACK,OAAR,EAAiB;AAAEU,MAAAA,KAAK,EAAEF;AAAT,KAAjB,EAAkCR,OAAlC,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACGK,oBAAoB,CAACM,QAArB,CAA8BC,GAA9B,CAAkC,UAACC,OAAD,EAAUC,KAAV;AAAA,WACjCD,OAAO,CAACE,IAAR,GACE,gCAAC,iBAAD;AACE,MAAA,GAAG,EAAKF,OAAO,CAACE,IAAb,SAAqBD,KAD1B;AAEE,MAAA,KAAK,EAAE,CAAC;AAAEJ,QAAAA,KAAK,EAAEF;AAAT,OAAD,EAAkBK,OAAO,CAACf,IAAR,GAAeH,MAAM,CAACG,IAAtB,GAA6B,EAA/C,EAAmDE,OAAnD,CAFT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAIGa,OAAO,CAACE,IAJX,CADF,GAOI,IAR6B;AAAA,GAAlC,CADH,CADF;AAcD,CA5BM","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text } from 'react-native';\n\nimport type { LatestMessagePreview } from './hooks/useLatestMessagePreview';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\nconst styles = StyleSheet.create({\n  bold: { fontWeight: '600' },\n  message: {\n    flexShrink: 1,\n    fontSize: 12,\n  },\n});\n\nexport type ChannelPreviewMessageProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n  latestMessagePreview: LatestMessagePreview<StreamChatGenerics>;\n};\n\nexport const ChannelPreviewMessage = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewMessageProps<StreamChatGenerics>,\n) => {\n  const { latestMessagePreview } = props;\n\n  const {\n    theme: {\n      channelPreview: { message },\n      colors: { grey },\n    },\n  } = useTheme();\n\n  return (\n    <Text numberOfLines={1} style={[styles.message, { color: grey }, message]}>\n      {latestMessagePreview.previews.map((preview, index) =>\n        preview.text ? (\n          <Text\n            key={`${preview.text}_${index}`}\n            style={[{ color: grey }, preview.bold ? styles.bold : {}, message]}\n          >\n            {preview.text}\n          </Text>\n        ) : null,\n      )}\n    </Text>\n  );\n};\n"]}