stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.6

package/src/components/ChannelList/hooks/listeners/useRemovedFromChannelNotification.ts

@@ -1,52 +1,30 @@
 import { useEffect } from 'react';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
-
 import type { Channel, Event } from 'stream-chat';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../../types/types';
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
-type Parameters<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = {
-  setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>;
-  onRemovedFromChannel?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>,
-    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
-  ) => void;
-};
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
+type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  {
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+    onRemovedFromChannel?: (
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>,
+      event: Event<StreamChatGenerics>,
+    ) => void;
+  };
 
 export const useRemovedFromChannelNotification = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   onRemovedFromChannel,
   setChannels,
-}: Parameters<At, Ch, Co, Ev, Me, Re, Us>) => {
-  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+}: Parameters<StreamChatGenerics>) => {
+  const { client } = useChatContext<StreamChatGenerics>();
 
   useEffect(() => {
-    const handleEvent = (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
+    const handleEvent = (event: Event<StreamChatGenerics>) => {
       if (typeof onRemovedFromChannel === 'function') {
         onRemovedFromChannel(setChannels, event);
       } else {

package/src/components/ChannelList/hooks/listeners/useUserPresence.ts

@@ -1,47 +1,25 @@
 import { useEffect } from 'react';
 
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
-
 import type { Channel, Event } from 'stream-chat';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../../types/types';
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
-type Parameters<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = {
-  setChannels: React.Dispatch<React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>;
-};
+import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
+type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  {
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[]>>;
+  };
 
 export const useUserPresence = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   setChannels,
-}: Parameters<At, Ch, Co, Ev, Me, Re, Us>) => {
-  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+}: Parameters<StreamChatGenerics>) => {
+  const { client } = useChatContext<StreamChatGenerics>();
 
   useEffect(() => {
-    const handleEvent = (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
+    const handleEvent = (event: Event<StreamChatGenerics>) => {
       setChannels((channels) => {
         const newChannels = channels.map((channel) => {
           if (!event.user?.id || !channel.state.members[event.user.id]) {

package/src/components/ChannelList/hooks/useCreateChannelsContext.ts

@@ -1,25 +1,10 @@
 import { useMemo } from 'react';
 
 import type { ChannelsContextValue } from '../../../contexts/channelsContext/ChannelsContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const useCreateChannelsContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   additionalFlatListProps,
   channels,
@@ -51,17 +36,16 @@ export const useCreateChannelsContext = <
   reloadList,
   setFlatListRef,
   Skeleton,
-}: ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us>) => {
+}: ChannelsContextValue<StreamChatGenerics>) => {
   const channelValueString = channels
     .map(
       (channel) =>
-        `${channel.data?.name}${Object.values(channel.state.members)
+        `${channel.data?.name ?? ''}${channel.id ?? ''}${Object.values(channel.state.members)
           .map((member) => member.user?.online)
           .join()}`,
     )
     .join();
-
-  const channelsContext: ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us> = useMemo(
+  const channelsContext: ChannelsContextValue<StreamChatGenerics> = useMemo(
     () => ({
       additionalFlatListProps,
       channels,

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -1,86 +1,91 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
+import type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
 
 import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRefContext/ActiveChannelsRefContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
-import type { Channel, ChannelFilters, ChannelOptions, ChannelSort } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { ONE_SECOND_IN_MS } from '../../../utils/date';
+import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../../types/types';
-
-const wait = (ms: number) =>
+const waitSeconds = (seconds: number) =>
   new Promise((resolve) => {
-    setTimeout(resolve, ms);
+    setTimeout(resolve, seconds * ONE_SECOND_IN_MS);
   });
 
-type Parameters<
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
-> = {
-  filters: ChannelFilters<Ch, Co, Us>;
-  options: ChannelOptions;
-  sort: ChannelSort<Ch>;
-};
+type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  {
+    filters: ChannelFilters<StreamChatGenerics>;
+    options: ChannelOptions;
+    sort: ChannelSort<StreamChatGenerics>;
+  };
 
 const DEFAULT_OPTIONS = {
   message_limit: 10,
 };
 
+const MAX_NUMBER_OF_RETRIES = 3;
+const RETRY_INTERVAL_IN_MS = 5000;
+
+type QueryType = 'reload' | 'refresh' | 'loadChannels';
+export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
+
 export const usePaginatedChannels = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   filters = {},
   options = DEFAULT_OPTIONS,
   sort = {},
-}: Parameters<Ch, Co, Us>) => {
-  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const [channels, setChannels] = useState<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>([]);
+}: Parameters<StreamChatGenerics>) => {
+  const { client } = useChatContext<StreamChatGenerics>();
+  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[]>([]);
   const activeChannels = useActiveChannelsRefContext();
 
-  const [error, setError] = useState<boolean | Error>(false);
+  const [error, setError] = useState<Error>();
   const [hasNextPage, setHasNextPage] = useState(true);
   const lastRefresh = useRef(Date.now());
-  const querying = useRef(false);
-  const [loadingChannels, setLoadingChannels] = useState(false);
-  const [loadingNextPage, setLoadingNextPage] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
-  const isMounted = useIsMountedRef();
-
-  const queryChannels = async (queryType = '', retryCount = 0): Promise<void> => {
-    if (!client || loadingChannels || loadingNextPage || refreshing || !isMounted.current) return;
-
-    querying.current = true;
-    setError(false);
-
-    if (queryType === 'reload') {
-      setLoadingChannels(true);
-    } else if (queryType === 'refresh') {
-      setRefreshing(true);
-    } else if (!queryType) {
-      setLoadingNextPage(true);
+  const isQueryingRef = useRef(false);
+  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>();
+  const isMountedRef = useIsMountedRef();
+  const filtersRef = useRef<typeof filters | null>(null);
+  const sortRef = useRef<typeof filters | null>(null);
+  const activeRequestId = useRef<number>(0);
+
+  const queryChannels: QueryChannels = async (
+    queryType: QueryType = 'loadChannels',
+    retryCount = 0,
+  ): Promise<void> => {
+    if (!client || !isMountedRef.current) return;
+
+    const hasUpdatedData = () =>
+      [
+        JSON.stringify(filtersRef.current) !== JSON.stringify(filters),
+        JSON.stringify(sortRef.current) !== JSON.stringify(sort),
+        activeRequestId.current !== currentRequestId,
+      ].some(Boolean); // will return true if any element is truthy
+
+    const queryIsStale = () => !isMountedRef || activeRequestId.current !== currentRequestId;
+
+    /**
+     * We don't need to make another call to query channels if we don't
+     * have new data for the query to include
+     * */
+    if (!hasUpdatedData) {
+      if (activeQueryType === null) return;
     }
 
+    filtersRef.current = filters;
+    isQueryingRef.current = true;
+    setError(undefined);
+    activeRequestId.current++;
+    const currentRequestId = activeRequestId.current;
+    setActiveQueryType(queryType);
+
     const newOptions = {
       limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
-      offset: queryType === 'reload' || queryType === 'refresh' ? 0 : channels.length,
+      offset: queryType === 'loadChannels' ? channels.length : 0,
       ...options,
     };
 
@@ -89,54 +94,61 @@ export const usePaginatedChannels = <
         skipInitialization: activeChannels.current,
       });
 
-      if (!isMounted.current) return;
+      if (queryIsStale() || !isMountedRef.current) {
+        return;
+      }
 
       channelQueryResponse.forEach((channel) => channel.state.setIsUpToDate(true));
 
       const newChannels =
-        queryType === 'reload' || queryType === 'refresh'
-          ? channelQueryResponse
-          : [...channels, ...channelQueryResponse];
+        queryType === 'loadChannels'
+          ? [...channels, ...channelQueryResponse]
+          : channelQueryResponse;
 
       setChannels(newChannels);
       setHasNextPage(channelQueryResponse.length >= newOptions.limit);
-      setError(false);
-      querying.current = false;
-    } catch (err) {
-      querying.current = false;
-      await wait(2000);
-
-      if (!isMounted.current) return;
+      setError(undefined);
+      isQueryingRef.current = false;
+    } catch (err: unknown) {
+      isQueryingRef.current = false;
+      await waitSeconds(2);
+
+      if (queryIsStale()) {
+        return;
+      }
 
       // querying.current check is needed in order to make sure the next query call doesnt flick an error
       // state and then succeed (reconnect case)
-      if (retryCount === 3 && !querying.current) {
-        setLoadingChannels(false);
-        setLoadingNextPage(false);
-        setRefreshing(false);
+      if (retryCount === MAX_NUMBER_OF_RETRIES && !isQueryingRef.current) {
+        setActiveQueryType(null);
         console.warn(err);
-        return setError(true);
+        setError(
+          new Error(
+            `Maximum number of retries reached in queryChannels. Last error message is: ${err}`,
+          ),
+        );
+        return;
       }
 
       return queryChannels(queryType, retryCount + 1);
     }
 
-    setLoadingChannels(false);
-    setLoadingNextPage(false);
-    setRefreshing(false);
+    setActiveQueryType(null);
   };
 
   const loadNextPage = hasNextPage ? queryChannels : undefined;
+
   const refreshList = () => {
     const now = Date.now();
     // Only allow pull-to-refresh 5 seconds after last successful refresh.
-    if (now - lastRefresh.current < 5000 && !error) {
+    if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
       return;
     }
 
     lastRefresh.current = Date.now();
     return queryChannels('refresh');
   };
+
   const reloadList = () => queryChannels('reload');
 
   /**
@@ -165,10 +177,10 @@ export const usePaginatedChannels = <
     channels,
     error,
     hasNextPage,
-    loadingChannels,
-    loadingNextPage,
+    loadingChannels: activeQueryType === 'reload',
+    loadingNextPage: activeQueryType === 'loadChannels',
     loadNextPage,
-    refreshing,
+    refreshing: activeQueryType === 'refresh',
     refreshList,
     reloadList,
     setChannels,

package/src/components/ChannelList/utils.ts

@@ -1,41 +1,20 @@
 import type { Channel, StreamChat } from 'stream-chat';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 type MoveParameters<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
-  channels: Channel<At, Ch, Co, Ev, Me, Re, Us>[];
+  channels: Channel<StreamChatGenerics>[];
   cid: string;
 };
 
 export const moveChannelUp = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   cid,
   channels = [],
-}: MoveParameters<At, Ch, Co, Ev, Me, Re, Us>) => {
+}: MoveParameters<StreamChatGenerics>) => {
   // get channel from channels
   const index = channels.findIndex((c) => c.cid === cid);
   if (index <= 0) return channels;
@@ -49,32 +28,20 @@ export const moveChannelUp = <
 };
 
 type GetParameters<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
-  client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>;
+  client: StreamChat<StreamChatGenerics>;
   id: string;
   type: string;
 };
 
 export const getChannel = async <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   client,
   id,
   type,
-}: GetParameters<At, Ch, Co, Ev, Me, Re, Us>) => {
+}: GetParameters<StreamChatGenerics>) => {
   const channel = client.channel(type, id);
   await channel.watch();
   return channel;

package/src/components/ChannelPreview/ChannelAvatar.tsx

@@ -1,47 +1,24 @@
 import React from 'react';
 
+import type { ChannelPreviewProps } from './ChannelPreview';
 import { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplayAvatar';
 import { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence';
 
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { Avatar } from '../Avatar/Avatar';
 import { GroupAvatar } from '../Avatar/GroupAvatar';
 
-import type { ChannelPreviewProps } from './ChannelPreview';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-
 export type ChannelAvatarProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>, 'channel'>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;
 
 /**
  * This UI component displays an avatar for a particular channel.
  */
 export const ChannelAvatar = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ChannelAvatarProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelAvatarProps<StreamChatGenerics>,
 ) => {
   const { channel } = props;