stream-chat-react-native-core 9.3.1-beta.3 → 9.3.1-beta.5

package/src/components/Message/hooks/useMessageDeliveryData.ts

@@ -1,14 +1,18 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Event, LocalMessage, UserResponse } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStableCallback } from '../../../hooks';
 
 export const useMessageDeliveredData = ({ message }: { message?: LocalMessage }) => {
   const { channel } = useChannelContext();
   const { client } = useChatContext();
-  const calculate = useCallback(() => {
+
+  const messageIdRef = useRef<string>(message?.id);
+
+  const calculate = useStableCallback(() => {
     if (!message?.created_at) {
       return [];
     }
@@ -17,13 +21,14 @@ export const useMessageDeliveredData = ({ message }: { message?: LocalMessage })
       timestampMs: new Date(message.created_at).getTime(),
     };
     return channel.messageReceiptsTracker.deliveredForMessage(messageRef);
-  }, [channel, message]);
+  });
 
-  const [deliveredTo, setDeliveredTo] = useState<UserResponse[]>([]);
+  const [deliveredTo, setDeliveredTo] = useState<UserResponse[]>(() => calculate());
 
-  useEffect(() => {
+  if (!!messageIdRef.current && !!message?.id && messageIdRef.current !== message.id) {
     setDeliveredTo(calculate());
-  }, [calculate]);
+    messageIdRef.current = message.id;
+  }
 
   useEffect(() => {
     const { unsubscribe } = channel.on('message.delivered', (event: Event) => {

package/src/components/Message/hooks/useMessageReadData.ts

@@ -1,14 +1,18 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Event, LocalMessage, UserResponse } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStableCallback } from '../../../hooks';
 
 export const useMessageReadData = ({ message }: { message?: LocalMessage }) => {
   const { channel } = useChannelContext();
   const { client } = useChatContext();
-  const calculate = useCallback(() => {
+
+  const messageIdRef = useRef<string>(message?.id);
+
+  const calculate = useStableCallback(() => {
     if (!message?.created_at) {
       return [];
     }
@@ -18,13 +22,14 @@ export const useMessageReadData = ({ message }: { message?: LocalMessage }) => {
     };
 
     return channel.messageReceiptsTracker.readersForMessage(messageRef);
-  }, [channel, message]);
+  });
 
-  const [readBy, setReadBy] = useState<UserResponse[]>([]);
+  const [readBy, setReadBy] = useState<UserResponse[]>(() => calculate());
 
-  useEffect(() => {
+  if (!!messageIdRef.current && !!message?.id && messageIdRef.current !== message.id) {
     setReadBy(calculate());
-  }, [calculate]);
+    messageIdRef.current = message.id;
+  }
 
   useEffect(() => {
     const { unsubscribe } = channel.on('message.read', (event: Event) => {

package/src/components/Poll/Poll.tsx

@@ -4,15 +4,20 @@ import { StyleSheet, Text, View } from 'react-native';
 import { PollOption as PollOptionClass } from 'stream-chat';
 
 import { PollOption, ShowAllOptionsButton } from './components';
+import { PollUIStateProvider } from './contexts/PollUIStateContext';
 
+import { usePollAccessibilityActions } from './hooks/usePollAccessibilityActions';
+import { usePollAccessibilityLabel } from './hooks/usePollAccessibilityLabel';
 import { usePollState } from './hooks/usePollState';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import {
   PollContextProvider,
   PollContextValue,
   useTheme,
   useTranslationContext,
 } from '../../contexts';
+import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 
 import { primitives } from '../../theme';
@@ -61,6 +66,10 @@ export const PollContent = () => {
   const styles = useStyles();
   const { PollButtons: PollButtonsComponent, PollHeader: PollHeaderComponent } =
     useComponentsContext();
+  const { enabled: a11yEnabled } = useAccessibilityContext();
+  const accessibilityHint = useA11yLabel('a11y/Double tap and hold to activate contextual menu');
+  const accessibilityLabel = usePollAccessibilityLabel();
+  const { accessibilityActions, onAccessibilityAction } = usePollAccessibilityActions();
 
   const {
     theme: {
@@ -70,8 +79,24 @@ export const PollContent = () => {
     },
   } = useTheme();
 
+  // NOTE: Android custom accessibilityActions are broken in RN < 0.83.2 —
+  // see facebook/react-native#47268, fixed by PR #52724. On affected versions
+  // the actions menu surfaces only a subset of the list and dispatch
+  // announces "Action not supported". iOS works correctly on all versions.
+  // Once the SDK's minimum RN reaches 0.83.2, wrap the descendants below in
+  // <View importantForAccessibility='no-hide-descendants'> so Android
+  // TalkBack groups them under the composite rather than exposing each
+  // interactive child as a separate focus stop.
   return (
-    <View style={[styles.container, container]}>
+    <View
+      accessibilityActions={accessibilityActions}
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={a11yEnabled ? 'button' : undefined}
+      accessible={a11yEnabled || undefined}
+      onAccessibilityAction={onAccessibilityAction}
+      style={[styles.container, container]}
+    >
       <PollHeaderComponent />
       <View style={[styles.optionsWrapper, optionsWrapper]}>
         {options?.slice(0, defaultPollOptionCount)?.map((option: PollOptionClass) => (
@@ -93,7 +118,9 @@ export const Poll = ({ message, poll }: PollProps) => {
         poll,
       }}
     >
-      {PollContentOverride ? <PollContentOverride /> : <PollContent />}
+      <PollUIStateProvider>
+        {PollContentOverride ? <PollContentOverride /> : <PollContent />}
+      </PollUIStateProvider>
     </PollContextProvider>
   );
 };

package/src/components/Poll/components/PollButtons.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Modal, StyleSheet, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
@@ -13,13 +13,22 @@ import { useChatContext, usePollContext, useTheme, useTranslationContext } from
 import { primitives } from '../../../theme';
 import { defaultPollOptionCount } from '../../../utils/constants';
 import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
+import {
+  useAddCommentOpen,
+  useAllCommentsOpen,
+  useAllOptionsOpen,
+  usePollUIStateContext,
+  useSuggestOptionOpen,
+  useViewResultsOpen,
+} from '../contexts/PollUIStateContext';
 import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from '../hooks/usePollState';
 
 export const ViewResultsButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
   const { message, poll } = usePollContext();
-  const [showResults, setShowResults] = useState(false);
+  const { closeViewResults, openViewResults } = usePollUIStateContext();
+  const showResults = useViewResultsOpen();
   const { onPress } = props;
 
   const onPressHandler = useCallback(() => {
@@ -28,15 +37,11 @@ export const ViewResultsButton = (props: PollButtonProps) => {
       return;
     }
 
-    setShowResults(true);
-  }, [message, onPress, poll]);
+    openViewResults();
+  }, [message, onPress, openViewResults, poll]);
 
   const styles = useStyles();
 
-  const onRequestClose = useCallback(() => {
-    setShowResults(false);
-  }, []);
-
   return (
     <>
       <GenericPollButton
@@ -46,10 +51,10 @@ export const ViewResultsButton = (props: PollButtonProps) => {
         type='outline'
       />
       {showResults ? (
-        <Modal animationType='slide' onRequestClose={onRequestClose} visible={showResults}>
+        <Modal animationType='slide' onRequestClose={closeViewResults} visible={showResults}>
           <GestureHandlerRootView style={styles.modalRoot}>
             <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={onRequestClose} title={t('Poll Results')} />
+              <PollModalHeader onPress={closeViewResults} title={t('Poll Results')} />
               <PollResults message={message} poll={poll} />
             </SafeAreaViewWrapper>
           </GestureHandlerRootView>
@@ -61,7 +66,8 @@ export const ViewResultsButton = (props: PollButtonProps) => {
 
 export const ShowAllOptionsButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
-  const [showAllOptions, setShowAllOptions] = useState(false);
+  const { closeAllOptions, openAllOptions } = usePollUIStateContext();
+  const showAllOptions = useAllOptionsOpen();
   const { message, poll } = usePollContext();
   const { options } = usePollState();
   const { onPress } = props;
@@ -72,12 +78,8 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
       return;
     }
 
-    setShowAllOptions(true);
-  }, [message, onPress, poll]);
-
-  const onRequestClose = useCallback(() => {
-    setShowAllOptions(false);
-  }, []);
+    openAllOptions();
+  }, [message, onPress, openAllOptions, poll]);
 
   const styles = useStyles();
 
@@ -90,10 +92,10 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAllOptions ? (
-        <Modal animationType='slide' onRequestClose={onRequestClose} visible={showAllOptions}>
+        <Modal animationType='slide' onRequestClose={closeAllOptions} visible={showAllOptions}>
           <GestureHandlerRootView style={styles.modalRoot}>
             <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={onRequestClose} title={t('Poll Options')} />
+              <PollModalHeader onPress={closeAllOptions} title={t('Poll Options')} />
               <PollAllOptions message={message} poll={poll} />
             </SafeAreaViewWrapper>
           </GestureHandlerRootView>
@@ -107,7 +109,8 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
   const { message, poll } = usePollContext();
   const { answersCount } = usePollState();
-  const [showAnswers, setShowAnswers] = useState(false);
+  const { closeAllComments, openAllComments } = usePollUIStateContext();
+  const showAnswers = useAllCommentsOpen();
   const { onPress } = props;
 
   const onPressHandler = useCallback(() => {
@@ -116,15 +119,11 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
       return;
     }
 
-    setShowAnswers(true);
-  }, [message, onPress, poll]);
+    openAllComments();
+  }, [message, onPress, openAllComments, poll]);
 
   const styles = useStyles();
 
-  const onRequestClose = useCallback(() => {
-    setShowAnswers(false);
-  }, []);
-
   return (
     <>
       {answersCount && answersCount > 0 ? (
@@ -134,10 +133,10 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
         />
       ) : null}
       {showAnswers ? (
-        <Modal animationType='slide' onRequestClose={onRequestClose} visible={showAnswers}>
+        <Modal animationType='slide' onRequestClose={closeAllComments} visible={showAnswers}>
           <GestureHandlerRootView style={styles.modalRoot}>
             <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={onRequestClose} title={t('Poll Comments')} />
+              <PollModalHeader onPress={closeAllComments} title={t('Poll Comments')} />
               <PollAnswersList message={message} poll={poll} />
             </SafeAreaViewWrapper>
           </GestureHandlerRootView>
@@ -151,7 +150,8 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
   const { message, poll } = usePollContext();
   const { addOption, allowUserSuggestedOptions, isClosed } = usePollState();
-  const [showAddOptionDialog, setShowAddOptionDialog] = useState(false);
+  const { closeSuggestOption, openSuggestOption } = usePollUIStateContext();
+  const showAddOptionDialog = useSuggestOptionOpen();
   const { onPress } = props;
 
   const onPressHandler = useCallback(() => {
@@ -160,12 +160,8 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
       return;
     }
 
-    setShowAddOptionDialog(true);
-  }, [message, onPress, poll]);
-
-  const onRequestClose = useCallback(() => {
-    setShowAddOptionDialog(false);
-  }, []);
+    openSuggestOption();
+  }, [message, onPress, openSuggestOption, poll]);
 
   return (
     <>
@@ -174,7 +170,7 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
       ) : null}
       {showAddOptionDialog ? (
         <PollInputDialog
-          closeDialog={onRequestClose}
+          closeDialog={closeSuggestOption}
           onSubmit={addOption}
           placeholder={t('Enter a new option')}
           title={t('Suggest an option')}
@@ -189,7 +185,8 @@ export const AddCommentButton = (props: PollButtonProps) => {
   const { t } = useTranslationContext();
   const { message, poll } = usePollContext();
   const { addComment, allowAnswers, isClosed, ownAnswer } = usePollState();
-  const [showAddCommentDialog, setShowAddCommentDialog] = useState(false);
+  const { closeAddComment, openAddComment } = usePollUIStateContext();
+  const showAddCommentDialog = useAddCommentOpen();
   const { onPress } = props;
 
   const onPressHandler = useCallback(() => {
@@ -198,12 +195,8 @@ export const AddCommentButton = (props: PollButtonProps) => {
       return;
     }
 
-    setShowAddCommentDialog(true);
-  }, [message, onPress, poll]);
-
-  const onRequestClose = useCallback(() => {
-    setShowAddCommentDialog(false);
-  }, []);
+    openAddComment();
+  }, [message, onPress, openAddComment, poll]);
 
   return (
     <>
@@ -212,7 +205,7 @@ export const AddCommentButton = (props: PollButtonProps) => {
       ) : null}
       {showAddCommentDialog ? (
         <PollInputDialog
-          closeDialog={onRequestClose}
+          closeDialog={closeAddComment}
           initialValue={ownAnswer?.answer_text ?? ''}
           onSubmit={addComment}
           placeholder={t('Your comment')}

package/src/components/Poll/components/PollOption.tsx

@@ -20,11 +20,11 @@ import { useComponentsContext } from '../../../contexts/componentsContext/Compon
 
 import { Check } from '../../../icons';
 import { primitives } from '../../../theme';
-import { useNotificationApi } from '../../Notifications';
 import { ProgressBar } from '../../ProgressControl/ProgressBar';
 import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
 import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from '../hooks/usePollState';
+import { usePollVoteToggle } from '../hooks/usePollVoteToggle';
 
 const pollVoteAccessibilityStates = {
   checked: { checked: true, selected: true },
@@ -161,7 +161,6 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
 export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   const { message, poll } = usePollContext();
   const { isClosed, ownVotesByOptionId } = usePollState();
-  const { runWithNotificationTarget } = useNotificationApi();
   const ownCapabilities = useOwnCapabilitiesContext();
   const {
     theme: { semantics },
@@ -179,15 +178,7 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
     },
   } = useTheme();
 
-  const toggleVote = useCallback(async () => {
-    await runWithNotificationTarget(async () => {
-      if (ownVotesByOptionId[option.id]) {
-        await poll.removeVote(ownVotesByOptionId[option.id]?.id, message.id);
-      } else {
-        await poll.castVote(option.id, message.id);
-      }
-    });
-  }, [message.id, option.id, ownVotesByOptionId, poll, runWithNotificationTarget]);
+  const toggleVote = usePollVoteToggle();
 
   const onPressHandler = useCallback(() => {
     if (onPress) {
@@ -195,8 +186,8 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
       return;
     }
 
-    toggleVote();
-  }, [message, onPress, poll, toggleVote]);
+    toggleVote(option.id);
+  }, [message, onPress, option.id, poll, toggleVote]);
 
   const hasVote = !!ownVotesByOptionId[option.id];
   const accessibilityState = hasVote

package/src/components/Poll/contexts/PollUIStateContext.tsx

@@ -0,0 +1,105 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { StateStore } from 'stream-chat';
+
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../../../contexts/utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../../../contexts/utils/isTestEnvironment';
+import { useStateStore } from '../../../hooks/useStateStore';
+
+export type PollUIState = {
+  addCommentOpen: boolean;
+  allCommentsOpen: boolean;
+  allOptionsOpen: boolean;
+  suggestOptionOpen: boolean;
+  viewResultsOpen: boolean;
+};
+
+const INITIAL_POLL_UI_STATE: PollUIState = {
+  addCommentOpen: false,
+  allCommentsOpen: false,
+  allOptionsOpen: false,
+  suggestOptionOpen: false,
+  viewResultsOpen: false,
+};
+
+export type PollUIStateContextValue = {
+  closeAddComment: () => void;
+  closeAllComments: () => void;
+  closeAllOptions: () => void;
+  closeSuggestOption: () => void;
+  closeViewResults: () => void;
+  openAddComment: () => void;
+  openAllComments: () => void;
+  openAllOptions: () => void;
+  openSuggestOption: () => void;
+  openViewResults: () => void;
+  store: StateStore<PollUIState>;
+};
+
+export const PollUIStateContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as PollUIStateContextValue,
+);
+
+export const PollUIStateProvider = ({ children }: PropsWithChildren) => {
+  const value = useState<PollUIStateContextValue>(() => {
+    const store = new StateStore<PollUIState>(INITIAL_POLL_UI_STATE);
+    return {
+      closeAddComment: () => store.partialNext({ addCommentOpen: false }),
+      closeAllComments: () => store.partialNext({ allCommentsOpen: false }),
+      closeAllOptions: () => store.partialNext({ allOptionsOpen: false }),
+      closeSuggestOption: () => store.partialNext({ suggestOptionOpen: false }),
+      closeViewResults: () => store.partialNext({ viewResultsOpen: false }),
+      openAddComment: () => store.partialNext({ addCommentOpen: true }),
+      openAllComments: () => store.partialNext({ allCommentsOpen: true }),
+      openAllOptions: () => store.partialNext({ allOptionsOpen: true }),
+      openSuggestOption: () => store.partialNext({ suggestOptionOpen: true }),
+      openViewResults: () => store.partialNext({ viewResultsOpen: true }),
+      store,
+    };
+  })[0];
+
+  return <PollUIStateContext.Provider value={value}>{children}</PollUIStateContext.Provider>;
+};
+
+export const usePollUIStateContext = () => {
+  const contextValue = useContext(PollUIStateContext) as unknown as PollUIStateContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'usePollUIStateContext must be used within a PollUIStateProvider. The provider is mounted by the Poll component automatically.',
+    );
+  }
+
+  return contextValue;
+};
+
+const selectAddCommentOpen = ({ addCommentOpen }: PollUIState) => ({ addCommentOpen });
+const selectAllCommentsOpen = ({ allCommentsOpen }: PollUIState) => ({ allCommentsOpen });
+const selectAllOptionsOpen = ({ allOptionsOpen }: PollUIState) => ({ allOptionsOpen });
+const selectSuggestOptionOpen = ({ suggestOptionOpen }: PollUIState) => ({ suggestOptionOpen });
+const selectViewResultsOpen = ({ viewResultsOpen }: PollUIState) => ({ viewResultsOpen });
+
+export const useAddCommentOpen = () => {
+  const { store } = usePollUIStateContext();
+  return useStateStore(store, selectAddCommentOpen).addCommentOpen;
+};
+
+export const useAllCommentsOpen = () => {
+  const { store } = usePollUIStateContext();
+  return useStateStore(store, selectAllCommentsOpen).allCommentsOpen;
+};
+
+export const useAllOptionsOpen = () => {
+  const { store } = usePollUIStateContext();
+  return useStateStore(store, selectAllOptionsOpen).allOptionsOpen;
+};
+
+export const useSuggestOptionOpen = () => {
+  const { store } = usePollUIStateContext();
+  return useStateStore(store, selectSuggestOptionOpen).suggestOptionOpen;
+};
+
+export const useViewResultsOpen = () => {
+  const { store } = usePollUIStateContext();
+  return useStateStore(store, selectViewResultsOpen).viewResultsOpen;
+};

package/src/components/Poll/contexts/index.ts

@@ -0,0 +1 @@
+export * from './PollUIStateContext';