stream-chat-react-native-core 9.5.1-beta.7 → 9.5.1-beta.8

package/lib/typescript/components/MessageList/MessageList.d.ts

@@ -9,7 +9,7 @@ import { MessagesContextValue } from '../../contexts/messagesContext/MessagesCon
 import { OwnCapabilitiesContextValue } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { PaginatedMessageListContextValue } from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { ThreadContextValue } from '../../contexts/threadContext/ThreadContext';
-type MessageListPropsWithContext = Pick<AttachmentPickerContextValue, 'closePicker' | 'attachmentPickerStore'> & Pick<OwnCapabilitiesContextValue, 'readEvents'> & Pick<ChannelContextValue, 'channel' | 'channelUnreadStateStore' | 'disabled' | 'hideStickyDateHeader' | 'loadChannelAroundMessage' | 'loading' | 'markRead' | 'reloadChannel' | 'scrollToFirstUnreadThreshold' | 'setChannelUnreadState' | 'setTargetedMessage' | 'targetedMessage' | 'threadList' | 'maximumMessageLimit'> & Pick<ChatContextValue, 'client'> & Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent' | 'hasMore'> & Pick<MessagesContextValue, 'disableTypingIndicator' | 'FlatList' | 'myMessageTheme' | 'shouldShowUnreadUnderlay'> & Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> & Pick<ThreadContextValue, 'loadMoreRecentThread' | 'loadMoreThread' | 'threadHasMore' | 'thread' | 'threadInstance'> & {
+type MessageListPropsWithContext = Pick<AttachmentPickerContextValue, 'closePicker' | 'attachmentPickerStore'> & Pick<OwnCapabilitiesContextValue, 'readEvents'> & Pick<ChannelContextValue, 'channel' | 'channelUnreadStateStore' | 'disabled' | 'hideStickyDateHeader' | 'loadChannelAroundMessage' | 'loading' | 'markRead' | 'reloadChannel' | 'scrollToFirstUnreadThreshold' | 'setChannelUnreadState' | 'setTargetedMessage' | 'targetedMessage' | 'threadList' | 'maximumMessageLimit'> & Pick<ChatContextValue, 'client'> & Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent' | 'hasMore'> & Pick<MessagesContextValue, 'disableTypingIndicator' | 'FlatList' | 'myMessageTheme' | 'shouldShowUnreadUnderlay'> & Pick<MessageInputContextValue, 'allowSendBeforeAttachmentsUpload' | 'messageInputFloating' | 'messageInputHeightStore'> & Pick<ThreadContextValue, 'loadMoreRecentThread' | 'loadMoreThread' | 'threadHasMore' | 'thread' | 'threadInstance'> & {
     /**
      * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
      * to attach some additional props to underlying FlatList, you can add it to following prop.

package/lib/typescript/components/MessageList/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAEL,aAAa,EACb,QAAQ,IAAI,YAAY,EAExB,eAAe,EAKhB,MAAM,cAAc,CAAC;AAgBtB,OAAO,EAEL,6BAA6B,EAC9B,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EACL,4BAA4B,EAE7B,MAAM,gEAAgE,CAAC;AACxE,OAAO,EACL,mBAAmB,EAEpB,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAkB,MAAM,wCAAwC,CAAC;AAI1F,OAAO,EACL,wBAAwB,EAEzB,MAAM,wDAAwD,CAAC;AAKhE,OAAO,EACL,oBAAoB,EAErB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,2BAA2B,EAE5B,MAAM,8DAA8D,CAAC;AACtE,OAAO,EACL,gCAAgC,EAEjC,MAAM,wEAAwE,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAoB,MAAM,4CAA4C,CAAC;AAyIlG,KAAK,2BAA2B,GAAG,IAAI,CACrC,4BAA4B,EAC5B,aAAa,GAAG,uBAAuB,CACxC,GACC,IAAI,CAAC,2BAA2B,EAAE,YAAY,CAAC,GAC/C,IAAI,CACF,mBAAmB,EACjB,SAAS,GACT,yBAAyB,GACzB,UAAU,GACV,sBAAsB,GACtB,0BAA0B,GAC1B,SAAS,GACT,UAAU,GACV,eAAe,GACf,8BAA8B,GAC9B,uBAAuB,GACvB,oBAAoB,GACpB,iBAAiB,GACjB,YAAY,GACZ,qBAAqB,CACxB,GACD,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAChC,IAAI,CAAC,gCAAgC,EAAE,UAAU,GAAG,gBAAgB,GAAG,SAAS,CAAC,GACjF,IAAI,CACF,oBAAoB,EACpB,wBAAwB,GAAG,UAAU,GAAG,gBAAgB,GAAG,0BAA0B,CACtF,GACD,IAAI,CAAC,wBAAwB,EAAE,sBAAsB,GAAG,yBAAyB,CAAC,GAClF,IAAI,CACF,kBAAkB,EAClB,sBAAsB,GAAG,gBAAgB,GAAG,eAAe,GAAG,QAAQ,GAAG,gBAAgB,CAC1F,GAAG;IACF;;;;;;;;;;;;;OAaG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC,CAAC;IAChF;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IAC3C;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACjE;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,6BAA6B,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACnF;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAwkCJ,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,2BAA2B,CAAC,CAAC;AAEpE,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAyElD,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageList/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAEL,aAAa,EACb,QAAQ,IAAI,YAAY,EAExB,eAAe,EAKhB,MAAM,cAAc,CAAC;AAgBtB,OAAO,EAEL,6BAA6B,EAC9B,MAAM,wCAAwC,CAAC;AAEhD,OAAO,EACL,4BAA4B,EAE7B,MAAM,gEAAgE,CAAC;AACxE,OAAO,EACL,mBAAmB,EAEpB,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAkB,MAAM,wCAAwC,CAAC;AAI1F,OAAO,EACL,wBAAwB,EAEzB,MAAM,wDAAwD,CAAC;AAKhE,OAAO,EACL,oBAAoB,EAErB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,2BAA2B,EAE5B,MAAM,8DAA8D,CAAC;AACtE,OAAO,EACL,gCAAgC,EAEjC,MAAM,wEAAwE,CAAC;AAEhF,OAAO,EAAE,kBAAkB,EAAoB,MAAM,4CAA4C,CAAC;AA0IlG,KAAK,2BAA2B,GAAG,IAAI,CACrC,4BAA4B,EAC5B,aAAa,GAAG,uBAAuB,CACxC,GACC,IAAI,CAAC,2BAA2B,EAAE,YAAY,CAAC,GAC/C,IAAI,CACF,mBAAmB,EACjB,SAAS,GACT,yBAAyB,GACzB,UAAU,GACV,sBAAsB,GACtB,0BAA0B,GAC1B,SAAS,GACT,UAAU,GACV,eAAe,GACf,8BAA8B,GAC9B,uBAAuB,GACvB,oBAAoB,GACpB,iBAAiB,GACjB,YAAY,GACZ,qBAAqB,CACxB,GACD,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAChC,IAAI,CAAC,gCAAgC,EAAE,UAAU,GAAG,gBAAgB,GAAG,SAAS,CAAC,GACjF,IAAI,CACF,oBAAoB,EACpB,wBAAwB,GAAG,UAAU,GAAG,gBAAgB,GAAG,0BAA0B,CACtF,GACD,IAAI,CACF,wBAAwB,EACxB,kCAAkC,GAAG,sBAAsB,GAAG,yBAAyB,CACxF,GACD,IAAI,CACF,kBAAkB,EAClB,sBAAsB,GAAG,gBAAgB,GAAG,eAAe,GAAG,QAAQ,GAAG,gBAAgB,CAC1F,GAAG;IACF;;;;;;;;;;;;;OAaG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC,CAAC;IAChF;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IAC3C;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACjE;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,6BAA6B,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACnF;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AA4kCJ,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,2BAA2B,CAAC,CAAC;AAEpE,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBA2ElD,CAAC"}

package/lib/typescript/components/Notifications/index.d.ts

@@ -2,5 +2,6 @@ export * from './Notification';
 export * from './NotificationList';
 export * from './NotificationTargetContext';
 export * from './hooks';
+export * from './notificationFilters';
 export * from './notificationTarget';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Notifications/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC"}

package/lib/typescript/components/Notifications/notificationFilters.d.ts

@@ -0,0 +1,10 @@
+import type { NotificationListFilter } from './NotificationList';
+/**
+ * Notification list filter that keeps every notification except the spurious
+ * "upload failed" one produced when a user removes an attachment mid-upload
+ * (a filter returns `true` to keep a notification). Genuine upload failures
+ * (network, server) are kept because their error is neither aborted nor
+ * cancelled.
+ */
+export declare const excludeCanceledUploadNotifications: NotificationListFilter;
+//# sourceMappingURL=notificationFilters.d.ts.map

package/lib/typescript/components/Notifications/notificationFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notificationFilters.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/notificationFilters.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAejE;;;;;;GAMG;AACH,eAAO,MAAM,kCAAkC,EAAE,sBACN,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.5.1-beta.7",
+  "version": "9.5.1-beta.8",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/MessageList/MessageFlashList.tsx

@@ -60,6 +60,7 @@ import { MessageInputHeightState } from '../../state-store/message-input-height-
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { excludeCanceledUploadNotifications } from '../Notifications/notificationFilters';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
@@ -139,7 +140,10 @@ type MessageFlashListPropsWithContext = Pick<
     | 'maximumMessageLimit'
   > &
   Pick<ChatContextValue, 'client'> &
-  Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
+  Pick<
+    MessageInputContextValue,
+    'allowSendBeforeAttachmentsUpload' | 'messageInputFloating' | 'messageInputHeightStore'
+  > &
   Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
   Pick<
     MessagesContextValue,
@@ -259,6 +263,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     ? InlineLoadingMoreRecentThreadIndicator
     : InlineLoadingMoreRecentIndicator;
   const {
+    allowSendBeforeAttachmentsUpload,
     attachmentPickerStore,
     additionalFlashListProps,
     channel,
@@ -1153,7 +1158,10 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           <AutoCompleteSuggestionList />
         </PortalWhileClosingView>
       </Animated.View>
-      <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
+      <NotificationList
+        bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined}
+        filter={allowSendBeforeAttachmentsUpload ? excludeCanceledUploadNotifications : undefined}
+      />
     </View>
   );
 };
@@ -1238,11 +1246,13 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
   const { readEvents } = useOwnCapabilitiesContext();
-  const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
+  const { allowSendBeforeAttachmentsUpload, messageInputFloating, messageInputHeightStore } =
+    useMessageInputContext();
 
   return (
     <MessageFlashListWithContext
       {...{
+        allowSendBeforeAttachmentsUpload,
         attachmentPickerStore,
         channel,
         channelUnreadStateStore,

package/src/components/MessageList/MessageList.tsx

@@ -74,6 +74,7 @@ import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { excludeCanceledUploadNotifications } from '../Notifications/notificationFilters';
 import { PortalWhileClosingView } from '../UIComponents';
 
 // This is just to make sure that the scrolling happens in a different task queue.
@@ -229,7 +230,10 @@ type MessageListPropsWithContext = Pick<
     MessagesContextValue,
     'disableTypingIndicator' | 'FlatList' | 'myMessageTheme' | 'shouldShowUnreadUnderlay'
   > &
-  Pick<MessageInputContextValue, 'messageInputFloating' | 'messageInputHeightStore'> &
+  Pick<
+    MessageInputContextValue,
+    'allowSendBeforeAttachmentsUpload' | 'messageInputFloating' | 'messageInputHeightStore'
+  > &
   Pick<
     ThreadContextValue,
     'loadMoreRecentThread' | 'loadMoreThread' | 'threadHasMore' | 'thread' | 'threadInstance'
@@ -320,6 +324,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     ? InlineLoadingMoreRecentThreadIndicator
     : InlineLoadingMoreRecentIndicator;
   const {
+    allowSendBeforeAttachmentsUpload,
     animateLayout = true,
     attachmentPickerStore,
     additionalFlatListProps,
@@ -1391,7 +1396,10 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           <AutoCompleteSuggestionList />
         </PortalWhileClosingView>
       </Animated.View>
-      <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
+      <NotificationList
+        bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined}
+        filter={allowSendBeforeAttachmentsUpload ? excludeCanceledUploadNotifications : undefined}
+      />
     </View>
   );
 };
@@ -1423,7 +1431,8 @@ export const MessageList = (props: MessageListProps) => {
   const { readEvents } = useOwnCapabilitiesContext();
   const { disableTypingIndicator, FlatList, myMessageTheme, shouldShowUnreadUnderlay } =
     useMessagesContext();
-  const { messageInputFloating, messageInputHeightStore } = useMessageInputContext();
+  const { allowSendBeforeAttachmentsUpload, messageInputFloating, messageInputHeightStore } =
+    useMessageInputContext();
   const { loadMore, loadMoreRecent, hasMore } = usePaginatedMessageListContext();
   const { loadMoreRecentThread, loadMoreThread, threadHasMore, thread, threadInstance } =
     useThreadContext();
@@ -1431,6 +1440,7 @@ export const MessageList = (props: MessageListProps) => {
   return (
     <MessageListWithContext
       {...{
+        allowSendBeforeAttachmentsUpload,
         attachmentPickerStore,
         channel,
         channelUnreadStateStore,

package/src/components/Notifications/__tests__/notificationFilters.test.ts

@@ -0,0 +1,50 @@
+import type { Notification } from 'stream-chat';
+
+import { excludeCanceledUploadNotifications } from '../notificationFilters';
+
+const buildNotification = (overrides: Partial<Notification> = {}): Notification =>
+  ({
+    createdAt: 0,
+    id: 'n1',
+    message: 'Error uploading attachment',
+    origin: { emitter: 'AttachmentManager' },
+    type: 'api:attachment:upload:failed',
+    ...overrides,
+  }) as Notification;
+
+const canceledError = (name: 'AbortError' | 'CanceledError') => {
+  const error = new Error('canceled');
+  error.name = name;
+  return error;
+};
+
+// A filter returns `true` to KEEP a notification, `false` to hide it.
+describe('excludeCanceledUploadNotifications', () => {
+  it.each(['AbortError', 'CanceledError'] as const)(
+    'hides an upload-failed notification aborted with %s',
+    (name) => {
+      const notification = buildNotification({ originalError: canceledError(name) });
+
+      expect(excludeCanceledUploadNotifications(notification)).toBe(false);
+    },
+  );
+
+  it('keeps a genuine upload failure', () => {
+    const notification = buildNotification({ originalError: new Error('Network Error') });
+
+    expect(excludeCanceledUploadNotifications(notification)).toBe(true);
+  });
+
+  it('keeps an upload-failed notification with no original error', () => {
+    expect(excludeCanceledUploadNotifications(buildNotification())).toBe(true);
+  });
+
+  it('keeps a cancellation error reported on a different notification type', () => {
+    const notification = buildNotification({
+      originalError: canceledError('CanceledError'),
+      type: 'api:message:send:failed',
+    });
+
+    expect(excludeCanceledUploadNotifications(notification)).toBe(true);
+  });
+});

package/src/components/Notifications/index.ts

@@ -2,4 +2,5 @@ export * from './Notification';
 export * from './NotificationList';
 export * from './NotificationTargetContext';
 export * from './hooks';
+export * from './notificationFilters';
 export * from './notificationTarget';

package/src/components/Notifications/notificationFilters.ts

@@ -0,0 +1,26 @@
+import type { Notification } from 'stream-chat';
+
+import type { NotificationListFilter } from './NotificationList';
+
+const ATTACHMENT_UPLOAD_FAILED_TYPE = 'api:attachment:upload:failed';
+
+/**
+ * A cancelled upload surfaces as an `api:attachment:upload:failed` notification
+ * whose original error is an `AbortError` (fetch) or `CanceledError` (axios).
+ * This is what happens when the user removes an attachment before its upload
+ * has finished - the inflight request is aborted, not genuinely failed.
+ */
+const isCanceledAttachmentUpload = (notification: Notification) =>
+  notification.type === ATTACHMENT_UPLOAD_FAILED_TYPE &&
+  (notification.originalError?.name === 'CanceledError' ||
+    notification.originalError?.name === 'AbortError');
+
+/**
+ * Notification list filter that keeps every notification except the spurious
+ * "upload failed" one produced when a user removes an attachment mid-upload
+ * (a filter returns `true` to keep a notification). Genuine upload failures
+ * (network, server) are kept because their error is neither aborted nor
+ * cancelled.
+ */
+export const excludeCanceledUploadNotifications: NotificationListFilter = (notification) =>
+  !isCanceledAttachmentUpload(notification);

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.5.1-beta.7"
+  "version": "9.5.1-beta.8"
 }