stream-chat-react-native-core 9.10.1 → 10.0.0-rc.1

package/src/components/Poll/hooks/usePollState.ts

@@ -1,13 +1,11 @@
 import { useCallback } from 'react';
 
 import {
-  APIResponse,
-  CastVoteAPIResponse,
-  PollAnswer,
-  PollOption,
+  PollOptionResponseData,
+  PollResponse,
   PollState,
-  PollVote,
-  UpdatePollAPIResponse,
+  PollVoteResponse,
+  PollVoteResponseData,
   UserResponse,
   VotingVisibility,
 } from 'stream-chat';
@@ -24,40 +22,40 @@ export type UsePollStateSelectorReturnType = {
   createdBy: UserResponse | null;
   enforceUniqueVote: boolean;
   isClosed: boolean | undefined;
-  latestVotesByOption: Record<string, PollVote[]>;
+  latestVotesByOption: Record<string, PollVoteResponseData[]>;
   maxVotedOptionIds: string[];
   maxVotesAllowed: number;
   name: string;
-  options: PollOption[];
-  ownAnswer: PollAnswer | undefined;
-  ownVotesByOptionId: Record<string, PollVote>;
+  options: PollOptionResponseData[];
+  ownAnswer: PollVoteResponseData | undefined;
+  ownVotesByOptionId: Record<string, PollVoteResponseData>;
   voteCountsByOption: Record<string, number>;
   votingVisibility: VotingVisibility | undefined;
   voteCount: number;
 };
 
 export type UsePollStateReturnType = UsePollStateSelectorReturnType & {
-  addComment: (answerText: string) => Promise<APIResponse & CastVoteAPIResponse>;
+  addComment: (answerText: string) => Promise<PollVoteResponse>;
   addOption: (optionText: string) => Promise<void>;
-  endVote: () => Promise<(APIResponse & UpdatePollAPIResponse) | undefined>;
+  endVote: () => Promise<PollResponse | undefined>;
 };
 
 const selector = (nextValue: PollState): UsePollStateSelectorReturnType => ({
   allowAnswers: nextValue.allow_answers,
   allowUserSuggestedOptions: nextValue.allow_user_suggested_options,
   answersCount: nextValue.answers_count,
-  createdBy: nextValue.created_by,
+  createdBy: nextValue.created_by ?? null,
   enforceUniqueVote: nextValue.enforce_unique_vote,
   isClosed: nextValue.is_closed,
   latestVotesByOption: nextValue.latest_votes_by_option,
   maxVotedOptionIds: nextValue.maxVotedOptionIds,
-  maxVotesAllowed: nextValue.max_votes_allowed,
+  maxVotesAllowed: nextValue.max_votes_allowed ?? 0,
   name: nextValue.name,
   options: nextValue.options,
   ownAnswer: nextValue.ownAnswer,
   ownVotesByOptionId: nextValue.ownVotesByOptionId,
   voteCountsByOption: nextValue.vote_counts_by_option,
-  votingVisibility: nextValue.voting_visibility,
+  votingVisibility: nextValue.voting_visibility as VotingVisibility,
   voteCount: nextValue.vote_count,
 });
 

package/src/components/Reply/Reply.tsx

@@ -12,9 +12,11 @@ import {
 } from 'react-native';
 
 import {
+  getAttachmentPreviewUrl,
   isFileAttachment,
   isImageAttachment,
   isVideoAttachment,
+  LocalMessage,
   MessageComposerState,
 } from 'stream-chat';
 
@@ -28,7 +30,6 @@ import {
   useMessageContext,
 } from '../../contexts/messageContext/MessageContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks';
@@ -56,7 +57,7 @@ const RightContent = React.memo(
     }
 
     const attachment = attachments?.[0];
-    const uri = attachment?.image_url || attachment?.thumb_url;
+    const uri = getAttachmentPreviewUrl(attachment, attachment?.image_url, attachment?.thumb_url);
 
     if (
       attachment &&
@@ -86,7 +87,7 @@ const RightContent = React.memo(
     }
 
     if (attachment && isFileAttachment(attachment)) {
-      return <FileIcon mimeType={attachment.mime_type} />;
+      return <FileIcon mimeType={attachment.custom?.mime_type} />;
     }
 
     return null;
@@ -96,8 +97,8 @@ const RightContent = React.memo(
 export type ReplyPropsWithContext = { ImageComponent: React.ComponentType<ImageProps> } & Pick<
   MessageContextValue,
   'message'
-> &
-  Pick<MessagesContextValue, 'quotedMessage'> & {
+> & {
+    quotedMessage?: LocalMessage | null;
     isMyMessage: boolean;
     isParentMessageMine?: boolean;
     onDismiss?: () => void;
@@ -142,12 +143,12 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
   const title = useMemo(
     () =>
       mode === 'edit'
-        ? t('Edit Message')
+        ? t('message.editMessage.label', 'Edit Message')
         : isMyMessage
-          ? t('You')
+          ? t('common.you.label', 'You')
           : quotedMessage?.user?.name
-            ? t('Reply to {{name}}', { name: quotedMessage?.user?.name })
-            : t('Reply'),
+            ? t('reply.replyTo.title', 'Reply to {{name}}', { name: quotedMessage?.user?.name })
+            : t('message.reply.label', 'Reply'),
     [mode, isMyMessage, quotedMessage?.user?.name, t],
   );
 
@@ -177,7 +178,11 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
       {onDismiss ? (
         <View style={[styles.dismissWrapper, dismissWrapper, stylesProp?.dismissWrapper]}>
           <AttachmentRemoveControl
-            accessibilityLabelKey={mode === 'edit' ? 'a11y/Remove edit' : 'a11y/Remove reply'}
+            accessibilityLabelKey={
+              mode === 'edit'
+                ? 'reply.removeEdit.accessibilityLabel'
+                : 'reply.removeReply.accessibilityLabel'
+            }
             onPress={onDismiss}
           />
         </View>
@@ -271,14 +276,19 @@ const ReplyComposerAnnouncer = ({
   const announcement = useMemo(() => {
     if (mode === 'edit') {
       return truncatedText
-        ? t('a11y/Editing message: {{text}}', { text: truncatedText })
-        : t('a11y/Editing message');
+        ? t('reply.editingMessage.withText.accessibilityLabel', 'Editing message: {{text}}', {
+            text: truncatedText,
+          })
+        : t('reply.editingMessage.accessibilityLabel', 'Editing message');
     }
     const name = message?.user?.name;
     if (!name) return undefined;
     return truncatedText
-      ? t('a11y/Replying to {{user}}: {{text}}', { text: truncatedText, user: name })
-      : t('a11y/Replying to {{user}}', { user: name });
+      ? t('reply.replying.withUserAndText.accessibilityLabel', 'Replying to {{user}}: {{text}}', {
+          text: truncatedText,
+          user: name,
+        })
+      : t('reply.replying.withUser.accessibilityLabel', 'Replying to {{user}}', { user: name });
   }, [mode, message?.user?.name, truncatedText, t]);
 
   useAnnounceOnShow(true, announcement);
@@ -297,7 +307,7 @@ export const Reply = (props: ReplyProps) => {
   );
 
   const quotedMessage = messageFromContext
-    ? (messageFromContext.quoted_message as MessagesContextValue['quotedMessage'])
+    ? (messageFromContext.quoted_message as ReplyPropsWithContext['quotedMessage'])
     : quotedMessageFromComposer;
 
   // `mode='edit'` supplies the edited message via `props.quotedMessage` and leaves

package/src/components/Reply/__tests__/Reply.test.tsx

@@ -4,6 +4,7 @@ import { StyleSheet } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import { render, screen, waitFor } from '@testing-library/react-native';
+import type { UserResponse } from 'stream-chat';
 
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
@@ -24,7 +25,7 @@ describe('<Reply/>', () => {
     const oldEnvironment = process.env;
     process.env.NODE_ENV = 'not_test';
 
-    const chatClient = await getTestClientWithUser({ id: 'neil' });
+    const chatClient = await getTestClientWithUser({ id: 'neil' } as UserResponse);
 
     const mockedChannel = generateChannelResponse();
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
@@ -83,11 +84,11 @@ describe('<Reply/>', () => {
         quotedMessageUser,
       }: { isMyMessage: boolean; quotedMessageUser: { id: string; name?: string } },
     ) => {
-      const quotedMessage = generateMessage({ user: quotedMessageUser });
+      const quotedMessage = generateMessage({ user: quotedMessageUser as UserResponse });
       const message = generateMessage({
         quoted_message: quotedMessage,
         quoted_message_id: quotedMessage.id,
-        user: isMyMessage ? { id: 'neil' } : generateUser(),
+        user: isMyMessage ? ({ id: 'neil' } as UserResponse) : generateUser(),
       });
 
       render(
@@ -140,7 +141,7 @@ describe('<Reply/>', () => {
 
       // `mode='edit'` supplies the message through props and leaves the
       // composer's quoted message empty - you can only ever edit your own message.
-      const editedMessage = generateMessage({ user: { id: 'neil' } });
+      const editedMessage = generateMessage({ user: { id: 'neil' } as UserResponse });
 
       render(
         <GestureHandlerRootView>

package/src/components/Thread/Thread.tsx

@@ -1,190 +1,171 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { PropsWithChildren, useEffect } from 'react';
 
-import { ThreadFooterComponent } from './components/ThreadFooterComponent';
+import type { LocalMessage, Thread as ThreadInstance } from 'stream-chat';
 
-import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
-import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
-import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
-
-import type { MessageComposerProps } from '../MessageInput/MessageComposer';
-import { MessageFlashList, MessageFlashListProps } from '../MessageList/MessageFlashList';
-import { MessageListProps } from '../MessageList/MessageList';
+import { ThreadContextValue, ThreadProvider } from '../../contexts/threadContext/ThreadContext';
+import { useStableCallback } from '../../hooks';
+import { useStateStore } from '../../hooks/useStateStore';
+import { ChannelConfigProps, ChannelShell } from '../Channel/ChannelShell';
+import { useCreateThreadContext } from '../Channel/hooks/useCreateThreadContext';
 import { getThreadNotificationHostId } from '../Notifications/notificationTarget';
 import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
 
-let FlashList;
-
-try {
-  FlashList = require('@shopify/flash-list').FlashList;
-} catch {
-  FlashList = undefined;
-}
-
-type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
-  Pick<
-    ThreadContextValue,
-    | 'closeThread'
-    | 'loadMoreThread'
-    | 'parentMessagePreventPress'
-    | 'reloadThread'
-    | 'thread'
-    | 'threadInstance'
-  > & {
-    /**
-     * Additional props for underlying MessageComposer component.
-     * Available props - https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-input/#props
-     * */
-    additionalMessageComposerProps?: Partial<MessageComposerProps>;
+export type ThreadProps = ChannelConfigProps &
+  Partial<Pick<ThreadContextValue, 'allowThreadMessagesInChannel'>> & {
     /**
-     * Additional props for underlying MessageList component.
-     * Available props - https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-list/#props
-     * */
-    additionalMessageListProps?: Partial<MessageListProps>;
+     * The thread to render. Pass the instance a thread was opened with (`onThreadSelect` on the
+     * message and thread lists), or one from `client.threads.ensure({ channel, parentMessage })`.
+     */
+    thread: ThreadInstance;
     /**
-     * @experimental This prop is experimental and is subject to change.
-     *
-     * Additional props for underlying MessageListFlashList component.
-     * Available props - https://shopify.github.io/flash-list/docs/usage
+     * The notification host this thread's notifications are routed to. Defaults to the thread's
+     * own host, derived from its id.
      */
-    additionalMessageFlashListProps?: Partial<MessageFlashListProps>;
-    /** Make input focus on mounting thread */
-    autoFocus?: boolean;
-    /** Closes thread on dismount, defaults to true */
-    closeThreadOnDismount?: boolean;
-    /** Disables the thread UI. So MessageComposer and MessageList will be disabled. */
-    disabled?: boolean;
+    notificationHostId?: string;
     /**
-     * Call custom function on closing thread if handling thread state elsewhere
+     * Called when the thread unmounts, e.g. to clear the app's record of the open thread.
      */
     onThreadDismount?: () => void;
-    notificationHostId?: string;
-    shouldUseFlashList?: boolean;
   };
 
-const ThreadWithContext = (props: ThreadPropsWithContext) => {
+type ThreadReplyPaginatorState = {
+  isLoading: boolean;
+  items?: LocalMessage[];
+  lastQueryError?: Error;
+};
+
+const paginatorSelector = (state: ThreadReplyPaginatorState) => ({
+  // `hasItems`, not the array: every use below is an `items === undefined` test ("has the reply
+  // paginator loaded yet"), so selecting the array re-renders this component on every reply.
+  hasItems: state.items !== undefined,
+  isLoading: state.isLoading,
+  lastQueryError: state.lastQueryError,
+});
+
+const threadStaleSelector = (state: { isLoading: boolean; isStateStale: boolean }) => ({
+  isStateStale: state.isStateStale,
+  isThreadReloading: state.isLoading,
+});
+
+/**
+ * Thread - binds its children to a thread's replies. Render it next to `<Channel>`, not inside it,
+ * and compose the thread UI as children:
+ *
+ * ```tsx
+ * <Thread thread={thread}>
+ *   <MessageList />
+ *   <MessageComposer />
+ * </Thread>
+ * ```
+ *
+ * It takes the same configuration props as `<Channel>`. The message list renders the parent message
+ * above the replies.
+ */
+export const Thread = (props: PropsWithChildren<ThreadProps>) => {
   const {
-    additionalMessageComposerProps,
-    additionalMessageListProps,
-    additionalMessageFlashListProps,
-    autoFocus = false,
-    closeThread,
-    closeThreadOnDismount = true,
-    disabled,
-    loadMoreThread,
-    onThreadDismount,
+    allowThreadMessagesInChannel = true,
+    children,
     notificationHostId: notificationHostIdProp,
-    parentMessagePreventPress = true,
+    onThreadDismount,
     thread,
-    threadInstance,
-    shouldUseFlashList = false,
+    ...shellProps
   } = props;
-  const { MessageList, ThreadMessageComposer: MessageComposer } = useComponentsContext();
+  const { LoadingErrorIndicator } = useComponentsContext();
+  const threadContext = useCreateThreadContext({ allowThreadMessagesInChannel, thread });
+
+  const { hasItems, isLoading, lastQueryError } =
+    useStateStore(thread.messagePaginator.state, paginatorSelector) ?? {};
+  const { isStateStale, isThreadReloading } =
+    useStateStore(thread.state, threadStaleSelector) ?? {};
 
   useEffect(() => {
-    if (threadInstance?.activate) {
-      threadInstance.activate();
+    if (isStateStale) {
+      void thread.reload().catch((err) => console.warn('Thread reload failed', err));
     }
-    const loadMoreThreadAsync = async () => {
-      await loadMoreThread();
-    };
+  }, [isStateStale, thread]);
 
-    if (thread?.id && thread.reply_count) {
-      loadMoreThreadAsync();
+  // A thread opened from the thread list can belong to a channel nothing has queried yet. `queryThreads`
+  // watches that channel but returns no `own_capabilities` for it, so the menu, the reactions and the
+  // composer would act as if the user could do nothing. Querying the channel once fills them in; its
+  // messages and read state are left alone.
+  useEffect(() => {
+    const { channel } = thread;
+    if (channel.initialized || channel.isProvisional) {
+      return;
     }
-
-    return () => {
-      if (threadInstance?.deactivate) {
-        threadInstance.deactivate();
-      }
-      if (closeThreadOnDismount) {
-        closeThread();
-      }
+    channel.watch().catch((err: unknown) => console.warn('Thread channel watch failed', err));
+  }, [thread]);
+
+  // Activating registers the thread with `client.threads` for the session, which keeps it subscribed
+  // (incoming replies, read state, thread.updated) whether or not the thread list holds it. While
+  // active, the thread marks itself read. `activate()` returns the release of this activation.
+  useEffect(() => thread.activate(), [thread]);
+
+  // Load the first reply page, but only when the paginator hasn't already been seeded from the
+  // thread's `latest_replies` (managed/queried threads seed on construction) or loaded/loading. A
+  // seeded paginator already holds its first page, so we skip the fetch and let scroll-up load older
+  // replies — mirroring stream-chat-react, whose thread list has no mount-time fetch. The `hasItems`
+  // guard makes this fire at most once (an unseeded thread fetches, and the fetch defines `items`).
+  useEffect(() => {
+    if (isLoading || hasItems || lastQueryError) {
+      return;
+    }
+    // A reload in flight (a stale thread's, started by the effect above in this same commit) seeds the
+    // replies itself; read live, as this commit's render predates it. If it fails, this runs again.
+    if (isThreadReloading || thread.state.getLatestValue().isLoading) {
+      return;
+    }
+    void thread.messagePaginator.toTail();
+    // `lastQueryError` is load-bearing here, not decorative: a failed query flips `isLoading` back to
+    // false with `hasItems` still false, which would re-run this effect and refetch forever. The
+    // retry is the user's to make, through the error indicator below.
+  }, [thread, hasItems, isLoading, lastQueryError, isThreadReloading]);
+
+  // Deactivation is the activation effect's cleanup; this only notifies the integrator.
+  useEffect(
+    () => () => {
       if (onThreadDismount) {
         onThreadDismount();
       }
-    };
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const MemoizedThreadFooterComponent = useCallback(
-    () => <ThreadFooterComponent parentMessagePreventPress={parentMessagePreventPress} />,
-    [parentMessagePreventPress],
+    [],
   );
 
-  const additionalTextInputProps = useMemo(
-    () => ({
-      editable: !disabled,
-      autoFocus,
-    }),
-    [disabled, autoFocus],
+  // A jump into the replies (e.g. to a targeted reply) leaves a focus signal behind; the list reads
+  // this to keep its initial anchor from overriding the jump.
+  const hasPendingInitialTargetLoad = useStableCallback(
+    () => !!thread.messagePaginator.messageFocusSignal.getLatestValue().signal,
   );
 
-  if (!thread?.id) {
-    return null;
-  }
-
-  const notificationHostId = notificationHostIdProp ?? getThreadNotificationHostId(thread.id);
+  // The thread's own query error: the failure belongs to the reply paginator, and the retry is a
+  // first-page `toTail`.
+  if (lastQueryError && !hasItems) {
+    const retry = () =>
+      thread.messagePaginator
+        .toTail()
+        .catch((err: unknown) => console.warn('Reloading the thread replies failed:', err));
 
-  return (
-    <React.Fragment key={`thread-${thread.id}`}>
-      <NotificationTargetProvider hostId={notificationHostId} panel='thread'>
-        {FlashList && shouldUseFlashList ? (
-          <MessageFlashList
-            HeaderComponent={MemoizedThreadFooterComponent}
-            threadList
-            {...additionalMessageFlashListProps}
-          />
-        ) : (
-          <MessageList
-            FooterComponent={MemoizedThreadFooterComponent}
-            threadList
-            {...additionalMessageListProps}
-          />
-        )}
-        <MessageComposer
-          additionalTextInputProps={additionalTextInputProps}
-          threadList
-          {...additionalMessageComposerProps}
-        />
-      </NotificationTargetProvider>
-    </React.Fragment>
-  );
-};
-
-export type ThreadProps = Partial<ThreadPropsWithContext>;
-
-/**
- * Thread - The Thread renders a parent message with a list of replies. Use the standard message list of the main channel's messages.
- * The thread is only used for the list of replies to a message.
- *
- * Thread is a consumer of [channel context](https://getstream.io/chat/docs/sdk/reactnative/contexts/channel-context/)
- * Underlying MessageList, MessageComposer and Message components can be customized using props:
- * - additionalMessageListProps
- * - additionalMessageComposerProps
- */
-export const Thread = (props: ThreadProps) => {
-  const { client } = useChatContext();
-  const { threadList } = useChannelContext();
-  const { closeThread, loadMoreThread, reloadThread, thread, threadInstance } = useThreadContext();
-
-  if (thread?.id && !threadList) {
-    throw new Error(
-      'Please add a threadList prop to your Channel component when rendering a thread list. Check our Channel documentation for more info: https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#threadlist',
-    );
+    return <LoadingErrorIndicator error={lastQueryError} listType='message' retry={retry} />;
   }
 
   return (
-    <ThreadWithContext
-      {...{
-        client,
-        closeThread,
-        loadMoreThread,
-        reloadThread,
-        thread,
-        threadInstance,
-      }}
-      {...props}
-    />
+    <NotificationTargetProvider
+      hostId={notificationHostIdProp ?? getThreadNotificationHostId(thread.id)}
+      key={`thread-${thread.id}`}
+      panel='thread'
+    >
+      <ThreadProvider value={threadContext}>
+        <ChannelShell
+          {...shellProps}
+          channel={thread.channel}
+          hasPendingInitialTargetLoad={hasPendingInitialTargetLoad}
+          thread={thread}
+        >
+          {children}
+        </ChannelShell>
+      </ThreadProvider>
+    </NotificationTargetProvider>
   );
 };