stream-chat-react-native-core 9.2.0-beta.1 → 9.2.0-beta.3

package/src/components/Notifications/hooks/useNotificationTarget.ts

@@ -0,0 +1,37 @@
+import { useContext } from 'react';
+
+import {
+  ChannelContext,
+  type ChannelContextValue,
+} from '../../../contexts/channelContext/ChannelContext';
+import {
+  ChannelsContext,
+  type ChannelsContextValue,
+} from '../../../contexts/channelsContext/ChannelsContext';
+import {
+  ThreadContext,
+  type ThreadContextValue,
+} from '../../../contexts/threadContext/ThreadContext';
+import {
+  ThreadsContext,
+  type ThreadsContextValue,
+} from '../../../contexts/threadsContext/ThreadsContext';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../../../contexts/utils/defaultBaseContextValue';
+import type { NotificationTargetPanel } from '../notificationTarget';
+
+const isProvided = <T>(value: T) => value !== (DEFAULT_BASE_CONTEXT_VALUE as T);
+
+export const useNotificationTarget = (): NotificationTargetPanel | undefined => {
+  const channelContext = useContext(ChannelContext) as ChannelContextValue;
+  const channelsContext = useContext(ChannelsContext) as ChannelsContextValue;
+  const threadContext = useContext(ThreadContext) as ThreadContextValue;
+  const threadsContext = useContext(ThreadsContext) as ThreadsContextValue;
+
+  if (isProvided(channelContext) && channelContext.threadList) return 'thread';
+  if (isProvided(threadContext) && threadContext.threadInstance) return 'thread';
+  if (isProvided(channelContext) && channelContext.channel) return 'channel';
+  if (isProvided(threadsContext)) return 'thread-list';
+  if (isProvided(channelsContext)) return 'channel-list';
+
+  return undefined;
+};

package/src/components/Notifications/hooks/useNotifications.ts

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+
+import type { Notification, NotificationManagerState } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStateStore } from '../../../hooks/useStateStore';
+import { isNotificationForTarget, type NotificationTarget } from '../notificationTarget';
+
+export type UseNotificationsFilter = (notification: Notification) => boolean;
+
+export type UseNotificationsOptions = {
+  /** Additional filter applied after optional target filtering. */
+  filter?: UseNotificationsFilter;
+  /** When true, returns an empty list unless an exact target is provided. */
+  requireTarget?: boolean;
+  /** Exact target used to select notifications for one host. */
+  target?: NotificationTarget;
+};
+
+/** Subscribes to the client notification store and returns matching non-system notifications. */
+export const useNotifications = (options?: UseNotificationsOptions): Notification[] => {
+  const { client } = useChatContext();
+  const selector = useCallback(
+    (state: NotificationManagerState) => {
+      const notifications = state.notifications;
+      const target = options?.target;
+      const byTarget = target
+        ? notifications.filter((notification) => isNotificationForTarget(notification, target))
+        : options?.requireTarget
+          ? []
+          : notifications;
+
+      return {
+        notifications: options?.filter ? byTarget.filter(options.filter) : byTarget,
+      };
+    },
+    [options?.filter, options?.requireTarget, options?.target],
+  );
+
+  const { notifications } = useStateStore(client.notifications.store, selector);
+
+  return notifications;
+};

package/src/components/Notifications/hooks/useSystemNotifications.ts

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+
+import type { Notification, NotificationManagerState } from 'stream-chat';
+
+import { hasSystemNotificationTag } from './useNotificationApi';
+
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStateStore } from '../../../hooks/useStateStore';
+
+export type UseSystemNotificationsFilter = (notification: Notification) => boolean;
+
+export type UseSystemNotificationsOptions = {
+  /** Additional filter applied to system-tagged notifications. */
+  filter?: UseSystemNotificationsFilter;
+};
+
+/** Subscribes to notifications tagged as system notifications. */
+export const useSystemNotifications = (options?: UseSystemNotificationsOptions): Notification[] => {
+  const { client } = useChatContext();
+  const selector = useCallback(
+    (state: NotificationManagerState) => {
+      const withSystemTag = state.notifications.filter(hasSystemNotificationTag);
+      return {
+        notifications: options?.filter ? withSystemTag.filter(options.filter) : withSystemTag,
+      };
+    },
+    [options?.filter],
+  );
+
+  const { notifications } = useStateStore(client.notifications.store, selector);
+
+  return notifications;
+};

package/src/components/Notifications/index.ts

@@ -0,0 +1,5 @@
+export * from './Notification';
+export * from './NotificationList';
+export * from './NotificationTargetContext';
+export * from './hooks';
+export * from './notificationTarget';

package/src/components/Notifications/notificationTarget.ts

@@ -0,0 +1,305 @@
+import type { Notification } from 'stream-chat';
+
+const NOTIFICATION_TARGET_PANELS = ['channel', 'thread', 'channel-list', 'thread-list'] as const;
+const NOTIFICATION_TARGET_TAG_PREFIX = 'target:' as const;
+
+/** Built-in SDK surfaces that can host snackbar notifications. */
+export type BuiltInNotificationTargetPanel = (typeof NOTIFICATION_TARGET_PANELS)[number];
+/** Notification surface name. Custom panel strings are supported for integrator-defined hosts. */
+export type NotificationTargetPanel = BuiltInNotificationTargetPanel | (string & {});
+/** Exact notification host within a panel. */
+export type NotificationTarget = {
+  /** Stable id for a mounted notification host, for example a channel cid-derived id. */
+  hostId: string;
+  /** Surface that owns the host. */
+  panel: NotificationTargetPanel;
+};
+/** Owner object used to keep target stacks scoped to a notification manager instance. */
+export type NotificationTargetOwner = object;
+
+type ParsedNotificationTargetTag = {
+  hostId?: string;
+  panel: NotificationTargetPanel;
+};
+
+type NotificationTargetStackItem = {
+  target: NotificationTarget;
+  token: symbol;
+};
+
+const activeNotificationTargets = new WeakMap<
+  NotificationTargetOwner,
+  NotificationTargetStackItem[]
+>();
+const actionNotificationTargets = new WeakMap<
+  NotificationTargetOwner,
+  NotificationTargetStackItem[]
+>();
+
+/** Returns whether a value can be encoded as a notification target panel segment. */
+export const isNotificationTargetPanel = (value: unknown): value is NotificationTargetPanel =>
+  typeof value === 'string' && value.length > 0 && !value.includes(':');
+
+/** Returns whether a value is one of the SDK's built-in notification panels. */
+export const isBuiltInNotificationTargetPanel = (
+  value: unknown,
+): value is BuiltInNotificationTargetPanel =>
+  typeof value === 'string' && (NOTIFICATION_TARGET_PANELS as readonly string[]).includes(value);
+
+/** Builds a notification target tag. Without `hostId`, the tag targets every host in the panel. */
+export const getNotificationTargetTag = (panel: NotificationTargetPanel, hostId?: string) =>
+  `${NOTIFICATION_TARGET_TAG_PREFIX}${panel}${hostId ? `:${hostId}` : ''}`;
+
+/** Adds a broad or exact target tag to a notification tag list without duplicating tags. */
+export const addNotificationTargetTag = (
+  panel: NotificationTargetPanel | undefined,
+  tags?: string[],
+  hostId?: string,
+) => {
+  if (!panel) return tags ?? [];
+
+  return Array.from(new Set([getNotificationTargetTag(panel, hostId), ...(tags ?? [])]));
+};
+
+/** Adds an exact panel and host target tag to a notification tag list. */
+export const addExactNotificationTargetTag = (target: NotificationTarget, tags?: string[]) =>
+  addNotificationTargetTag(target.panel, tags, target.hostId);
+
+/** Host id helper for channel notification targets. */
+export const getChannelNotificationHostId = (cid: string) => `channel:${cid}` as const;
+
+/** Host id helper for thread notification targets. */
+export const getThreadNotificationHostId = (threadId: string) => `thread:${threadId}` as const;
+
+/** Compares notification targets by panel and host id. */
+export const isNotificationTargetEqual = (
+  left: NotificationTarget | undefined,
+  right: NotificationTarget | undefined,
+) => !!left && !!right && left.panel === right.panel && left.hostId === right.hostId;
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null;
+
+const getStringValue = (value: unknown) => (typeof value === 'string' ? value : undefined);
+
+const parseNotificationTargetTag = (tag: string): ParsedNotificationTargetTag | undefined => {
+  if (!tag.startsWith(NOTIFICATION_TARGET_TAG_PREFIX)) return undefined;
+
+  const tagValue = tag.slice(NOTIFICATION_TARGET_TAG_PREFIX.length);
+  const hostSeparatorIndex = tagValue.indexOf(':');
+  const panel = hostSeparatorIndex === -1 ? tagValue : tagValue.slice(0, hostSeparatorIndex);
+
+  if (!isNotificationTargetPanel(panel)) return undefined;
+
+  const hostId = hostSeparatorIndex === -1 ? undefined : tagValue.slice(hostSeparatorIndex + 1);
+
+  return hostId ? { hostId, panel } : { panel };
+};
+
+const getNotificationTargetTags = (notification: Notification) =>
+  (notification.tags ?? [])
+    .map(parseNotificationTargetTag)
+    .filter((target): target is ParsedNotificationTargetTag => !!target);
+
+/** Returns whether a tag list already contains a notification target tag. */
+export const hasNotificationTargetTag = (tags: string[] | undefined) =>
+  tags?.some((tag) => !!parseNotificationTargetTag(tag)) ?? false;
+
+const getExactNotificationTargetTags = (notification: Notification): NotificationTarget[] =>
+  getNotificationTargetTags(notification).filter(
+    (target): target is NotificationTarget => !!target.hostId,
+  );
+
+const getNotificationTargetFromTags = (
+  notification: Notification,
+): NotificationTarget | undefined => getExactNotificationTargetTags(notification)[0];
+
+const getNotificationTargetFromComposer = (
+  notification: Notification,
+): NotificationTarget | undefined => {
+  const composer = notification.origin.context?.composer;
+  if (!isRecord(composer)) return undefined;
+
+  const threadId = getStringValue(composer.threadId);
+  if (threadId) {
+    return { hostId: getThreadNotificationHostId(threadId), panel: 'thread' };
+  }
+
+  const channel = composer.channel;
+  if (!isRecord(channel)) return undefined;
+
+  const cid = getStringValue(channel.cid);
+  return cid ? { hostId: getChannelNotificationHostId(cid), panel: 'channel' } : undefined;
+};
+
+/** Resolves an exact notification target from tags or composer origin metadata. */
+export const getNotificationTarget = (notification: Notification): NotificationTarget | undefined =>
+  getNotificationTargetFromTags(notification) ?? getNotificationTargetFromComposer(notification);
+
+const getExplicitNotificationTargetPanels = (
+  notification: Notification,
+): NotificationTargetPanel[] => {
+  const targetPanels = getNotificationTargetTags(notification).map(({ panel }) => panel);
+
+  if (targetPanels.length > 0) {
+    return Array.from(new Set(targetPanels));
+  }
+
+  const panel = notification.origin.context?.panel;
+  return isNotificationTargetPanel(panel) ? [panel] : [];
+};
+
+/** Resolves the first target panel declared or inferred for a notification. */
+export const getNotificationTargetPanel = (
+  notification: Notification,
+): NotificationTargetPanel | undefined => {
+  const explicitPanels = getExplicitNotificationTargetPanels(notification);
+  if (explicitPanels.length > 0) return explicitPanels[0];
+
+  return getNotificationTarget(notification)?.panel;
+};
+
+/** Resolves all target panels declared or inferred for a notification. */
+export const getNotificationTargetPanels = (
+  notification: Notification,
+): NotificationTargetPanel[] => {
+  const explicitPanels = getExplicitNotificationTargetPanels(notification);
+  if (explicitPanels.length > 0) return explicitPanels;
+
+  const target = getNotificationTarget(notification);
+  return target ? [target.panel] : [];
+};
+
+const getNotificationTargetStack = (
+  stackMap: WeakMap<NotificationTargetOwner, NotificationTargetStackItem[]>,
+  owner: NotificationTargetOwner,
+) => {
+  const stack = stackMap.get(owner) ?? [];
+  stackMap.set(owner, stack);
+  return stack;
+};
+
+const registerNotificationTarget = (
+  stackMap: WeakMap<NotificationTargetOwner, NotificationTargetStackItem[]>,
+  owner: NotificationTargetOwner,
+  target: NotificationTarget,
+) => {
+  const token = Symbol('notification-target');
+  const stack = getNotificationTargetStack(stackMap, owner);
+
+  stack.push({ target, token });
+
+  return () => {
+    const currentStack = stackMap.get(owner);
+    if (!currentStack) return;
+
+    const itemIndex = currentStack.findIndex((item) => item.token === token);
+    if (itemIndex !== -1) {
+      currentStack.splice(itemIndex, 1);
+    }
+
+    if (currentStack.length === 0) {
+      stackMap.delete(owner);
+    }
+  };
+};
+
+const getLastNotificationTarget = (
+  stackMap: WeakMap<NotificationTargetOwner, NotificationTargetStackItem[]>,
+  owner: NotificationTargetOwner,
+) => {
+  const stack = stackMap.get(owner);
+  return stack?.[stack.length - 1]?.target;
+};
+
+/** Registers a mounted notification host as the latest active fallback target. */
+export const registerActiveNotificationTarget = (
+  owner: NotificationTargetOwner,
+  target: NotificationTarget,
+) => registerNotificationTarget(activeNotificationTargets, owner, target);
+
+/** Registers the target for notifications emitted while an action is running. */
+export const registerNotificationActionTarget = (
+  owner: NotificationTargetOwner,
+  target: NotificationTarget,
+) => registerNotificationTarget(actionNotificationTargets, owner, target);
+
+/** Returns the latest mounted fallback target for a notification manager owner. */
+export const getActiveNotificationTarget = (owner: NotificationTargetOwner) =>
+  getLastNotificationTarget(activeNotificationTargets, owner);
+
+/** Returns the latest action-scoped target for a notification manager owner. */
+export const getNotificationActionTarget = (owner: NotificationTargetOwner) =>
+  getLastNotificationTarget(actionNotificationTargets, owner);
+
+const hasExactNotificationTargetTag = (notification: Notification) =>
+  getExactNotificationTargetTags(notification).length > 0;
+
+const hasExplicitNotificationTargetPanel = (notification: Notification) =>
+  getExplicitNotificationTargetPanels(notification).length > 0;
+
+const setNotificationTargetTag = (notification: Notification, target: NotificationTarget) => {
+  notification.tags = addExactNotificationTargetTag(target, notification.tags);
+};
+
+/** Mutates an unscoped notification by adding the best available exact target tag. */
+export const resolveNotificationTargetTagIfNeeded = (
+  owner: NotificationTargetOwner,
+  notification: Notification,
+) => {
+  if (hasExactNotificationTargetTag(notification)) return false;
+  if (hasExplicitNotificationTargetPanel(notification)) return false;
+
+  const composerTarget = getNotificationTargetFromComposer(notification);
+  if (composerTarget) {
+    setNotificationTargetTag(notification, composerTarget);
+    return true;
+  }
+
+  const actionTarget = getNotificationActionTarget(owner);
+  if (actionTarget) {
+    setNotificationTargetTag(notification, actionTarget);
+    return true;
+  }
+
+  const activeTarget = getActiveNotificationTarget(owner);
+  if (activeTarget) {
+    setNotificationTargetTag(notification, activeTarget);
+    return true;
+  }
+
+  return false;
+};
+
+/** Returns whether a notification should be consumed by an exact target host. */
+export const isNotificationForTarget = (notification: Notification, target: NotificationTarget) => {
+  const exactTargets = getExactNotificationTargetTags(notification);
+  if (exactTargets.length > 0) {
+    return exactTargets.some((exactTarget) => isNotificationTargetEqual(exactTarget, target));
+  }
+
+  const explicitTargetPanels = getExplicitNotificationTargetPanels(notification);
+  if (explicitTargetPanels.length > 0) {
+    return explicitTargetPanels.includes(target.panel);
+  }
+
+  const inferredTarget = getNotificationTargetFromComposer(notification);
+  if (inferredTarget) {
+    return isNotificationTargetEqual(inferredTarget, target);
+  }
+
+  return false;
+};
+
+/** Returns whether a notification should be consumed by any host in a panel. */
+export const isNotificationForPanel = (
+  notification: Notification,
+  panel: NotificationTargetPanel,
+) => {
+  const explicitTargetPanels = getNotificationTargetPanels(notification);
+  if (explicitTargetPanels.length > 0) {
+    return explicitTargetPanels.includes(panel);
+  }
+
+  return false;
+};

package/src/components/Notifications/notificationTranslations.ts

@@ -0,0 +1,142 @@
+import type { TFunction } from 'i18next';
+import type { Notification } from 'stream-chat';
+
+const normalizeReason = (notification?: Notification) => {
+  const reason = notification?.metadata?.reason;
+  if (typeof reason !== 'string' || !reason.length) return undefined;
+
+  return reason.toLowerCase();
+};
+
+const withReasonFallback = ({
+  fallbackTranslationKey,
+  notification,
+  reasonTranslationKey,
+  t,
+}: {
+  fallbackTranslationKey: string;
+  notification?: Notification;
+  reasonTranslationKey: string;
+  t: TFunction;
+}) => {
+  const reason = normalizeReason(notification);
+  if (!reason) return t(fallbackTranslationKey);
+
+  return t(reasonTranslationKey, { reason });
+};
+
+const translateAttachmentUploadBlocked = ({
+  notification,
+  t,
+}: {
+  notification?: Notification;
+  t: TFunction;
+}) => {
+  const rawReason = notification?.metadata?.reason;
+  let reason = t('unsupported file type');
+  if (typeof rawReason !== 'string') reason = t('unknown error');
+  if (rawReason === 'size_limit') reason = t('size limit');
+
+  return t('Attachment upload blocked due to {{reason}}', { reason });
+};
+
+const translateAttachmentUploadFailed = ({
+  notification,
+  t,
+}: {
+  notification?: Notification;
+  t: TFunction;
+}) =>
+  withReasonFallback({
+    fallbackTranslationKey: 'Error uploading attachment',
+    notification,
+    reasonTranslationKey: 'Attachment upload failed due to {{reason}}',
+    t,
+  });
+
+const translatePollCreateFailed = ({
+  notification,
+  t,
+}: {
+  notification?: Notification;
+  t: TFunction;
+}) =>
+  withReasonFallback({
+    fallbackTranslationKey: 'Failed to create the poll',
+    notification,
+    reasonTranslationKey: 'Failed to create the poll due to {{reason}}',
+    t,
+  });
+
+const translatePollEndFailed = ({
+  notification,
+  t,
+}: {
+  notification?: Notification;
+  t: TFunction;
+}) =>
+  withReasonFallback({
+    fallbackTranslationKey: 'Failed to end the poll',
+    notification,
+    reasonTranslationKey: 'Failed to end the poll due to {{reason}}',
+    t,
+  });
+
+const translateCommandDisabled = ({
+  notification,
+  t,
+}: {
+  notification?: Notification;
+  t: TFunction;
+}) => {
+  const reason = normalizeReason(notification);
+
+  if (reason === 'editing') {
+    return t('Command not available while editing');
+  }
+
+  if (reason === 'quoted_message') {
+    return t('Command not available while replying');
+  }
+
+  return t(notification?.message || 'Command not available');
+};
+
+const notificationTranslatorsByType: Record<
+  string,
+  (options: { notification: Notification; t: TFunction }) => string
+> = {
+  'api:attachment:upload:failed': translateAttachmentUploadFailed,
+  'api:location:create:failed': ({ t }) => t('Failed to share location'),
+  'api:location:share:failed': ({ t }) => t('Failed to share location'),
+  'api:poll:create:failed': translatePollCreateFailed,
+  'api:poll:end:failed': translatePollEndFailed,
+  'api:poll:end:success': ({ t }) => t('Poll ended'),
+  'api:reply:search:failed': ({ t }) => t('Thread has not been found'),
+  'browser:audio:playback:error': ({ notification, t }) =>
+    notification.message ? t(notification.message) : t('Error reproducing the recording'),
+  'browser:location:get:failed': ({ t }) => t('Failed to retrieve location'),
+  'channel:jumpToFirstUnread:failed': ({ t }) => t('Failed to jump to the first unread message'),
+  'validation:attachment:file:missing': ({ t }) => t('File is required for upload attachment'),
+  'validation:attachment:id:missing': ({ t }) => t('Local upload attachment missing local id'),
+  'validation:attachment:upload:blocked': translateAttachmentUploadBlocked,
+  'validation:attachment:upload:in-progress': ({ t }) =>
+    t('Wait until all attachments have uploaded'),
+  'validation:command:disabled': translateCommandDisabled,
+  'validation:poll:castVote:limit': ({ t }) =>
+    t('Reached the vote limit. Remove an existing vote first.'),
+};
+
+export const getNotificationDisplayMessage = ({
+  notification,
+  t,
+}: {
+  notification: Notification;
+  t: TFunction;
+}) => {
+  const translator = notification.type
+    ? notificationTranslatorsByType[notification.type]
+    : undefined;
+
+  return translator ? translator({ notification, t }) : t(notification.message);
+};

package/src/components/Poll/components/CreatePollHeader.tsx

@@ -51,6 +51,7 @@ export const CreatePollHeader = ({
   return (
     <View style={[styles.headerContainer, headerContainer]}>
       <Button
+        accessibilityLabelKey='a11y/Close poll creation'
         variant='secondary'
         onPress={onBackPressHandler}
         type='solid'
@@ -63,6 +64,7 @@ export const CreatePollHeader = ({
       </Text>
 
       <Button
+        accessibilityLabelKey='a11y/Create poll'
         variant='primary'
         onPress={onCreatePollPressHandler}
         type='solid'

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -163,6 +163,7 @@ export const MultipleVotesSettings = () => {
           style={[styles.row, multipleAnswers.row]}
         >
           <Button
+            accessibilityLabelKey='a11y/Decrease maximum votes'
             variant='secondary'
             type='outline'
             size='md'
@@ -175,6 +176,7 @@ export const MultipleVotesSettings = () => {
           />
           <MaxVotesTextInput />
           <Button
+            accessibilityLabelKey='a11y/Increase maximum votes'
             variant='secondary'
             type='outline'
             size='md'

package/src/components/Poll/components/PollModalHeader.tsx

@@ -25,6 +25,7 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
     <View style={[styles.container, container]}>
       <View style={styles.sideContainer}>
         <Button
+          accessibilityLabelKey='a11y/Close poll'
           variant='secondary'
           type='solid'
           size='md'

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

@@ -20,6 +20,7 @@ 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';
@@ -160,6 +161,7 @@ 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 },
@@ -178,12 +180,14 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   } = useTheme();
 
   const toggleVote = useCallback(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]);
+    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 onPressHandler = useCallback(() => {
     if (onPress) {