fix: long press on poll message issues

Author: isekovanic

package/src/components/Message/Message.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { GestureResponderEvent, Keyboard, StyleProp, View, ViewStyle } from 'react-native';
 
 import type { Attachment, UserResponse } from 'stream-chat';
@@ -54,6 +54,7 @@ import {
   MessageType,
 } from '../MessageList/hooks/useMessageList';
 import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
+import { Poll as PollComponent } from '../Poll';
 
 export type TouchableEmitter =
   | 'fileAttachment'
@@ -562,6 +563,20 @@ const MessageWithContext = <
   });
 
   const { userLanguage } = useTranslationContext();
+  const { Poll, PollButtons, PollHeader } = useChannelContext();
+
+  const PollWrapper = useCallback(() => {
+    const poll = message?.poll_id ? client.polls.fromState(message.poll_id) : undefined;
+    return message?.poll_id && poll ? (
+      <PollComponent<StreamChatGenerics>
+        message={message}
+        poll={poll}
+        Poll={Poll}
+        PollButtons={PollButtons}
+        PollHeader={PollHeader}
+      />
+    ) : null;
+  }, [PollButtons, PollHeader, Poll, client, message]);
 
   const showMessageOverlay = async (isMessageActionsVisible = true, error = errorOrFailed) => {
     await dismissKeyboard();
@@ -613,6 +628,7 @@ const MessageWithContext = <
       otherAttachments: attachments.other,
       OverlayReactionList,
       ownCapabilities,
+      Poll: PollWrapper,
       supportedReactions,
       threadList,
       userLanguage,

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -9,7 +9,7 @@ import {
 
 import { MessageTextContainer } from './MessageTextContainer';
 
-import { useChatContext } from '../../../contexts';
+import { useChannelContext, useChatContext } from '../../../contexts';
 import {
   MessageContextValue,
   useMessageContext,
@@ -145,6 +145,7 @@ const MessageContentWithContext = <
     threadList,
   } = props;
   const { client } = useChatContext();
+  const { Poll: PollOverride, PollButtons, PollHeader } = useChannelContext();
 
   const {
     theme: {
@@ -383,7 +384,16 @@ const MessageContentWithContext = <
               case 'poll': {
                 const pollId = message.poll_id;
                 const poll = pollId && client.polls.fromState(pollId);
-                return pollId && poll ? <Poll key={`poll_${message.poll_id}`} poll={poll} /> : null;
+                return pollId && poll ? (
+                  <Poll
+                    key={`poll_${message.poll_id}`}
+                    message={message}
+                    poll={poll}
+                    Poll={PollOverride}
+                    PollButtons={PollButtons}
+                    PollHeader={PollHeader}
+                  />
+                ) : null;
               }
               case 'text':
               default:

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -25,6 +25,7 @@ import { MessageActionList as DefaultMessageActionList } from './MessageActionLi
 import { OverlayReactionList as OverlayReactionListDefault } from './OverlayReactionList';
 import { OverlayReactionsAvatar as OverlayReactionsAvatarDefault } from './OverlayReactionsAvatar';
 
+import { OwnCapabilitiesProvider } from '../../contexts';
 import { ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { MessageProvider } from '../../contexts/messageContext/MessageContext';
 import {
@@ -135,6 +136,7 @@ const MessageOverlayWithContext = <
     OverlayReactions = DefaultOverlayReactions,
     OverlayReactionsAvatar = OverlayReactionsAvatarDefault,
     ownCapabilities,
+    Poll,
     setOverlay,
     threadList,
     videos,
@@ -441,6 +443,14 @@ const MessageOverlayWithContext = <
                             />
                           )
                         );
+                      case 'poll': {
+                        const pollId = message.poll_id;
+                        return Poll && pollId && ownCapabilities ? (
+                          <OwnCapabilitiesProvider key={`poll_${pollId}`} value={ownCapabilities}>
+                            <Poll />
+                          </OwnCapabilitiesProvider>
+                        ) : null;
+                      }
                       case 'text':
                       default:
                         return otherAttachments?.length && otherAttachments[0].actions ? null : (

package/src/components/Poll/Poll.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { Poll as PollClass, PollOption as PollOptionClass } from 'stream-chat';
+import { PollOption as PollOptionClass } from 'stream-chat';
 
 import {
   AddCommentButton,
@@ -16,12 +16,19 @@ import {
 import { usePollState } from './hooks/usePollState';
 
 import {
+  ChannelContextValue,
   PollContextProvider,
-  useChannelContext,
-  useMessageContext,
+  PollContextValue,
+  usePollContext,
   useTheme,
   useTranslationContext,
 } from '../../contexts';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+export type PollProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<PollContextValue<StreamChatGenerics>, 'poll' | 'message' | 'PollHeader' | 'PollButtons'> &
+  Pick<ChannelContextValue<StreamChatGenerics>, 'Poll'>;
 
 export const PollButtons = () => (
   <>
@@ -64,7 +71,7 @@ export const PollHeader = () => {
 };
 
 const PollWithContext = () => {
-  const { PollButtons: PollButtonsOverride, PollHeader: PollHeaderOverride } = useChannelContext();
+  const { PollButtons: PollButtonsOverride, PollHeader: PollHeaderOverride } = usePollContext();
   const { options } = usePollState();
 
   const {
@@ -88,21 +95,26 @@ const PollWithContext = () => {
   );
 };
 
-export const Poll = ({ poll }: { poll: PollClass }) => {
-  const { Poll: PollOverride } = useChannelContext();
-  const { message } = useMessageContext();
-
-  return (
-    <PollContextProvider
-      value={{
-        message,
-        poll,
-      }}
-    >
-      {PollOverride ? <PollOverride /> : <PollWithContext />}
-    </PollContextProvider>
-  );
-};
+export const Poll = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  message,
+  poll,
+  Poll: PollOverride,
+  PollButtons,
+  PollHeader,
+}: PollProps<StreamChatGenerics>) => (
+  <PollContextProvider
+    value={{
+      message,
+      poll,
+      PollButtons,
+      PollHeader,
+    }}
+  >
+    {PollOverride ? <PollOverride /> : <PollWithContext />}
+  </PollContextProvider>
+);
 
 const styles = StyleSheet.create({
   container: { padding: 15, width: 270 },

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import type { ImageProps } from 'react-native';
 
-import type { Attachment, TranslationLanguages } from 'stream-chat';
+import { Attachment, TranslationLanguages } from 'stream-chat';
 
 import { useResettableState } from './hooks/useResettableState';
 
@@ -46,6 +46,7 @@ export type MessageOverlayData<
   otherAttachments?: Attachment<StreamChatGenerics>[];
   OverlayReactionList?: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
   ownCapabilities?: OwnCapabilitiesContextValue;
+  Poll?: React.ComponentType;
   supportedReactions?: ReactionData[];
   threadList?: boolean;
   userLanguage?: TranslationLanguages;

package/src/contexts/pollContext/pollContext.tsx

@@ -4,6 +4,7 @@ import { Poll } from 'stream-chat';
 
 import { MessageType } from '../../components';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import { ChannelContextValue } from '../channelContext/ChannelContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -13,15 +14,17 @@ export type PollContextValue<
 > = {
   message: MessageType<StreamChatGenerics>;
   poll: Poll<StreamChatGenerics>;
-};
+} & Pick<ChannelContextValue, 'PollButtons' | 'PollHeader'>;
 
 export const PollContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as PollContextValue);
 
-export const PollContextProvider = ({
+export const PollContextProvider = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
   children,
   value,
 }: PropsWithChildren<{
-  value: PollContextValue;
+  value: PollContextValue<StreamChatGenerics>;
 }>) => (
   <PollContext.Provider value={value as unknown as PollContextValue}>
     {children}