From 563dcdb15e10888d142e110d8ecccb66171941d9 Mon Sep 17 00:00:00 2001 From: Stream SDK Bot <60655709+Stream-SDK-Bot@users.noreply.github.com> Date: Mon, 20 Apr 2026 12:21:08 +0100 Subject: [PATCH 1/5] chore: update sdk size (#3561) This PR was created automatically by CI. Co-authored-by: Ivan Sekovanikj <31964049+isekovanic@users.noreply.github.com> Co-authored-by: Stream Bot --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 973ffc78bb..eedaa81b45 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ [![NPM](https://img.shields.io/npm/v/stream-chat-react-native.svg)](https://www.npmjs.com/package/stream-chat-react-native) [![Build Status](https://github.com/GetStream/stream-chat-react-native/actions/workflows/release.yml/badge.svg)](https://github.com/GetStream/stream-chat-react-native/actions) [![Component Reference](https://img.shields.io/badge/docs-component%20reference-blue.svg)](https://getstream.io/chat/docs/sdk/reactnative) -![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-304%20KB-blue) +![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-353%20KB-blue) From aed0051ee3eeab73f57c94b74026584688936dd7 Mon Sep 17 00:00:00 2001 From: Oliver Lazoroski Date: Wed, 22 Apr 2026 14:46:24 +0200 Subject: [PATCH 2/5] refactor(tests): migrate test suite and mock-builders to TypeScript (#3562) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Migrates the remaining JS test infrastructure to TypeScript, then type-tightens the whole test suite with full `noImplicitAny: true` strictness and wires `yarn test:typecheck` into CI as a required check. ### Migration (baseline) - 44 mock-builders (`package/src/mock-builders/`): API response builders, event dispatchers, data generators, and the core `mock.ts` client helper - 36 `.test.js` files → `.test.ts` / `.test.tsx` across components and utils - 2 offline-support helpers → `.tsx` - `test-utils/BetterSqlite.js` → `.ts` - `jest-setup.js` → `.tsx` (contains JSX for the `BottomSheetModal` mock) - New `package/tsconfig.test.json` so tests and mock-builders are type-checked (base `tsconfig.json` still excludes them from the published build) - New `yarn test:typecheck` script, wired into `.github/workflows/check-pr.yml` ### Type-tightening - **fix(store,messagelist):** type-annotate empty arrays in 8 source files where `const queries = []` was inferring `never[]` under the broader include scope. Real latent issues; no behavior change. - **refactor(mock-builders):** tighten types in generators and event dispatchers using SDK types from `stream-chat`; drop fields not on `Attachment`; add missing `reminders` on default channel config; narrow `client.channel(...)` args. - **refactor(mock-builders): `generateMessage` now returns `LocalMessage`.** Previously typed as `MessageResponse` but at runtime produced `Date` objects for `created_at`/`updated_at`/`pinned_at` — the `LocalMessage` shape. Making the type honest eliminated 33 `as unknown as LocalMessage` casts and 57 `toLocalMessage(…)` wrapper calls across the suite. API mocks and event dispatchers that legitimately need the wire shape accept `MessageResponse | LocalMessage` at their boundary. - **refactor(tests):** annotate all test bodies. Uses the established `{...} as unknown as XContextValue` pattern for partial context mocks. Replaces every bogus `as unknown as FileUpload` (leftover silent bug — `FileUpload` was never imported) with the correct SDK type (`LocalAudioAttachment` / `LocalVoiceRecordingAttachment`). Uses `LocalAttachment` (not `Partial`) for attachment mocks that set `localMetadata`. Uses `ComponentProps` for `renderComponent({ props })` typings. - **refactor(tests): flip `noImplicitAny: true`** and annotate the ~630 resulting errors across ~20 test files. `let chatClient: StreamChat`, typed destructured params, typed `jest.fn()` callbacks, `ComponentProps` for helper prop shapes. Zero `any` / `as any` added. ### Dead-prop cleanup Removing spread+cast and `@ts-ignore` escape hatches made TypeScript surface a slew of props tests were passing that target components don't actually accept. 15+ dead props removed across 16 test files. Notable: - `MessageAuthor`: `alignment`, `groupStyles` (live on `MessageContextValue`; `MessageAuthor` doesn't pick them). - `MessageReplies`: `groupStyles`, `MessageRepliesAvatars`, `openThread` (typo — real prop is `onOpenThread`; silently dropped). - `Message`: `reactionsEnabled`, `MessageFooter` override. - `ScrollToBottomButton`: `t` (supplied via `TranslationProvider`). - `ChannelPreviewView`: `client`, `latestMessagePreview`, `watchers`, `latestMessage`, `latestMessageLength`. - `MessageList`: `channelUnreadState` (internal state, never a prop). - `Channel`: `client` (comes from `ChatContext`, caught on `Thread.test.tsx`). - `Giphy` test helper: widened `Record` → `ComponentProps`. Also: zero `@ts-ignore` / `@ts-expect-error` directives remain in any `*.test.*` file. ### Dependency changes - `@types/jest`: `^29.5.14` → `^30.0.0` (matches installed `jest@30`) - `jest`: `^30.0.0` → `^30.3.0` - `@total-typescript/shoehorn`: new devDependency — `fromPartial()` for type-safe partial mocks, replacing `as any` / `Record` patterns ### Source-file changes All zero-behavior-change type annotations: - `src/store/apis/{addPendingTask,deleteMessage,upsertDraft}.ts` - `src/store/sqlite-utils/{appendOrderByClause,appendWhereCluase,createCreateTableQuery}.ts` - `src/components/MessageList/hooks/useMessageList.ts` - `src/components/Message/MessageItemView/utils/renderText.tsx` — `@ts-expect-error` on the untyped `react-native-markdown-package` import switched to `@ts-ignore` so both base and test tsconfigs agree. ### Follow-ups (out of scope) - `package/src/store/apis/upsertDraft.ts:55` — `queries.concat(query)` is a no-op (returns a new array that's never used). Kept out of scope since fixing it is a behavior change on production code. - `MessageStatus.test.tsx` had `it.each('string', fn)` (malformed — string iterated as characters). Converted to `it.skip` to preserve pre-migration runtime behavior. Un-skipping and rewriting is a follow-up. ## Test plan - [x] `yarn build` passes - [x] `yarn lint` passes - [x] `yarn test:typecheck` — **0 errors with `noImplicitAny: true` and full strict mode** - [x] `yarn test:unit` — 751 passed, 14 skipped. Only the pre-existing SQLite-isolation flake in `offline-support/index.test.ts` fails intermittently (baseline on develop was 5 failures; this branch is 1 — no regressions) - [x] Zero `@ts-ignore` / `@ts-expect-error` directives remain in any `*.test.*` file - [x] `yarn test:typecheck` is wired as a required check in `.github/workflows/check-pr.yml` - [x] CI green on push --- .github/workflows/check-pr.yml | 2 + package/{jest-setup.js => jest-setup.tsx} | 13 +- package/jest.config.js | 2 +- package/package.json | 6 +- ...offline-feature.js => offline-feature.tsx} | 421 ++++++--- ...mistic-update.js => optimistic-update.tsx} | 238 +++-- ...Attachment.test.js => Attachment.test.tsx} | 20 +- .../{Gallery.test.js => Gallery.test.tsx} | 13 +- .../{Giphy.test.js => Giphy.test.tsx} | 67 +- ...ldGallery.test.js => buildGallery.test.ts} | 6 +- ...put.test.js => AutoCompleteInput.test.tsx} | 32 +- .../{Channel.test.js => Channel.test.tsx} | 218 +++-- ...t.js => isAttachmentEqualHandler.test.tsx} | 33 +- ...ities.test.js => ownCapabilities.test.tsx} | 28 +- ...t.js => useMessageListPagination.test.tsx} | 168 ++-- ...annelList.test.js => ChannelList.test.tsx} | 92 +- ...tView.test.js => ChannelListView.test.tsx} | 50 +- .../__tests__/useChannelActionItems.test.tsx | 12 +- .../useChannelActionItemsById.test.tsx | 4 +- .../__tests__/useChannelUpdated.test.tsx | 31 +- .../ChannelDetailsBottomSheet.test.tsx | 18 +- .../__tests__/ChannelPreview.test.tsx | 35 +- ...ew.test.js => ChannelPreviewView.test.tsx} | 43 +- .../__tests__/ChannelSwipableWrapper.test.tsx | 6 +- .../useChannelPreviewDisplayPresence.test.tsx | 2 +- .../__tests__/{Chat.test.js => Chat.test.tsx} | 67 +- .../__tests__/ImageGallery.test.tsx | 24 +- .../__tests__/ImageGalleryFooter.test.tsx | 6 +- .../__tests__/ImageGalleryGrid.test.tsx | 9 +- .../__tests__/ImageGalleryHeader.test.tsx | 13 +- .../__tests__/ImageGalleryHeader.test.tsx | 22 +- .../{Message.test.js => Message.test.tsx} | 31 +- ...eAuthor.test.js => MessageAuthor.test.tsx} | 22 +- ...ontent.test.js => MessageContent.test.tsx} | 34 +- ...mView.test.js => MessageItemView.test.tsx} | 15 +- ...r.test.js => MessagePinnedHeader.test.tsx} | 8 +- ...eplies.test.js => MessageReplies.test.tsx} | 51 +- ...eStatus.test.js => MessageStatus.test.tsx} | 30 +- .../__tests__/MessageTextContainer.test.tsx | 16 +- ...om.test.js => ReactionListBottom.test.tsx} | 27 +- ...stTop.test.js => ReactionListTop.test.tsx} | 12 +- ...st.js.snap => MessageAuthor.test.tsx.snap} | 0 ...snap => MessagePinnedHeader.test.tsx.snap} | 0 .../MessageItemView/utils/renderText.test.tsx | 6 +- .../MessageItemView/utils/renderText.tsx | 2 +- .../useShouldUseOverlayStyles.test.tsx | 4 +- ...chButton.test.js => AttachButton.test.tsx} | 18 +- ...s => AttachmentUploadPreviewList.test.tsx} | 35 +- ... => AudioAttachmentUploadPreview.test.tsx} | 23 +- .../AudioAttachmentUploadPreviewExpo.test.tsx | 62 +- ...udioAttachmentUploadPreviewNative.test.tsx | 74 +- ...tButtons.test.js => InputButtons.test.tsx} | 18 +- ...poser.test.js => MessageComposer.test.tsx} | 48 +- ...SendButton.test.js => SendButton.test.tsx} | 17 +- ...> SendMessageDisallowedIndicator.test.tsx} | 78 +- ...est.js.snap => AttachButton.test.tsx.snap} | 0 ....test.js.snap => SendButton.test.tsx.snap} | 0 ...ssageList.test.js => MessageList.test.tsx} | 65 +- ...eSystem.test.js => MessageSystem.test.tsx} | 18 +- ....test.js => ScrollToBottomButton.test.tsx} | 20 +- ...cator.test.js => TypingIndicator.test.tsx} | 10 +- ...st.js.snap => MessageSystem.test.tsx.snap} | 0 ...nap => ScrollToBottomButton.test.tsx.snap} | 0 ....js.snap => TypingIndicator.test.tsx.snap} | 0 .../__tests__/useMessageList.test.tsx | 4 +- .../MessageList/hooks/useMessageList.ts | 2 +- .../__tests__/MessageActionList.test.tsx | 5 +- .../__tests__/MessageActionListItem.test.tsx | 1 + .../__tests__/MessageReactionPicker.test.tsx | 8 +- .../__tests__/MessageUserReactions.test.tsx | 6 +- .../MessageUserReactionsAvatar.test.tsx | 10 +- .../MessageUserReactionsItem.test.tsx | 3 +- .../{Thread.test.js => Thread.test.tsx} | 54 +- ...read.test.js.snap => Thread.test.tsx.snap} | 21 - .../UIComponents/SwipableWrapper.tsx | 2 +- .../__tests__/SwipableWrapper.test.tsx | 2 +- .../__tests__/filePickers.test.tsx | 41 +- .../__tests__/sendMessage.test.tsx | 36 +- .../MessageOverlayHostLayer.test.tsx | 4 +- .../__tests__/useTranslatedMessage.test.tsx | 8 +- package/src/mock-builders/DB/mock.ts | 2 +- .../src/mock-builders/api/channelMocks.tsx | 68 +- .../src/mock-builders/api/deleteMessage.js | 18 - .../src/mock-builders/api/deleteMessage.ts | 21 + .../src/mock-builders/api/deleteReaction.js | 19 - .../src/mock-builders/api/deleteReaction.ts | 23 + .../mock-builders/api/{error.js => error.ts} | 18 +- .../mock-builders/api/getOrCreateChannel.ts | 33 +- ...nnels.js => initiateClientWithChannels.ts} | 24 +- .../{queryChannels.js => queryChannels.ts} | 6 +- .../api/{queryMembers.js => queryMembers.ts} | 56 +- package/src/mock-builders/api/sendMessage.js | 18 - package/src/mock-builders/api/sendMessage.ts | 25 + package/src/mock-builders/api/sendReaction.ts | 14 +- .../src/mock-builders/api/threadReplies.js | 16 - .../src/mock-builders/api/threadReplies.ts | 18 + .../{useMockedApis.js => useMockedApis.ts} | 9 +- package/src/mock-builders/api/utils.js | 7 - package/src/mock-builders/api/utils.ts | 16 + .../{attachments.js => attachments.ts} | 32 +- .../src/mock-builders/event/channelDeleted.js | 7 - .../src/mock-builders/event/channelDeleted.ts | 12 + .../src/mock-builders/event/channelHidden.js | 7 - .../src/mock-builders/event/channelHidden.ts | 12 + .../mock-builders/event/channelTruncated.js | 7 - .../mock-builders/event/channelTruncated.ts | 12 + .../src/mock-builders/event/channelUpdated.js | 7 - .../src/mock-builders/event/channelUpdated.ts | 12 + .../src/mock-builders/event/channelVisible.js | 7 - .../src/mock-builders/event/channelVisible.ts | 12 + .../mock-builders/event/connectionChanged.js | 6 - .../mock-builders/event/connectionChanged.ts | 11 + .../event/connectionRecovered.js | 5 - .../event/connectionRecovered.ts | 10 + .../src/mock-builders/event/memberAdded.js | 10 - .../src/mock-builders/event/memberAdded.ts | 19 + .../src/mock-builders/event/memberRemoved.js | 9 - .../src/mock-builders/event/memberRemoved.ts | 18 + .../src/mock-builders/event/memberUpdated.js | 9 - .../src/mock-builders/event/memberUpdated.ts | 18 + .../src/mock-builders/event/messageDeleted.js | 8 - .../src/mock-builders/event/messageDeleted.ts | 23 + package/src/mock-builders/event/messageNew.js | 11 - package/src/mock-builders/event/messageNew.ts | 26 + .../src/mock-builders/event/messageRead.js | 15 - .../src/mock-builders/event/messageRead.ts | 23 + .../src/mock-builders/event/messageUpdated.js | 8 - .../src/mock-builders/event/messageUpdated.ts | 23 + .../event/notificationAddedToChannel.js | 7 - .../event/notificationAddedToChannel.ts | 12 + .../event/notificationChannelMutesUpdated.js | 7 - .../event/notificationChannelMutesUpdated.ts | 12 + .../event/notificationMarkRead.js | 7 - .../event/notificationMarkRead.ts | 12 + .../event/notificationMarkUnread.js | 12 - .../event/notificationMarkUnread.ts | 22 + .../event/notificationMessageNew.js | 7 - .../event/notificationMessageNew.ts | 12 + .../event/notificationMutesUpdated.js | 11 - .../event/notificationMutesUpdated.ts | 16 + .../event/notificationRemovedFromChannel.js | 7 - .../event/notificationRemovedFromChannel.ts | 12 + .../mock-builders/event/reactionDeleted.js | 9 - .../mock-builders/event/reactionDeleted.ts | 26 + .../src/mock-builders/event/reactionNew.js | 9 - .../src/mock-builders/event/reactionNew.ts | 26 + .../mock-builders/event/reactionUpdated.js | 9 - .../mock-builders/event/reactionUpdated.ts | 26 + package/src/mock-builders/event/typing.js | 9 - package/src/mock-builders/event/typing.ts | 18 + .../src/mock-builders/event/userPresence.js | 8 - .../src/mock-builders/event/userPresence.ts | 13 + .../src/mock-builders/event/userUpdated.js | 8 - .../src/mock-builders/event/userUpdated.ts | 13 + .../{attachment.js => attachment.ts} | 30 +- .../src/mock-builders/generator/channel.ts | 109 ++- package/src/mock-builders/generator/member.js | 13 - package/src/mock-builders/generator/member.ts | 18 + .../src/mock-builders/generator/message.js | 32 - .../src/mock-builders/generator/message.ts | 50 ++ .../src/mock-builders/generator/reaction.js | 12 - .../src/mock-builders/generator/reaction.ts | 15 + .../generator/{user.js => user.ts} | 36 +- package/src/mock-builders/mock.js | 57 -- package/src/mock-builders/mock.ts | 79 ++ .../__tests__/audio-player.test.ts | 4 +- .../image-gallery-state-store.test.ts | 59 +- .../__tests__/video-player-pool.test.ts | 18 +- .../apis/__tests__/updatePendingTask.test.ts | 23 +- package/src/store/apis/addPendingTask.ts | 3 +- package/src/store/apis/deleteMessage.ts | 3 +- package/src/store/apis/upsertDraft.ts | 4 +- .../store/sqlite-utils/appendOrderByClause.ts | 2 +- .../store/sqlite-utils/appendWhereCluase.ts | 2 +- .../sqlite-utils/createCreateTableQuery.ts | 12 +- package/src/test-utils/BetterSqlite.js | 36 - package/src/test-utils/BetterSqlite.ts | 38 + ...{Streami18n.test.js => Streami18n.test.ts} | 97 +- .../__tests__/getResizedImageUrl.test.ts | 18 +- .../{utils.test.js => utils.test.ts} | 2 +- package/tsconfig.test.json | 14 + package/yarn.lock | 846 ++++++++++-------- 182 files changed, 3346 insertions(+), 2058 deletions(-) rename package/{jest-setup.js => jest-setup.tsx} (90%) rename package/src/__tests__/offline-support/{offline-feature.js => offline-feature.tsx} (80%) rename package/src/__tests__/offline-support/{optimistic-update.js => optimistic-update.tsx} (79%) rename package/src/components/Attachment/__tests__/{Attachment.test.js => Attachment.test.tsx} (83%) rename package/src/components/Attachment/__tests__/{Gallery.test.js => Gallery.test.tsx} (96%) rename package/src/components/Attachment/__tests__/{Giphy.test.js => Giphy.test.tsx} (84%) rename package/src/components/Attachment/__tests__/{buildGallery.test.js => buildGallery.test.ts} (96%) rename package/src/components/AutoCompleteInput/__tests__/{AutoCompleteInput.test.js => AutoCompleteInput.test.tsx} (82%) rename package/src/components/Channel/__tests__/{Channel.test.js => Channel.test.tsx} (75%) rename package/src/components/Channel/__tests__/{isAttachmentEqualHandler.test.js => isAttachmentEqualHandler.test.tsx} (73%) rename package/src/components/Channel/__tests__/{ownCapabilities.test.js => ownCapabilities.test.tsx} (94%) rename package/src/components/Channel/__tests__/{useMessageListPagination.test.js => useMessageListPagination.test.tsx} (78%) rename package/src/components/ChannelList/__tests__/{ChannelList.test.js => ChannelList.test.tsx} (90%) rename package/src/components/ChannelList/__tests__/{ChannelListView.test.js => ChannelListView.test.tsx} (76%) rename package/src/components/ChannelPreview/__tests__/{ChannelPreviewView.test.js => ChannelPreviewView.test.tsx} (75%) rename package/src/components/Chat/__tests__/{Chat.test.js => Chat.test.tsx} (78%) rename package/src/components/Message/MessageItemView/__tests__/{Message.test.js => Message.test.tsx} (84%) rename package/src/components/Message/MessageItemView/__tests__/{MessageAuthor.test.js => MessageAuthor.test.tsx} (72%) rename package/src/components/Message/MessageItemView/__tests__/{MessageContent.test.js => MessageContent.test.tsx} (94%) rename package/src/components/Message/MessageItemView/__tests__/{MessageItemView.test.js => MessageItemView.test.tsx} (94%) rename package/src/components/Message/MessageItemView/__tests__/{MessagePinnedHeader.test.js => MessagePinnedHeader.test.tsx} (80%) rename package/src/components/Message/MessageItemView/__tests__/{MessageReplies.test.js => MessageReplies.test.tsx} (66%) rename package/src/components/Message/MessageItemView/__tests__/{MessageStatus.test.js => MessageStatus.test.tsx} (75%) rename package/src/components/Message/MessageItemView/__tests__/{ReactionListBottom.test.js => ReactionListBottom.test.tsx} (84%) rename package/src/components/Message/MessageItemView/__tests__/{ReactionListTop.test.js => ReactionListTop.test.tsx} (87%) rename package/src/components/Message/MessageItemView/__tests__/__snapshots__/{MessageAuthor.test.js.snap => MessageAuthor.test.tsx.snap} (100%) rename package/src/components/Message/MessageItemView/__tests__/__snapshots__/{MessagePinnedHeader.test.js.snap => MessagePinnedHeader.test.tsx.snap} (100%) rename package/src/components/MessageInput/__tests__/{AttachButton.test.js => AttachButton.test.tsx} (91%) rename package/src/components/MessageInput/__tests__/{AttachmentUploadPreviewList.test.js => AttachmentUploadPreviewList.test.tsx} (92%) rename package/src/components/MessageInput/__tests__/{AudioAttachmentUploadPreview.test.js => AudioAttachmentUploadPreview.test.tsx} (89%) rename package/src/components/MessageInput/__tests__/{InputButtons.test.js => InputButtons.test.tsx} (84%) rename package/src/components/MessageInput/__tests__/{MessageComposer.test.js => MessageComposer.test.tsx} (82%) rename package/src/components/MessageInput/__tests__/{SendButton.test.js => SendButton.test.tsx} (85%) rename package/src/components/MessageInput/__tests__/{SendMessageDisallowedIndicator.test.js => SendMessageDisallowedIndicator.test.tsx} (73%) rename package/src/components/MessageInput/__tests__/__snapshots__/{AttachButton.test.js.snap => AttachButton.test.tsx.snap} (100%) rename package/src/components/MessageInput/__tests__/__snapshots__/{SendButton.test.js.snap => SendButton.test.tsx.snap} (100%) rename package/src/components/MessageList/__tests__/{MessageList.test.js => MessageList.test.tsx} (95%) rename package/src/components/MessageList/__tests__/{MessageSystem.test.js => MessageSystem.test.tsx} (75%) rename package/src/components/MessageList/__tests__/{ScrollToBottomButton.test.js => ScrollToBottomButton.test.tsx} (82%) rename package/src/components/MessageList/__tests__/{TypingIndicator.test.js => TypingIndicator.test.tsx} (87%) rename package/src/components/MessageList/__tests__/__snapshots__/{MessageSystem.test.js.snap => MessageSystem.test.tsx.snap} (100%) rename package/src/components/MessageList/__tests__/__snapshots__/{ScrollToBottomButton.test.js.snap => ScrollToBottomButton.test.tsx.snap} (100%) rename package/src/components/MessageList/__tests__/__snapshots__/{TypingIndicator.test.js.snap => TypingIndicator.test.tsx.snap} (100%) rename package/src/components/Thread/__tests__/{Thread.test.js => Thread.test.tsx} (77%) rename package/src/components/Thread/__tests__/__snapshots__/{Thread.test.js.snap => Thread.test.tsx.snap} (99%) delete mode 100644 package/src/mock-builders/api/deleteMessage.js create mode 100644 package/src/mock-builders/api/deleteMessage.ts delete mode 100644 package/src/mock-builders/api/deleteReaction.js create mode 100644 package/src/mock-builders/api/deleteReaction.ts rename package/src/mock-builders/api/{error.js => error.ts} (51%) rename package/src/mock-builders/api/{initiateClientWithChannels.js => initiateClientWithChannels.ts} (65%) rename package/src/mock-builders/api/{queryChannels.js => queryChannels.ts} (55%) rename package/src/mock-builders/api/{queryMembers.js => queryMembers.ts} (65%) delete mode 100644 package/src/mock-builders/api/sendMessage.js create mode 100644 package/src/mock-builders/api/sendMessage.ts delete mode 100644 package/src/mock-builders/api/threadReplies.js create mode 100644 package/src/mock-builders/api/threadReplies.ts rename package/src/mock-builders/api/{useMockedApis.js => useMockedApis.ts} (68%) delete mode 100644 package/src/mock-builders/api/utils.js create mode 100644 package/src/mock-builders/api/utils.ts rename package/src/mock-builders/{attachments.js => attachments.ts} (51%) delete mode 100644 package/src/mock-builders/event/channelDeleted.js create mode 100644 package/src/mock-builders/event/channelDeleted.ts delete mode 100644 package/src/mock-builders/event/channelHidden.js create mode 100644 package/src/mock-builders/event/channelHidden.ts delete mode 100644 package/src/mock-builders/event/channelTruncated.js create mode 100644 package/src/mock-builders/event/channelTruncated.ts delete mode 100644 package/src/mock-builders/event/channelUpdated.js create mode 100644 package/src/mock-builders/event/channelUpdated.ts delete mode 100644 package/src/mock-builders/event/channelVisible.js create mode 100644 package/src/mock-builders/event/channelVisible.ts delete mode 100644 package/src/mock-builders/event/connectionChanged.js create mode 100644 package/src/mock-builders/event/connectionChanged.ts delete mode 100644 package/src/mock-builders/event/connectionRecovered.js create mode 100644 package/src/mock-builders/event/connectionRecovered.ts delete mode 100644 package/src/mock-builders/event/memberAdded.js create mode 100644 package/src/mock-builders/event/memberAdded.ts delete mode 100644 package/src/mock-builders/event/memberRemoved.js create mode 100644 package/src/mock-builders/event/memberRemoved.ts delete mode 100644 package/src/mock-builders/event/memberUpdated.js create mode 100644 package/src/mock-builders/event/memberUpdated.ts delete mode 100644 package/src/mock-builders/event/messageDeleted.js create mode 100644 package/src/mock-builders/event/messageDeleted.ts delete mode 100644 package/src/mock-builders/event/messageNew.js create mode 100644 package/src/mock-builders/event/messageNew.ts delete mode 100644 package/src/mock-builders/event/messageRead.js create mode 100644 package/src/mock-builders/event/messageRead.ts delete mode 100644 package/src/mock-builders/event/messageUpdated.js create mode 100644 package/src/mock-builders/event/messageUpdated.ts delete mode 100644 package/src/mock-builders/event/notificationAddedToChannel.js create mode 100644 package/src/mock-builders/event/notificationAddedToChannel.ts delete mode 100644 package/src/mock-builders/event/notificationChannelMutesUpdated.js create mode 100644 package/src/mock-builders/event/notificationChannelMutesUpdated.ts delete mode 100644 package/src/mock-builders/event/notificationMarkRead.js create mode 100644 package/src/mock-builders/event/notificationMarkRead.ts delete mode 100644 package/src/mock-builders/event/notificationMarkUnread.js create mode 100644 package/src/mock-builders/event/notificationMarkUnread.ts delete mode 100644 package/src/mock-builders/event/notificationMessageNew.js create mode 100644 package/src/mock-builders/event/notificationMessageNew.ts delete mode 100644 package/src/mock-builders/event/notificationMutesUpdated.js create mode 100644 package/src/mock-builders/event/notificationMutesUpdated.ts delete mode 100644 package/src/mock-builders/event/notificationRemovedFromChannel.js create mode 100644 package/src/mock-builders/event/notificationRemovedFromChannel.ts delete mode 100644 package/src/mock-builders/event/reactionDeleted.js create mode 100644 package/src/mock-builders/event/reactionDeleted.ts delete mode 100644 package/src/mock-builders/event/reactionNew.js create mode 100644 package/src/mock-builders/event/reactionNew.ts delete mode 100644 package/src/mock-builders/event/reactionUpdated.js create mode 100644 package/src/mock-builders/event/reactionUpdated.ts delete mode 100644 package/src/mock-builders/event/typing.js create mode 100644 package/src/mock-builders/event/typing.ts delete mode 100644 package/src/mock-builders/event/userPresence.js create mode 100644 package/src/mock-builders/event/userPresence.ts delete mode 100644 package/src/mock-builders/event/userUpdated.js create mode 100644 package/src/mock-builders/event/userUpdated.ts rename package/src/mock-builders/generator/{attachment.js => attachment.ts} (53%) delete mode 100644 package/src/mock-builders/generator/member.js create mode 100644 package/src/mock-builders/generator/member.ts delete mode 100644 package/src/mock-builders/generator/message.js create mode 100644 package/src/mock-builders/generator/message.ts delete mode 100644 package/src/mock-builders/generator/reaction.js create mode 100644 package/src/mock-builders/generator/reaction.ts rename package/src/mock-builders/generator/{user.js => user.ts} (51%) delete mode 100644 package/src/mock-builders/mock.js create mode 100644 package/src/mock-builders/mock.ts delete mode 100644 package/src/test-utils/BetterSqlite.js create mode 100644 package/src/test-utils/BetterSqlite.ts rename package/src/utils/__tests__/{Streami18n.test.js => Streami18n.test.ts} (72%) rename package/src/utils/__tests__/{utils.test.js => utils.test.ts} (98%) create mode 100644 package/tsconfig.test.json diff --git a/.github/workflows/check-pr.yml b/.github/workflows/check-pr.yml index f63dff717e..370cd0fd2f 100644 --- a/.github/workflows/check-pr.yml +++ b/.github/workflows/check-pr.yml @@ -29,5 +29,7 @@ jobs: uses: ./.github/actions/install-and-build-sdk - name: Lint run: yarn lerna-workspaces run lint + - name: Typecheck tests + run: cd package && yarn test:typecheck - name: Test run: yarn test:coverage diff --git a/package/jest-setup.js b/package/jest-setup.tsx similarity index 90% rename from package/jest-setup.js rename to package/jest-setup.tsx index d4f50afd40..69d8be21ff 100644 --- a/package/jest-setup.js +++ b/package/jest-setup.tsx @@ -1,5 +1,6 @@ /* global require */ -import rn, { FlatList, View } from 'react-native'; +import type { ReactNode } from 'react'; +import { FlatList, View } from 'react-native'; import mockRNCNetInfo from '@react-native-community/netinfo/jest/netinfo-mock.js'; import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock'; @@ -36,12 +37,18 @@ registerNativeHandlers({ jest.mock('react-native-reanimated', () => { const RNReanimatedmock = require('react-native-reanimated/mock'); - return { ...RNReanimatedmock, runOnUI: (fn) => fn }; + return { ...RNReanimatedmock, runOnUI: (fn: () => unknown) => fn }; }); jest.mock('@react-native-community/netinfo', () => mockRNCNetInfo); -const BottomSheetMock = ({ handleComponent, children }) => ( +const BottomSheetMock = ({ + handleComponent, + children, +}: { + handleComponent: () => ReactNode; + children: ReactNode; +}) => ( {handleComponent()} {children} diff --git a/package/jest.config.js b/package/jest.config.js index 6ebeae4825..76e9b58549 100644 --- a/package/jest.config.js +++ b/package/jest.config.js @@ -9,7 +9,7 @@ module.exports = { setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'], setupFilesAfterEnv: [ '@testing-library/jest-native/extend-expect', - require.resolve('./jest-setup.js'), + require.resolve('./jest-setup.tsx'), ], testEnvironment: 'node', testPathIgnorePatterns: ['/node_modules/', '/examples/', '__snapshots__', '/lib/'], diff --git a/package/package.json b/package/package.json index 3cf1d43ef8..426a9a8583 100644 --- a/package/package.json +++ b/package/package.json @@ -37,6 +37,7 @@ "prettier": "prettier --list-different '**/*.{js,ts,tsx,md,json}' eslint.config.mjs ../.prettierrc babel.config.js", "prettier-fix": "prettier --write '**/*.{js,ts,tsx,md,json}' eslint.config.mjs ../.prettierrc babel.config.js", "test:coverage": "yarn test:unit --coverage", + "test:typecheck": "tsc --noEmit -p tsconfig.test.json", "test:unit": "TZ=UTC jest", "validate-translations": "node bin/validate-translations.js", "get-version": "echo $npm_package_version", @@ -127,9 +128,10 @@ "@shopify/flash-list": "^2.1.0", "@testing-library/jest-native": "^5.4.3", "@testing-library/react-native": "13.2.0", + "@total-typescript/shoehorn": "^0.1.2", "@types/better-sqlite3": "^7.6.13", "@types/eslint": "9.6.1", - "@types/jest": "^29.5.14", + "@types/jest": "^30.0.0", "@types/linkify-it": "5.0.0", "@types/lodash": "4.17.16", "@types/mime-types": "2.1.4", @@ -154,7 +156,7 @@ "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-native": "^5.0.0", "i18next-cli": "^1.31.0", - "jest": "^30.0.0", + "jest": "^30.3.0", "moment-timezone": "^0.6.0", "prettier": "^3.5.3", "react": "19.1.0", diff --git a/package/src/__tests__/offline-support/offline-feature.js b/package/src/__tests__/offline-support/offline-feature.tsx similarity index 80% rename from package/src/__tests__/offline-support/offline-feature.js rename to package/src/__tests__/offline-support/offline-feature.tsx index 2438e5d2ad..0db351df0a 100644 --- a/package/src/__tests__/offline-support/offline-feature.js +++ b/package/src/__tests__/offline-support/offline-feature.tsx @@ -5,8 +5,34 @@ import { Text, View } from 'react-native'; import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native'; +import type { + Channel as ChannelLLC, + ChannelFilters, + ChannelMemberResponse, + ChannelSort, + Event, + LocalMessage, + MessageResponse, + ReactionResponse, + StreamChat, + UserResponse, +} from 'stream-chat'; import { v4 as uuidv4 } from 'uuid'; +// Tests exercise internal APIs on StreamChat (private sync manager, legacy `wsConnection`). +// These helpers expose the internals at call sites without polluting the whole file with +// `any`; they use `as unknown as` because intersecting with the private `syncManager` +// collapses to `never`. +type TestSyncManager = { invokeSyncStatusListeners: (recovered: boolean) => Promise }; +const getSyncManager = (client: StreamChat): TestSyncManager => + (client.offlineDb as unknown as { syncManager: TestSyncManager }).syncManager; +const asHydrateChannelsMock = ( + client: StreamChat, +): StreamChat['hydrateActiveChannels'] & { mock: { calls: unknown[][] } } => + client.hydrateActiveChannels as StreamChat['hydrateActiveChannels'] & { + mock: { calls: unknown[][] }; + }; + import { ChannelList } from '../../components/ChannelList/ChannelList'; import { Chat } from '../../components/Chat/Chat'; import { WithComponents } from '../../contexts/componentsContext/ComponentsContext'; @@ -52,7 +78,7 @@ import { BetterSqlite } from '../../test-utils/BetterSqlite'; * Custom ChannelPreview component used via WithComponents. * Receives { channel, muted, unread, lastMessage } from ChannelPreview. */ -const ChannelPreviewComponent = ({ channel }) => ( +const ChannelPreviewComponent = ({ channel }: { channel: ChannelLLC }) => ( {channel.data?.name} {channel.state?.messages?.[0]?.text} @@ -63,7 +89,7 @@ test('Workaround to allow exporting tests', () => expect(true).toBe(true)); export const Generic = () => { describe('Offline support is disabled', () => { - let chatClient; + let chatClient: StreamChat; beforeAll(async () => { jest.clearAllMocks(); @@ -88,7 +114,7 @@ export const Generic = () => { await waitFor(() => expect(screen.getByTestId('test-child')).toBeTruthy()); await waitFor(async () => { - const tablesInDb = await BetterSqlite.getTables(); + const tablesInDb = (await BetterSqlite.getTables()) as Array<{ name: string }>; const tableNamesInDB = tablesInDb.map((table) => table.name); const tablesNamesInSchema = Object.keys(tables); @@ -100,16 +126,32 @@ export const Generic = () => { }); describe('Offline support is enabled', () => { - let chatClient; - let channels; - - let allUsers; - let allMessages; - let allMembers; - let allReactions; - let allReads; - const getRandomInt = (lower, upper) => Math.floor(lower + Math.random() * (upper - lower + 1)); - const createChannel = (messagesOverride) => { + // Generated channel response shape used throughout the tests. Widened to include the + // `cid` top-level field that is not part of `GeneratedChannelResponseCustomValues` but + // which the tests rely on. + type GeneratedChannelResponseWithCid = ReturnType & { + cid: string; + }; + + type MemberWithCid = ChannelMemberResponse & { cid: string }; + type ReadWithCid = { + cid: string; + last_read: Date; + unread_messages: number; + user: ChannelMemberResponse['user']; + }; + + let chatClient: StreamChat; + let channels: GeneratedChannelResponseWithCid[]; + + let allUsers: UserResponse[]; + let allMessages: Array | LocalMessage>; + let allMembers: MemberWithCid[]; + let allReactions: ReactionResponse[]; + let allReads: ReadWithCid[]; + const getRandomInt = (lower: number, upper: number) => + Math.floor(lower + Math.random() * (upper - lower + 1)); + const createChannel = (messagesOverride?: Partial[]) => { const id = uuidv4(); const cid = `messaging:${id}`; // always guarantee at least 2 members for ease of use; cases that need to test specific behaviour @@ -117,13 +159,19 @@ export const Generic = () => { const begin = getRandomInt(0, allUsers.length - 3); // begin shouldn't be the end of users.length const end = getRandomInt(begin + 2, allUsers.length - 1); const usersForMembers = allUsers.slice(begin, end); - const members = usersForMembers.map((user) => - generateMember({ - cid, - user, - }), + const members: MemberWithCid[] = usersForMembers.map( + (user: UserResponse) => + // `cid` is not part of `ChannelMemberResponse`, but tests rely on reading it back from + // the generated member objects — keep the runtime shape and widen the type. + ({ + ...generateMember({ user }), + cid, + }) as unknown as MemberWithCid, ); - members.push(generateMember({ cid, user: chatClient.user })); + members.push({ + ...generateMember({ user: chatClient.user as UserResponse }), + cid, + } as unknown as MemberWithCid); const messages = messagesOverride || @@ -137,7 +185,7 @@ export const Generic = () => { const end = getRandomInt(begin + 1, usersForMembers.length - 1); const usersForReactions = usersForMembers.slice(begin, end); - const reactions = usersForReactions.map((user) => + const reactions = usersForReactions.map((user: UserResponse) => generateReaction({ message_id: id, user, @@ -149,11 +197,11 @@ export const Generic = () => { id, latest_reactions: reactions, user, - userId: user.id, + user_id: user.id, }); }); - const reads = members.map((member) => ({ + const reads: ReadWithCid[] = members.map((member: MemberWithCid) => ({ cid, last_read: new Date(new Date().setDate(new Date().getDate() - getRandomInt(0, 20))), unread_messages: 0, @@ -164,20 +212,25 @@ export const Generic = () => { allMembers.push(...members); allReads.push(...reads); + // `cid` is not part of `GeneratedChannelResponseCustomValues`, but tests rely on reading it + // back as a top-level field on the generated channel response — keep the runtime shape and + // widen the input type. return generateChannelResponse({ cid, id, members, messages, read: reads, - }); + } as unknown as Parameters< + typeof generateChannelResponse + >[0]) as GeneratedChannelResponseWithCid; }; beforeEach(async () => { jest.clearAllMocks(); chatClient = await getTestClientWithUser({ id: 'dan' }); allUsers = Array(20).fill(1).map(generateUser); - allUsers.push(chatClient.user); + allUsers.push(chatClient.user as UserResponse); allMessages = []; allMembers = []; allReactions = []; @@ -201,8 +254,8 @@ export const Generic = () => { const filters = { foo: 'bar', type: 'messaging', - }; - const sort = { last_updated: 1 }; + } as ChannelFilters; + const sort: ChannelSort = { last_updated: 1 }; const renderComponent = () => render( @@ -213,14 +266,18 @@ export const Generic = () => { , ); - const expectCIDsOnUIToBeInDB = async (queryAllByLabelText) => { + const expectCIDsOnUIToBeInDB = async ( + queryAllByLabelText: typeof screen.queryAllByLabelText, + ) => { const channelIdsOnUI = queryAllByLabelText('list-item').map( - (node) => node._fiber.pendingProps.testID, + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber.pendingProps + .testID, ); await waitFor(async () => { const channelQueriesRows = await BetterSqlite.selectFromTable('channelQueries'); - const cidsInDB = JSON.parse(channelQueriesRows[0].cids); + const cidsInDB = JSON.parse(channelQueriesRows[0].cids as string); const filterSortQueryInDB = channelQueriesRows[0].id; const actualFilterSortQueryInDB = convertFilterSortToQuery({ filters, sort }); @@ -228,16 +285,20 @@ export const Generic = () => { expect(filterSortQueryInDB).toBe(actualFilterSortQueryInDB); expect(cidsInDB.length).toBe(channelIdsOnUI.length); - channelIdsOnUI.forEach((cidOnUi, index) => { + channelIdsOnUI.forEach((cidOnUi: string, index: number) => { expect(cidsInDB.includes(cidOnUi)).toBe(true); expect(index).toBe(cidsInDB.indexOf(cidOnUi)); }); }); }; - const expectAllChannelsWithStateToBeInDB = async (queryAllByLabelText) => { + const expectAllChannelsWithStateToBeInDB = async ( + queryAllByLabelText: typeof screen.queryAllByLabelText, + ) => { const channelIdsOnUI = queryAllByLabelText('list-item').map( - (node) => node._fiber.pendingProps.testID, + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber.pendingProps + .testID, ); await waitFor(async () => { @@ -255,26 +316,32 @@ export const Generic = () => { expect(reactionsRows.length).toBe(allReactions.length); channelsRows.forEach((row) => { - expect(channelIdsOnUI.includes(row.cid)).toBe(true); + expect(channelIdsOnUI.includes(row.cid as string)).toBe(true); }); messagesRows.forEach((row) => { - expect(allMessages.filter((m) => m.id === row.id)).toHaveLength(1); + expect( + allMessages.filter((m: Partial | LocalMessage) => m.id === row.id), + ).toHaveLength(1); }); membersRows.forEach((row) => expect( - allMembers.filter((m) => m.cid === row.cid && m.user.id === row.userId), + allMembers.filter((m: MemberWithCid) => m.cid === row.cid && m.user?.id === row.userId), ).toHaveLength(1), ); - usersRows.forEach((row) => expect(allUsers.filter((u) => u.id === row.id)).toHaveLength(1)); + usersRows.forEach((row) => + expect(allUsers.filter((u: UserResponse) => u.id === row.id)).toHaveLength(1), + ); reactionsRows.forEach((row) => expect( - allReactions.filter((r) => r.message_id === row.messageId && row.userId === r.user_id), + allReactions.filter( + (r: ReactionResponse) => r.message_id === row.messageId && row.userId === r.user_id, + ), ).toHaveLength(1), ); readsRows.forEach((row) => expect( - allReads.filter((r) => r.user.id === row.userId && r.cid === row.cid), + allReads.filter((r: ReadWithCid) => r.user?.id === row.userId && r.cid === row.cid), ).toHaveLength(1), ); }); @@ -289,7 +356,7 @@ export const Generic = () => { await waitFor(() => expect(screen.getByTestId('test-child')).toBeTruthy()); - const tablesInDb = await BetterSqlite.getTables(); + const tablesInDb = (await BetterSqlite.getTables()) as Array<{ name: string }>; const tableNamesInDB = tablesInDb.map((table) => table.name); const tablesNamesInSchema = Object.keys(tables); @@ -303,7 +370,7 @@ export const Generic = () => { await act(() => dispatchConnectionChangedEvent(chatClient, false)); // await waiter(); await act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(async () => { expect(screen.getByTestId('channel-list-view')).toBeTruthy(); @@ -317,7 +384,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor( async () => { @@ -337,13 +404,11 @@ export const Generic = () => { await waitFor(async () => { act(() => dispatchConnectionChangedEvent(chatClient)); - await act( - async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true), - ); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); expect(screen.getByTestId('channel-list-view')).toBeTruthy(); expect(screen.getByTestId(emptyChannel.cid)).toBeTruthy(); expect(chatClient.hydrateActiveChannels).toHaveBeenCalled(); - expect(chatClient.hydrateActiveChannels.mock.calls[0][0]).toStrictEqual([emptyChannel]); + expect(asHydrateChannelsMock(chatClient).mock.calls[0][0]).toStrictEqual([emptyChannel]); }); }); @@ -352,7 +417,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[0].channel; const newMessage = generateMessage({ @@ -381,7 +446,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[0].channel; @@ -443,7 +508,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[0].channel; @@ -505,7 +570,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => { expect(screen.getByTestId('channel-list-view')).toBeTruthy(); }); @@ -520,7 +585,11 @@ export const Generic = () => { await waitFor(() => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(newChannel.channel.cid)).toBeTruthy(); }); @@ -542,13 +611,19 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const updatedMessage = { ...channels[0].messages[0] }; updatedMessage.text = uuidv4(); - act(() => dispatchMessageUpdatedEvent(chatClient, updatedMessage, channels[0].channel)); + act(() => + dispatchMessageUpdatedEvent( + chatClient, + updatedMessage as MessageResponse, + channels[0].channel, + ), + ); await waitFor(async () => { const messagesRows = await BetterSqlite.selectFromTable('messages'); @@ -564,14 +639,18 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const removedChannel = channels[getRandomInt(0, channels.length - 1)].channel; act(() => dispatchNotificationRemovedFromChannel(chatClient, removedChannel)); await waitFor(async () => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(removedChannel.cid)).toBeFalsy(); await expectCIDsOnUIToBeInDB(screen.queryAllByLabelText); @@ -591,14 +670,18 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const removedChannel = channels[getRandomInt(0, channels.length - 1)].channel; act(() => dispatchChannelDeletedEvent(chatClient, removedChannel)); await waitFor(async () => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(removedChannel.cid)).toBeFalsy(); await expectCIDsOnUIToBeInDB(screen.queryAllByLabelText); @@ -618,14 +701,18 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const hiddenChannel = channels[getRandomInt(0, channels.length - 1)].channel; act(() => dispatchChannelHiddenEvent(chatClient, hiddenChannel)); await waitFor(async () => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(hiddenChannel.cid)).toBeFalsy(); await expectCIDsOnUIToBeInDB(screen.queryAllByLabelText); @@ -648,7 +735,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const hiddenChannel = channels[getRandomInt(0, channels.length - 1)].channel; // first, we mark it as hidden @@ -656,7 +743,11 @@ export const Generic = () => { await waitFor(async () => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(hiddenChannel.cid)).toBeFalsy(); await expectCIDsOnUIToBeInDB(screen.queryAllByLabelText); @@ -678,7 +769,11 @@ export const Generic = () => { await waitFor(async () => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(hiddenChannel.cid)).toBeFalsy(); await expectCIDsOnUIToBeInDB(screen.queryAllByLabelText); @@ -701,7 +796,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const newChannel = createChannel(); @@ -713,7 +808,11 @@ export const Generic = () => { await waitFor(() => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(newChannel.channel.cid)).toBeTruthy(); }); @@ -735,7 +834,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const channelToTruncate = channels[getRandomInt(0, channels.length - 1)].channel; @@ -744,7 +843,11 @@ export const Generic = () => { await waitFor(async () => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(channelToTruncate.cid)).toBeTruthy(); expectCIDsOnUIToBeInDB(screen.queryAllByLabelText); @@ -767,15 +870,19 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const channelResponse = channels[getRandomInt(0, channels.length - 1)]; const channelToTruncate = channelResponse.channel; const messages = channelResponse.messages; - messages.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()); + messages.sort( + (a: Partial | LocalMessage, b: Partial | LocalMessage) => + new Date(a.created_at as string | Date).getTime() - + new Date(b.created_at as string | Date).getTime(), + ); // truncate at the middle - const truncatedAt = messages[Number(messages.length / 2)].created_at; + const truncatedAt = messages[Number(messages.length / 2)].created_at as string | undefined; act(() => dispatchChannelTruncatedEvent(chatClient, { ...channelToTruncate, @@ -786,7 +893,11 @@ export const Generic = () => { await waitFor(async () => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(channelToTruncate.cid)).toBeTruthy(); expectCIDsOnUIToBeInDB(screen.queryAllByLabelText); @@ -811,7 +922,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const channelResponse = channels[getRandomInt(0, channels.length - 1)]; @@ -827,7 +938,11 @@ export const Generic = () => { await waitFor(async () => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(channelToTruncate.cid)).toBeTruthy(); expectCIDsOnUIToBeInDB(screen.queryAllByLabelText); @@ -843,13 +958,17 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const channelResponse = channels[getRandomInt(0, channels.length - 1)]; const channelToTruncate = channelResponse.channel; const messages = channelResponse.messages; - const latestTimestamp = Math.max(...messages.map((m) => new Date(m.created_at).getTime())); + const latestTimestamp = Math.max( + ...messages.map((m: Partial | LocalMessage) => + new Date(m.created_at as string | Date).getTime(), + ), + ); // truncate at the middle const truncatedAt = new Date(latestTimestamp + 1).toISOString(); act(() => @@ -862,7 +981,11 @@ export const Generic = () => { await waitFor(async () => { const channelIdsOnUI = screen .queryAllByLabelText('list-item') - .map((node) => node._fiber.pendingProps.testID); + .map( + (node) => + (node as unknown as { _fiber: { pendingProps: { testID: string } } })._fiber + .pendingProps.testID, + ); expect(channelIdsOnUI.includes(channelToTruncate.cid)).toBeTruthy(); expectCIDsOnUIToBeInDB(screen.queryAllByLabelText); @@ -877,7 +1000,7 @@ export const Generic = () => { useMockedApis(chatClient, [queryChannelsApi(channels)]); renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -893,14 +1016,14 @@ export const Generic = () => { }); const messageWithNewReaction = { ...targetMessage, - latest_reactions: [...targetMessage.latest_reactions, newReaction], + latest_reactions: [...(targetMessage.latest_reactions ?? []), newReaction], }; act(() => dispatchReactionNewEvent( chatClient, newReaction, - messageWithNewReaction, + messageWithNewReaction as MessageResponse, targetChannel.channel, ), ); @@ -910,7 +1033,7 @@ export const Generic = () => { const matchingReactionsRows = reactionsRows.filter( (r) => r.type === newReaction.type && - r.userId === reactionMember.user.id && + r.userId === reactionMember.user!.id && r.messageId === messageWithNewReaction.id, ); @@ -922,7 +1045,7 @@ export const Generic = () => { useMockedApis(chatClient, [queryChannelsApi(channels)]); renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -931,7 +1054,7 @@ export const Generic = () => { const reactionMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)]; const someOtherMember = targetChannel.members.filter( - (member) => reactionMember.user.id !== member.user.id, + (member: Partial) => reactionMember.user!.id !== member.user!.id, )[getRandomInt(0, targetChannel.members.length - 2)]; const newReactions = [ @@ -953,34 +1076,37 @@ export const Generic = () => { ]; const messageWithNewReactionBase = { ...targetMessage, - latest_reactions: [...targetMessage.latest_reactions], + latest_reactions: [...(targetMessage.latest_reactions ?? [])], }; - const newLatestReactions = []; + const newLatestReactions: ReactionResponse[] = []; newReactions.forEach((newReaction) => { newLatestReactions.push(newReaction); const messageWithNewReaction = { ...messageWithNewReactionBase, - latest_reactions: [...messageWithNewReactionBase.latest_reactions, ...newLatestReactions], + latest_reactions: [ + ...(messageWithNewReactionBase.latest_reactions ?? []), + ...newLatestReactions, + ], }; act(() => dispatchReactionNewEvent( chatClient, newReaction, - messageWithNewReaction, + messageWithNewReaction as MessageResponse, targetChannel.channel, ), ); }); const finalReactionCount = - messageWithNewReactionBase.latest_reactions.length + + (messageWithNewReactionBase.latest_reactions ?? []).length + newReactions.filter( (newReaction) => - !messageWithNewReactionBase.latest_reactions.some( - (initialReaction) => + !(messageWithNewReactionBase.latest_reactions ?? []).some( + (initialReaction: ReactionResponse) => initialReaction.type === newReaction.type && - initialReaction.user.id === newReaction.user.id, + initialReaction.user!.id === newReaction.user!.id, ), ).length; @@ -995,7 +1121,7 @@ export const Generic = () => { expect( matchingReactionsRows.filter( (reaction) => - reaction.type === newReaction.type && reaction.userId === newReaction.user.id, + reaction.type === newReaction.type && reaction.userId === newReaction.user!.id, ).length, ).toBe(1); }); @@ -1006,7 +1132,7 @@ export const Generic = () => { useMockedApis(chatClient, [queryChannelsApi(channels)]); renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -1034,21 +1160,24 @@ export const Generic = () => { ]; const messageWithNewReactionBase = { ...targetMessage, - latest_reactions: [...targetMessage.latest_reactions], + latest_reactions: [...(targetMessage.latest_reactions ?? [])], }; - const newLatestReactions = []; + const newLatestReactions: ReactionResponse[] = []; newReactions.forEach((newReaction) => { newLatestReactions.push(newReaction); const messageWithNewReaction = { ...messageWithNewReactionBase, - latest_reactions: [...messageWithNewReactionBase.latest_reactions, ...newLatestReactions], + latest_reactions: [ + ...(messageWithNewReactionBase.latest_reactions ?? []), + ...newLatestReactions, + ], }; act(() => dispatchReactionNewEvent( chatClient, newReaction, - messageWithNewReaction, + messageWithNewReaction as MessageResponse, targetChannel.channel, ), ); @@ -1059,7 +1188,7 @@ export const Generic = () => { const matchingReactionsRows = reactionsRows.filter( (r) => r.type === 'wow' && - r.userId === reactionMember.user.id && + r.userId === reactionMember.user!.id && r.messageId === messageWithNewReactionBase.id, ); @@ -1072,13 +1201,13 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; const targetMessage = targetChannel.messages[getRandomInt(0, targetChannel.messages.length - 1)]; - const reactionsOnTargetMessage = targetMessage.latest_reactions; + const reactionsOnTargetMessage = targetMessage.latest_reactions ?? []; const reactionToBeRemoved = reactionsOnTargetMessage[getRandomInt(0, reactionsOnTargetMessage.length - 1)]; @@ -1103,7 +1232,7 @@ export const Generic = () => { dispatchReactionDeletedEvent( chatClient, reactionToBeRemoved, - messageWithoutDeletedReaction, + messageWithoutDeletedReaction as MessageResponse, targetChannel.channel, ), ); @@ -1126,13 +1255,13 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; const targetMessage = targetChannel.messages[getRandomInt(0, targetChannel.messages.length - 1)]; - const reactionsOnTargetMessage = targetMessage.latest_reactions; + const reactionsOnTargetMessage = targetMessage.latest_reactions ?? []; const reactionToBeUpdated = reactionsOnTargetMessage[getRandomInt(0, reactionsOnTargetMessage.length - 1)]; reactionToBeUpdated.type = 'wow'; @@ -1141,7 +1270,7 @@ export const Generic = () => { dispatchReactionUpdatedEvent( chatClient, reactionToBeUpdated, - targetMessage, + targetMessage as MessageResponse, targetChannel.channel, ), ); @@ -1163,7 +1292,7 @@ export const Generic = () => { useMockedApis(chatClient, [queryChannelsApi(channels)]); renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -1186,21 +1315,24 @@ export const Generic = () => { ]; const messageWithNewReactionBase = { ...targetMessage, - latest_reactions: [...targetMessage.latest_reactions], + latest_reactions: [...(targetMessage.latest_reactions ?? [])], }; - const newLatestReactions = []; + const newLatestReactions: ReactionResponse[] = []; newReactions.forEach((newReaction) => { newLatestReactions.push(newReaction); const messageWithNewReaction = { ...messageWithNewReactionBase, - latest_reactions: [...messageWithNewReactionBase.latest_reactions, ...newLatestReactions], + latest_reactions: [ + ...(messageWithNewReactionBase.latest_reactions ?? []), + ...newLatestReactions, + ], }; act(() => dispatchReactionNewEvent( chatClient, newReaction, - messageWithNewReaction, + messageWithNewReaction as MessageResponse, targetChannel.channel, ), ); @@ -1210,7 +1342,7 @@ export const Generic = () => { const reactionsRows = await BetterSqlite.selectFromTable('reactions'); const matchingReactionsRows = reactionsRows.filter( (r) => - r.messageId === messageWithNewReactionBase.id && r.userId === reactionMember.user.id, + r.messageId === messageWithNewReactionBase.id && r.userId === reactionMember.user!.id, ); expect(matchingReactionsRows.length).toBe(2); @@ -1218,7 +1350,7 @@ export const Generic = () => { expect( matchingReactionsRows.filter( (reaction) => - reaction.type === newReaction.type && reaction.userId === newReaction.user.id, + reaction.type === newReaction.type && reaction.userId === newReaction.user!.id, ).length, ).toBe(1); }); @@ -1231,14 +1363,14 @@ export const Generic = () => { }); const messageWithNewReaction = { ...targetMessage, - latest_reactions: [...targetMessage.latest_reactions, uniqueReaction], + latest_reactions: [...(targetMessage.latest_reactions ?? []), uniqueReaction], }; act(() => dispatchReactionUpdatedEvent( chatClient, uniqueReaction, - messageWithNewReaction, + messageWithNewReaction as MessageResponse, targetChannel.channel, ), ); @@ -1248,7 +1380,7 @@ export const Generic = () => { const matchingReactionsRows = reactionsRows.filter( (r) => r.type === uniqueReaction.type && - r.userId === reactionMember.user.id && + r.userId === reactionMember.user!.id && r.messageId === messageWithNewReaction.id, ); @@ -1260,7 +1392,7 @@ export const Generic = () => { useMockedApis(chatClient, [queryChannelsApi(channels)]); renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -1279,7 +1411,7 @@ export const Generic = () => { // anything impossible given the scenarios is fine const messageWithNewReaction = { ...targetMessage, - latest_reactions: [...targetMessage.latest_reactions, newReaction], + latest_reactions: [...(targetMessage.latest_reactions ?? []), newReaction], reaction_groups: { ...targetMessage.reaction_groups, [newReaction.type]: { @@ -1295,7 +1427,7 @@ export const Generic = () => { dispatchReactionNewEvent( chatClient, newReaction, - messageWithNewReaction, + messageWithNewReaction as MessageResponse, targetChannel.channel, ), ); @@ -1306,7 +1438,7 @@ export const Generic = () => { (m) => m.id === messageWithNewReaction.id, )[0]; - const reactionGroups = JSON.parse(messageWithReactionRow.reactionGroups); + const reactionGroups = JSON.parse(messageWithReactionRow.reactionGroups as string); expect(reactionGroups[newReaction.type]?.count).toBe(999); expect(reactionGroups[newReaction.type]?.sum_scores).toBe(999); @@ -1319,7 +1451,7 @@ export const Generic = () => { useMockedApis(chatClient, [queryChannelsApi(channels)]); renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -1336,7 +1468,7 @@ export const Generic = () => { const newDate = new Date().toISOString(); const messageWithNewReaction = { ...targetMessage, - latest_reactions: [...targetMessage.latest_reactions, newReaction], + latest_reactions: [...(targetMessage.latest_reactions ?? []), newReaction], reaction_groups: { ...targetMessage.reaction_groups, [newReaction.type]: { @@ -1352,7 +1484,7 @@ export const Generic = () => { dispatchReactionUpdatedEvent( chatClient, newReaction, - messageWithNewReaction, + messageWithNewReaction as MessageResponse, targetChannel.channel, ), ); @@ -1363,7 +1495,7 @@ export const Generic = () => { (m) => m.id === messageWithNewReaction.id, )[0]; - const reactionGroups = JSON.parse(messageWithReactionRow.reactionGroups); + const reactionGroups = JSON.parse(messageWithReactionRow.reactionGroups as string); expect(reactionGroups[newReaction.type]?.count).toBe(999); expect(reactionGroups[newReaction.type]?.sum_scores).toBe(999); @@ -1376,7 +1508,7 @@ export const Generic = () => { useMockedApis(chatClient, [queryChannelsApi(channels)]); renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -1393,7 +1525,7 @@ export const Generic = () => { const newDate = new Date().toISOString(); const messageWithNewReaction = { ...targetMessage, - latest_reactions: [...targetMessage.latest_reactions, newReaction], + latest_reactions: [...(targetMessage.latest_reactions ?? []), newReaction], reaction_groups: { ...targetMessage.reaction_groups, [newReaction.type]: { @@ -1409,7 +1541,7 @@ export const Generic = () => { dispatchReactionDeletedEvent( chatClient, newReaction, - messageWithNewReaction, + messageWithNewReaction as MessageResponse, targetChannel.channel, ), ); @@ -1420,7 +1552,7 @@ export const Generic = () => { (m) => m.id === messageWithNewReaction.id, )[0]; - const reactionGroups = JSON.parse(messageWithReactionRow.reactionGroups); + const reactionGroups = JSON.parse(messageWithReactionRow.reactionGroups as string); expect(reactionGroups[newReaction.type]?.count).toBe(999); expect(reactionGroups[newReaction.type]?.sum_scores).toBe(999); @@ -1434,7 +1566,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -1462,7 +1594,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -1490,7 +1622,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -1517,7 +1649,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; @@ -1532,7 +1664,7 @@ export const Generic = () => { expect(matchingChannelsRows.length).toBe(1); - const extraData = JSON.parse(matchingChannelsRows[0].extraData); + const extraData = JSON.parse(matchingChannelsRows[0].extraData as string); expect(extraData.name).toBe(targetChannel.channel.name); }); @@ -1543,7 +1675,7 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; const targetMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)]; @@ -1551,11 +1683,19 @@ export const Generic = () => { const readTimestamp = new Date().toISOString(); act(() => { - dispatchMessageReadEvent(chatClient, targetMember.user, targetChannel.channel, { - first_unread_message_id: '123', - last_read: readTimestamp, - last_read_message_id: '321', - }); + // `last_read` is not on `Event` (the real field is `last_read_at`), but the test fixture + // has historically passed `last_read`. Preserve the runtime payload shape exactly and + // widen the type at the call site. + dispatchMessageReadEvent( + chatClient, + targetMember.user as UserResponse, + targetChannel.channel, + { + first_unread_message_id: '123', + last_read: readTimestamp, + last_read_message_id: '321', + } as unknown as Partial, + ); }); await waitFor(async () => { @@ -1571,7 +1711,8 @@ export const Generic = () => { // expect(matchingReadRows[0].firstUnreadMessageId).toBe('123'); expect( Math.abs( - new Date(matchingReadRows[0].lastRead).getTime() - new Date(readTimestamp).getTime(), + new Date(matchingReadRows[0].lastRead as string).getTime() - + new Date(readTimestamp).getTime(), ), ).toBeLessThanOrEqual(1); }); @@ -1582,12 +1723,12 @@ export const Generic = () => { renderComponent(); act(() => dispatchConnectionChangedEvent(chatClient)); - await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true)); + await act(async () => await getSyncManager(chatClient).invokeSyncStatusListeners(true)); await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy()); const targetChannel = channels[getRandomInt(0, channels.length - 1)]; const targetMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)]; - chatClient.userID = targetMember.user.id; + chatClient.userID = targetMember.user!.id; chatClient.user = targetMember.user; const readTimestamp = new Date().toISOString(); @@ -1596,12 +1737,13 @@ export const Generic = () => { dispatchNotificationMarkUnread( chatClient, targetChannel.channel, + // `last_read` is not on `Event`; see note above. { first_unread_message_id: '123', last_read: readTimestamp, last_read_message_id: '321', unread_messages: 5, - }, + } as unknown as Partial, targetMember.user, ); }); @@ -1619,7 +1761,8 @@ export const Generic = () => { // expect(matchingReadRows[0].firstUnreadMessageId).toBe('123'); expect( Math.abs( - new Date(matchingReadRows[0].lastRead).getTime() - new Date(readTimestamp).getTime(), + new Date(matchingReadRows[0].lastRead as string).getTime() - + new Date(readTimestamp).getTime(), ), ).toBeLessThanOrEqual(1); }); diff --git a/package/src/__tests__/offline-support/optimistic-update.js b/package/src/__tests__/offline-support/optimistic-update.tsx similarity index 79% rename from package/src/__tests__/offline-support/optimistic-update.js rename to package/src/__tests__/offline-support/optimistic-update.tsx index 04a74e2b67..aa12e875be 100644 --- a/package/src/__tests__/offline-support/optimistic-update.js +++ b/package/src/__tests__/offline-support/optimistic-update.tsx @@ -3,9 +3,18 @@ import { View } from 'react-native'; import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native'; +import type { + Channel as ChannelLLC, + ChannelAPIResponse, + ChannelMemberResponse, + LocalMessage, + ReactionResponse, + StreamChat, + UserResponse, +} from 'stream-chat'; import { v4 as uuidv4 } from 'uuid'; -import { Channel } from '../../components/Channel/Channel'; +import { Channel as ChannelRaw } from '../../components/Channel/Channel'; import { Chat } from '../../components/Chat/Chat'; import { MessageInputContext, MessagesContext } from '../../contexts'; import { deleteMessageApi } from '../../mock-builders/api/deleteMessage'; @@ -28,27 +37,64 @@ import { SqliteClient } from '../../store/SqliteClient'; import { BetterSqlite } from '../../test-utils/BetterSqlite'; import { MessageStatusTypes } from '../../utils/utils'; +// `initialValue` is not part of Channel's props today, but these legacy tests pass it to +// mimic a pre-populated input. Keep the runtime behavior unchanged and widen the prop type +// at the component boundary so TS stops complaining. +const Channel = ChannelRaw as unknown as React.ComponentType< + React.ComponentProps & { initialValue?: string } +>; + +// Tests reach into internal / private StreamChat + LLC Channel APIs (sync manager, legacy +// `wsConnection`, `_deleteMessage`, `_sendReaction`, `_sendMessage`). Helpers narrow at the +// call sites without sprinkling `any` everywhere. +type TestPendingTask = { id: number; type: string; payload: unknown }; +type TestSyncManager = { + invokeSyncStatusListeners: (recovered: boolean) => Promise; +}; +// Intentionally not intersected with the real `StreamChat['offlineDb']` — the +// real `syncManager` member is a class with `invokeSyncStatusListeners` marked +// private, which conflicts with the test-only accessor. Kept as a standalone +// test shim shape. +type TestOfflineDb = { + addPendingTask: (task: { + channelId: string | undefined; + channelType: string; + messageId: string; + payload: unknown; + type: string; + }) => Promise; + deletePendingTask: (params: { id: number }) => Promise; + getPendingTasks: () => Promise; + syncManager: TestSyncManager; +}; +const getOfflineDb = (client: StreamChat): TestOfflineDb => + client.offlineDb as unknown as TestOfflineDb; + test('Workaround to allow exporting tests', () => expect(true).toBe(true)); export const OptimisticUpdates = () => { describe('Optimistic Updates', () => { - let chatClient; + let chatClient: StreamChat; - const getRandomInt = (lower, upper) => Math.floor(lower + Math.random() * (upper - lower + 1)); + const getRandomInt = (lower: number, upper: number) => + Math.floor(lower + Math.random() * (upper - lower + 1)); const createChannel = () => { const allUsers = Array(20).fill(1).map(generateUser); - const allMessages = []; - const allMembers = []; - const allReactions = []; - const allReads = []; + const allMessages: LocalMessage[] = []; + const allMembers: ChannelMemberResponse[] = []; + const allReactions: ReactionResponse[] = []; + const allReads: Array<{ + last_read: Date; + unread_messages: number; + user: ReturnType | undefined; + }> = []; const id = uuidv4(); const cid = `messaging:${id}`; const begin = getRandomInt(0, allUsers.length - 2); // begin shouldn't be the end of users.length const end = getRandomInt(begin + 1, allUsers.length - 1); const usersForMembers = allUsers.slice(begin, end); - const members = usersForMembers.map((user) => + const members = usersForMembers.map((user: UserResponse) => generateMember({ - cid, user, }), ); @@ -62,7 +108,7 @@ export const OptimisticUpdates = () => { const end = getRandomInt(begin + 1, usersForMembers.length - 1); const usersForReactions = usersForMembers.slice(begin, end); - const reactions = usersForReactions.map((user) => + const reactions = usersForReactions.map((user: UserResponse) => generateReaction({ message_id: id, user, @@ -74,11 +120,11 @@ export const OptimisticUpdates = () => { id, latest_reactions: reactions, user, - userId: user.id, + user_id: user.id, }); }); - const reads = members.map((member) => ({ + const reads = members.map((member: ChannelMemberResponse) => ({ last_read: new Date(new Date().setDate(new Date().getDate() - getRandomInt(0, 20))), unread_messages: getRandomInt(0, messages.length), user: member.user, @@ -88,12 +134,17 @@ export const OptimisticUpdates = () => { allMembers.push(...members); allReads.push(...reads); + // `cid` is not part of `GeneratedChannelResponseCustomValues`, but tests rely on reading it + // back as a top-level field on the generated channel response — keep the runtime shape and + // widen the input type. return generateChannelResponse({ cid, id, members, messages, - }); + } as unknown as Parameters[0]) as ReturnType< + typeof generateChannelResponse + > & { cid: string; id: string }; }; beforeEach(async () => { @@ -112,10 +163,13 @@ export const OptimisticUpdates = () => { await SqliteClient.initializeDatabase(); await BetterSqlite.openDB(); await upsertChannels({ - channels: [channelResponse], + channels: [channelResponse] as unknown as ChannelAPIResponse[], isLatestMessagesSet: true, }); - chatClient.wsConnection = { isHealthy: true, onlineStatusChanged: jest.fn() }; + chatClient.wsConnection = { + isHealthy: true, + onlineStatusChanged: jest.fn(), + } as unknown as StreamChat['wsConnection']; }); afterEach(() => { @@ -125,11 +179,19 @@ export const OptimisticUpdates = () => { jest.clearAllMocks(); }); - let channel; + let channel: ChannelLLC; // This component is used for performing effects in a component that consumes ChannelContext, // i.e. making use of the callbacks & values provided by the Channel component. // the effect is called every time channelContext changes - const CallbackEffectWithContext = ({ callback, children, context }) => { + const CallbackEffectWithContext = ({ + callback, + children, + context, + }: { + callback: (ctx: T) => Promise | void; + children: React.ReactNode; + context: React.Context; + }) => { const ctx = useContext(context); const [ready, setReady] = useState(false); useEffect(() => { @@ -145,7 +207,7 @@ export const OptimisticUpdates = () => { return null; } - return children; + return <>{children}; }; describe('delete message', () => { @@ -175,7 +237,7 @@ export const OptimisticUpdates = () => { await waitFor(async () => { const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks'); const pendingTaskType = pendingTasksRows?.[0]?.type; - const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}'); + const pendingTaskPayload = JSON.parse((pendingTasksRows?.[0]?.payload as string) || '{}'); expect(pendingTaskType).toBe('delete-message'); expect(pendingTaskPayload[0]).toBe(message.id); }); @@ -235,7 +297,7 @@ export const OptimisticUpdates = () => { await waitFor(async () => { const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks'); const pendingTaskType = pendingTasksRows?.[0]?.type; - const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}'); + const pendingTaskPayload = JSON.parse((pendingTasksRows?.[0]?.payload as string) || '{}'); expect(pendingTaskType).toBe('send-reaction'); expect(pendingTaskPayload[0]).toBe(targetMessage.id); }); @@ -276,7 +338,7 @@ export const OptimisticUpdates = () => { localMessage: newMessage, message: newMessage, options: {}, - }); + } as unknown as Awaited>); render( @@ -301,7 +363,7 @@ export const OptimisticUpdates = () => { await waitFor(async () => { const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks'); const pendingTaskType = pendingTasksRows?.[0]?.type; - const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}'); + const pendingTaskPayload = JSON.parse((pendingTasksRows?.[0]?.payload as string) || '{}'); expect(pendingTaskType).toBe('send-message'); expect(pendingTaskPayload[0].id).toEqual(newMessage.id); expect(pendingTaskPayload[0].text).toEqual(newMessage.text); @@ -319,7 +381,7 @@ export const OptimisticUpdates = () => { { useMockedApis(chatClient, [sendMessageApi(newMessage)]); - await sendMessage({ customMessageData: newMessage }); + await sendMessage(); }} context={MessageInputContext} > @@ -365,7 +427,7 @@ export const OptimisticUpdates = () => { await waitFor(async () => { const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks'); const pendingTaskType = pendingTasksRows?.[0]?.type; - const pendingTaskPayload = JSON.parse(pendingTasksRows?.[0]?.payload || '{}'); + const pendingTaskPayload = JSON.parse((pendingTasksRows?.[0]?.payload as string) || '{}'); expect(pendingTaskType).toBe('delete-reaction'); expect(pendingTaskPayload[0]).toBe(targetMessage.id); }); @@ -408,22 +470,24 @@ export const OptimisticUpdates = () => { { - await chatClient.offlineDb.addPendingTask({ - channelId: channel.id, - channelType: channel.type, - messageId: message.id, - payload: [localMessage, undefined, options], - type: 'update-message', - }); - return { - message: { - ...localMessage, - message_text_updated_at: new Date(), - updated_at: new Date(), - }, - }; - }} + doUpdateMessageRequest={ + (async (_channelId: string, localMessage: LocalMessage, options: unknown) => { + await getOfflineDb(chatClient).addPendingTask({ + channelId: channel.id, + channelType: channel.type, + messageId: message.id, + payload: [localMessage, undefined, options], + type: 'update-message', + }); + return { + message: { + ...localMessage, + message_text_updated_at: new Date(), + updated_at: new Date(), + }, + }; + }) as unknown as React.ComponentProps['doUpdateMessageRequest'] + } > { @@ -452,12 +516,12 @@ export const OptimisticUpdates = () => { const dbMessages = await BetterSqlite.selectFromTable('messages'); const dbMessage = dbMessages.find((row) => row.id === message.id); - expect(updatedMessage.text).toBe(editedText); - expect(updatedMessage.message_text_updated_at).toBeTruthy(); + expect(updatedMessage!.text).toBe(editedText); + expect(updatedMessage!.message_text_updated_at).toBeTruthy(); expect(pendingTasksRows).toHaveLength(1); expect(pendingTasksRows[0].type).toBe('update-message'); - expect(dbMessage.text).toBe(editedText); - expect(dbMessage.messageTextUpdatedAt).toBeTruthy(); + expect(dbMessage!.text).toBe(editedText); + expect(dbMessage!.messageTextUpdatedAt).toBeTruthy(); }); }); @@ -504,9 +568,9 @@ export const OptimisticUpdates = () => { const dbMessages = await BetterSqlite.selectFromTable('messages'); const dbMessage = dbMessages.find((row) => row.id === message.id); - expect(updatedMessage.text).toBe(editedText); + expect(updatedMessage!.text).toBe(editedText); expect(pendingTasksRows).toHaveLength(0); - expect(dbMessage.text).toBe(editedText); + expect(dbMessage!.text).toBe(editedText); }); }); @@ -518,16 +582,18 @@ export const OptimisticUpdates = () => { { - const optimisticMessage = channel.state.findMessage(message.id); - optimisticStateSpy(optimisticMessage); - - return { - message: { - ...optimisticMessage, - }, - }; - }} + doUpdateMessageRequest={ + (() => { + const optimisticMessage = channel.state.findMessage(message.id); + optimisticStateSpy(optimisticMessage); + + return { + message: { + ...optimisticMessage, + }, + }; + }) as unknown as React.ComponentProps['doUpdateMessageRequest'] + } > { @@ -611,12 +677,12 @@ export const OptimisticUpdates = () => { const pendingTasksRows = await BetterSqlite.selectFromTable('pendingTasks'); const dbMessages = await BetterSqlite.selectFromTable('messages'); const dbMessage = dbMessages.find((row) => row.id === message.id); - const storedAttachments = JSON.parse(dbMessage.attachments); + const storedAttachments = JSON.parse(dbMessage!.attachments as string); - expect(updatedMessage.text).toBe(editedText); - expect(updatedMessage.attachments[0].asset_url).toBe(localUri); + expect(updatedMessage!.text).toBe(editedText); + expect(updatedMessage!.attachments![0].asset_url).toBe(localUri); expect(pendingTasksRows).toHaveLength(0); - expect(dbMessage.text).toBe(editedText); + expect(dbMessage!.text).toBe(editedText); expect(storedAttachments[0].asset_url).toBe(localUri); }); }); @@ -681,7 +747,7 @@ export const OptimisticUpdates = () => { localMessage: newMessage, message: newMessage, options: {}, - }); + } as unknown as Awaited>); // initialValue is needed as a prop to trick the message input ctx into thinking // we are sending a message. @@ -726,20 +792,20 @@ export const OptimisticUpdates = () => { status: MessageStatusTypes.SENDING, text: 'offline resend', user: chatClient.user, - userId: chatClient.userID, + user_id: chatClient.userID, }); const serverMessage = generateMessage({ id: localMessage.id, text: localMessage.text, user: chatClient.user, - userId: chatClient.userID, + user_id: chatClient.userID, }); - jest.spyOn(channel.messageComposer, 'compose').mockResolvedValue({ - localMessage, - message: localMessage, - options: {}, - }); + jest + .spyOn(channel.messageComposer, 'compose') + .mockResolvedValue({ localMessage, message: localMessage } as unknown as Awaited< + ReturnType + >); render( @@ -758,23 +824,25 @@ export const OptimisticUpdates = () => { ); await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy()); - let pendingTask; + let pendingTask: TestPendingTask | undefined; await waitFor(async () => { - const pendingTasks = await chatClient.offlineDb.getPendingTasks(); + const pendingTasks = await getOfflineDb(chatClient).getPendingTasks(); expect(pendingTasks).toHaveLength(1); pendingTask = pendingTasks[0]; }); expect(channel.state.messages.some((message) => message.id === localMessage.id)).toBe(true); - jest.spyOn(channel, 'watch').mockResolvedValue({}); + jest + .spyOn(channel, 'watch') + .mockResolvedValue({} as Awaited>); channel.state.removeMessage(localMessage); channel.state.addMessageSorted(serverMessage, true); - await chatClient.offlineDb.deletePendingTask({ id: pendingTask.id }); + await getOfflineDb(chatClient).deletePendingTask({ id: pendingTask!.id }); await act(async () => { - await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true); + await getOfflineDb(chatClient).syncManager.invokeSyncStatusListeners(true); }); await waitFor(() => { @@ -793,14 +861,14 @@ export const OptimisticUpdates = () => { status: MessageStatusTypes.SENDING, text: 'offline resend unresolved', user: chatClient.user, - userId: chatClient.userID, + user_id: chatClient.userID, }); - jest.spyOn(channel.messageComposer, 'compose').mockResolvedValue({ - localMessage, - message: localMessage, - options: {}, - }); + jest + .spyOn(channel.messageComposer, 'compose') + .mockResolvedValue({ localMessage, message: localMessage } as unknown as Awaited< + ReturnType + >); render( @@ -819,20 +887,22 @@ export const OptimisticUpdates = () => { ); await waitFor(() => expect(screen.getByTestId('children')).toBeTruthy()); - let pendingTask; + let pendingTask: TestPendingTask | undefined; await waitFor(async () => { - const pendingTasks = await chatClient.offlineDb.getPendingTasks(); + const pendingTasks = await getOfflineDb(chatClient).getPendingTasks(); expect(pendingTasks).toHaveLength(1); pendingTask = pendingTasks[0]; }); - jest.spyOn(channel, 'watch').mockResolvedValue({}); + jest + .spyOn(channel, 'watch') + .mockResolvedValue({} as Awaited>); channel.state.removeMessage(localMessage); - await chatClient.offlineDb.deletePendingTask({ id: pendingTask.id }); + await getOfflineDb(chatClient).deletePendingTask({ id: pendingTask!.id }); await act(async () => { - await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true); + await getOfflineDb(chatClient).syncManager.invokeSyncStatusListeners(true); }); await waitFor(() => { diff --git a/package/src/components/Attachment/__tests__/Attachment.test.js b/package/src/components/Attachment/__tests__/Attachment.test.tsx similarity index 83% rename from package/src/components/Attachment/__tests__/Attachment.test.js rename to package/src/components/Attachment/__tests__/Attachment.test.tsx index 8e1d28ff0f..2f68ffa95c 100644 --- a/package/src/components/Attachment/__tests__/Attachment.test.js +++ b/package/src/components/Attachment/__tests__/Attachment.test.tsx @@ -1,9 +1,11 @@ -import React from 'react'; +import React, { ComponentProps } from 'react'; import { render, waitFor } from '@testing-library/react-native'; import { v4 as uuidv4 } from 'uuid'; +import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext'; import { MessageProvider } from '../../../contexts/messageContext/MessageContext'; +import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext'; import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext'; import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext'; import { @@ -24,18 +26,20 @@ jest.mock('../../../native.ts', () => ({ isSoundPackageAvailable: jest.fn(() => false), })); -const getAttachmentComponent = (props) => { +const getAttachmentComponent = (props: ComponentProps) => { const message = generateMessage(); return ( - + diff --git a/package/src/components/Attachment/__tests__/Gallery.test.js b/package/src/components/Attachment/__tests__/Gallery.test.tsx similarity index 96% rename from package/src/components/Attachment/__tests__/Gallery.test.js rename to package/src/components/Attachment/__tests__/Gallery.test.tsx index baed13ea4b..a71fef54f6 100644 --- a/package/src/components/Attachment/__tests__/Gallery.test.js +++ b/package/src/components/Attachment/__tests__/Gallery.test.tsx @@ -1,6 +1,7 @@ -import React from 'react'; +import React, { ComponentProps } from 'react'; import { fireEvent, render, screen, waitFor } from '@testing-library/react-native'; +import type { Attachment, ChannelResponse } from 'stream-chat'; import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider'; @@ -31,7 +32,10 @@ describe('Gallery', () => { const user1 = generateUser(); - const getComponent = async (attachments = [], channelProps = {}) => { + const getComponent = async ( + attachments: Attachment[] = [], + channelProps: Partial> = {}, + ) => { const chatClient = await getTestClientWithUser({ id: 'testID' }); const mockedChannel = generateChannelResponse({ @@ -39,7 +43,10 @@ describe('Gallery', () => { messages: [generateMessage({ attachments, user: user1 })], }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel( + 'messaging', + (mockedChannel.channel as unknown as ChannelResponse).id, + ); await channel.watch(); return ( diff --git a/package/src/components/Attachment/__tests__/Giphy.test.js b/package/src/components/Attachment/__tests__/Giphy.test.tsx similarity index 84% rename from package/src/components/Attachment/__tests__/Giphy.test.js rename to package/src/components/Attachment/__tests__/Giphy.test.tsx index a9c24ed483..fc4b14736b 100644 --- a/package/src/components/Attachment/__tests__/Giphy.test.js +++ b/package/src/components/Attachment/__tests__/Giphy.test.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { ComponentProps } from 'react'; +import type { Image, ImageStyle, StyleProp } from 'react-native'; import { act, @@ -9,8 +10,11 @@ import { userEvent, waitFor, } from '@testing-library/react-native'; +import type { Channel as ChannelType, ChannelResponse, StreamChat } from 'stream-chat'; +import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext'; import { MessageProvider } from '../../../contexts/messageContext/MessageContext'; +import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext'; import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext'; import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider'; @@ -38,21 +42,34 @@ const streami18n = new Streami18n({ describe('Giphy', () => { const lightTheme = mergeThemes({ scheme: 'light' }); - const getAttachmentComponent = (props, messageContextValue = {}) => { + const getAttachmentComponent = ( + props: ComponentProps, + messageContextValue: Partial = {}, + ) => { const message = generateMessage(); return ( - - + + ); }; - let chatClient; - let channel; - let attachment; + let chatClient: StreamChat; + let channel: ChannelType; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + let attachment: any; const actions = [ { name: 'image_action', text: 'Send', value: 'send' }, @@ -91,7 +108,10 @@ describe('Giphy', () => { chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - channel = chatClient.channel('messaging', mockedChannel.id); + channel = chatClient.channel( + 'messaging', + (mockedChannel.channel as unknown as ChannelResponse).id, + ); await channel.watch(); }; @@ -176,14 +196,17 @@ describe('Giphy', () => { attachment.giphy = giphy; render(getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' })); await waitFor(() => { - const checkImageProps = (imageProps, specificSizedGiphyData) => { - let imageStyle = imageProps.style; + const checkImageProps = ( + imageProps: ComponentProps, + specificSizedGiphyData: { height: string; url: string; width: string }, + ) => { + let imageStyle = imageProps.style as StyleProp; if (Array.isArray(imageStyle)) { imageStyle = Object.assign({}, ...imageStyle); } - expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height)); - expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width)); - expect(imageProps.source.uri).toBe(specificSizedGiphyData.url); + expect((imageStyle as ImageStyle).height).toBe(parseFloat(specificSizedGiphyData.height)); + expect((imageStyle as ImageStyle).width).toBe(parseFloat(specificSizedGiphyData.width)); + expect((imageProps.source as { uri: string }).uri).toBe(specificSizedGiphyData.url); }; checkImageProps( screen.getByLabelText('Giphy Attachment Image').props, @@ -192,14 +215,17 @@ describe('Giphy', () => { }); render(getAttachmentComponent({ attachment, giphyVersion: 'original' })); await waitFor(() => { - const checkImageProps = (imageProps, specificSizedGiphyData) => { - let imageStyle = imageProps.style; + const checkImageProps = ( + imageProps: ComponentProps, + specificSizedGiphyData: { height: string; url: string; width: string }, + ) => { + let imageStyle = imageProps.style as StyleProp; if (Array.isArray(imageStyle)) { imageStyle = Object.assign({}, ...imageStyle); } - expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height)); - expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width)); - expect(imageProps.source.uri).toBe(specificSizedGiphyData.url); + expect((imageStyle as ImageStyle).height).toBe(parseFloat(specificSizedGiphyData.height)); + expect((imageStyle as ImageStyle).width).toBe(parseFloat(specificSizedGiphyData.width)); + expect((imageProps.source as { uri: string }).uri).toBe(specificSizedGiphyData.url); }; checkImageProps( screen.getByLabelText('Giphy Attachment Image').props, @@ -321,7 +347,10 @@ describe('Giphy', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel( + 'messaging', + (mockedChannel.channel as unknown as ChannelResponse).id, + ); await channel.watch(); render( diff --git a/package/src/components/Attachment/__tests__/buildGallery.test.js b/package/src/components/Attachment/__tests__/buildGallery.test.ts similarity index 96% rename from package/src/components/Attachment/__tests__/buildGallery.test.js rename to package/src/components/Attachment/__tests__/buildGallery.test.ts index eda9ee915c..3e81ea8bda 100644 --- a/package/src/components/Attachment/__tests__/buildGallery.test.js +++ b/package/src/components/Attachment/__tests__/buildGallery.test.ts @@ -1,3 +1,5 @@ +import type { Attachment } from 'stream-chat'; + import { generateImageAttachment } from '../../../mock-builders/generator/attachment'; import { buildGallery } from '../utils/buildGallery/buildGallery'; @@ -20,7 +22,7 @@ describe('buildGallery', () => { ]; imageSizeTestCases.forEach((size) => { - const attachments = []; + const attachments: Attachment[] = []; for (let numOfImages = 0; numOfImages < 4; numOfImages++) { const a1 = generateImageAttachment({ ...size, @@ -77,7 +79,7 @@ describe('buildGallery', () => { }); it('gallery size should default to gridHeight and gridWidth if original image size is unavailable', () => { - const attachments = []; + const attachments: Attachment[] = []; for (let numOfImages = 0; numOfImages < 4; numOfImages++) { // During each iteration, size of attachments goes up. attachments.push(generateImageAttachment()); diff --git a/package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.js b/package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.tsx similarity index 82% rename from package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.js rename to package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.tsx index 945581876e..8ca4144379 100644 --- a/package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.js +++ b/package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.tsx @@ -1,18 +1,28 @@ import React from 'react'; import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { OverlayProvider } from '../../../contexts'; import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels'; +import type { ChannelProps } from '../../Channel/Channel'; import { Channel } from '../../Channel/Channel'; import { Chat } from '../../Chat/Chat'; import { AutoCompleteInput } from '../AutoCompleteInput'; -const renderComponent = ({ channelProps, client, props }) => { +const renderComponent = ({ + channelProps, + client, + props, +}: { + channelProps: Partial; + client: StreamChat; + props: React.ComponentProps; +}) => { return render( - + @@ -21,8 +31,8 @@ const renderComponent = ({ channelProps, client, props }) => { }; describe('AutoCompleteInput', () => { - let client; - let channel; + let client: StreamChat; + let channel: ChannelType; beforeEach(async () => { const { client: chatClient, channels } = await initiateClientWithChannels(); @@ -43,7 +53,7 @@ describe('AutoCompleteInput', () => { const { queryByTestId } = screen; - const input = queryByTestId('auto-complete-text-input'); + const input = queryByTestId('auto-complete-text-input')!; await waitFor(() => { expect(input).toBeTruthy(); @@ -60,7 +70,7 @@ describe('AutoCompleteInput', () => { const { queryByTestId } = screen; - const input = queryByTestId('auto-complete-text-input'); + const input = queryByTestId('auto-complete-text-input')!; await waitFor(() => { expect(input.props.editable).toBeFalsy(); @@ -70,7 +80,7 @@ describe('AutoCompleteInput', () => { it('should have the maxLength same as the one on the config of channel', async () => { jest.spyOn(channel, 'getConfig').mockReturnValue({ max_message_length: 10, - }); + } as unknown as ReturnType); const channelProps = { channel }; const props = {}; @@ -78,7 +88,7 @@ describe('AutoCompleteInput', () => { const { queryByTestId } = screen; - const input = queryByTestId('auto-complete-text-input'); + const input = queryByTestId('auto-complete-text-input')!; await waitFor(() => { expect(input.props.maxLength).toBe(10); @@ -97,7 +107,7 @@ describe('AutoCompleteInput', () => { const { queryByTestId } = screen; - const input = queryByTestId('auto-complete-text-input'); + const input = queryByTestId('auto-complete-text-input')!; act(() => { fireEvent.changeText(input, 'hello'); @@ -125,7 +135,7 @@ describe('AutoCompleteInput', () => { const { queryByTestId } = screen; - const input = queryByTestId('auto-complete-text-input'); + const input = queryByTestId('auto-complete-text-input')!; act(() => { fireEvent(input, 'selectionChange', { @@ -155,7 +165,7 @@ describe('AutoCompleteInput', () => { const { queryByTestId } = screen; - const input = queryByTestId('auto-complete-text-input'); + const input = queryByTestId('auto-complete-text-input')!; await waitFor(() => { expect(input.props.placeholder).toBe(data.result); diff --git a/package/src/components/Channel/__tests__/Channel.test.js b/package/src/components/Channel/__tests__/Channel.test.tsx similarity index 75% rename from package/src/components/Channel/__tests__/Channel.test.js rename to package/src/components/Channel/__tests__/Channel.test.tsx index 80559623f5..dedad14568 100644 --- a/package/src/components/Channel/__tests__/Channel.test.js +++ b/package/src/components/Channel/__tests__/Channel.test.tsx @@ -1,16 +1,20 @@ -import React, { useContext, useEffect } from 'react'; +import React, { type ComponentProps, useContext, useEffect } from 'react'; import { View } from 'react-native'; import { act, cleanup, render, renderHook, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat as StreamChatType } from 'stream-chat'; import { StreamChat } from 'stream-chat'; +import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext'; import { ChannelContext, ChannelProvider } from '../../../contexts/channelContext/ChannelContext'; import { ChannelsStateProvider } from '../../../contexts/channelsStateContext/ChannelsStateContext'; +import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext'; import { MessagesContext, MessagesProvider, } from '../../../contexts/messagesContext/MessagesContext'; +import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext'; import { ThreadContext, ThreadProvider } from '../../../contexts/threadContext/ThreadContext'; import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel'; @@ -34,7 +38,13 @@ import * as MessageListPaginationHooks from '../hooks/useMessageListPagination'; // This component is used for performing effects in a component that consumes ChannelContext, // i.e. making use of the callbacks & values provided by the Channel component. // the effect is called every time channelContext changes -const CallbackEffectWithContext = ({ callback, context }) => { +const CallbackEffectWithContext = ({ + callback, + context, +}: { + callback: (ctx: unknown) => void; + context: React.Context; +}) => { const ctx = useContext(context); useEffect(() => { callback(ctx); @@ -43,7 +53,13 @@ const CallbackEffectWithContext = ({ callback, context }) => { return ; }; -const ContextConsumer = ({ context, fn }) => { +const ContextConsumer = ({ + context, + fn, +}: { + context: React.Context; + fn: (ctx: unknown) => void; +}) => { fn(useContext(context)); return ; }; @@ -51,17 +67,26 @@ const ContextConsumer = ({ context, fn }) => { const channelType = 'messaging'; const channelId = 'test-channel'; const channelCid = `${channelType}:${channelId}`; -let chatClient; -let channel; +let chatClient: StreamChatType; +let channel: ChannelType; const user = generateUser({ id: 'id', name: 'name' }); const messages = [generateMessage({ cid: channelCid, user })]; -const renderComponent = (props = {}, callback = () => {}, context = ChannelContext) => +type RenderComponentProps = Partial, 'channel'>> & { + channel?: unknown; + children?: React.ReactNode; +}; + +const renderComponent = ( + props: RenderComponentProps = {}, + callback: (ctx: unknown) => void = () => {}, + context: React.Context = ChannelContext as React.Context, +) => render( - + )}> {props.children} @@ -73,7 +98,7 @@ describe('Channel', () => { beforeEach(async () => { const members = [generateMember({ user })]; const mockedChannel = generateChannelResponse({ - cid: channelCid, + channel: { cid: channelCid }, id: channelId, members, messages, @@ -81,8 +106,8 @@ describe('Channel', () => { }); chatClient = await getTestClientWithUser(user); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - channel = chatClient.channel('messaging', mockedChannel.id); - channel.cid = mockedChannel.channel.cid; + channel = chatClient.channel('messaging', mockedChannel.channel.id); + channel.cid = mockedChannel.channel.cid as string; const getConfigSpy = jest.fn(); channel.getConfig = getConfigSpy; }); @@ -158,14 +183,18 @@ describe('Channel', () => { // and then calls hasThread with the thread id if it was set. const { rerender } = renderComponent( { channel }, - ({ openThread, thread }) => { + (ctx) => { + const { openThread, thread } = ctx as { + openThread: (m: unknown) => void; + thread: { id: string } | null; + }; if (!thread) { openThread(threadMessage); } else { hasThread(thread.id); } }, - ThreadContext, + ThreadContext as React.Context, ); rerender( @@ -173,14 +202,18 @@ describe('Channel', () => { { + callback={(ctx) => { + const { openThread, thread } = ctx as { + openThread: (m: unknown) => void; + thread: { id: string } | null; + }; if (!thread) { openThread(threadMessage); } else { hasThread(thread.id); } }} - context={ThreadContext} + context={ThreadContext as React.Context} /> @@ -189,7 +222,7 @@ describe('Channel', () => { await waitFor(() => expect(hasThread).toHaveBeenCalledWith(threadMessage.id)); }); - const queryChannelWithNewMessages = (newMessages) => + const queryChannelWithNewMessages = (newMessages: ReturnType[]) => // generate new channel mock from existing channel with new messages added getOrCreateChannelApi( generateChannelResponse({ @@ -212,7 +245,7 @@ describe('Channel', () => { () => { useMockedApis(chatClient, [queryChannelWithNewMessages(newMessages)]); }, - MessagesContext, + MessagesContext as React.Context, ); await waitFor(() => expect(channelQuerySpy).toHaveBeenCalled()); @@ -221,7 +254,7 @@ describe('Channel', () => { describe('ChannelContext', () => { it('renders children without crashing', async () => { const { getByTestId } = render( - + , ); @@ -230,7 +263,7 @@ describe('Channel', () => { }); it('exposes the channel context', async () => { - let context; + let context: ChannelContextValue | undefined; const mockContext = { channel, @@ -240,11 +273,11 @@ describe('Channel', () => { }; render( - + } fn={(ctx) => { - context = ctx; + context = ctx as ChannelContextValue; }} /> , @@ -252,10 +285,11 @@ describe('Channel', () => { await waitFor(() => { expect(context).toBeInstanceOf(Object); - expect(context.channel).toBeInstanceOf(Object); - expect(context.client).toBeInstanceOf(StreamChat); - expect(context.markRead).toBeInstanceOf(Function); - expect(context.watcherCount).toBe(5); + const ctx = context as unknown as typeof mockContext; + expect(ctx.channel).toBeInstanceOf(Object); + expect(ctx.client).toBeInstanceOf(StreamChat); + expect(ctx.markRead).toBeInstanceOf(Function); + expect(ctx.watcherCount).toBe(5); }); }); }); @@ -263,7 +297,7 @@ describe('Channel', () => { describe('MessagesContext', () => { it('renders children without crashing', async () => { const { getByTestId } = render( - + , ); @@ -272,7 +306,7 @@ describe('Channel', () => { }); it('exposes the messages context', async () => { - let context; + let context: MessagesContextValue | undefined; const mockContext = { Attachment, @@ -282,11 +316,11 @@ describe('Channel', () => { }; render( - + } fn={(ctx) => { - context = ctx; + context = ctx as MessagesContextValue; }} /> , @@ -294,10 +328,11 @@ describe('Channel', () => { await waitFor(() => { expect(context).toBeInstanceOf(Object); - expect(context.Attachment).toBeInstanceOf(Function); - expect(context.editing).toBe(false); - expect(context.messages).toBeInstanceOf(Array); - expect(context.sendMessage).toBeInstanceOf(Function); + const ctx = context as unknown as typeof mockContext; + expect(ctx.Attachment).toBeInstanceOf(Function); + expect(ctx.editing).toBe(false); + expect(ctx.messages).toBeInstanceOf(Array); + expect(ctx.sendMessage).toBeInstanceOf(Function); }); }); }); @@ -305,7 +340,7 @@ describe('Channel', () => { describe('ThreadContext', () => { it('renders children without crashing', async () => { const { getByTestId } = render( - + , ); @@ -314,7 +349,7 @@ describe('Channel', () => { }); it('exposes the thread context', async () => { - let context; + let context: ThreadContextValue | undefined; const mockContext = { openThread: () => {}, @@ -324,11 +359,11 @@ describe('Channel', () => { }; render( - + } fn={(ctx) => { - context = ctx; + context = ctx as ThreadContextValue; }} /> , @@ -336,22 +371,22 @@ describe('Channel', () => { await waitFor(() => { expect(context).toBeInstanceOf(Object); - expect(context.openThread).toBeInstanceOf(Function); - expect(context.thread).toBeInstanceOf(Object); - expect(context.threadHasMore).toBe(true); - expect(context.threadLoadingMore).toBe(false); + expect(context!.openThread).toBeInstanceOf(Function); + expect(context!.thread).toBeInstanceOf(Object); + expect(context!.threadHasMore).toBe(true); + expect(context!.threadLoadingMore).toBe(false); }); }); }); }); describe('Channel initial load useEffect', () => { - let chatClient; + let chatClient: StreamChatType; - const renderComponent = (props = {}) => + const renderComponent = (props: RenderComponentProps = {}) => render( - {props.children} + )}>{props.children} , ); @@ -365,13 +400,13 @@ describe('Channel initial load useEffect', () => { }); it('should still call channel.watch if we are online and DB channels are loaded', async () => { - const messages = Array.from({ length: 10 }, (_, i) => generateMessage({ id: i })); + const messages = Array.from({ length: 10 }, (_, i) => generateMessage({ id: String(i) })); const mockedChannel = generateChannelResponse({ messages, }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); channel.offlineMode = true; channel.state = { @@ -379,7 +414,7 @@ describe('Channel initial load useEffect', () => { messagePagination: { hasPrev: true, }, - }; + } as unknown as typeof channel.state; const watchSpy = jest.fn(); channel.watch = watchSpy; @@ -389,29 +424,29 @@ describe('Channel initial load useEffect', () => { }); it("should call channel.watch if channel is initialized and it's not in offline mode", async () => { - const messages = Array.from({ length: 10 }, (_, i) => generateMessage({ id: i })); + const messages = Array.from({ length: 10 }, (_, i) => generateMessage({ id: String(i) })); const mockedChannel = generateChannelResponse({ messages, }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); channel.state = { ...channelInitialState, members: Object.fromEntries( - Array.from({ length: 10 }, (_, i) => [i, generateMember({ id: i })]), + Array.from({ length: 10 }, (_, i) => [i, generateMember({ user_id: String(i) })]), ), messagePagination: { hasPrev: true, }, - messages: Array.from({ length: 10 }, (_, i) => generateMessage({ id: i })), - }; + messages: Array.from({ length: 10 }, (_, i) => generateMessage({ id: String(i) })), + } as unknown as typeof channel.state; const watchSpy = jest.fn(); channel.offlineMode = false; - channel.initialied = false; + (channel as unknown as { initialied: boolean }).initialied = false; channel.watch = watchSpy; renderComponent({ channel }); @@ -420,11 +455,11 @@ describe('Channel initial load useEffect', () => { const { result: channelState } = renderHook(() => useChannelDataState(channel)); await waitFor(() => expect(watchSpy).toHaveBeenCalled()); - await waitFor(() => expect(channelMessageState.current.state.messages).toHaveLength(10)); - await waitFor(() => expect(Object.keys(channelState.current.state.members)).toHaveLength(10)); + await waitFor(() => expect(channelMessageState.current.state.messages!).toHaveLength(10)); + await waitFor(() => expect(Object.keys(channelState.current.state.members!)).toHaveLength(10)); }); - function getElementsAround(array, key, id) { + function getElementsAround(array: T[], key: keyof T, id: unknown) { const index = array.findIndex((obj) => obj[key] === id); if (index === -1) { @@ -437,14 +472,14 @@ describe('Channel initial load useEffect', () => { } it('should call the loadChannelAroundMessage when messageId is passed to a channel', async () => { - const messages = Array.from({ length: 105 }, (_, i) => generateMessage({ id: i })); + const messages = Array.from({ length: 105 }, (_, i) => generateMessage({ id: String(i) })); const messageToSearch = messages[50]; const mockedChannel = generateChannelResponse({ messages, }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const loadMessageIntoState = jest.fn(() => { @@ -460,7 +495,7 @@ describe('Channel initial load useEffect', () => { hasPrev: true, }, messages, - }; + } as unknown as typeof channel.state; renderComponent({ channel, messageId: messageToSearch.id }); @@ -469,10 +504,10 @@ describe('Channel initial load useEffect', () => { }); const { result: channelMessageState } = renderHook(() => useChannelMessageDataState(channel)); - await waitFor(() => expect(channelMessageState.current.state.messages).toHaveLength(25)); + await waitFor(() => expect(channelMessageState.current.state.messages!).toHaveLength(25)); await waitFor(() => expect( - channelMessageState.current.state.messages.find( + channelMessageState.current.state.messages!.find( (message) => message.id === messageToSearch.id, ), ).toBeTruthy(), @@ -487,38 +522,43 @@ describe('Channel initial load useEffect', () => { jest.restoreAllMocks(); cleanup(); }); - const mockedHook = (values) => - jest.spyOn(MessageListPaginationHooks, 'useMessageListPagination').mockImplementation(() => ({ - copyMessagesStateFromChannel: jest.fn(), - loadChannelAroundMessage: jest.fn(), - loadChannelAtFirstUnreadMessage: jest.fn(), - loadInitialMessagesStateFromChannel: jest.fn(), - loadLatestMessages: jest.fn(), - loadMore: jest.fn(), - loadMoreRecent: jest.fn(), - state: { ...channelInitialState }, - ...values, - })); + const mockedHook = ( + values: Partial>, + ) => + jest.spyOn(MessageListPaginationHooks, 'useMessageListPagination').mockImplementation( + () => + ({ + copyMessagesStateFromChannel: jest.fn(), + loadChannelAroundMessage: jest.fn(), + loadChannelAtFirstUnreadMessage: jest.fn(), + loadInitialMessagesStateFromChannel: jest.fn(), + loadLatestMessages: jest.fn(), + loadMore: jest.fn(), + loadMoreRecent: jest.fn(), + state: { ...channelInitialState }, + ...values, + }) as unknown as ReturnType, + ); it("should not call loadChannelAtFirstUnreadMessage if channel's unread count is 0", async () => { const mockedChannel = generateChannelResponse({ messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })), }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const user = generateUser(); - const read_data = {}; + const read_data: typeof channel.state.read = {}; - read_data[chatClient.user.id] = { + read_data[chatClient.user!.id] = { last_read: new Date(), user, - }; + } as unknown as (typeof channel.state.read)[string]; channel.state = { ...channelInitialState, read: read_data, - }; + } as unknown as typeof channel.state; jest.spyOn(channel, 'countUnread').mockImplementation(() => 0); const loadChannelAtFirstUnreadMessageFn = jest.fn(); @@ -538,14 +578,14 @@ describe('Channel initial load useEffect', () => { }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const user = generateUser(); const numberOfUnreadMessages = 15; - const read_data = {}; + const read_data: typeof channel.state.read = {}; - read_data[chatClient.user.id] = { + read_data[chatClient.user!.id] = { last_read: new Date(), unread_messages: numberOfUnreadMessages, user, @@ -553,7 +593,7 @@ describe('Channel initial load useEffect', () => { channel.state = { ...channelInitialState, read: read_data, - }; + } as unknown as typeof channel.state; jest.spyOn(channel, 'countUnread').mockImplementation(() => numberOfUnreadMessages); const loadChannelAtFirstUnreadMessageFn = jest.fn(); @@ -573,14 +613,14 @@ describe('Channel initial load useEffect', () => { }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const user = generateUser(); const numberOfUnreadMessages = 2; - const read_data = {}; + const read_data: typeof channel.state.read = {}; - read_data[chatClient.user.id] = { + read_data[chatClient.user!.id] = { last_read: new Date(), unread_messages: numberOfUnreadMessages, user, @@ -588,7 +628,7 @@ describe('Channel initial load useEffect', () => { channel.state = { ...channelInitialState, read: read_data, - }; + } as unknown as typeof channel.state; jest.spyOn(channel, 'countUnread').mockImplementation(() => numberOfUnreadMessages); const loadChannelAtFirstUnreadMessageFn = jest.fn(); @@ -609,7 +649,7 @@ describe('Channel initial load useEffect', () => { }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); renderComponent({ channel }); diff --git a/package/src/components/Channel/__tests__/isAttachmentEqualHandler.test.js b/package/src/components/Channel/__tests__/isAttachmentEqualHandler.test.tsx similarity index 73% rename from package/src/components/Channel/__tests__/isAttachmentEqualHandler.test.js rename to package/src/components/Channel/__tests__/isAttachmentEqualHandler.test.tsx index 7c02654712..095e653447 100644 --- a/package/src/components/Channel/__tests__/isAttachmentEqualHandler.test.js +++ b/package/src/components/Channel/__tests__/isAttachmentEqualHandler.test.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { Text } from 'react-native'; import { act, cleanup, render, waitFor } from '@testing-library/react-native'; +import type { Attachment, Channel as ChannelType, StreamChat } from 'stream-chat'; import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext'; import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider'; @@ -19,14 +20,16 @@ import { Channel } from '../../Channel/Channel'; import { Chat } from '../../Chat/Chat'; import { MessageList } from '../../MessageList/MessageList'; +type AttachmentWithCustomField = Attachment & { customField?: string }; + describe('isAttachmentEqualHandler', () => { - let channel; - let chatClient; + let channel: ChannelType; + let chatClient: StreamChat; const user = generateUser({ id: 'id', name: 'name' }); const messages = [ generateMessage({ - attachments: [{ customField: 'custom-field', type: 'test' }], + attachments: [{ customField: 'custom-field', type: 'test' } as AttachmentWithCustomField], user, }), ]; @@ -40,7 +43,7 @@ describe('isAttachmentEqualHandler', () => { chatClient = await getTestClientWithUser(user); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - channel = chatClient.channel('messaging', mockedChannel.id); + channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); }); @@ -50,7 +53,10 @@ describe('isAttachmentEqualHandler', () => { }); const getMessageWithCustomFields = () => { - const isAttachmentEqualHandler = (prevProps, nextProps) => { + const isAttachmentEqualHandler = ( + prevProps: AttachmentWithCustomField, + nextProps: AttachmentWithCustomField, + ) => { const propsEqual = prevProps.customField === nextProps.customField && prevProps.type === nextProps.type; if (!propsEqual) { @@ -64,14 +70,23 @@ describe('isAttachmentEqualHandler', () => { { + UnsupportedAttachment: ({ attachment }) => { + const { customField, type } = attachment as AttachmentWithCustomField; if (type === 'test') { return {customField}; } + return null; }, }} > - + ['isAttachmentEqual'] + } + > @@ -92,7 +107,9 @@ describe('isAttachmentEqualHandler', () => { chatClient, { ...messages[0], - attachments: [{ customField: 'custom-field-2', type: 'test' }], + attachments: [ + { customField: 'custom-field-2', type: 'test' } as AttachmentWithCustomField, + ], updated_at: new Date(), }, channel, diff --git a/package/src/components/Channel/__tests__/ownCapabilities.test.js b/package/src/components/Channel/__tests__/ownCapabilities.test.tsx similarity index 94% rename from package/src/components/Channel/__tests__/ownCapabilities.test.js rename to package/src/components/Channel/__tests__/ownCapabilities.test.tsx index 6b6af3705d..d8a9f012be 100644 --- a/package/src/components/Channel/__tests__/ownCapabilities.test.js +++ b/package/src/components/Channel/__tests__/ownCapabilities.test.tsx @@ -4,6 +4,7 @@ import { FlatList } from 'react-native'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import { act, fireEvent, render, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, LocalMessage, StreamChat } from 'stream-chat'; import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider'; import { allOwnCapabilities } from '../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext'; @@ -31,10 +32,10 @@ describe('Own capabilities', () => { user: otherUser, }); - let chatClient; - let channel; + let chatClient: StreamChat; + let channel: ChannelType; - const initializeChannel = async (c) => { + const initializeChannel = async (c: ReturnType) => { useMockedApis(chatClient, [getOrCreateChannelApi(c)]); channel = chatClient.channel('messaging'); @@ -48,7 +49,7 @@ describe('Own capabilities', () => { }); }); - const getComponent = (props = {}) => ( + const getComponent = (props: Partial> = {}) => ( @@ -61,7 +62,7 @@ describe('Own capabilities', () => { ); - const generateChannelWithCapabilities = async (capabilities = []) => { + const generateChannelWithCapabilities = async (capabilities: string[] = []) => { const c = generateChannelResponse({ channel: { own_capabilities: capabilities, @@ -71,12 +72,15 @@ describe('Own capabilities', () => { await initializeChannel(c); }; - const renderChannelAndOpenMessageActionsList = async (targetMessage, props = {}) => { + const renderChannelAndOpenMessageActionsList = async ( + targetMessage: LocalMessage, + props: Partial> = {}, + ) => { const { findByTestId, queryByLabelText, queryByText, unmount } = render(getComponent(props)); - await waitFor(() => queryByText(targetMessage.text)); + await waitFor(() => queryByText(targetMessage.text as string)); act(() => { - fireEvent(queryByText(targetMessage.text), 'onLongPress'); + fireEvent(queryByText(targetMessage.text as string)!, 'onLongPress'); }); await waitFor(() => expect(!!queryByLabelText('Message action list')).toBeTruthy()); @@ -363,7 +367,7 @@ describe('Own capabilities', () => { const sendMessage = jest.fn(); channel.sendMessage = sendMessage; act(() => { - fireEvent(queryByTestId('send-button'), 'onPress'); + fireEvent(queryByTestId('send-button')!, 'onPress'); }); await waitFor(() => expect(sendMessage).toHaveBeenCalledTimes(0)); @@ -378,10 +382,10 @@ describe('Own capabilities', () => { const mockFn = jest.fn(); const { queryByTestId } = render( getComponent({ - doSendMessageRequest: () => { + doSendMessageRequest: (() => { mockFn(); return sendMessageApi(); - }, + }) as unknown as React.ComponentProps['doSendMessageRequest'], }), ); @@ -397,7 +401,7 @@ describe('Own capabilities', () => { }); act(() => { - fireEvent(queryByTestId('send-button'), 'onPress'); + fireEvent(queryByTestId('send-button')!, 'onPress'); }); await waitFor(() => expect(mockFn).toHaveBeenCalledTimes(1)); diff --git a/package/src/components/Channel/__tests__/useMessageListPagination.test.js b/package/src/components/Channel/__tests__/useMessageListPagination.test.tsx similarity index 78% rename from package/src/components/Channel/__tests__/useMessageListPagination.test.js rename to package/src/components/Channel/__tests__/useMessageListPagination.test.tsx index eed226f56b..4f6eeea3bf 100644 --- a/package/src/components/Channel/__tests__/useMessageListPagination.test.js +++ b/package/src/components/Channel/__tests__/useMessageListPagination.test.tsx @@ -1,4 +1,5 @@ import { act, cleanup, renderHook, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, LocalMessage, StreamChat } from 'stream-chat'; import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel'; import { useMockedApis } from '../../../mock-builders/api/useMockedApis'; @@ -11,23 +12,29 @@ import * as ChannelStateHooks from '../hooks/useChannelDataState'; import { useMessageListPagination } from '../hooks/useMessageListPagination'; describe('useMessageListPagination', () => { - let chatClient; - let channel; - - const mockedHook = (state, values) => - jest.spyOn(ChannelStateHooks, 'useChannelMessageDataState').mockImplementation(() => ({ - copyMessagesStateFromChannel: jest.fn(), - jumpToLatestMessage: jest.fn(), - jumpToMessageFinished: jest.fn(), - loadInitialMessagesStateFromChannel: jest.fn(), - loadMoreFinished: jest.fn(), - loadMoreRecentFinished: jest.fn(), - setLoading: jest.fn(), - setLoadingMore: jest.fn(), - setLoadingMoreRecent: jest.fn(), - state: { ...channelInitialState, ...state }, - ...values, - })); + let chatClient: StreamChat; + let channel: ChannelType; + + const mockedHook = ( + state: Partial, + values?: Partial>, + ) => + jest.spyOn(ChannelStateHooks, 'useChannelMessageDataState').mockImplementation( + () => + ({ + copyMessagesStateFromChannel: jest.fn(), + jumpToLatestMessage: jest.fn(), + jumpToMessageFinished: jest.fn(), + loadInitialMessagesStateFromChannel: jest.fn(), + loadMoreFinished: jest.fn(), + loadMoreRecentFinished: jest.fn(), + setLoading: jest.fn(), + setLoadingMore: jest.fn(), + setLoadingMoreRecent: jest.fn(), + state: { ...channelInitialState, ...state }, + ...values, + }) as unknown as ReturnType, + ); beforeEach(async () => { // Reset all modules before each test @@ -40,7 +47,7 @@ describe('useMessageListPagination', () => { }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - channel = chatClient.channel('messaging', mockedChannel.id); + channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); }); @@ -57,7 +64,7 @@ describe('useMessageListPagination', () => { channel.state.messages = Array.from({ length: 20 }, (_, i) => generateMessage({ text: `message-${i}` }), ); - channel.state.messagePagination.hasPrev = true; + (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true; }); channel.state = { ...channelInitialState, @@ -66,7 +73,7 @@ describe('useMessageListPagination', () => { hasNext: true, hasPrev: true, }, - }; + } as unknown as typeof channel.state; const { result } = renderHook(() => useMessageListPagination({ channel })); await act(async () => { @@ -76,7 +83,7 @@ describe('useMessageListPagination', () => { await waitFor(() => { expect(loadMessageIntoState).toHaveBeenCalledTimes(1); expect(result.current.state.hasMore).toBe(true); - expect(result.current.state.messages.length).toBe(20); + expect(result.current.state.messages!.length).toBe(20); }); }); @@ -96,8 +103,8 @@ describe('useMessageListPagination', () => { hasNext: true, hasPrev: false, }, - }; - channel.query = queryFn; + } as unknown as typeof channel.state; + channel.query = queryFn as typeof channel.query; const { result } = renderHook(() => useMessageListPagination({ channel })); await act(async () => { @@ -117,8 +124,8 @@ describe('useMessageListPagination', () => { hasNext: true, hasPrev: true, }, - }; - channel.query = queryFn; + } as unknown as typeof channel.state; + channel.query = queryFn as typeof channel.query; mockedHook({ loadingMore: true, loadingMoreRecent: true }); @@ -141,7 +148,7 @@ describe('useMessageListPagination', () => { channel.state.messages = Array.from({ length: 40 }, (_, i) => generateMessage({ text: `message-${i}` }), ); - channel.state.messagePagination.hasPrev = true; + (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true; }); channel.state = { ...channelInitialState, @@ -150,8 +157,8 @@ describe('useMessageListPagination', () => { hasPrev: true, }, messages, - }; - channel.query = queryFn; + } as unknown as typeof channel.state; + channel.query = queryFn as unknown as typeof channel.query; const { result } = renderHook(() => useMessageListPagination({ channel })); @@ -167,7 +174,7 @@ describe('useMessageListPagination', () => { }, }); expect(result.current.state.hasMore).toBe(true); - expect(result.current.state.messages.length).toBe(40); + expect(result.current.state.messages!.length).toBe(40); }); }); }); @@ -189,8 +196,8 @@ describe('useMessageListPagination', () => { hasNext: false, hasPrev: true, }, - }; - channel.query = queryFn; + } as unknown as typeof channel.state; + channel.query = queryFn as typeof channel.query; const { result } = renderHook(() => useMessageListPagination({ channel })); await act(async () => { @@ -210,8 +217,8 @@ describe('useMessageListPagination', () => { hasNext: true, hasPrev: true, }, - }; - channel.query = queryFn; + } as unknown as typeof channel.state; + channel.query = queryFn as typeof channel.query; mockedHook({ loadingMore: true, loadingMoreRecent: true }); @@ -234,7 +241,7 @@ describe('useMessageListPagination', () => { channel.state.messages = Array.from({ length: 40 }, (_, i) => generateMessage({ text: `message-${i}` }), ); - channel.state.messagePagination.hasPrev = true; + (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true; }); channel.state = { ...channelInitialState, @@ -243,8 +250,8 @@ describe('useMessageListPagination', () => { hasPrev: true, }, messages, - }; - channel.query = queryFn; + } as unknown as typeof channel.state; + channel.query = queryFn as unknown as typeof channel.query; const { result } = renderHook(() => useMessageListPagination({ channel })); @@ -258,7 +265,7 @@ describe('useMessageListPagination', () => { watchers: { limit: 10 }, }); expect(result.current.state.hasMore).toBe(true); - expect(result.current.state.messages.length).toBe(40); + expect(result.current.state.messages!.length).toBe(40); }); }); }); @@ -277,7 +284,7 @@ describe('useMessageListPagination', () => { channel.state.messages = Array.from({ length: 20 }, (_, i) => generateMessage({ text: `message-${i}` }), ); - channel.state.messagePagination.hasPrev = true; + (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true; }); channel.state = { ...channelInitialState, @@ -286,7 +293,7 @@ describe('useMessageListPagination', () => { hasNext: true, hasPrev: true, }, - }; + } as unknown as typeof channel.state; const { result } = renderHook(() => useMessageListPagination({ channel })); await act(async () => { @@ -303,7 +310,7 @@ describe('useMessageListPagination', () => { channel.state.messages = Array.from({ length: 20 }, (_, i) => generateMessage({ text: `message-${i}` }), ); - channel.state.messagePagination.hasPrev = true; + (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true; }); channel.state = { ...channelInitialState, @@ -312,7 +319,7 @@ describe('useMessageListPagination', () => { hasNext: false, hasPrev: true, }, - }; + } as unknown as typeof channel.state; const { result } = renderHook(() => useMessageListPagination({ channel })); await act(async () => { @@ -323,7 +330,7 @@ describe('useMessageListPagination', () => { expect(loadMessageIntoState).toHaveBeenCalledTimes(1); expect(result.current.state.hasMore).toBe(true); expect(result.current.state.hasMoreNewer).toBe(false); - expect(result.current.state.messages.length).toBe(20); + expect(result.current.state.messages!.length).toBe(20); expect(result.current.state.targetedMessageId).toBe('message-5'); }); }); @@ -344,7 +351,7 @@ describe('useMessageListPagination', () => { ); const loadMessageIntoState = jest.fn(() => { channel.state.messages = messages; - channel.state.messagePagination.hasPrev = true; + (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true; }); channel.state = { ...channelInitialState, @@ -353,7 +360,7 @@ describe('useMessageListPagination', () => { hasNext: true, hasPrev: true, }, - }; + } as unknown as typeof channel.state; const user = generateUser(); const channelUnreadState = { @@ -367,7 +374,11 @@ describe('useMessageListPagination', () => { const { result } = renderHook(() => useMessageListPagination({ channel })); await act(async () => { - await result.current.loadChannelAtFirstUnreadMessage({ channelUnreadState }); + await result.current.loadChannelAtFirstUnreadMessage({ + channelUnreadState: channelUnreadState as unknown as Parameters< + typeof result.current.loadChannelAtFirstUnreadMessage + >[0]['channelUnreadState'], + }); }); await waitFor(() => { @@ -376,10 +387,30 @@ describe('useMessageListPagination', () => { }); const generateMessageArray = (length = 20) => - Array.from({ length }, (_, i) => generateMessage({ id: i, text: `message-${i}` })); + Array.from({ length }, (_, i) => generateMessage({ id: String(i), text: `message-${i}` })); + + type TestCaseUnreadState = { + first_unread_message_id?: string; + last_read_message_id?: string; + unread_messages: number; + }; + + type TestCase = { + channelUnreadState: (messages: LocalMessage[]) => TestCaseUnreadState; + expectedCalls: { + jumpToMessageFinishedCalls: number; + loadMessageIntoStateCalls: number; + setChannelUnreadStateCalls: number; + setTargetedMessageIdCalls: number; + targetedMessageId: (messages: LocalMessage[]) => string; + }; + initialMessages: LocalMessage[]; + name: string; + setupLoadMessageIntoState: ((channel: ChannelType) => jest.Mock) | null; + }; // Test cases with different scenarios - const testCases = [ + const testCases: TestCase[] = [ { channelUnreadState: (messages) => ({ first_unread_message_id: messages[2].id, @@ -398,7 +429,7 @@ describe('useMessageListPagination', () => { }, { channelUnreadState: () => ({ - first_unread_message_id: 21, + first_unread_message_id: '21', unread_messages: 2, }), expectedCalls: { @@ -406,19 +437,20 @@ describe('useMessageListPagination', () => { loadMessageIntoStateCalls: 1, setChannelUnreadStateCalls: 0, setTargetedMessageIdCalls: 1, - targetedMessageId: () => 21, + targetedMessageId: () => '21', }, initialMessages: generateMessageArray(), name: 'first_unread_message_id not present in current message set', setupLoadMessageIntoState: (channel) => { const loadMessageIntoState = jest.fn(() => { const newMessages = Array.from({ length: 20 }, (_, i) => - generateMessage({ id: i + 21, text: `message-${i + 21}` }), + generateMessage({ id: String(i + 21), text: `message-${i + 21}` }), ); channel.state.messages = newMessages; - channel.state.messagePagination.hasPrev = true; + (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true; }); - channel.state.loadMessageIntoState = loadMessageIntoState; + (channel.state as unknown as { loadMessageIntoState: jest.Mock }).loadMessageIntoState = + loadMessageIntoState; return loadMessageIntoState; }, }, @@ -440,7 +472,7 @@ describe('useMessageListPagination', () => { }, { channelUnreadState: () => ({ - last_read_message_id: 21, + last_read_message_id: '21', unread_messages: 2, }), expectedCalls: { @@ -448,19 +480,20 @@ describe('useMessageListPagination', () => { loadMessageIntoStateCalls: 1, setChannelUnreadStateCalls: 1, setTargetedMessageIdCalls: 1, - targetedMessageId: () => 22, + targetedMessageId: () => '22', }, initialMessages: generateMessageArray(), name: 'last_read_message_id not present in current message set', setupLoadMessageIntoState: (channel) => { const loadMessageIntoState = jest.fn(() => { const newMessages = Array.from({ length: 20 }, (_, i) => - generateMessage({ id: i + 21, text: `message-${i + 21}` }), + generateMessage({ id: String(i + 21), text: `message-${i + 21}` }), ); channel.state.messages = newMessages; - channel.state.messagePagination.hasPrev = true; + (channel.state.messagePagination as { hasPrev: boolean }).hasPrev = true; }); - channel.state.loadMessageIntoState = loadMessageIntoState; + (channel.state as unknown as { loadMessageIntoState: jest.Mock }).loadMessageIntoState = + loadMessageIntoState; return loadMessageIntoState; }, }, @@ -476,7 +509,7 @@ describe('useMessageListPagination', () => { hasPrev: true, }, messages, - }; + } as unknown as typeof channel.state; // Setup additional mocks if needed const loadMessageIntoStateMock = testCase.setupLoadMessageIntoState @@ -502,7 +535,9 @@ describe('useMessageListPagination', () => { // Execute the method await act(async () => { await result.current.loadChannelAtFirstUnreadMessage({ - channelUnreadState, + channelUnreadState: channelUnreadState as unknown as Parameters< + typeof result.current.loadChannelAtFirstUnreadMessage + >[0]['channelUnreadState'], setChannelUnreadState: setChannelUnreadStateMock, setTargetedMessage: setTargetedMessageIdMock, }); @@ -538,7 +573,7 @@ describe('useMessageListPagination', () => { const messages = Array.from({ length: 20 }, (_, i) => generateMessage({ created_at: new Date('2021-09-01T00:00:00.000Z'), - id: i, + id: String(i), text: `message-${i}`, }), ); @@ -547,7 +582,7 @@ describe('useMessageListPagination', () => { it.each` scenario | last_read | expectedQueryCalls | expectedJumpToMessageFinishedCalls | expectedSetChannelUnreadStateCalls | expectedSetTargetedMessageCalls | expectedTargetedMessageId - ${'when last_read matches a message'} | ${new Date(messages[10].created_at)} | ${0} | ${1} | ${1} | ${1} | ${10} + ${'when last_read matches a message'} | ${new Date(messages[10].created_at)} | ${0} | ${1} | ${1} | ${1} | ${'10'} ${'when last_read does not match any message'} | ${new Date('2021-09-02T00:00:00.000Z')} | ${1} | ${0} | ${0} | ${0} | ${undefined} `( '$scenario', @@ -558,6 +593,13 @@ describe('useMessageListPagination', () => { expectedSetTargetedMessageCalls, expectedTargetedMessageId, last_read, + }: { + expectedJumpToMessageFinishedCalls: number; + expectedQueryCalls: number; + expectedSetChannelUnreadStateCalls: number; + expectedSetTargetedMessageCalls: number; + expectedTargetedMessageId: string | undefined; + last_read: Date; }) => { // Set up channel state channel.state = { @@ -567,7 +609,7 @@ describe('useMessageListPagination', () => { hasPrev: true, }, messages, - }; + } as unknown as typeof channel.state; const channelUnreadState = { last_read, @@ -577,7 +619,7 @@ describe('useMessageListPagination', () => { // Mock query if needed const queryMock = jest.fn(); - channel.query = queryMock; + channel.query = queryMock as unknown as typeof channel.query; // Set up mocks const jumpToMessageFinishedMock = jest.fn(); diff --git a/package/src/components/ChannelList/__tests__/ChannelList.test.js b/package/src/components/ChannelList/__tests__/ChannelList.test.tsx similarity index 90% rename from package/src/components/ChannelList/__tests__/ChannelList.test.js rename to package/src/components/ChannelList/__tests__/ChannelList.test.tsx index 3fdadd4b15..4ebc8e91de 100644 --- a/package/src/components/ChannelList/__tests__/ChannelList.test.js +++ b/package/src/components/ChannelList/__tests__/ChannelList.test.tsx @@ -10,6 +10,7 @@ import { waitFor, within, } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { useChannelsContext } from '../../../contexts/channelsContext/ChannelsContext'; import { @@ -37,21 +38,22 @@ import { getTestClientWithUser } from '../../../mock-builders/mock'; import { Chat } from '../../Chat/Chat'; import { ChannelList } from '../ChannelList'; -const mockChannelSwipableWrapper = jest.fn(({ children }) => ( +const mockChannelSwipableWrapper = jest.fn(({ children }: { children: React.ReactNode }) => ( {children} )); jest.mock('../../ChannelPreview/ChannelSwipableWrapper', () => ({ - ChannelSwipableWrapper: (...args) => mockChannelSwipableWrapper(...args), + ChannelSwipableWrapper: (...args: Parameters) => + mockChannelSwipableWrapper(...args), })); /** * Custom ChannelPreview component used via WithComponents to verify channel rendering. * Receives { channel, muted, unread, lastMessage } from ChannelPreview. */ -const ChannelPreviewComponent = ({ channel }) => ( +const ChannelPreviewComponent = ({ channel }: { channel: ChannelType }) => ( - {channel.data?.name} + {(channel.data as { name?: string } | undefined)?.name} {channel.state.messages[0]?.text} ); @@ -73,9 +75,11 @@ const RefreshingProbe = () => { return {`${refreshing}`}; }; -const ChannelPreviewContent = ({ unread }) => {`${unread}`}; +const ChannelPreviewContent = ({ unread }: { unread?: number }) => ( + {`${unread}`} +); -let expectedChannelDetailsBottomSheetOverride; +let expectedChannelDetailsBottomSheetOverride: unknown; const ChannelDetailsBottomSheetProbe = () => { const { ChannelDetailsBottomSheet } = useComponentsContext(); return ( @@ -85,9 +89,13 @@ const ChannelDetailsBottomSheetProbe = () => { ); }; -class DeferredPromise { +class DeferredPromise { + promise: Promise; + resolve!: (value: T | PromiseLike) => void; + reject!: (reason?: unknown) => void; + constructor() { - this.promise = new Promise((resolve, reject) => { + this.promise = new Promise((resolve, reject) => { this.resolve = resolve; this.reject = reject; }); @@ -95,11 +103,11 @@ class DeferredPromise { } describe('ChannelList', () => { - let chatClient; - let testChannel1; - let testChannel2; - let testChannel3; - const props = { + let chatClient: StreamChat; + let testChannel1: ReturnType; + let testChannel2: ReturnType; + let testChannel3: ReturnType; + const props: Partial> = { filters: {}, }; @@ -163,7 +171,10 @@ describe('ChannelList', () => { screen.rerender( - + ['filters']} + /> , ); @@ -178,12 +189,17 @@ describe('ChannelList', () => { const deferredCallForFreshFilter = new DeferredPromise(); const staleFilter = { 'initial-filter': { a: { $gt: 'c' } } }; const freshFilter = { 'new-filter': { a: { $gt: 'c' } } }; - const createMockChannel = (id) => { + const createMockChannel = (id: string) => { const channel = generateChannel({ data: { name: id }, id, state: { latestMessages: [], members: {}, messages: [], setIsUpToDate: jest.fn() }, - }); + } as unknown as Parameters[0]) as unknown as { + countUnread: () => number; + messageComposer: { registerDraftEventSubscriptions: () => () => void }; + muteStatus: () => { muted: boolean }; + on: jest.Mock; + }; channel.countUnread = () => 0; channel.muteStatus = () => ({ muted: false }); channel.on = jest.fn(() => ({ unsubscribe: jest.fn() })); @@ -195,17 +211,20 @@ describe('ChannelList', () => { const staleChannel = [createMockChannel('stale-channel')]; const freshChannel = [createMockChannel('new-channel')]; const spy = jest.spyOn(chatClient, 'queryChannels'); - spy.mockImplementation((filters = {}) => { + spy.mockImplementation(((filters: Parameters[0] = {}) => { if (Object.prototype.hasOwnProperty.call(filters, 'new-filter')) { return deferredCallForFreshFilter.promise; } return deferredCallForStaleFilter.promise; - }); + }) as typeof chatClient.queryChannels); const { rerender, queryByTestId } = render( - + ['filters']} + /> , ); @@ -225,7 +244,10 @@ describe('ChannelList', () => { rerender( - + ['filters']} + /> , ); @@ -406,13 +428,13 @@ describe('ChannelList', () => { const newMessage = sendNewMessageOnChannel3(); await waitFor(() => { - expect(screen.getByText(newMessage.text)).toBeTruthy(); + expect(screen.getByText(newMessage.text as string)).toBeTruthy(); }); const items = screen.getAllByLabelText('list-item'); await waitFor(() => { - expect(within(items[0]).getByText(newMessage.text)).toBeTruthy(); + expect(within(items[0]).getByText(newMessage.text as string)).toBeTruthy(); }); }); @@ -436,13 +458,13 @@ describe('ChannelList', () => { const newMessage = sendNewMessageOnChannel3(); await waitFor(() => { - expect(screen.getByText(newMessage.text)).toBeTruthy(); + expect(screen.getByText(newMessage.text as string)).toBeTruthy(); }); const items = screen.getAllByLabelText('list-item'); await waitFor(() => { - expect(within(items[0]).getByText(newMessage.text)).toBeTruthy(); + expect(within(items[0]).getByText(newMessage.text as string)).toBeTruthy(); }); }); @@ -462,13 +484,13 @@ describe('ChannelList', () => { const newMessage = sendNewMessageOnChannel3(); await waitFor(() => { - expect(screen.getByText(newMessage.text)).toBeTruthy(); + expect(screen.getByText(newMessage.text as string)).toBeTruthy(); }); const items = screen.getAllByLabelText('list-item'); await waitFor(() => { - expect(within(items[2]).getByText(newMessage.text)).toBeTruthy(); + expect(within(items[2]).getByText(newMessage.text as string)).toBeTruthy(); }); }); it('should call the `onNewMessage` function prop, if provided', async () => { @@ -485,7 +507,12 @@ describe('ChannelList', () => { expect(screen.getByTestId('channel-list-view')).toBeTruthy(); }); - act(() => dispatchMessageNewEvent(chatClient, testChannel2.channel)); + act(() => + dispatchMessageNewEvent( + chatClient, + testChannel2.channel as unknown as Parameters[1], + ), + ); await waitFor(() => { expect(onNewMessage).toHaveBeenCalledTimes(1); @@ -538,7 +565,12 @@ describe('ChannelList', () => { expect(screen.getByTestId('channel-list-view')).toBeTruthy(); }); - act(() => dispatchMessageNewEvent(chatClient, testChannel2.channel)); + act(() => + dispatchMessageNewEvent( + chatClient, + testChannel2.channel as unknown as Parameters[1], + ), + ); await waitFor(() => { expect(onNewMessage).toHaveBeenCalledTimes(1); @@ -884,7 +916,9 @@ describe('ChannelList', () => { expect(screen.getByTestId('refreshing').children[0]).toBe('false'); }); - chatClient.queryChannels = jest.fn(() => deferredPromise.promise); + chatClient.queryChannels = jest.fn( + () => deferredPromise.promise, + ) as typeof chatClient.queryChannels; act(() => dispatchConnectionChangedEvent(chatClient, false)); act(() => dispatchConnectionChangedEvent(chatClient, true)); diff --git a/package/src/components/ChannelList/__tests__/ChannelListView.test.js b/package/src/components/ChannelList/__tests__/ChannelListView.test.tsx similarity index 76% rename from package/src/components/ChannelList/__tests__/ChannelListView.test.js rename to package/src/components/ChannelList/__tests__/ChannelListView.test.tsx index 73b800cf23..4ea001e435 100644 --- a/package/src/components/ChannelList/__tests__/ChannelListView.test.js +++ b/package/src/components/ChannelList/__tests__/ChannelListView.test.tsx @@ -1,7 +1,9 @@ import React from 'react'; import { cleanup, render, waitFor } from '@testing-library/react-native'; +import type { StreamChat } from 'stream-chat'; +import type { ChannelsContextValue } from '../../../contexts/channelsContext/ChannelsContext'; import { ChannelsProvider } from '../../../contexts/channelsContext/ChannelsContext'; import { ChatContext, ChatProvider } from '../../../contexts/chatContext/ChatContext'; import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel'; @@ -13,7 +15,7 @@ import { Chat } from '../../Chat/Chat'; import { ChannelList } from '../ChannelList'; import { ChannelListView } from '../ChannelListView'; -let chatClient; +let chatClient: StreamChat; /** * Renders the full ChannelList (which now always uses ChannelListView internally). @@ -42,30 +44,38 @@ const noop = () => {}; * Renders ChannelListView directly with a mock ChannelsContext for testing * error and loading states. */ -const ComponentWithContextOverrides = ({ error, loadingChannels }) => ( +const ComponentWithContextOverrides = ({ + error, + loadingChannels, +}: { + error: boolean; + loadingChannels: boolean; +}) => ( {(context) => ( diff --git a/package/src/components/ChannelList/hooks/__tests__/useChannelActionItems.test.tsx b/package/src/components/ChannelList/hooks/__tests__/useChannelActionItems.test.tsx index f0750915b3..57b5af4dd2 100644 --- a/package/src/components/ChannelList/hooks/__tests__/useChannelActionItems.test.tsx +++ b/package/src/components/ChannelList/hooks/__tests__/useChannelActionItems.test.tsx @@ -149,7 +149,7 @@ describe('getChannelActionItems', () => { isDirectChat: false, isPinned: false, muteActive: false, - t: (value) => value, + t: ((value: string) => value) as TranslationContextValue['t'], }); const actionItems = getChannelActionItems({ context: { @@ -159,7 +159,7 @@ describe('getChannelActionItems', () => { isDirectChat: false, isPinned: false, muteActive: false, - t: (value) => value, + t: ((value: string) => value) as TranslationContextValue['t'], }, defaultItems, }); @@ -186,7 +186,7 @@ describe('getChannelActionItems', () => { isDirectChat: true, isPinned: false, muteActive: true, - t: (value) => value, + t: ((value: string) => value) as TranslationContextValue['t'], }); expect(actionItems.map((item) => item.id)).toEqual(['mute', 'block', 'leave', 'deleteChannel']); @@ -213,7 +213,7 @@ describe('getChannelActionItems', () => { isDirectChat: false, isPinned: false, muteActive: false, - t: (value) => value, + t: ((value: string) => value) as TranslationContextValue['t'], }); expect(actionItems.map((item) => item.id)).toEqual(['mute', 'leave']); @@ -228,7 +228,7 @@ describe('getChannelActionItems', () => { isDirectChat: false, isPinned: false, muteActive: true, - t: (value) => value, + t: ((value: string) => value) as TranslationContextValue['t'], }); expect(actionItems[0].action).toBe(channelActions.unmuteChannel); @@ -251,7 +251,7 @@ describe('getChannelActionItems', () => { isDirectChat: false, isPinned: false, muteActive: false, - t: (value) => value, + t: ((value: string) => value) as TranslationContextValue['t'], }); const deleteItem = actionItems.find((item) => item.id === 'deleteChannel'); diff --git a/package/src/components/ChannelList/hooks/__tests__/useChannelActionItemsById.test.tsx b/package/src/components/ChannelList/hooks/__tests__/useChannelActionItemsById.test.tsx index 4e52742590..36c9fcdaf9 100644 --- a/package/src/components/ChannelList/hooks/__tests__/useChannelActionItemsById.test.tsx +++ b/package/src/components/ChannelList/hooks/__tests__/useChannelActionItemsById.test.tsx @@ -21,7 +21,7 @@ describe('useChannelActionItemsById', () => { const channelActionItems: useChannelActionItemsModule.ChannelActionItem[] = [ { action: jest.fn(), - Icon: <>, + Icon: () => <>, id: 'pin', label: '', placement: 'both', @@ -29,7 +29,7 @@ describe('useChannelActionItemsById', () => { }, { action: jest.fn(), - Icon: <>, + Icon: () => <>, id: 'deleteChannel', label: '', placement: 'both', diff --git a/package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx b/package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx index 070463c5a9..efdb508d73 100644 --- a/package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx +++ b/package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx @@ -4,6 +4,7 @@ import { Image, Text } from 'react-native'; import { act, render, waitFor } from '@testing-library/react-native'; import type { Channel, ChannelResponse, Event, StreamChat } from 'stream-chat'; +import type { ChatContextValue } from '../../../../../contexts/chatContext/ChatContext'; import { ChatContext, useChannelUpdated } from '../../../../../index'; describe('useChannelUpdated', () => { @@ -33,16 +34,16 @@ describe('useChannelUpdated', () => { } as unknown as StreamChat; const TestComponent = () => { - const [channels, setChannels] = useState([mockChannel]); + const [channels, setChannels] = useState([mockChannel]); useChannelUpdated({ setChannels }); if ( channels && channels[0].data?.own_capabilities && - Object.keys(channels[0].data?.own_capabilities as { [key: string]: boolean }).includes( - 'send_messages', - ) + Object.keys( + channels[0].data?.own_capabilities as unknown as { [key: string]: boolean }, + ).includes('send_messages') ) { return Send messages enabled; } @@ -53,16 +54,18 @@ describe('useChannelUpdated', () => { const { getByText } = await waitFor(() => render( null, - }} + value={ + { + appSettings: null, + client: mockClient, + connectionRecovering: false, + enableOfflineSupport: false, + ImageComponent: Image, + isOnline: true, + mutedUsers: [], + setActiveChannel: () => null, + } as unknown as ChatContextValue + } > , diff --git a/package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx b/package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx index 2f2b7b11d9..f29c9754de 100644 --- a/package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx +++ b/package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { type ComponentProps } from 'react'; import { Text } from 'react-native'; import { render } from '@testing-library/react-native'; @@ -7,13 +7,19 @@ import type { Channel } from 'stream-chat'; import { ThemeProvider, defaultTheme } from '../../../contexts'; import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext'; import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems'; +import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList'; import type { ChannelDetailsHeaderProps } from '../ChannelDetailsBottomSheet'; import { ChannelDetailsBottomSheet } from '../ChannelDetailsBottomSheet'; -const mockStreamBottomSheetModalFlatList = jest.fn(() => null); +type StreamBottomSheetModalFlatListProps = ComponentProps; + +const mockStreamBottomSheetModalFlatList = jest.fn( + // eslint-disable-next-line @typescript-eslint/no-unused-vars + (_props: StreamBottomSheetModalFlatListProps) => null, +); jest.mock('../../UIComponents/StreamBottomSheetModalFlatList', () => ({ - StreamBottomSheetModalFlatList: (...args: unknown[]) => + StreamBottomSheetModalFlatList: (...args: [StreamBottomSheetModalFlatListProps]) => mockStreamBottomSheetModalFlatList(...args), })); @@ -73,7 +79,11 @@ describe('ChannelDetailsBottomSheet', () => { ); expect(mockStreamBottomSheetModalFlatList).toHaveBeenCalled(); - const flatListProps = mockStreamBottomSheetModalFlatList.mock.calls[0]?.[0]; + const flatListProps = ( + mockStreamBottomSheetModalFlatList.mock.calls[0] as unknown as [ + StreamBottomSheetModalFlatListProps, + ] + )?.[0]; expect(flatListProps).toEqual( expect.objectContaining({ onEndReached, diff --git a/package/src/components/ChannelPreview/__tests__/ChannelPreview.test.tsx b/package/src/components/ChannelPreview/__tests__/ChannelPreview.test.tsx index fbf44b83ac..011e1237d0 100644 --- a/package/src/components/ChannelPreview/__tests__/ChannelPreview.test.tsx +++ b/package/src/components/ChannelPreview/__tests__/ChannelPreview.test.tsx @@ -41,7 +41,8 @@ const mockChannelSwipableWrapper = jest.fn(({ children }: React.PropsWithChildre )); jest.mock('../ChannelSwipableWrapper', () => ({ - ChannelSwipableWrapper: (...args: unknown[]) => mockChannelSwipableWrapper(...args), + ChannelSwipableWrapper: (...args: [React.PropsWithChildren]) => + mockChannelSwipableWrapper(...args), })); const ChannelPreviewUIComponent = (props: ChannelPreviewUIComponentProps) => { @@ -56,7 +57,7 @@ const ChannelPreviewUIComponent = (props: ChannelPreviewUIComponentProps) => { const initChannelFromData = async ( chatClient: StreamChat, - overrides: Record = {}, + overrides: Parameters[0] = {}, ) => { const mockedChannel = generateChannelResponse(overrides); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); @@ -84,21 +85,27 @@ describe('ChannelPreview', () => { return ( - + + >, + }} + > ); }; - const generateChannelWrapper = (overrides: Record) => + const generateChannelWrapper = (overrides: Partial) => generateChannel({ countUnread: jest.fn().mockReturnValue(0), initialized: true, lastMessage: jest.fn().mockReturnValue(generateMessage()), muteStatus: jest.fn().mockReturnValue({ muted: false }), ...overrides, - }); + } as unknown as Parameters[0]); const useInitializeChannel = async (c: GetOrCreateChannelApiParams) => { useMockedApis(chatClient, [getOrCreateChannelApi(c)]); @@ -308,7 +315,7 @@ describe('ChannelPreview', () => { const c = generateChannelResponse(); await useInitializeChannel(c); - channel.muteStatus = jest.fn().mockReturnValue({ muted: true }); + if (channel) channel.muteStatus = jest.fn().mockReturnValue({ muted: true }); const { getByTestId } = render(); @@ -362,7 +369,7 @@ describe('ChannelPreview', () => { }); await waitFor(() => { - expect(getByTestId('latest-message')).toHaveTextContent(message.text); + expect(getByTestId('latest-message')).toHaveTextContent(message.text as string); }); }); @@ -400,7 +407,9 @@ describe('ChannelPreview', () => { }, text: 'Hello world!', }; - const channel = generateChannelResponse({ messages: [message] }); + const channel = generateChannelResponse({ + messages: [message] as unknown as GetOrCreateChannelApiParams['messages'], + }); await useInitializeChannel(channel); const { getByText } = render(); @@ -435,10 +444,12 @@ describe('ChannelPreview', () => { return ( ['overrides'] + } > { const clientUser = generateUser(); - let chatClient; - let channel; + let chatClient: StreamChat; + let channel: ChannelType | null; - const getComponent = (props = {}) => ( + const getComponent = (props: Partial> = {}) => ( - + ); - const initializeChannel = async (c) => { + const initializeChannel = async (c: ReturnType) => { useMockedApis(chatClient, [getOrCreateChannelApi(c)]); channel = chatClient.channel('messaging'); @@ -60,12 +45,7 @@ describe('ChannelPreviewView', () => { const onSelect = jest.fn(); await initializeChannel(generateChannelResponse()); - render( - getComponent({ - onSelect, - watchers: {}, - }), - ); + render(getComponent({ onSelect })); await waitFor(() => screen.getByTestId('channel-preview-button')); @@ -101,7 +81,7 @@ describe('ChannelPreviewView', () => { ); render(getComponent()); - const expectedDisplayName = `${m1.user.name}, ${m2.user.name}, ${m3.user.name}`; + const expectedDisplayName = `${m1.user!.name}, ${m2.user!.name}, ${m3.user!.name}`; await waitFor(() => screen.queryByText(expectedDisplayName)); }); @@ -110,12 +90,7 @@ describe('ChannelPreviewView', () => { const message = generateMessage(); await initializeChannel(generateChannelResponse()); - render( - getComponent({ - latestMessage: message, - latestMessageLength: 6, - }), - ); + render(getComponent()); const expectedMessagePreview = truncate(message.text, { length: 6 }); await waitFor(() => screen.queryByText(expectedMessagePreview)); diff --git a/package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx b/package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx index 4af7299bf4..180a32a952 100644 --- a/package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx +++ b/package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { type ComponentProps } from 'react'; import { Text } from 'react-native'; import { act, render } from '@testing-library/react-native'; @@ -8,6 +8,7 @@ import { WithComponents } from '../../../contexts/componentsContext/ComponentsCo import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems'; import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems'; import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions'; +import { SwipableWrapper } from '../../UIComponents/SwipableWrapper'; import { ChannelSwipableWrapper } from '../ChannelSwipableWrapper'; import * as UseIsChannelMutedModule from '../hooks/useIsChannelMuted'; @@ -60,7 +61,8 @@ jest.mock('../../UIComponents/SwipableWrapper', () => ({ rightActionsProbe.items = items; return null; }, - SwipableWrapper: (...args: unknown[]) => mockSwipableWrapper(...args), + SwipableWrapper: (...args: [ComponentProps]) => + mockSwipableWrapper(...args), })); describe('ChannelSwipableWrapper', () => { diff --git a/package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayPresence.test.tsx b/package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayPresence.test.tsx index 2d18faf99b..e818e72aaa 100644 --- a/package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayPresence.test.tsx +++ b/package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayPresence.test.tsx @@ -19,7 +19,7 @@ describe('useChannelPreviewDisplayPresence', () => { chatClient = await getTestClientWithUser({ id: currentUserId, userID: currentUserId, - }); + } as unknown as Parameters[0]); // Create mock channel mockChannel = { diff --git a/package/src/components/Chat/__tests__/Chat.test.js b/package/src/components/Chat/__tests__/Chat.test.tsx similarity index 78% rename from package/src/components/Chat/__tests__/Chat.test.js rename to package/src/components/Chat/__tests__/Chat.test.tsx index 44d1c049db..945e04b376 100644 --- a/package/src/components/Chat/__tests__/Chat.test.js +++ b/package/src/components/Chat/__tests__/Chat.test.tsx @@ -5,8 +5,10 @@ import NetInfo from '@react-native-community/netinfo'; import { act, cleanup, render, waitFor } from '@testing-library/react-native'; +import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext'; import { useChatContext } from '../../../contexts/chatContext/ChatContext'; +import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged'; import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered'; @@ -14,12 +16,12 @@ import { getTestClient, getTestClientWithUser, setUser } from '../../../mock-bui import { Streami18n } from '../../../utils/i18n/Streami18n'; import { Chat } from '../Chat'; -const ChatContextConsumer = ({ fn }) => { +const ChatContextConsumer = ({ fn }: { fn: (ctx: ChatContextValue) => void }) => { fn(useChatContext()); return ; }; -const TranslationContextConsumer = ({ fn }) => { +const TranslationContextConsumer = ({ fn }: { fn: (ctx: TranslationContextValue) => void }) => { fn(useTranslationContext()); return ; }; @@ -42,7 +44,7 @@ describe('Chat', () => { }); it('listens and updates state on a connection changed event', async () => { - let context; + let context: ChatContextValue = {} as ChatContextValue; render( @@ -65,7 +67,7 @@ describe('Chat', () => { }); it('listens and updates state on a connection recovered event', async () => { - let context; + let context: ChatContextValue = {} as ChatContextValue; render( @@ -87,7 +89,7 @@ describe('ChatContext', () => { afterEach(cleanup); const chatClient = getTestClient(); it('exposes the chat context', async () => { - let context; + let context: ChatContextValue = {} as ChatContextValue; render( @@ -109,7 +111,7 @@ describe('ChatContext', () => { }); it('calls setActiveChannel to set a new channel in context', async () => { - let context; + let context: ChatContextValue = {} as ChatContextValue; render( @@ -124,7 +126,11 @@ describe('ChatContext', () => { const channel = { cid: 'cid', id: 'cid', query: jest.fn() }; await waitFor(() => expect(context.channel).toBeUndefined()); - act(() => context.setActiveChannel(channel)); + act(() => + context.setActiveChannel( + channel as unknown as Parameters[0], + ), + ); await waitFor(() => expect(context.channel).toStrictEqual(channel)); }); @@ -138,7 +144,7 @@ describe('TranslationContext', () => { const chatClient = getTestClient(); it('exposes the translation context', async () => { - let context; + let context: TranslationContextValue = {} as TranslationContextValue; render( @@ -158,12 +164,12 @@ describe('TranslationContext', () => { }); it('uses the i18nInstance provided in props', async () => { - let context; + let context: TranslationContextValue = {} as TranslationContextValue; const i18nInstance = new Streami18n(); const { t, tDateTimeParser } = await i18nInstance.getTranslators(); - i18nInstance.t = () => 't'; - i18nInstance.tDateTimeParser = () => 'tDateTimeParser'; + i18nInstance.t = (() => 't') as typeof i18nInstance.t; + i18nInstance.tDateTimeParser = (() => 'tDateTimeParser') as typeof i18nInstance.tDateTimeParser; render( @@ -184,11 +190,11 @@ describe('TranslationContext', () => { }); it('updates the context when props change', async () => { - let context; + let context: TranslationContextValue = {} as TranslationContextValue; const i18nInstance = new Streami18n(); - i18nInstance.t = () => 't'; - i18nInstance.tDateTimeParser = () => 'tDateTimeParser'; + i18nInstance.t = (() => 't') as typeof i18nInstance.t; + i18nInstance.tDateTimeParser = (() => 'tDateTimeParser') as typeof i18nInstance.tDateTimeParser; const { rerender } = render( @@ -207,8 +213,9 @@ describe('TranslationContext', () => { const newI18nInstance = new Streami18n(); - newI18nInstance.t = () => 'newT'; - newI18nInstance.tDateTimeParser = () => 'newtDateTimeParser'; + newI18nInstance.t = (() => 'newT') as typeof newI18nInstance.t; + newI18nInstance.tDateTimeParser = (() => + 'newtDateTimeParser') as typeof newI18nInstance.tDateTimeParser; rerender( @@ -233,15 +240,15 @@ describe('TranslationContext', () => { // initial mount and render const { rerender } = render(); - let unsubscribeSpy; - let listenersAfterInitialMount; - const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init'); + let unsubscribeSpy: jest.SpyInstance | undefined; + let listenersAfterInitialMount: Array = []; + const initSpy = jest.spyOn(chatClientWithUser.offlineDb!.syncManager, 'init'); await waitFor(() => { // the unsubscribe fn changes during init(), so we keep a reference to the spy unsubscribeSpy = jest.spyOn( - chatClientWithUser.offlineDb.syncManager.connectionChangedListener, - 'unsubscribe', + chatClientWithUser.offlineDb!.syncManager.connectionChangedListener as object, + 'unsubscribe' as never, ); listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed']; }); @@ -264,15 +271,15 @@ describe('TranslationContext', () => { // initial render const { rerender } = render(); - let unsubscribeSpy; - let listenersAfterInitialMount; - const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init'); + let unsubscribeSpy: jest.SpyInstance | undefined; + let listenersAfterInitialMount: Array = []; + const initSpy = jest.spyOn(chatClientWithUser.offlineDb!.syncManager, 'init'); await waitFor(() => { // the unsubscribe fn changes during init(), so we keep a reference to the spy unsubscribeSpy = jest.spyOn( - chatClientWithUser.offlineDb.syncManager.connectionChangedListener, - 'unsubscribe', + chatClientWithUser.offlineDb!.syncManager.connectionChangedListener as object, + 'unsubscribe' as never, ); listenersAfterInitialMount = chatClientWithUser.listeners['connection.changed']; }); @@ -299,14 +306,14 @@ describe('TranslationContext', () => { // initial render const { rerender } = render(); - let unsubscribeSpy; - const initSpy = jest.spyOn(chatClientWithUser.offlineDb.syncManager, 'init'); + let unsubscribeSpy: jest.SpyInstance | undefined; + const initSpy = jest.spyOn(chatClientWithUser.offlineDb!.syncManager, 'init'); await waitFor(() => { // the unsubscribe fn changes during init(), so we keep a reference to the spy unsubscribeSpy = jest.spyOn( - chatClientWithUser.offlineDb.syncManager.connectionChangedListener, - 'unsubscribe', + chatClientWithUser.offlineDb!.syncManager.connectionChangedListener as object, + 'unsubscribe' as never, ); }); diff --git a/package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx b/package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx index dcdcb2b959..75d9903c5a 100644 --- a/package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx +++ b/package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx @@ -88,15 +88,13 @@ describe('ImageGallery', () => { it('render image gallery component', async () => { render( , ); @@ -111,11 +109,9 @@ describe('ImageGallery', () => { render( , ); diff --git a/package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx b/package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx index 0ba68f73de..db8aa4d513 100644 --- a/package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx +++ b/package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx @@ -4,7 +4,7 @@ import type { SharedValue } from 'react-native-reanimated'; import { render, screen, userEvent, waitFor } from '@testing-library/react-native'; -import { Attachment, LocalMessage } from 'stream-chat'; +import { Attachment } from 'stream-chat'; import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext'; import { @@ -53,7 +53,7 @@ const ImageGalleryComponentVideo = (props: ImageGalleryProps) => { messages: [ generateMessage({ attachments: [attachment], - }) as unknown as LocalMessage, + }), ], selectedAttachmentUrl: attachment.asset_url, }); @@ -95,7 +95,7 @@ const ImageGalleryComponentImage = ( messages: [ generateMessage({ attachments: [props.attachment], - }) as unknown as LocalMessage, + }), ], selectedAttachmentUrl: props.attachment.image_url as string, }); diff --git a/package/src/components/ImageGallery/__tests__/ImageGalleryGrid.test.tsx b/package/src/components/ImageGallery/__tests__/ImageGalleryGrid.test.tsx index c674c70fa9..88e6a194cf 100644 --- a/package/src/components/ImageGallery/__tests__/ImageGalleryGrid.test.tsx +++ b/package/src/components/ImageGallery/__tests__/ImageGalleryGrid.test.tsx @@ -17,7 +17,8 @@ import { } from '../../../mock-builders/generator/attachment'; import { generateMessage } from '../../../mock-builders/generator/message'; import { ImageGalleryStateStore } from '../../../state-store/image-gallery-state-store'; -import { ImageGalleryGrid, ImageGalleryGridProps } from '../components/ImageGrid'; +import { ImageGalleryGrid } from '../components/ImageGrid'; +import type { ImageGalleryGridProps } from '../components/types'; const ImageGalleryGridComponent = ( props: Partial & { message: LocalMessage }, @@ -54,7 +55,7 @@ describe('ImageGalleryGrid', () => { it('should render ImageGalleryGrid', async () => { const message = generateMessage({ attachments: [generateImageAttachment(), generateImageAttachment()], - }) as unknown as LocalMessage; + }); render(); @@ -66,7 +67,7 @@ describe('ImageGalleryGrid', () => { it('should render ImageGalleryGrid individual images', async () => { const message = generateMessage({ attachments: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })], - }) as unknown as LocalMessage; + }); render(); @@ -81,7 +82,7 @@ describe('ImageGalleryGrid', () => { const message = generateMessage({ attachments: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })], - }) as unknown as LocalMessage; + }); render(); diff --git a/package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx b/package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx index 5ef31d5557..d3ae35bd5f 100644 --- a/package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx +++ b/package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx @@ -4,8 +4,6 @@ import type { SharedValue } from 'react-native-reanimated'; import { render, screen, userEvent, waitFor } from '@testing-library/react-native'; -import { LocalMessage } from 'stream-chat'; - import { ImageGalleryHeader as ImageGalleryHeaderDefault } from '../../../components/ImageGallery/components/ImageGalleryHeader'; import { ImageGalleryContext, @@ -36,7 +34,7 @@ const ImageGalleryComponent = (props: ImageGalleryProps) => { const [imageGalleryStateStore] = useState(() => new ImageGalleryStateStore()); const attachment = generateImageAttachment(); imageGalleryStateStore.openImageGallery({ - messages: [generateMessage({ attachments: [attachment] }) as unknown as LocalMessage], + messages: [generateMessage({ attachments: [attachment] })], selectedAttachmentUrl: attachment.image_url, }); @@ -77,9 +75,12 @@ describe('ImageGalleryHeader', () => { const setOverlayMock = jest.fn(); const user = userEvent.setup(); - jest.spyOn(overlayContext, 'useOverlayContext').mockImplementation(() => ({ - setOverlay: setOverlayMock, - })); + jest.spyOn(overlayContext, 'useOverlayContext').mockImplementation( + () => + ({ + setOverlay: setOverlayMock, + }) as unknown as ReturnType, + ); render(); diff --git a/package/src/components/ImageGallery/components/__tests__/ImageGalleryHeader.test.tsx b/package/src/components/ImageGallery/components/__tests__/ImageGalleryHeader.test.tsx index 41bffa5fb1..808cf5847a 100644 --- a/package/src/components/ImageGallery/components/__tests__/ImageGalleryHeader.test.tsx +++ b/package/src/components/ImageGallery/components/__tests__/ImageGalleryHeader.test.tsx @@ -3,8 +3,6 @@ import { SharedValue, useSharedValue } from 'react-native-reanimated'; import { render, renderHook, waitFor } from '@testing-library/react-native'; -import { LocalMessage } from 'stream-chat'; - import { ImageGalleryContext, ImageGalleryContextValue, @@ -19,11 +17,14 @@ const ImageGalleryComponentWrapper = ({ children }: PropsWithChildren) => { const initialImageGalleryStateStore = new ImageGalleryStateStore(); const attachment = generateImageAttachment(); initialImageGalleryStateStore.openImageGallery({ - message: generateMessage({ - attachments: [attachment], - user: {}, - }) as unknown as LocalMessage, - selectedAttachmentUrl: attachment.url, + messages: [ + generateMessage({ + attachments: [attachment], + // eslint-disable-next-line @typescript-eslint/no-explicit-any + user: {} as any, + }), + ], + selectedAttachmentUrl: (attachment as unknown as { url?: string }).url, }); const [imageGalleryStateStore] = useState(initialImageGalleryStateStore); @@ -49,12 +50,7 @@ it('doesnt fail if fromNow is not available on first render', async () => { }); const { getAllByText } = render( - + , ); await waitFor(() => { diff --git a/package/src/components/Message/MessageItemView/__tests__/Message.test.js b/package/src/components/Message/MessageItemView/__tests__/Message.test.tsx similarity index 84% rename from package/src/components/Message/MessageItemView/__tests__/Message.test.js rename to package/src/components/Message/MessageItemView/__tests__/Message.test.tsx index 9a87d7f7b8..8c42546e19 100644 --- a/package/src/components/Message/MessageItemView/__tests__/Message.test.js +++ b/package/src/components/Message/MessageItemView/__tests__/Message.test.tsx @@ -4,7 +4,9 @@ import { Pressable, Text, View } from 'react-native'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; +import type { ComponentOverrides } from '../../../../contexts/componentsContext/ComponentsContext'; import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext'; import { useMessageContext } from '../../../../contexts/messageContext/MessageContext'; import { MessageListItemProvider } from '../../../../contexts/messageListItemContext/MessageListItemContext'; @@ -24,7 +26,7 @@ import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles import { Message } from '../../Message'; import { MessageOverlayWrapper } from '../../MessageOverlayWrapper'; -const OverlayStateText = ({ label }) => { +const OverlayStateText = ({ label }: { label: string }) => { const shouldUseOverlayStyles = useShouldUseOverlayStyles(); return {`${label}:${shouldUseOverlayStyles ? 'overlay' : 'normal'}`}; @@ -54,9 +56,14 @@ const CustomMessageItemView = () => ( ); describe('Message', () => { - let channel; - let chatClient; - let renderMessage; + let channel: ChannelType; + let chatClient: StreamChat; + let renderMessage: ( + options: Omit, 'groupStyles'> & + Partial, 'groupStyles'>>, + channelProps?: Partial>, + componentOverrides?: ComponentOverrides, + ) => ReturnType; const user = generateUser({ id: 'id', name: 'name' }); const messages = [generateMessage({ user })]; @@ -70,19 +77,21 @@ describe('Message', () => { chatClient = await getTestClientWithUser(user); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - channel = chatClient.channel('messaging', mockedChannel.id); + channel = chatClient.channel('messaging', mockedChannel.channel.id); renderMessage = (options, channelProps, componentOverrides) => render( ['value'] + } > {componentOverrides ? ( diff --git a/package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.js b/package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.tsx similarity index 72% rename from package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.js rename to package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.tsx index 115c505911..49fbcbdb8e 100644 --- a/package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.js +++ b/package/src/components/Message/MessageItemView/__tests__/MessageAuthor.test.tsx @@ -1,7 +1,10 @@ import React from 'react'; import { cleanup, render, screen, waitFor } from '@testing-library/react-native'; +import type { StreamChat } from 'stream-chat'; +import type { DeepPartial } from '../../../../contexts/themeContext/ThemeContext'; +import type { Theme } from '../../../../contexts/themeContext/utils/theme'; import { defaultTheme } from '../../../../contexts/themeContext/utils/theme'; import { generateMessage, @@ -15,7 +18,7 @@ import { MessageAuthor } from '../MessageAuthor'; afterEach(cleanup); describe('MessageAuthor', () => { - let chatClient; + let chatClient: StreamChat; beforeEach(async () => { chatClient = await getTestClientWithUser({ id: 'me' }); @@ -27,8 +30,8 @@ describe('MessageAuthor', () => { user: { ...staticUser, image: undefined }, }); render( - - + }> + , ); @@ -37,8 +40,8 @@ describe('MessageAuthor', () => { }); screen.rerender( - - + }> + , ); @@ -52,13 +55,8 @@ describe('MessageAuthor', () => { }); screen.rerender( - - + }> + , ); diff --git a/package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js b/package/src/components/Message/MessageItemView/__tests__/MessageContent.test.tsx similarity index 94% rename from package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js rename to package/src/components/Message/MessageItemView/__tests__/MessageContent.test.tsx index 5a2195d00a..7d44fbe0d3 100644 --- a/package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js +++ b/package/src/components/Message/MessageItemView/__tests__/MessageContent.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; import { cleanup, render, screen, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext'; import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext'; @@ -22,10 +23,16 @@ import { getTestClientWithUser } from '../../../../mock-builders/mock'; import { Channel } from '../../../Channel/Channel'; import { Chat } from '../../../Chat/Chat'; import { Message } from '../../Message'; +import type { MessageFooterProps } from '../MessageFooter'; +import type { MessageHeaderProps } from '../MessageHeader'; + describe('MessageContent', () => { - let channel; - let chatClient; - let renderMessage; + let channel: ChannelType; + let chatClient: StreamChat; + let renderMessage: ( + options: Omit, 'groupStyles'> & + Partial, 'groupStyles'>>, + ) => ReturnType; const user = generateUser({ id: 'id', name: 'name' }); const messages = [generateMessage({ user })]; @@ -39,7 +46,7 @@ describe('MessageContent', () => { chatClient = await getTestClientWithUser(user); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - channel = chatClient.channel('messaging', mockedChannel.id); + channel = chatClient.channel('messaging', mockedChannel.channel.id); renderMessage = (options) => render( @@ -112,7 +119,9 @@ describe('MessageContent', () => { const user = generateUser(); const message = generateMessage({ user }); - const ContextMessageHeader = (props) => ; + const ContextMessageHeader = (props: MessageHeaderProps) => ( + + ); render( @@ -136,7 +145,9 @@ describe('MessageContent', () => { const user = generateUser(); const message = generateMessage({ user }); - const ContextMessageFooter = (props) => ; + const ContextMessageFooter = (props: MessageFooterProps) => ( + + ); render( @@ -272,10 +283,7 @@ describe('MessageContent', () => { const user = generateUser(); const message = generateMessage({ user }); - renderMessage({ - message, - MessageFooter: null, - }); + renderMessage({ message }); await waitFor(() => { expect(screen.getByTestId('message-content-wrapper')).toBeTruthy(); @@ -441,7 +449,9 @@ describe('MessageContent', () => { const user = generateUser(); const reaction = generateReaction(); const message = generateMessage({ - reaction_groups: { [reaction.type]: reaction }, + reaction_groups: { [reaction.type]: reaction } as unknown as ReturnType< + typeof generateMessage + >['reaction_groups'], user, }); @@ -449,7 +459,7 @@ describe('MessageContent', () => { - + , diff --git a/package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js b/package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.tsx similarity index 94% rename from package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js rename to package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.tsx index 21f212cabf..2f0ef73c7e 100644 --- a/package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js +++ b/package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.tsx @@ -4,8 +4,10 @@ import { StyleSheet, Text } from 'react-native'; import { GestureDetector } from 'react-native-gesture-handler'; import { cleanup, render, screen, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext'; +import type { ComponentOverrides } from '../../../../contexts/componentsContext/ComponentsContext'; import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext'; import { useMessageContext } from '../../../../contexts/messageContext/MessageContext'; @@ -25,9 +27,14 @@ import { Chat } from '../../../Chat/Chat'; import { Message } from '../../Message'; describe('MessageItemView', () => { - let channel; - let chatClient; - let renderMessage; + let channel: ChannelType; + let chatClient: StreamChat; + let renderMessage: ( + options: Omit, 'groupStyles'> & + Partial, 'groupStyles'>>, + channelProps?: Partial>, + componentOverrides?: ComponentOverrides, + ) => ReturnType; const user = generateUser({ id: 'id', name: 'name' }); const messages = [generateMessage({ user })]; @@ -41,7 +48,7 @@ describe('MessageItemView', () => { chatClient = await getTestClientWithUser(user); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - channel = chatClient.channel('messaging', mockedChannel.id); + channel = chatClient.channel('messaging', mockedChannel.channel.id); renderMessage = (options, channelProps, componentOverrides) => render( diff --git a/package/src/components/Message/MessageItemView/__tests__/MessagePinnedHeader.test.js b/package/src/components/Message/MessageItemView/__tests__/MessagePinnedHeader.test.tsx similarity index 80% rename from package/src/components/Message/MessageItemView/__tests__/MessagePinnedHeader.test.js rename to package/src/components/Message/MessageItemView/__tests__/MessagePinnedHeader.test.tsx index c8b28a20a7..9e3c7d487e 100644 --- a/package/src/components/Message/MessageItemView/__tests__/MessagePinnedHeader.test.js +++ b/package/src/components/Message/MessageItemView/__tests__/MessagePinnedHeader.test.tsx @@ -2,7 +2,9 @@ import React from 'react'; import { cleanup, render, screen, waitFor } from '@testing-library/react-native'; +import type { DeepPartial } from '../../../../contexts/themeContext/ThemeContext'; import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext'; +import type { Theme } from '../../../../contexts/themeContext/utils/theme'; import { defaultTheme } from '../../../../contexts/themeContext/utils/theme'; import { generateMessage, @@ -21,7 +23,7 @@ describe('MessagePinnedHeader', () => { pinned: true, }); render( - + }> , ); @@ -31,7 +33,7 @@ describe('MessagePinnedHeader', () => { }); screen.rerender( - + }> , ); @@ -42,7 +44,7 @@ describe('MessagePinnedHeader', () => { }); screen.rerender( - + }> , ); diff --git a/package/src/components/Message/MessageItemView/__tests__/MessageReplies.test.js b/package/src/components/Message/MessageItemView/__tests__/MessageReplies.test.tsx similarity index 66% rename from package/src/components/Message/MessageItemView/__tests__/MessageReplies.test.js rename to package/src/components/Message/MessageItemView/__tests__/MessageReplies.test.tsx index 41207aa481..4f2c7963e3 100644 --- a/package/src/components/Message/MessageItemView/__tests__/MessageReplies.test.js +++ b/package/src/components/Message/MessageItemView/__tests__/MessageReplies.test.tsx @@ -2,13 +2,15 @@ import React from 'react'; import { cleanup, render, screen, userEvent, waitFor } from '@testing-library/react-native'; +import type { DeepPartial } from '../../../../contexts/themeContext/ThemeContext'; import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext'; +import type { Theme } from '../../../../contexts/themeContext/utils/theme'; import { defaultTheme } from '../../../../contexts/themeContext/utils/theme'; +import type { TranslationContextValue } from '../../../../contexts/translationContext/TranslationContext'; import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext'; import { generateMessage } from '../../../../mock-builders/generator/message'; import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user'; import { MessageReplies } from '../MessageReplies'; -import { MessageRepliesAvatars } from '../MessageRepliesAvatars'; afterEach(cleanup); @@ -23,15 +25,9 @@ describe('MessageReplies', () => { user: staticUser, }); render( - - - + + }> + , ); @@ -50,15 +46,9 @@ describe('MessageReplies', () => { }); screen.rerender( - - - + + }> + , ); @@ -80,14 +70,9 @@ describe('MessageReplies', () => { user, }); render( - - - null} - /> + + }> + null} /> , ); @@ -102,15 +87,9 @@ describe('MessageReplies', () => { }); screen.rerender( - - - null} - threadList - /> + + }> + null} threadList /> , ); diff --git a/package/src/components/Message/MessageItemView/__tests__/MessageStatus.test.js b/package/src/components/Message/MessageItemView/__tests__/MessageStatus.test.tsx similarity index 75% rename from package/src/components/Message/MessageItemView/__tests__/MessageStatus.test.js rename to package/src/components/Message/MessageItemView/__tests__/MessageStatus.test.tsx index dbf94316ad..e8ea53fab7 100644 --- a/package/src/components/Message/MessageItemView/__tests__/MessageStatus.test.js +++ b/package/src/components/Message/MessageItemView/__tests__/MessageStatus.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { cleanup, render, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { Channel } from '../../..'; import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext'; @@ -15,9 +16,9 @@ import { Streami18n } from '../../../../utils/i18n/Streami18n'; import { Chat } from '../../../Chat/Chat'; import { MessageStatus } from '../MessageStatus'; -let chatClient; -let i18nInstance; -let channel; +let chatClient: StreamChat; +let i18nInstance: Streami18n; +let channel: ChannelType; describe('MessageStatus', () => { const user1 = generateUser({ id: 'id1', name: 'name1' }); const user2 = generateUser({ id: 'id2', name: 'name2' }); @@ -29,7 +30,6 @@ describe('MessageStatus', () => { generateMember({ user: user3 }), ]; beforeAll(() => { - id = 'testID'; i18nInstance = new Streami18n(); }); beforeEach(async () => { @@ -41,13 +41,18 @@ describe('MessageStatus', () => { chatClient = await getTestClientWithUser(user1); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - channel = chatClient.channel('messaging', mockedChannel.id); + channel = chatClient.channel('messaging', mockedChannel.channel.id); - channel.state.members = Object.fromEntries(members.map((member) => [member.user_id, member])); + channel.state.members = Object.fromEntries( + members.map((member) => [member.user_id, member]), + ) as unknown as typeof channel.state.members; }); afterEach(cleanup); - renderMessageStatus = (options, channelProps) => + const renderMessageStatus = ( + options: Partial>, + channelProps?: Partial>, + ) => render( @@ -58,7 +63,12 @@ describe('MessageStatus', () => { , ); - it.each('should render message status with read by container', async () => { + // NOTE: Original source had `it.each('string', async () => { ... })` which was a + // malformed `it.each` call (string-as-iterable), so Jest never actually executed + // the test body. Preserving that behavior here by skipping: re-enabling would + // introduce a new failing test assertion that does not match current component + // output (component renders icons, not text readCount). See migration PR notes. + it.skip('should render message status with read by container', async () => { const user = generateUser(); const message = generateMessage({ user }); const readBy = 2; @@ -74,7 +84,7 @@ describe('MessageStatus', () => { }); const staticUser = generateStaticUser(0); - const staticMessage = generateMessage({ readBy, user: staticUser }); + const staticMessage = generateMessage({ user: staticUser }); rerender( @@ -97,7 +107,7 @@ describe('MessageStatus', () => { [2, 2, 'received', 'Read'], [1, 1, 'received', 'Sent'], [2, 1, 'received', 'Delivered'], - ])( + ] as [number, number, string, string][])( 'should render message status with %s container when deliveredToCount is %s and readBy is %s and status is %s', async (deliveredToCount, readBy, status, accessibilityLabel) => { const user = generateUser(); diff --git a/package/src/components/Message/MessageItemView/__tests__/MessageTextContainer.test.tsx b/package/src/components/Message/MessageItemView/__tests__/MessageTextContainer.test.tsx index 0caded18fc..dc0684ef8b 100644 --- a/package/src/components/Message/MessageItemView/__tests__/MessageTextContainer.test.tsx +++ b/package/src/components/Message/MessageItemView/__tests__/MessageTextContainer.test.tsx @@ -3,8 +3,6 @@ import { Text } from 'react-native'; import { cleanup, render, waitFor } from '@testing-library/react-native'; -import { LocalMessage } from 'stream-chat'; - import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext'; import { OverlayProvider } from '../../../../contexts/overlayContext/OverlayProvider'; import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext'; @@ -33,13 +31,13 @@ describe('MessageTextContainer', () => { }); const { getByTestId, getByText, rerender, toJSON } = render( - + , ); await waitFor(() => { expect(getByTestId('message-text-container')).toBeTruthy(); - expect(getByText(message.text)).toBeTruthy(); + expect(getByText(message.text as string)).toBeTruthy(); }); rerender( @@ -49,7 +47,7 @@ describe('MessageTextContainer', () => { MessageText: ({ message }) => {message?.text}, }} > - + , ); @@ -57,7 +55,7 @@ describe('MessageTextContainer', () => { await waitFor(() => { expect(getByTestId('message-text-container')).toBeTruthy(); expect(getByTestId('message-text')).toBeTruthy(); - expect(getByText(message.text)).toBeTruthy(); + expect(getByText(message.text as string)).toBeTruthy(); }); const staticMessage = generateStaticMessage('Hello World', { @@ -66,7 +64,7 @@ describe('MessageTextContainer', () => { rerender( - + , ); @@ -87,7 +85,9 @@ describe('MessageTextContainer', () => { const mockedChannel = generateChannelResponse({ id: 'chans', - messages: [message], + messages: [message] as unknown as NonNullable< + Parameters[0] + >['messages'], }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); diff --git a/package/src/components/Message/MessageItemView/__tests__/ReactionListBottom.test.js b/package/src/components/Message/MessageItemView/__tests__/ReactionListBottom.test.tsx similarity index 84% rename from package/src/components/Message/MessageItemView/__tests__/ReactionListBottom.test.js rename to package/src/components/Message/MessageItemView/__tests__/ReactionListBottom.test.tsx index 3e462f9caa..6ff6d39dae 100644 --- a/package/src/components/Message/MessageItemView/__tests__/ReactionListBottom.test.js +++ b/package/src/components/Message/MessageItemView/__tests__/ReactionListBottom.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext'; @@ -17,9 +18,13 @@ import { Chat } from '../../../Chat/Chat'; import { Message } from '../../Message'; describe('ReactionListBottom', () => { - let channel; - let chatClient; - let renderMessage; + let channel: ChannelType; + let chatClient: StreamChat; + let renderMessage: ( + options: Omit, 'groupStyles'> & + Partial, 'groupStyles'>>, + channelProps?: Partial>, + ) => ReturnType; const user = generateUser({ id: 'id', name: 'name' }); const messages = [generateMessage({ user })]; @@ -33,7 +38,7 @@ describe('ReactionListBottom', () => { chatClient = await getTestClientWithUser(user); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - channel = chatClient.channel('messaging', mockedChannel.id); + channel = chatClient.channel('messaging', mockedChannel.channel.id); renderMessage = (options, channelProps) => render( @@ -56,7 +61,9 @@ describe('ReactionListBottom', () => { const user = generateUser(); const reaction = generateReaction(); const message = generateMessage({ - reaction_groups: { [reaction.type]: reaction }, + reaction_groups: { [reaction.type]: reaction } as unknown as ReturnType< + typeof generateMessage + >['reaction_groups'], user, }); @@ -71,7 +78,9 @@ describe('ReactionListBottom', () => { const user = generateUser(); const reaction = generateReaction(); const message = generateMessage({ - reaction_groups: { [reaction.type]: reaction }, + reaction_groups: { [reaction.type]: reaction } as unknown as ReturnType< + typeof generateMessage + >['reaction_groups'], user, }); @@ -145,7 +154,9 @@ describe('ReactionListBottom', () => { const user = generateUser(); const reaction = generateReaction(); const message = generateMessage({ - reaction_groups: { [reaction.type]: reaction }, + reaction_groups: { [reaction.type]: reaction } as unknown as ReturnType< + typeof generateMessage + >['reaction_groups'], user, }); @@ -153,7 +164,7 @@ describe('ReactionListBottom', () => { { handleReaction: handleReactionMock, message, - }, + } as unknown as React.ComponentProps, { reactionListPosition: 'bottom', reactionListType: 'segmented' }, ); diff --git a/package/src/components/Message/MessageItemView/__tests__/ReactionListTop.test.js b/package/src/components/Message/MessageItemView/__tests__/ReactionListTop.test.tsx similarity index 87% rename from package/src/components/Message/MessageItemView/__tests__/ReactionListTop.test.js rename to package/src/components/Message/MessageItemView/__tests__/ReactionListTop.test.tsx index e6007a780a..344e2489e7 100644 --- a/package/src/components/Message/MessageItemView/__tests__/ReactionListTop.test.js +++ b/package/src/components/Message/MessageItemView/__tests__/ReactionListTop.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { cleanup, render, screen, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext'; @@ -16,9 +17,12 @@ import { Chat } from '../../../Chat/Chat'; import { ReactionListTop } from '../ReactionList/ReactionListTop'; describe('ReactionListTop', () => { - let channel; - let chatClient; - let renderMessage; + let channel: ChannelType; + let chatClient: StreamChat; + let renderMessage: ( + options: React.ComponentProps, + channelProps?: Partial>, + ) => ReturnType; const user = generateUser({ id: 'id', name: 'name' }); const messages = [generateMessage({ user })]; @@ -34,7 +38,7 @@ describe('ReactionListTop', () => { chatClient = await getTestClientWithUser(user); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - channel = chatClient.channel('messaging', mockedChannel.id); + channel = chatClient.channel('messaging', mockedChannel.channel.id); renderMessage = (options, channelProps) => render( diff --git a/package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.js.snap b/package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.tsx.snap similarity index 100% rename from package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.js.snap rename to package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.tsx.snap diff --git a/package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap b/package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessagePinnedHeader.test.tsx.snap similarity index 100% rename from package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap rename to package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessagePinnedHeader.test.tsx.snap diff --git a/package/src/components/Message/MessageItemView/utils/renderText.test.tsx b/package/src/components/Message/MessageItemView/utils/renderText.test.tsx index 0d842b0734..e6f5d24301 100644 --- a/package/src/components/Message/MessageItemView/utils/renderText.test.tsx +++ b/package/src/components/Message/MessageItemView/utils/renderText.test.tsx @@ -5,8 +5,7 @@ import type { ReactTestInstance } from 'react-test-renderer'; import { render, waitFor, within } from '@testing-library/react-native'; -// @ts-ignore -import { ASTNode, SingleASTNode } from 'simple-markdown'; +import type { ASTNode, SingleASTNode } from 'simple-markdown'; import { ListOutput, ListOutputProps } from './renderText'; @@ -26,8 +25,7 @@ describe('list', () => { type: 'text', }); - // @ts-ignore - const mockOutput = (node: ASTNode) => {node}; + const mockOutput = (node: ASTNode) => {JSON.stringify(node)}; const MockText = ({ node, output, state }: ListOutputProps) => ( <> diff --git a/package/src/components/Message/MessageItemView/utils/renderText.tsx b/package/src/components/Message/MessageItemView/utils/renderText.tsx index 5ebad0f150..feb3b39f6f 100644 --- a/package/src/components/Message/MessageItemView/utils/renderText.tsx +++ b/package/src/components/Message/MessageItemView/utils/renderText.tsx @@ -11,7 +11,7 @@ import { } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; -// @ts-expect-error +// @ts-ignore -- no type definitions available for `react-native-markdown-package` import Markdown from 'react-native-markdown-package'; import Animated, { clamp, scrollTo, useAnimatedRef, useSharedValue } from 'react-native-reanimated'; diff --git a/package/src/components/Message/hooks/__tests__/useShouldUseOverlayStyles.test.tsx b/package/src/components/Message/hooks/__tests__/useShouldUseOverlayStyles.test.tsx index a8173e45f9..87294c0f3e 100644 --- a/package/src/components/Message/hooks/__tests__/useShouldUseOverlayStyles.test.tsx +++ b/package/src/components/Message/hooks/__tests__/useShouldUseOverlayStyles.test.tsx @@ -106,7 +106,7 @@ describe('useShouldUseOverlayStyles', () => { const first = renderHook(() => useShouldUseOverlayStyles(), { wrapper: createWrapper( createMessageContextValue({ - message: sharedMessage, + message: sharedMessage as unknown as MessageContextValue['message'], messageOverlayId: 'message-overlay-first', }), ), @@ -115,7 +115,7 @@ describe('useShouldUseOverlayStyles', () => { const second = renderHook(() => useShouldUseOverlayStyles(), { wrapper: createWrapper( createMessageContextValue({ - message: sharedMessage, + message: sharedMessage as unknown as MessageContextValue['message'], messageOverlayId: 'message-overlay-second', }), ), diff --git a/package/src/components/MessageInput/__tests__/AttachButton.test.js b/package/src/components/MessageInput/__tests__/AttachButton.test.tsx similarity index 91% rename from package/src/components/MessageInput/__tests__/AttachButton.test.js rename to package/src/components/MessageInput/__tests__/AttachButton.test.tsx index a4198f36f5..a28203cdcf 100644 --- a/package/src/components/MessageInput/__tests__/AttachButton.test.js +++ b/package/src/components/MessageInput/__tests__/AttachButton.test.tsx @@ -1,20 +1,30 @@ import React from 'react'; import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { OverlayProvider } from '../../../contexts'; import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels'; import * as NativeHandler from '../../../native'; +import type { ChannelProps } from '../../Channel/Channel'; import { Channel } from '../../Channel/Channel'; import { Chat } from '../../Chat/Chat'; import { AttachButton } from '../components/InputButtons/AttachButton'; -const renderComponent = ({ channelProps, client, props }) => { +const renderComponent = ({ + channelProps, + client, + props, +}: { + channelProps: Partial; + client: StreamChat; + props: React.ComponentProps; +}) => { return render( - + @@ -23,8 +33,8 @@ const renderComponent = ({ channelProps, client, props }) => { }; describe('AttachButton', () => { - let client; - let channel; + let client: StreamChat; + let channel: ChannelType; beforeEach(async () => { const { client: chatClient, channels } = await initiateClientWithChannels(); diff --git a/package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.js b/package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx similarity index 92% rename from package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.js rename to package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx index d5b9adf7b6..df959fc386 100644 --- a/package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.js +++ b/package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx @@ -1,14 +1,16 @@ -import React from 'react'; +import React, { ComponentProps } from 'react'; import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native'; +import type { Attachment, Channel as ChannelType, LocalAttachment, StreamChat } from 'stream-chat'; + import { OverlayProvider } from '../../../contexts'; import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels'; import { - generateAudioAttachment, - generateFileAttachment, - generateImageAttachment, - generateVideoAttachment, + generateAudioAttachment as generateAudioAttachmentBase, + generateFileAttachment as generateFileAttachmentBase, + generateImageAttachment as generateImageAttachmentBase, + generateVideoAttachment as generateVideoAttachmentBase, } from '../../../mock-builders/attachments'; import { FileState } from '../../../utils/utils'; @@ -16,6 +18,15 @@ import { Channel } from '../../Channel/Channel'; import { Chat } from '../../Chat/Chat'; import { AttachmentUploadPreviewList } from '../components/AttachmentPreview/AttachmentUploadPreviewList'; +const generateAudioAttachment = (a?: unknown): LocalAttachment => + generateAudioAttachmentBase(a as Partial) as unknown as LocalAttachment; +const generateFileAttachment = (a?: unknown): LocalAttachment => + generateFileAttachmentBase(a as Partial) as unknown as LocalAttachment; +const generateImageAttachment = (a?: unknown): LocalAttachment => + generateImageAttachmentBase(a as Partial) as unknown as LocalAttachment; +const generateVideoAttachment = (a?: unknown): LocalAttachment => + generateVideoAttachmentBase(a as Partial) as unknown as LocalAttachment; + jest.mock('../../../native.ts', () => { const { View } = require('react-native'); @@ -33,7 +44,15 @@ jest.mock('../../../native.ts', () => { }; }); -const renderComponent = ({ client, channel, props }) => { +const renderComponent = ({ + client, + channel, + props, +}: { + client: StreamChat; + channel: ChannelType; + props: Partial>; +}) => { return render( @@ -46,8 +65,8 @@ const renderComponent = ({ client, channel, props }) => { }; describe('AttachmentUploadPreviewList', () => { - let client; - let channel; + let client: StreamChat; + let channel: ChannelType; beforeEach(async () => { const { client: chatClient, channels } = await initiateClientWithChannels(); diff --git a/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.js b/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.tsx similarity index 89% rename from package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.js rename to package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.tsx index 8eaad78233..45569459a2 100644 --- a/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.js +++ b/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.tsx @@ -1,16 +1,21 @@ -import React from 'react'; +import React, { ComponentProps } from 'react'; import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native'; +import type { Attachment, Channel as ChannelType, LocalAttachment, StreamChat } from 'stream-chat'; + import { OverlayProvider } from '../../../contexts'; import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels'; -import { generateAudioAttachment } from '../../../mock-builders/attachments'; +import { generateAudioAttachment as generateAudioAttachmentBase } from '../../../mock-builders/attachments'; import { FileState } from '../../../utils/utils'; import { Channel } from '../../Channel/Channel'; import { Chat } from '../../Chat/Chat'; import { AttachmentUploadPreviewList } from '../components/AttachmentPreview/AttachmentUploadPreviewList'; +const generateAudioAttachment = (a?: unknown): LocalAttachment => + generateAudioAttachmentBase(a as Partial) as unknown as LocalAttachment; + jest.mock('../../../native.ts', () => { const View = require('react-native').View; @@ -28,7 +33,15 @@ jest.mock('../../../native.ts', () => { }; }); -const renderComponent = ({ client, channel, props }) => { +const renderComponent = ({ + client, + channel, + props, +}: { + client: StreamChat; + channel: ChannelType; + props: Partial>; +}) => { return render( @@ -41,8 +54,8 @@ const renderComponent = ({ client, channel, props }) => { }; describe('AudioAttachmentUploadPreview render', () => { - let client; - let channel; + let client: StreamChat; + let channel: ChannelType; beforeEach(async () => { const { client: chatClient, channels } = await initiateClientWithChannels(); diff --git a/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewExpo.test.tsx b/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewExpo.test.tsx index 73127f2680..c8342610d0 100644 --- a/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewExpo.test.tsx +++ b/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewExpo.test.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { act, fireEvent, render, screen } from '@testing-library/react-native'; +import type { LocalAudioAttachment } from 'stream-chat'; + import { MessageInputContext, MessageInputContextValue, @@ -23,9 +25,15 @@ jest.mock('../../../native.ts', () => ({ }, })); -const getComponent = ( - props: Partial>, -) => ( +type GetComponentProps = Omit, 'item'> & { + fileUploads?: unknown[]; + item?: unknown; + onLoad?: (...args: unknown[]) => unknown; + onPlayPause?: (...args: unknown[]) => unknown; + onProgress?: (...args: unknown[]) => unknown; +}; + +const getComponent = (props: GetComponentProps) => ( { const onPlayPauseMock = jest.fn(); render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], item: { file: { name: 'audio.mp3', uri: 'https://www.test.com/audio.mp3' }, paused: true, progress: 1, - } as unknown as FileUpload, + } as unknown as LocalAudioAttachment, onPlayPause: onPlayPauseMock, }), ); @@ -76,12 +88,16 @@ describe.skip('AudioAttachmentExpo', () => { const onPlayPauseMock = jest.fn(); render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], item: { file: { name: 'audio.mp3', uri: 'https://www.test.com/audio.mp3' }, paused: true, progress: 1, - } as unknown as FileUpload, + } as unknown as LocalAudioAttachment, onPlayPause: onPlayPauseMock, }), ); @@ -105,12 +121,16 @@ describe.skip('AudioAttachmentExpo', () => { const onPlayPauseMock = jest.fn(); render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], item: { file: { name: 'audio.mp3', uri: 'https://www.test.com/audio.mp3' }, paused: false, progress: 1, - } as unknown as FileUpload, + } as unknown as LocalAudioAttachment, onPlayPause: onPlayPauseMock, }), ); @@ -136,12 +156,16 @@ describe.skip('AudioAttachmentExpo', () => { const { unmount } = render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], item: { file: { name: 'audio.mp3', uri: 'https://www.test.com/audio.mp3' }, paused: false, progress: 1, - } as unknown as FileUpload, + } as unknown as LocalAudioAttachment, }), ); @@ -154,11 +178,15 @@ describe.skip('AudioAttachmentExpo', () => { it('render text in rtl mode', () => { render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], item: { file: { name: 'audio.mp3', uri: 'https://www.test.com/audio.mp3' }, progress: 1, - } as unknown as FileUpload, + } as unknown as LocalAudioAttachment, }), ); @@ -178,8 +206,12 @@ describe.skip('AudioAttachmentExpo', () => { render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], - item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload, + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], + item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment, onProgress: onProgressMock, }), ); diff --git a/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.tsx b/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.tsx index 23b319fd1a..af4cb8ad94 100644 --- a/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.tsx +++ b/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { act, fireEvent, render, screen } from '@testing-library/react-native'; +import type { LocalAudioAttachment } from 'stream-chat'; + import { MessageInputContext, MessageInputContextValue, @@ -23,9 +25,15 @@ jest.mock('../../../native.ts', () => { }; }); -const getComponent = ( - props: Partial>, -) => ( +type GetComponentProps = Omit, 'item'> & { + fileUploads?: unknown[]; + item?: unknown; + onLoad?: (...args: unknown[]) => unknown; + onPlayPause?: (...args: unknown[]) => unknown; + onProgress?: (...args: unknown[]) => unknown; +}; + +const getComponent = (props: GetComponentProps) => ( { const onPlayPauseMock = jest.fn(); render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], - item: { file: { name: 'audio.mp3' }, paused: true, progress: 1 } as unknown as FileUpload, + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], + item: { + file: { name: 'audio.mp3' }, + paused: true, + progress: 1, + } as unknown as LocalAudioAttachment, onPlayPause: onPlayPauseMock, }), ); @@ -71,8 +87,12 @@ describe.skip('AudioAttachment', () => { render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], - item: { file: { name: 'audio.mp3' }, paused: true } as unknown as FileUpload, + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], + item: { file: { name: 'audio.mp3' }, paused: true } as unknown as LocalAudioAttachment, onPlayPause: onPlayPauseMock, }), ); @@ -98,8 +118,12 @@ describe.skip('AudioAttachment', () => { render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], - item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload, + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], + item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment, onPlayPause: onPlayPauseMock, }), ); @@ -118,8 +142,12 @@ describe.skip('AudioAttachment', () => { render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], - item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload, + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], + item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment, onLoad: onLoadMock, }), ); @@ -141,8 +169,12 @@ describe.skip('AudioAttachment', () => { render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], - item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload, + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], + item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment, onPlayPause: onPlayPauseMock, onProgress: onProgressMock, }), @@ -163,8 +195,12 @@ describe.skip('AudioAttachment', () => { render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], - item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload, + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], + item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment, onProgress: onProgressMock, }), ); @@ -193,8 +229,12 @@ describe.skip('AudioAttachment', () => { render( getComponent({ - fileUploads: [generateFileUploadPreview({ type: 'audio/mp3' })], - item: { file: { name: 'audio.mp3' }, paused: false } as unknown as FileUpload, + fileUploads: [ + generateFileUploadPreview({ type: 'audio/mp3' } as unknown as Parameters< + typeof generateFileUploadPreview + >[0]), + ], + item: { file: { name: 'audio.mp3' }, paused: false } as unknown as LocalAudioAttachment, onProgress: onProgressMock, }), ); diff --git a/package/src/components/MessageInput/__tests__/InputButtons.test.js b/package/src/components/MessageInput/__tests__/InputButtons.test.tsx similarity index 84% rename from package/src/components/MessageInput/__tests__/InputButtons.test.js rename to package/src/components/MessageInput/__tests__/InputButtons.test.tsx index d25e38492d..8b5066a4f6 100644 --- a/package/src/components/MessageInput/__tests__/InputButtons.test.js +++ b/package/src/components/MessageInput/__tests__/InputButtons.test.tsx @@ -1,19 +1,29 @@ import React from 'react'; import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { OverlayProvider } from '../../../contexts'; import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels'; +import type { ChannelProps } from '../../Channel/Channel'; import { Channel } from '../../Channel/Channel'; import { Chat } from '../../Chat/Chat'; import { InputButtons } from '../components/InputButtons/index'; -const renderComponent = ({ channelProps, client, props }) => { +const renderComponent = ({ + channelProps, + client, + props, +}: { + channelProps: Partial; + client: StreamChat; + props: React.ComponentProps; +}) => { return render( - + @@ -22,8 +32,8 @@ const renderComponent = ({ channelProps, client, props }) => { }; describe('InputButtons', () => { - let client; - let channel; + let client: StreamChat; + let channel: ChannelType; beforeEach(async () => { const { client: chatClient, channels } = await initiateClientWithChannels(); diff --git a/package/src/components/MessageInput/__tests__/MessageComposer.test.js b/package/src/components/MessageInput/__tests__/MessageComposer.test.tsx similarity index 82% rename from package/src/components/MessageInput/__tests__/MessageComposer.test.js rename to package/src/components/MessageInput/__tests__/MessageComposer.test.tsx index ede84902ce..2b08d012b7 100644 --- a/package/src/components/MessageInput/__tests__/MessageComposer.test.js +++ b/package/src/components/MessageInput/__tests__/MessageComposer.test.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { Alert } from 'react-native'; import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext'; import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider'; @@ -12,32 +13,39 @@ import { initiateClientWithChannels } from '../../../mock-builders/api/initiateC import { AttachmentPickerStore } from '../../../state-store/attachment-picker-store'; import { AttachmentPickerContent } from '../../AttachmentPicker/components/AttachmentPickerContent'; import { AttachmentPickerSelectionBar } from '../../AttachmentPicker/components/AttachmentPickerSelectionBar'; +import type { ChannelProps } from '../../Channel/Channel'; import { Channel } from '../../Channel/Channel'; import { Chat } from '../../Chat/Chat'; import { MessageComposer } from '../MessageComposer'; jest.spyOn(Alert, 'alert'); -jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation( - jest.fn(() => { - const attachmentPickerStore = new AttachmentPickerStore(); - attachmentPickerStore.setSelectedPicker('images'); - return { - AttachmentPickerSelectionBar, - AttachmentPickerContent, - closePicker: jest.fn(), - openPicker: jest.fn(), - setBottomInset: jest.fn(), - setTopInset: jest.fn(), - attachmentPickerStore, - }; - }), -); - -const renderComponent = ({ channelProps, client, props }) => { +jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(() => { + const attachmentPickerStore = new AttachmentPickerStore(); + attachmentPickerStore.setSelectedPicker('images'); + return { + AttachmentPickerSelectionBar, + AttachmentPickerContent, + closePicker: jest.fn(), + openPicker: jest.fn(), + setBottomInset: jest.fn(), + setTopInset: jest.fn(), + attachmentPickerStore, + } as unknown as ReturnType; +}); + +const renderComponent = ({ + channelProps, + client, + props, +}: { + channelProps: Partial; + client: StreamChat; + props: React.ComponentProps; +}) => { return render( - + @@ -46,8 +54,8 @@ const renderComponent = ({ channelProps, client, props }) => { }; describe('MessageComposer', () => { - let client; - let channel; + let client: StreamChat; + let channel: ChannelType; beforeEach(async () => { jest.clearAllMocks(); diff --git a/package/src/components/MessageInput/__tests__/SendButton.test.js b/package/src/components/MessageInput/__tests__/SendButton.test.tsx similarity index 85% rename from package/src/components/MessageInput/__tests__/SendButton.test.js rename to package/src/components/MessageInput/__tests__/SendButton.test.tsx index f237aad828..ba6dc987ca 100644 --- a/package/src/components/MessageInput/__tests__/SendButton.test.js +++ b/package/src/components/MessageInput/__tests__/SendButton.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { OverlayProvider } from '../../../contexts'; @@ -9,12 +10,20 @@ import { Channel } from '../../Channel/Channel'; import { Chat } from '../../Chat/Chat'; import { SendButton } from '../components/OutputButtons/SendButton'; -const renderComponent = ({ client, channel, props }) => { +const renderComponent = ({ + client, + channel, + props, +}: { + channel: ChannelType; + client: StreamChat; + props: Partial>; +}) => { return render( - + )} /> , @@ -22,8 +31,8 @@ const renderComponent = ({ client, channel, props }) => { }; describe('SendButton', () => { - let client; - let channel; + let client: StreamChat; + let channel: ChannelType; beforeEach(async () => { const { client: chatClient, channels } = await initiateClientWithChannels(); diff --git a/package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.js b/package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.tsx similarity index 73% rename from package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.js rename to package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.tsx index c1feb7d108..53a486b2b0 100644 --- a/package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.js +++ b/package/src/components/MessageInput/__tests__/SendMessageDisallowedIndicator.test.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { ComponentProps } from 'react'; import { Alert } from 'react-native'; import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native'; +import type { Channel as ChannelType, StreamChat } from 'stream-chat'; import { MessageComposer as StreamMessageComposer } from 'stream-chat'; import * as AttachmentPickerUtils from '../../../contexts/attachmentPickerContext/AttachmentPickerContext'; @@ -24,23 +25,29 @@ import { Chat } from '../../Chat/Chat'; import { MessageComposer } from '../MessageComposer'; jest.spyOn(Alert, 'alert'); -jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation( - jest.fn(() => { - const attachmentPickerStore = new AttachmentPickerStore(); - attachmentPickerStore.setSelectedPicker('images'); - return { - AttachmentPickerSelectionBar, - AttachmentPickerContent, - closePicker: jest.fn(), - openPicker: jest.fn(), - setBottomInset: jest.fn(), - setTopInset: jest.fn(), - attachmentPickerStore, - }; - }), -); - -const renderComponent = ({ channelProps, client, props }) => { +jest.spyOn(AttachmentPickerUtils, 'useAttachmentPickerContext').mockImplementation(() => { + const attachmentPickerStore = new AttachmentPickerStore(); + attachmentPickerStore.setSelectedPicker('images'); + return { + AttachmentPickerSelectionBar, + AttachmentPickerContent, + closePicker: jest.fn(), + openPicker: jest.fn(), + setBottomInset: jest.fn(), + setTopInset: jest.fn(), + attachmentPickerStore, + } as unknown as ReturnType; +}); + +const renderComponent = ({ + channelProps, + client, + props, +}: { + channelProps: Partial> & { channel: ChannelType }; + client: StreamChat; + props: Partial>; +}) => { return render( @@ -52,14 +59,22 @@ const renderComponent = ({ channelProps, client, props }) => { ); }; -const editedMessageSetup = async ({ composerConfig, composition } = {}) => { +const editedMessageSetup = async ({ + composerConfig, + composition, +}: { + composerConfig?: ConstructorParameters[0]['config']; + composition?: ConstructorParameters[0]['composition']; +} = {}) => { const { client: chatClient, channels } = await initiateClientWithChannels(); const channel = channels[0]; const messageComposer = new StreamMessageComposer({ client: chatClient, composition, - compositionContext: composition, + compositionContext: composition as unknown as ConstructorParameters< + typeof StreamMessageComposer + >[0]['compositionContext'], config: composerConfig, }); @@ -70,8 +85,8 @@ const editedMessageSetup = async ({ composerConfig, composition } = {}) => { }; describe('SendMessageDisallowedIndicator', () => { - let client; - let channel; + let client: StreamChat; + let channel: ChannelType; beforeEach(async () => { const { client: chatClient, channels } = await initiateClientWithChannels(); @@ -101,8 +116,8 @@ describe('SendMessageDisallowedIndicator', () => { act(() => { client.dispatchEvent({ - cid: channel.data.cid, - own_capabilities: channel.data.own_capabilities.filter( + cid: channel.data!.cid, + own_capabilities: channel.data!.own_capabilities!.filter( (capability) => capability !== 'send-message', ), type: 'capabilities.changed', @@ -139,11 +154,12 @@ describe('SendMessageDisallowedIndicator', () => { client.dispatchEvent({ channel: { ...channel.data, - own_capabilities: channel.data.own_capabilities.filter( - (capability) => capability !== 'send-message', + own_capabilities: channel.data!.own_capabilities!.filter( + (capability: string) => capability !== 'send-message', ), - }, - cid: channel.data.cid, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } as any, + cid: channel.data!.cid, type: 'channel.updated', }); }); @@ -180,9 +196,9 @@ describe("SendMessageDisallowedIndicator's edited state", () => { act(() => { chatClient.dispatchEvent({ - cid: customChannel.data.cid, - own_capabilities: customChannel.data.own_capabilities.filter( - (capability) => capability !== 'send-message', + cid: customChannel.data!.cid, + own_capabilities: customChannel.data!.own_capabilities!.filter( + (capability: string) => capability !== 'send-message', ), type: 'capabilities.changed', }); diff --git a/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap b/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.tsx.snap similarity index 100% rename from package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap rename to package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.tsx.snap diff --git a/package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap b/package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.tsx.snap similarity index 100% rename from package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap rename to package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.tsx.snap diff --git a/package/src/components/MessageList/__tests__/MessageList.test.js b/package/src/components/MessageList/__tests__/MessageList.test.tsx similarity index 95% rename from package/src/components/MessageList/__tests__/MessageList.test.js rename to package/src/components/MessageList/__tests__/MessageList.test.tsx index f1e4360e04..e5880f739d 100644 --- a/package/src/components/MessageList/__tests__/MessageList.test.js +++ b/package/src/components/MessageList/__tests__/MessageList.test.tsx @@ -38,7 +38,7 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const { getByText, queryAllByTestId } = render( @@ -56,7 +56,7 @@ describe('MessageList', () => { await waitFor(() => { expect(queryAllByTestId('scroll-to-bottom-button')).toHaveLength(0); - expect(getByText(newMessage.text)).toBeTruthy(); + expect(getByText(newMessage.text as string)).toBeTruthy(); }); }, 10000); @@ -73,7 +73,7 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const { getByTestId } = render( @@ -105,7 +105,7 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const { getByTestId, queryByTestId } = render( @@ -133,7 +133,7 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const { getByTestId, queryAllByTestId } = render( @@ -165,7 +165,7 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const { getByTestId } = render( @@ -192,7 +192,7 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const { getByTestId, getByText, queryAllByTestId } = render( @@ -216,7 +216,7 @@ describe('MessageList', () => { it('should scroll to a message even if out of the loaded window', async () => { const user1 = generateUser(); - const mockedLongMessagesList = []; + const mockedLongMessagesList: ReturnType[] = []; // we need a long enough list to make sure elements aren't preloaded by the underlying FlatList for (let i = 0; i <= 150; i += 1) { mockedLongMessagesList.push(generateMessage({ timestamp: new Date(), user: user1 })); @@ -233,7 +233,7 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); render( @@ -247,8 +247,8 @@ describe('MessageList', () => { ); await waitFor(() => { - expect(screen.getByText(targetedMessageText)).toBeOnTheScreen(); - expect(() => screen.getByText(latestMessageText)).toThrow(); + expect(screen.getByText(targetedMessageText as string)).toBeOnTheScreen(); + expect(() => screen.getByText(latestMessageText as string)).toThrow(); }); }); @@ -271,7 +271,7 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: user1.id }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); channel.state = { @@ -279,7 +279,7 @@ describe('MessageList', () => { latestMessages: [], messages, read: read_data, - }; + } as unknown as typeof channel.state; const { queryByLabelText } = render( @@ -308,25 +308,20 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: user1.id }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); - const channelUnreadState = { - last_read: new Date(), - unread_messages: 0, - }; - channel.state = { ...channelInitialState, latestMessages: [], messages, - }; + } as unknown as typeof channel.state; const { queryByLabelText } = render( - + , @@ -345,7 +340,7 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: user.id }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const user2 = generateUser(); @@ -382,7 +377,7 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: user.id }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const targetedMessage = messages[15].id; @@ -391,7 +386,7 @@ describe('MessageList', () => { ...channelInitialState, latestMessages: [], messages, - }; + } as unknown as typeof channel.state; const flatListRefMock = jest .spyOn(FlatList.prototype, 'scrollToIndex') @@ -428,17 +423,17 @@ describe('MessageList', () => { const chatClient = await getTestClientWithUser({ id: user.id }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); - const targetedMessage = 21; + const targetedMessage = '21'; const setTargetedMessage = jest.fn(); channel.state = { ...channelInitialState, latestMessages: [], messages, - }; + } as unknown as typeof channel.state; const loadChannelAroundMessage = jest.fn(() => Promise.resolve()); @@ -471,7 +466,9 @@ describe('MessageList pagination', () => { jest.clearAllMocks(); }); - const mockedHook = (values) => { + const mockedHook = ( + values: Partial>, + ) => { const messages = Array.from({ length: 100 }, (_, i) => generateMessage({ text: `message-${i}` }), ); @@ -499,7 +496,7 @@ describe('MessageList pagination', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const loadMoreRecent = jest.fn(() => Promise.resolve()); @@ -541,7 +538,7 @@ describe('MessageList pagination', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); const loadMore = jest.fn(() => Promise.resolve()); @@ -586,18 +583,18 @@ describe('MessageList pagination', () => { const chatClient = await getTestClientWithUser({ id: 'testID' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.watch(); channel.state = { ...channelInitialState, latestMessages: [], members: Object.fromEntries( - Array.from({ length: 10 }, (_, i) => [i, generateMember({ id: i })]), + Array.from({ length: 10 }, (_, i) => [i, generateMember({ user_id: String(i) })]), ), - messages: Array.from({ length: 10 }, (_, i) => generateMessage({ id: i })), + messages: Array.from({ length: 10 }, (_, i) => generateMessage({ id: String(i) })), messageSets: [{ isCurrent: true, isLatest: true }], - }; + } as unknown as typeof channel.state; const loadLatestMessages = jest.fn(() => Promise.resolve()); mockedHook({ loadLatestMessages }); diff --git a/package/src/components/MessageList/__tests__/MessageSystem.test.js b/package/src/components/MessageList/__tests__/MessageSystem.test.tsx similarity index 75% rename from package/src/components/MessageList/__tests__/MessageSystem.test.js rename to package/src/components/MessageList/__tests__/MessageSystem.test.tsx index d20d48f2d6..da2a6a20a2 100644 --- a/package/src/components/MessageList/__tests__/MessageSystem.test.js +++ b/package/src/components/MessageList/__tests__/MessageSystem.test.tsx @@ -13,7 +13,7 @@ import { MessageSystem } from '../MessageSystem'; afterEach(cleanup); -let i18nInstance; +let i18nInstance: Streami18n; describe('MessageSystem', () => { beforeAll(() => { @@ -25,8 +25,12 @@ describe('MessageSystem', () => { const translators = await i18nInstance.getTranslators(); const message = generateMessage(); const { queryByTestId } = render( - - + [0]['style']} + > + [0]['value']} + > , @@ -42,8 +46,12 @@ describe('MessageSystem', () => { const user = generateStaticUser(0); const message = generateStaticMessage('Hello World', { user }); render( - - + [0]['style']} + > + [0]['value']} + > , diff --git a/package/src/components/MessageList/__tests__/ScrollToBottomButton.test.js b/package/src/components/MessageList/__tests__/ScrollToBottomButton.test.tsx similarity index 82% rename from package/src/components/MessageList/__tests__/ScrollToBottomButton.test.js rename to package/src/components/MessageList/__tests__/ScrollToBottomButton.test.tsx index 788c1e51ea..a057b76254 100644 --- a/package/src/components/MessageList/__tests__/ScrollToBottomButton.test.js +++ b/package/src/components/MessageList/__tests__/ScrollToBottomButton.test.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native'; import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext'; +import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext'; import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext'; import { Streami18n } from '../../../utils/i18n/Streami18n'; import { ScrollToBottomButton } from '../ScrollToBottomButton'; @@ -20,7 +21,7 @@ describe('ScrollToBottomButton', () => { const translators = await i18nInstance.getTranslators(); const { queryByTestId } = render( - + null} showNotification={false} /> , @@ -36,7 +37,7 @@ describe('ScrollToBottomButton', () => { const translators = await i18nInstance.getTranslators(); const { queryByTestId } = render( - + null} showNotification={true} /> , @@ -53,7 +54,7 @@ describe('ScrollToBottomButton', () => { const onPress = jest.fn(); const { getByTestId } = render( - + , @@ -63,18 +64,13 @@ describe('ScrollToBottomButton', () => { }); it('should display the unread count', async () => { - const t = jest.fn((key) => key); + const t = jest.fn((key: string) => key); const i18nInstance = new Streami18n(); const translators = await i18nInstance.getTranslators(); const { getByTestId, getByText } = render( - - null} - showNotification={true} - t={t} - unreadCount={3} - /> + + null} showNotification={true} unreadCount={3} /> , ); @@ -89,7 +85,7 @@ describe('ScrollToBottomButton', () => { const translators = await i18nInstance.getTranslators(); const { toJSON } = render( - + null} showNotification={true} /> , diff --git a/package/src/components/MessageList/__tests__/TypingIndicator.test.js b/package/src/components/MessageList/__tests__/TypingIndicator.test.tsx similarity index 87% rename from package/src/components/MessageList/__tests__/TypingIndicator.test.js rename to package/src/components/MessageList/__tests__/TypingIndicator.test.tsx index a3e0efad04..4d37e202de 100644 --- a/package/src/components/MessageList/__tests__/TypingIndicator.test.js +++ b/package/src/components/MessageList/__tests__/TypingIndicator.test.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { cleanup, render, waitFor } from '@testing-library/react-native'; +import type { Event, StreamChat } from 'stream-chat'; + import { TypingProvider } from '../../../contexts/typingContext/TypingContext'; import { generateStaticUser, generateUser } from '../../../mock-builders/generator/user'; @@ -12,7 +14,7 @@ import { TypingIndicator } from '../TypingIndicator'; afterEach(cleanup); describe('TypingIndicator', () => { - let chatClient; + let chatClient: StreamChat; it('should render typing indicator for two users', async () => { const user0 = generateUser(); @@ -25,7 +27,7 @@ describe('TypingIndicator', () => { const { getAllByTestId, getByTestId } = render( - + }}> , @@ -46,7 +48,7 @@ describe('TypingIndicator', () => { const { getAllByTestId, getByTestId } = render( - + }}> , @@ -68,7 +70,7 @@ describe('TypingIndicator', () => { const { toJSON } = render( - + }}> , diff --git a/package/src/components/MessageList/__tests__/__snapshots__/MessageSystem.test.js.snap b/package/src/components/MessageList/__tests__/__snapshots__/MessageSystem.test.tsx.snap similarity index 100% rename from package/src/components/MessageList/__tests__/__snapshots__/MessageSystem.test.js.snap rename to package/src/components/MessageList/__tests__/__snapshots__/MessageSystem.test.tsx.snap diff --git a/package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap b/package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.tsx.snap similarity index 100% rename from package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.js.snap rename to package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.tsx.snap diff --git a/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap b/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.tsx.snap similarity index 100% rename from package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap rename to package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.tsx.snap diff --git a/package/src/components/MessageList/__tests__/useMessageList.test.tsx b/package/src/components/MessageList/__tests__/useMessageList.test.tsx index e9191a204d..2d0c0a3336 100644 --- a/package/src/components/MessageList/__tests__/useMessageList.test.tsx +++ b/package/src/components/MessageList/__tests__/useMessageList.test.tsx @@ -27,7 +27,7 @@ beforeEach(async () => { const messages = new Array(10) .fill(undefined) - .map((_: undefined, id: number) => generateMessage({ id })); + .map((_: undefined, id: number) => generateMessage({ id: String(id) })); const Providers: FC<{ children: React.ReactNode }> = ({ children }) => { const messageListContext = useCreatePaginatedMessageListContext({ @@ -57,7 +57,7 @@ describe('useMessageList', () => { useMessageList({ noGroupByUser: true, threadList: false, - }), + } as unknown as Parameters[0]), { wrapper: Providers }, ); const reversedMessages = messages.reverse(); diff --git a/package/src/components/MessageList/hooks/useMessageList.ts b/package/src/components/MessageList/hooks/useMessageList.ts index 73dac61e24..3ff51c61a9 100644 --- a/package/src/components/MessageList/hooks/useMessageList.ts +++ b/package/src/components/MessageList/hooks/useMessageList.ts @@ -29,7 +29,7 @@ export const useMessageList = (params: UseMessageListParams) => { const messageList = threadList ? threadMessages : messages; const processedMessageList = useMemo(() => { - const newMessageList = []; + const newMessageList: LocalMessage[] = []; for (const message of messageList) { if (isFlashList) { newMessageList.push(message); diff --git a/package/src/components/MessageMenu/__tests__/MessageActionList.test.tsx b/package/src/components/MessageMenu/__tests__/MessageActionList.test.tsx index 4f3c178d35..33aebd3a21 100644 --- a/package/src/components/MessageMenu/__tests__/MessageActionList.test.tsx +++ b/package/src/components/MessageMenu/__tests__/MessageActionList.test.tsx @@ -9,11 +9,14 @@ import { render } from '@testing-library/react-native'; import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext'; import { defaultTheme } from '../../../contexts/themeContext/utils/theme'; import { MessageActionList } from '../MessageActionList'; +import type { MessageActionListProps } from '../MessageActionList'; import { MessageActionListItemProps } from '../MessageActionListItem'; const MockMessageActionListItem = (props: MessageActionListItemProps) => {props.title}; -const defaultProps = { +const defaultProps: MessageActionListProps & { + MessageActionListItem: typeof MockMessageActionListItem; +} = { MessageActionListItem: MockMessageActionListItem, messageActions: [ { action: jest.fn(), actionType: 'copyMessage', type: 'standard', title: 'Copy Message' }, diff --git a/package/src/components/MessageMenu/__tests__/MessageActionListItem.test.tsx b/package/src/components/MessageMenu/__tests__/MessageActionListItem.test.tsx index ec5ac0f4b3..a3ece69894 100644 --- a/package/src/components/MessageMenu/__tests__/MessageActionListItem.test.tsx +++ b/package/src/components/MessageMenu/__tests__/MessageActionListItem.test.tsx @@ -18,6 +18,7 @@ describe('MessageActionListItem', () => { actionType: 'copyMessage', icon: Icon, title: 'Copy Message', + type: 'standard' as const, }; it('should render correctly with given props', () => { diff --git a/package/src/components/MessageMenu/__tests__/MessageReactionPicker.test.tsx b/package/src/components/MessageMenu/__tests__/MessageReactionPicker.test.tsx index eb324776c5..f694466531 100644 --- a/package/src/components/MessageMenu/__tests__/MessageReactionPicker.test.tsx +++ b/package/src/components/MessageMenu/__tests__/MessageReactionPicker.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { fireEvent, render, cleanup, waitFor } from '@testing-library/react-native'; +import type { StreamChat } from 'stream-chat'; import { MessageContextValue, @@ -39,8 +40,11 @@ const defaultProps = { }; describe('MessageReactionPicker', () => { - let client; - let renderComponent; + let client: StreamChat; + let renderComponent: ( + props?: Partial>, + ownCapabilities?: Partial, + ) => ReturnType; beforeEach(async () => { client = await getTestClientWithUser({ id: 'reaction-test-user' }); diff --git a/package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx b/package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx index a7272b0344..aaf535d2e1 100644 --- a/package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx +++ b/package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx @@ -4,7 +4,7 @@ import { Text } from 'react-native'; import { fireEvent, render } from '@testing-library/react-native'; -import { LocalMessage, ReactionResponse } from 'stream-chat'; +import { ReactionResponse } from 'stream-chat'; import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext'; import { @@ -35,7 +35,7 @@ const defaultProps = { message: { ...generateMessage(), reaction_groups: { like: { count: 1, sum_scores: 1 }, love: { count: 1, sum_scores: 1 } }, - } as unknown as LocalMessage, + }, supportedReactions: mockSupportedReactions, }; @@ -51,7 +51,7 @@ const renderComponent = (props = {}) => ), }} > - + diff --git a/package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx b/package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx index dd8d675c0d..3214bc4342 100644 --- a/package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx +++ b/package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx @@ -2,6 +2,10 @@ import React from 'react'; import { render } from '@testing-library/react-native'; +import type { StreamChat } from 'stream-chat'; + +import type { DeepPartial } from '../../../contexts/themeContext/ThemeContext'; +import type { Theme } from '../../../contexts/themeContext/utils/theme'; import { defaultTheme } from '../../../contexts/themeContext/utils/theme'; import { getTestClientWithUser } from '../../../mock-builders/mock'; import { Chat } from '../../Chat/Chat'; @@ -9,7 +13,7 @@ import { MessageUserReactionsAvatar } from '../MessageUserReactionsAvatar'; describe('MessageUserReactionsAvatar', () => { const reaction = { id: 'test-user', image: 'image-url', name: 'Test User', type: 'like' }; // Mock reaction data - let chatClient; + let chatClient: StreamChat; beforeEach(async () => { chatClient = await getTestClientWithUser({ id: 'me' }); @@ -17,7 +21,7 @@ describe('MessageUserReactionsAvatar', () => { it('should render Avatar with correct image, name, and default size', () => { const { queryByTestId } = render( - + }> , ); @@ -28,7 +32,7 @@ describe('MessageUserReactionsAvatar', () => { it('should render Avatar with correct image, name, and custom size', () => { const { queryByTestId } = render( - + }> , ); diff --git a/package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx b/package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx index 1cfd026bcb..4074f877fb 100644 --- a/package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx +++ b/package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx @@ -38,7 +38,8 @@ const renderComponent = async (props = {}, clientUserID = 'user2') => > { +const renderComponent = ({ + chatClient, + channel, + props, + thread, +}: { + channel: ChannelType; + chatClient: StreamChat; + props?: Partial>; + thread: LocalMessage; +}) => { return render( - + @@ -36,8 +47,8 @@ const renderComponent = ({ chatClient, channel, props, thread }) => { }; describe('Thread', () => { - let chatClient; - let channel; + let chatClient: StreamChat; + let channel: ChannelType; beforeEach(async () => { const { client: client, channels } = await initiateClientWithChannels(); @@ -64,7 +75,9 @@ describe('Thread', () => { generateMessage({ cid, parent_id }), ]; - channel.state.addMessagesSorted(threadResponses); + channel.state.addMessagesSorted( + threadResponses as unknown as Parameters[0], + ); renderComponent({ channel, chatClient, props, thread }); @@ -122,19 +135,30 @@ describe('Thread', () => { const chatClient = await getTestClientWithUser({ id: 'testID2' }); useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]); - const channel = chatClient.channel('messaging', mockedChannel.id); + const channel = chatClient.channel('messaging', mockedChannel.channel.id); await channel.query(); - channel.state.addMessagesSorted(threadResponses); + channel.state.addMessagesSorted( + threadResponses as unknown as Parameters[0], + ); - let setLastRead; + let setLastRead: ((date?: Date) => void) | undefined; const { getByText, toJSON } = render( - - - + ['value'] + } + > + ['value']} + > + {(c) => { setLastRead = c.setLastRead; @@ -154,9 +178,13 @@ describe('Thread', () => { expect(getByText('Message6')).toBeTruthy(); }); - act(() => setLastRead(new Date('2020-08-17T18:08:03.196Z'))); + act(() => setLastRead!(new Date('2020-08-17T18:08:03.196Z'))); - const snapshot = toJSON(); + const snapshot = toJSON() as unknown as { + children: Array<{ + children: Array<{ children: Array<{ props: { ListFooterComponent: unknown } }> }>; + }>; + }; snapshot.children[0].children[0].children[0].props.ListFooterComponent = null; await waitFor(() => { diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap similarity index 99% rename from package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap rename to package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap index 049ff2af71..05fc28cb01 100644 --- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap +++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap @@ -49,14 +49,11 @@ exports[`Thread should match thread snapshot 1`] = ` "cid": "messaging:test-channel", "created_at": 2020-05-05T14:50:00.000Z, "deleted_at": null, - "error": null, "html": "

regular

", "id": "38ef6f7c-3090-5759-a37f-ab0053aadb96", "message_text_updated_at": "2020-05-05T14:50:00.000Z", "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04", "pinned_at": null, - "quoted_message": null, - "reaction_groups": null, "status": "received", "text": "Message6", "type": "regular", @@ -78,14 +75,11 @@ exports[`Thread should match thread snapshot 1`] = ` "cid": "messaging:test-channel", "created_at": 2020-05-05T14:50:00.000Z, "deleted_at": null, - "error": null, "html": "

regular

", "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd", "message_text_updated_at": "2020-05-05T14:50:00.000Z", "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04", "pinned_at": null, - "quoted_message": null, - "reaction_groups": null, "status": "received", "text": "Message5", "type": "regular", @@ -108,14 +102,11 @@ exports[`Thread should match thread snapshot 1`] = ` "cid": "messaging:test-channel", "created_at": 2020-05-05T14:50:00.000Z, "deleted_at": null, - "error": null, "html": "

regular

", "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd", "message_text_updated_at": "2020-05-05T14:50:00.000Z", "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04", "pinned_at": null, - "quoted_message": null, - "reaction_groups": null, "status": "received", "text": "Message5", "type": "regular", @@ -136,14 +127,11 @@ exports[`Thread should match thread snapshot 1`] = ` "cid": "messaging:test-channel", "created_at": 2020-05-05T14:50:00.000Z, "deleted_at": null, - "error": null, "html": "

regular

", "id": "38ef6f7c-3090-5759-a37f-ab0053aadb96", "message_text_updated_at": "2020-05-05T14:50:00.000Z", "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04", "pinned_at": null, - "quoted_message": null, - "reaction_groups": null, "status": "received", "text": "Message6", "type": "regular", @@ -164,14 +152,11 @@ exports[`Thread should match thread snapshot 1`] = ` "cid": "messaging:test-channel", "created_at": 2020-05-05T14:50:00.000Z, "deleted_at": null, - "error": null, "html": "

regular

", "id": "82a83b16-b611-527c-b3ac-765ef6220490", "message_text_updated_at": "2020-05-05T14:50:00.000Z", "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04", "pinned_at": null, - "quoted_message": null, - "reaction_groups": null, "status": "received", "text": "Message4", "type": "regular", @@ -194,14 +179,11 @@ exports[`Thread should match thread snapshot 1`] = ` "cid": "messaging:test-channel", "created_at": 2020-05-05T14:50:00.000Z, "deleted_at": null, - "error": null, "html": "

regular

", "id": "82a83b16-b611-527c-b3ac-765ef6220490", "message_text_updated_at": "2020-05-05T14:50:00.000Z", "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04", "pinned_at": null, - "quoted_message": null, - "reaction_groups": null, "status": "received", "text": "Message4", "type": "regular", @@ -222,14 +204,11 @@ exports[`Thread should match thread snapshot 1`] = ` "cid": "messaging:test-channel", "created_at": 2020-05-05T14:50:00.000Z, "deleted_at": null, - "error": null, "html": "

regular

", "id": "516efa25-5d29-5c9a-ad2d-4cc183e785bd", "message_text_updated_at": "2020-05-05T14:50:00.000Z", "parent_id": "b4612a73-fa2b-5787-bf71-1adc8f291a04", "pinned_at": null, - "quoted_message": null, - "reaction_groups": null, "status": "received", "text": "Message5", "type": "regular", diff --git a/package/src/components/UIComponents/SwipableWrapper.tsx b/package/src/components/UIComponents/SwipableWrapper.tsx index a563195680..0ce5d9b55d 100644 --- a/package/src/components/UIComponents/SwipableWrapper.tsx +++ b/package/src/components/UIComponents/SwipableWrapper.tsx @@ -32,7 +32,7 @@ const animationOptions = { export type SwipableActionItem = { action: () => void | Promise; contentContainerStyle?: StyleProp; - Content: React.ComponentType>; + Content: React.ComponentType; id: string; }; diff --git a/package/src/components/UIComponents/__tests__/SwipableWrapper.test.tsx b/package/src/components/UIComponents/__tests__/SwipableWrapper.test.tsx index 6a0e2b5ffd..c4ffe70ecc 100644 --- a/package/src/components/UIComponents/__tests__/SwipableWrapper.test.tsx +++ b/package/src/components/UIComponents/__tests__/SwipableWrapper.test.tsx @@ -12,7 +12,7 @@ const mockReanimatedSwipeable = jest.fn(({ children }: React.PropsWithChildren) jest.mock('react-native-gesture-handler/ReanimatedSwipeable', () => ({ __esModule: true, - default: (...args: unknown[]) => mockReanimatedSwipeable(...args), + default: (...args: [React.PropsWithChildren]) => mockReanimatedSwipeable(...args), SwipeDirection: { LEFT: 'left', RIGHT: 'right', diff --git a/package/src/contexts/messageInputContext/__tests__/filePickers.test.tsx b/package/src/contexts/messageInputContext/__tests__/filePickers.test.tsx index 8baeed608e..00ab96f4ab 100644 --- a/package/src/contexts/messageInputContext/__tests__/filePickers.test.tsx +++ b/package/src/contexts/messageInputContext/__tests__/filePickers.test.tsx @@ -1,7 +1,8 @@ -import React from 'react'; +import React, { PropsWithChildren } from 'react'; import { Alert } from 'react-native'; import { cleanup, renderHook, waitFor } from '@testing-library/react-native'; +import type { Channel, StreamChat } from 'stream-chat'; import { Chat } from '../../../components'; import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels'; @@ -20,7 +21,15 @@ import { jest.spyOn(Alert, 'alert'); -const Wrapper = ({ channel, client, props }) => { +const Wrapper = ({ + channel, + client, + props, +}: { + channel: Channel; + client: StreamChat; + props: PropsWithChildren>; +}) => { return ( { } as ChannelContextValue } > - - + ['value'] + } + > + ['value'] + } + > { }; describe("MessageInputContext's pickFile", () => { - let channel; - let chatClient; + let channel: Channel; + let chatClient: StreamChat; beforeEach(async () => { const { client, channels } = await initiateClientWithChannels(); @@ -128,8 +149,8 @@ describe("MessageInputContext's pickFile", () => { }); describe("MessageInputContext's pickAndUploadImageFromNativePicker", () => { - let channel; - let chatClient; + let channel: Channel; + let chatClient: StreamChat; beforeEach(async () => { const { client, channels } = await initiateClientWithChannels(); @@ -268,8 +289,8 @@ describe("MessageInputContext's pickAndUploadImageFromNativePicker", () => { }); describe("MessageInputContext's takeAndUploadImage", () => { - let channel; - let chatClient; + let channel: Channel; + let chatClient: StreamChat; beforeEach(async () => { const { client, channels } = await initiateClientWithChannels(); diff --git a/package/src/contexts/messageInputContext/__tests__/sendMessage.test.tsx b/package/src/contexts/messageInputContext/__tests__/sendMessage.test.tsx index 77b7f7869b..0206ef1c0a 100644 --- a/package/src/contexts/messageInputContext/__tests__/sendMessage.test.tsx +++ b/package/src/contexts/messageInputContext/__tests__/sendMessage.test.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import React, { PropsWithChildren } from 'react'; import { act, cleanup, renderHook, waitFor } from '@testing-library/react-native'; - -import { LocalMessage } from 'stream-chat'; +import type { Channel, StreamChat } from 'stream-chat'; import { Chat } from '../../../components'; import { initiateClientWithChannels } from '../../../mock-builders/api/initiateClientWithChannels'; @@ -12,6 +11,7 @@ import { generateMessage } from '../../../mock-builders/generator/message'; import * as UseMessageComposerAPIContext from '../../messageComposerContext/MessageComposerAPIContext'; import { MessageComposerAPIContextValue } from '../../messageComposerContext/MessageComposerAPIContext'; +import type { MessageComposerContextValue } from '../../messageComposerContext/MessageComposerContext'; import { MessageComposerProvider } from '../../messageComposerContext/MessageComposerContext'; import { OwnCapabilitiesContextValue, @@ -23,11 +23,19 @@ import { useMessageInputContext, } from '../MessageInputContext'; -const Wrapper = ({ messageComposerContextValue, client, props }) => { +const Wrapper = ({ + messageComposerContextValue, + client, + props, +}: { + client: StreamChat; + messageComposerContextValue: Partial; + props: PropsWithChildren>; +}) => { return ( - + { }; describe("MessageInputContext's sendMessage", () => { - let channel; - let chatClient; + let channel: Channel; + let chatClient: StreamChat; beforeEach(async () => { const { client, channels } = await initiateClientWithChannels(); @@ -138,7 +146,11 @@ describe("MessageInputContext's sendMessage", () => { sendMessage: sendMessageMock, }; const { pollComposer } = channel.messageComposer; - jest.spyOn(chatClient, 'createPoll').mockResolvedValue({ poll: { id: 'test-poll-id' } }); + jest + .spyOn(chatClient, 'createPoll') + .mockResolvedValue({ poll: { id: 'test-poll-id' } } as unknown as Awaited< + ReturnType + >); const { result } = renderHook(() => useMessageInputContext(), { initialProps, @@ -159,7 +171,7 @@ describe("MessageInputContext's sendMessage", () => { { id: 1, text: '1' }, { id: 2, text: '2' }, ], - }); + } as unknown as Parameters[0]); await channel.messageComposer.createPoll(); }); @@ -214,8 +226,8 @@ describe("MessageInputContext's sendMessage", () => { }); describe("MessageInputContext's editMessage", () => { - let channel; - let chatClient; + let channel: Channel; + let chatClient: StreamChat; beforeAll(async () => { const { client, channels } = await initiateClientWithChannels(); @@ -244,7 +256,7 @@ describe("MessageInputContext's editMessage", () => { attachments: [generateLocalFileUploadAttachmentData()], cid: 'messaging:channel-id', text: 'test', - }) as LocalMessage; + }); const { result } = renderHook(() => useMessageInputContext(), { initialProps, diff --git a/package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx b/package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx index bf826461d9..4fd04096a8 100644 --- a/package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx +++ b/package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx @@ -36,9 +36,9 @@ jest.mock('react-native-reanimated', () => { const { View } = require('react-native'); const useStableSharedValue = (init: unknown) => { - const ref = React.useRef<{ + const ref = React.useRef(null) as React.MutableRefObject<{ value: unknown; - }>(); + } | null>; if (!ref.current) { const value = { value: init }; diff --git a/package/src/hooks/__tests__/useTranslatedMessage.test.tsx b/package/src/hooks/__tests__/useTranslatedMessage.test.tsx index dd2004d3ca..80fd2bc91c 100644 --- a/package/src/hooks/__tests__/useTranslatedMessage.test.tsx +++ b/package/src/hooks/__tests__/useTranslatedMessage.test.tsx @@ -27,7 +27,7 @@ describe('useTranslatedMessage', () => { nl_text: 'Hallo wereld!', }, text: 'Hello world!', - } as MessageResponse; + } as unknown as MessageResponse; render( @@ -46,7 +46,7 @@ describe('useTranslatedMessage', () => { no_text: 'Hallo verden!', }, text: 'Hello world!', - } as MessageResponse; + } as unknown as MessageResponse; render( @@ -62,7 +62,7 @@ describe('useTranslatedMessage', () => { it("returns the original text if the message doesn't contain any translations", async () => { const message = { text: 'Hello world!', - } as MessageResponse; + } as unknown as MessageResponse; render(); @@ -78,7 +78,7 @@ describe('useTranslatedMessage', () => { no_text: 'Hallo verden!', }, text: 'Hello world!', - } as MessageResponse; + } as unknown as MessageResponse; /** * The reason for the as unknown as MessageOverlayContextValue is that the provider diff --git a/package/src/mock-builders/DB/mock.ts b/package/src/mock-builders/DB/mock.ts index ae06565dda..faa2112f14 100644 --- a/package/src/mock-builders/DB/mock.ts +++ b/package/src/mock-builders/DB/mock.ts @@ -36,7 +36,7 @@ export const sqliteMock = { if (pragmaQueryTokens[2] === '=') { db.pragma(`${pragmaQueryTokens[1]} = ${pragmaQueryTokens[3]}`); } else { - result = db.pragma(`${pragmaQueryTokens[1]}`); + result = db.pragma(`${pragmaQueryTokens[1]}`) as unknown[]; } return { diff --git a/package/src/mock-builders/api/channelMocks.tsx b/package/src/mock-builders/api/channelMocks.tsx index 9c41c63fe1..74f9fb069f 100644 --- a/package/src/mock-builders/api/channelMocks.tsx +++ b/package/src/mock-builders/api/channelMocks.tsx @@ -1,3 +1,4 @@ +import { fromPartial } from '@total-typescript/shoehorn'; import type { Attachment, Channel, LocalMessage, MessageResponse, UserResponse } from 'stream-chat'; import { @@ -6,16 +7,25 @@ import { ONE_MEMBER_WITH_EMPTY_USER, } from '../../mock-builders/api/queryMembers'; +// Test fixtures intentionally supply runtime-shaped values (Date objects for +// date fields, custom `type` strings, a mock `Channel` instance for the +// `channel` prop) that do not match the strict server-side `MessageResponse` +// schema. Accept an unknown-value record and hide the single cast inside the +// helper so call sites stay flat. +const mockMessage = (data: Record) => + fromPartial(data as Partial); +const mockUser = (data: Partial) => fromPartial(data); + const channelName = 'okechukwu'; -const CHANNEL = { +const CHANNEL = fromPartial({ data: { name: channelName }, state: { messages: [] }, -} as unknown as Channel; +}); const CHANNEL_WITH_MESSAGES_TEXT = { members: CHANNEL_MEMBERS, messages: [ - { + mockMessage({ args: 'string', attachments: [], channel: CHANNEL, @@ -27,9 +37,9 @@ const CHANNEL_WITH_MESSAGES_TEXT = { id: 'ljkblk', text: 'jkbkbiubicbi', type: 'MessageLabel', - user: { id: 'okechukwu' } as unknown as UserResponse, - } as unknown as MessageResponse, - { + user: mockUser({ id: 'okechukwu' }), + }), + mockMessage({ args: 'string', attachments: [], channel: CHANNEL, @@ -41,8 +51,8 @@ const CHANNEL_WITH_MESSAGES_TEXT = { id: 'jbkjb', text: 'jkbkbiubicbi', type: 'MessageLabel', - user: { id: 'okechukwu' } as unknown as UserResponse, - } as unknown as MessageResponse, + user: mockUser({ id: 'okechukwu' }), + }), ], name: channelName, }; @@ -58,7 +68,7 @@ const CHANNEL_WITH_NO_MESSAGES = { const CHANNEL_WITH_MESSAGE_COMMAND = { members: CHANNEL_MEMBERS, messages: [ - { + mockMessage({ args: 'string', attachments: [], channel: CHANNEL, @@ -68,9 +78,9 @@ const CHANNEL_WITH_MESSAGE_COMMAND = { created_at: new Date('2021-02-12T12:12:35.862Z'), deleted_at: new Date('2021-02-12T12:12:35.862Z'), id: 'ljkblk', - user: { id: 'okechukwu' } as unknown as UserResponse, - } as unknown as MessageResponse, - { + user: mockUser({ id: 'okechukwu' }), + }), + mockMessage({ args: 'string', attachments: [], channel: CHANNEL, @@ -80,15 +90,15 @@ const CHANNEL_WITH_MESSAGE_COMMAND = { created_at: new Date('2021-02-12T12:12:35.862Z'), deleted_at: new Date('2021-02-12T12:12:35.862Z'), id: 'jbkjb', - user: { id: 'okechukwu' } as unknown as UserResponse, - } as unknown as MessageResponse, + user: mockUser({ id: 'okechukwu' }), + }), ], }; const CHANNEL_WITH_MESSAGES_ATTACHMENTS = { members: CHANNEL_MEMBERS, messages: [ - { + mockMessage({ args: 'string', attachments: [ { @@ -120,13 +130,13 @@ const CHANNEL_WITH_MESSAGES_ATTACHMENTS = { created_at: new Date('2021-02-12T12:12:35.862Z'), deleted_at: new Date('2021-02-12T12:12:35.862Z'), id: 'ljkblk', - user: { id: 'okechukwu' } as unknown as UserResponse, - } as unknown as MessageResponse, + user: mockUser({ id: 'okechukwu' }), + }), ], name: channelName, }; -const LATEST_MESSAGE = { +const LATEST_MESSAGE = mockMessage({ args: 'string', attachments: [], channel: CHANNEL, @@ -138,13 +148,13 @@ const LATEST_MESSAGE = { id: 'string', text: 'jkbkbiubicbi', type: 'MessageLabel', - user: { id: 'okechukwu' } as unknown as UserResponse, -} as unknown as MessageResponse; + user: mockUser({ id: 'okechukwu' }), +}); const FORMATTED_MESSAGE: LocalMessage = { created_at: new Date('2021-02-12T12:12:35.862282Z'), + deleted_at: null, id: '', - message: {} as unknown as MessageResponse, pinned_at: new Date('2021-02-12T12:12:35.862282Z'), status: 'received', type: 'regular', @@ -154,7 +164,7 @@ const FORMATTED_MESSAGE: LocalMessage = { const CHANNEL_WITH_MENTIONED_USERS = { members: ONE_MEMBER_WITH_EMPTY_USER, messages: [ - { + mockMessage({ args: 'string', attachments: [], cid: 'stridkncnng', @@ -167,8 +177,8 @@ const CHANNEL_WITH_MENTIONED_USERS = { { id: 'Enzo', name: 'Enzo' }, ] as UserResponse[], text: 'Max', - } as unknown as MessageResponse, - { + }), + mockMessage({ args: 'string', attachments: [], cid: 'stridodong', @@ -181,14 +191,14 @@ const CHANNEL_WITH_MENTIONED_USERS = { { id: 'Enzo', name: 'Enzo' }, ] as UserResponse[], text: 'Max', - } as unknown as MessageResponse, + }), ], }; const CHANNEL_WITH_EMPTY_MESSAGE = { members: ONE_MEMBER_WITH_EMPTY_USER, messages: [ - { + mockMessage({ args: 'string', attachments: [], cid: 'stridkncnng', @@ -200,8 +210,8 @@ const CHANNEL_WITH_EMPTY_MESSAGE = { { id: 'Ada', name: 'Ada' }, { id: 'Enzo', name: 'Enzo' }, ] as UserResponse[], - } as unknown as MessageResponse, - { + }), + mockMessage({ args: 'string', attachments: [], cid: 'stridodong', @@ -213,7 +223,7 @@ const CHANNEL_WITH_EMPTY_MESSAGE = { { id: 'Ada', name: 'Ada' }, { id: 'Enzo', name: 'Enzo' }, ] as UserResponse[], - } as unknown as MessageResponse, + }), ], }; diff --git a/package/src/mock-builders/api/deleteMessage.js b/package/src/mock-builders/api/deleteMessage.js deleted file mode 100644 index a48bb2cb81..0000000000 --- a/package/src/mock-builders/api/deleteMessage.js +++ /dev/null @@ -1,18 +0,0 @@ -import { mockedApiResponse } from './utils'; - -import { generateMessage } from '../generator/message'; -/** - * Returns the api response for sendMessage api. - * - * api - /channels/{type}/{id}/message - * - * @param {*} message - */ -export const deleteMessageApi = (message = generateMessage()) => { - const result = { - duration: 0.01, - message, - }; - - return mockedApiResponse(result, 'delete'); -}; diff --git a/package/src/mock-builders/api/deleteMessage.ts b/package/src/mock-builders/api/deleteMessage.ts new file mode 100644 index 0000000000..37cc556c3e --- /dev/null +++ b/package/src/mock-builders/api/deleteMessage.ts @@ -0,0 +1,21 @@ +import type { LocalMessage, MessageResponse } from 'stream-chat'; + +import { mockedApiResponse, type MockedApiResponse } from './utils'; + +import { generateMessage } from '../generator/message'; + +/** + * Returns the api response for deleteMessage api. + * + * api - /channels/{type}/{id}/message + */ +export const deleteMessageApi = ( + message: MessageResponse | LocalMessage = generateMessage(), +): MockedApiResponse => { + const result = { + duration: 0.01, + message, + }; + + return mockedApiResponse(result, 'delete'); +}; diff --git a/package/src/mock-builders/api/deleteReaction.js b/package/src/mock-builders/api/deleteReaction.js deleted file mode 100644 index 70ee4bf09e..0000000000 --- a/package/src/mock-builders/api/deleteReaction.js +++ /dev/null @@ -1,19 +0,0 @@ -import { mockedApiResponse } from './utils'; - -import { generateReaction } from '../generator/reaction'; -/** - * Returns the api response for sendMessage api. - * - * api - /messages/{id}/reaction - * - * @param {*} message - */ -export const deleteReactionApi = (message, reaction = generateReaction()) => { - const result = { - duration: 0.01, - message, - reaction, - }; - - return mockedApiResponse(result, 'delete'); -}; diff --git a/package/src/mock-builders/api/deleteReaction.ts b/package/src/mock-builders/api/deleteReaction.ts new file mode 100644 index 0000000000..8d893311b8 --- /dev/null +++ b/package/src/mock-builders/api/deleteReaction.ts @@ -0,0 +1,23 @@ +import type { LocalMessage, MessageResponse, ReactionResponse } from 'stream-chat'; + +import { mockedApiResponse, type MockedApiResponse } from './utils'; + +import { generateReaction } from '../generator/reaction'; + +/** + * Returns the api response for deleteReaction api. + * + * api - /messages/{id}/reaction + */ +export const deleteReactionApi = ( + message: MessageResponse | LocalMessage, + reaction: ReactionResponse = generateReaction(), +): MockedApiResponse => { + const result = { + duration: 0.01, + message, + reaction, + }; + + return mockedApiResponse(result, 'delete'); +}; diff --git a/package/src/mock-builders/api/error.js b/package/src/mock-builders/api/error.ts similarity index 51% rename from package/src/mock-builders/api/error.js rename to package/src/mock-builders/api/error.ts index 419ce184ba..8fe6e8835e 100644 --- a/package/src/mock-builders/api/error.js +++ b/package/src/mock-builders/api/error.ts @@ -1,4 +1,12 @@ -import { mockedApiResponse } from './utils'; +import { mockedApiResponse, type MockedApiResponse } from './utils'; + +type CustomError = Partial<{ + duration: number; + exception_fields: Record; + message: string; + code: number; + StatusCode: number; +}>; const defaultErrorObject = { duration: 0.01, @@ -6,7 +14,7 @@ const defaultErrorObject = { message: 'API resulted in error', }; -export const erroredGetApi = (customError = {}) => { +export const erroredGetApi = (customError: CustomError = {}): MockedApiResponse => { const error = { ...defaultErrorObject, ...customError, @@ -15,7 +23,7 @@ export const erroredGetApi = (customError = {}) => { return mockedApiResponse(error, 'get', 500); }; -export const erroredPostApi = (customError = {}) => { +export const erroredPostApi = (customError: CustomError = {}): MockedApiResponse => { const error = { ...defaultErrorObject, ...customError, @@ -24,7 +32,7 @@ export const erroredPostApi = (customError = {}) => { return mockedApiResponse(error, 'post', 500); }; -export const erroredPutApi = (customError = {}) => { +export const erroredPutApi = (customError: CustomError = {}): MockedApiResponse => { const error = { ...defaultErrorObject, ...customError, @@ -33,7 +41,7 @@ export const erroredPutApi = (customError = {}) => { return mockedApiResponse(error, 'put', 500); }; -export const erroredDeleteApi = (customError = {}) => { +export const erroredDeleteApi = (customError: CustomError = {}): MockedApiResponse => { const error = { ...defaultErrorObject, ...customError, diff --git a/package/src/mock-builders/api/getOrCreateChannel.ts b/package/src/mock-builders/api/getOrCreateChannel.ts index c88e600897..12f5c708b9 100644 --- a/package/src/mock-builders/api/getOrCreateChannel.ts +++ b/package/src/mock-builders/api/getOrCreateChannel.ts @@ -1,21 +1,32 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { mockedApiResponse } from './utils'; +import type { + ChannelMemberResponse, + ChannelResponse, + DraftResponse, + LocalMessage, + MessageResponse, + ReadResponse, +} from 'stream-chat'; + +import { mockedApiResponse, type MockedApiResponse } from './utils'; + +// Mock message input is either a `MessageResponse` (server shape) or a +// `LocalMessage` (client shape — what `generateMessage` produces). The +// downstream stream-chat client formats these interchangeably. +type MockMessage = Partial | LocalMessage; export type GetOrCreateChannelApiParams = { - draft?: Record; - channel?: Record; - members?: Record[]; - messages?: Record[]; - pinnedMessages?: Record[]; - read?: Record[]; + draft?: Partial; + channel?: Partial; + members?: Partial[]; + messages?: MockMessage[]; + pinnedMessages?: MockMessage[]; + read?: Partial[]; }; /** * Returns the api response for queryChannel api. * * api - /channels/{type}/{id}/query - * - * @param {*} channel */ export const getOrCreateChannelApi = ( channel: GetOrCreateChannelApiParams = { @@ -26,7 +37,7 @@ export const getOrCreateChannelApi = ( pinnedMessages: [], read: [], }, -) => { +): MockedApiResponse => { const result = { channel: channel.channel, draft: channel.draft, diff --git a/package/src/mock-builders/api/initiateClientWithChannels.js b/package/src/mock-builders/api/initiateClientWithChannels.ts similarity index 65% rename from package/src/mock-builders/api/initiateClientWithChannels.js rename to package/src/mock-builders/api/initiateClientWithChannels.ts index e783c012c6..23e0df4a1c 100644 --- a/package/src/mock-builders/api/initiateClientWithChannels.js +++ b/package/src/mock-builders/api/initiateClientWithChannels.ts @@ -1,3 +1,5 @@ +import type { Channel, StreamChat, UserResponse } from 'stream-chat'; + import { getOrCreateChannelApi } from './getOrCreateChannel'; import { useMockedApis } from './useMockedApis'; @@ -6,14 +8,24 @@ import { generateMember } from '../generator/member'; import { generateUser } from '../generator/user'; import { getTestClientWithUser } from '../mock'; -const initChannelFromData = async ({ channelData, client, defaultGenerateChannelOptions }) => { +type ChannelData = Parameters[0]; + +const initChannelFromData = async ({ + channelData, + client, + defaultGenerateChannelOptions, +}: { + channelData: ChannelData; + client: StreamChat; + defaultGenerateChannelOptions: ChannelData; +}): Promise => { const mockedChannelData = generateChannel({ ...defaultGenerateChannelOptions, ...channelData, }); useMockedApis(client, [getOrCreateChannelApi(mockedChannelData)]); - const channel = client.channel(mockedChannelData.channel.type, mockedChannelData.channel.id); + const channel = client.channel(mockedChannelData.type, mockedChannelData.id); await channel.watch(); jest.spyOn(channel, 'getConfig').mockImplementation(() => mockedChannelData.channel.config); // jest @@ -22,7 +34,13 @@ const initChannelFromData = async ({ channelData, client, defaultGenerateChannel return channel; }; -export const initiateClientWithChannels = async ({ channelsData, customUser } = {}) => { +export const initiateClientWithChannels = async ({ + channelsData, + customUser, +}: { + channelsData?: ChannelData[]; + customUser?: UserResponse; +} = {}): Promise<{ channels: Channel[]; client: StreamChat }> => { const user = customUser || generateUser(); const client = await getTestClientWithUser(user); diff --git a/package/src/mock-builders/api/queryChannels.js b/package/src/mock-builders/api/queryChannels.ts similarity index 55% rename from package/src/mock-builders/api/queryChannels.js rename to package/src/mock-builders/api/queryChannels.ts index 3c27043319..645db73f9a 100644 --- a/package/src/mock-builders/api/queryChannels.js +++ b/package/src/mock-builders/api/queryChannels.ts @@ -1,13 +1,11 @@ -import { mockedApiResponse } from './utils'; +import { mockedApiResponse, type MockedApiResponse } from './utils'; /** * Returns the api response for queryChannels api * * api - /channels - * - * @param {*} channels Array of channel objects. */ -export const queryChannelsApi = (channels = []) => { +export const queryChannelsApi = (channels: unknown[] = []): MockedApiResponse => { const result = { channels, duration: 0.01, diff --git a/package/src/mock-builders/api/queryMembers.js b/package/src/mock-builders/api/queryMembers.ts similarity index 65% rename from package/src/mock-builders/api/queryMembers.js rename to package/src/mock-builders/api/queryMembers.ts index e0bc27c003..2afa093220 100644 --- a/package/src/mock-builders/api/queryMembers.js +++ b/package/src/mock-builders/api/queryMembers.ts @@ -1,13 +1,14 @@ -import { mockedApiResponse } from './utils'; +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelMemberResponse } from 'stream-chat'; + +import { mockedApiResponse, type MockedApiResponse } from './utils'; /** * Returns the api response for queryMembers api * * api - /query_members - * - * @param {*} members Array of User objects. */ -export const queryMembersApi = (members = []) => { +export const queryMembersApi = (members: ChannelMemberResponse[] = []): MockedApiResponse => { const result = { members, }; @@ -15,8 +16,8 @@ export const queryMembersApi = (members = []) => { return mockedApiResponse(result, 'get'); }; -export const CHANNEL_MEMBERS = [ - { +export const CHANNEL_MEMBERS: ChannelMemberResponse[] = [ + fromPartial({ banned: false, channel_role: 'channel_member', created_at: '2021-01-27T11:54:34.173125Z', @@ -28,8 +29,8 @@ export const CHANNEL_MEMBERS = [ name: 'ben', }, user_id: 'ben', - }, - { + }), + fromPartial({ banned: false, channel_role: 'channel_member', created_at: '2021-01-27T11:54:34.173125Z', @@ -41,8 +42,8 @@ export const CHANNEL_MEMBERS = [ name: 'nick', }, user_id: 'nick', - }, - { + }), + fromPartial({ banned: false, channel_role: 'channel_member', created_at: '2021-01-27T11:54:34.173125Z', @@ -54,8 +55,8 @@ export const CHANNEL_MEMBERS = [ name: 'okechukwu nwagba', }, user_id: 'okechukwu nwagba', - }, - { + }), + fromPartial({ banned: false, channel_role: 'channel_member', created_at: '2021-01-28T09:08:43.274508Z', @@ -67,9 +68,9 @@ export const CHANNEL_MEMBERS = [ name: 'qatest1', }, user_id: 'qatest1', - }, + }), - { + fromPartial({ banned: false, channel_role: 'channel_member', created_at: '2021-01-27T11:54:34.173125Z', @@ -81,11 +82,11 @@ export const CHANNEL_MEMBERS = [ name: 'thierry', }, user_id: 'thierry', - }, + }), ]; -export const ONE_CHANNEL_MEMBER = [ - { +export const ONE_CHANNEL_MEMBER: ChannelMemberResponse[] = [ + fromPartial({ banned: false, channel_role: 'channel_member', created_at: '2021-01-27T11:54:34.173125Z', @@ -97,20 +98,21 @@ export const ONE_CHANNEL_MEMBER = [ name: 'okechukwu nwagba martin', }, user_id: 'okechukwu nwagba martin', - }, + }), ]; -export const ONE_CHANNEL_MEMBER_MOCK = { +export const ONE_CHANNEL_MEMBER_MOCK: Record = { okey: ONE_CHANNEL_MEMBER[0], }; -export const GROUP_CHANNEL_MEMBERS_MOCK = CHANNEL_MEMBERS.reduce((acc, member) => { - acc[member.user_id] = member; - return acc; -}, {}); +export const GROUP_CHANNEL_MEMBERS_MOCK: Record = + CHANNEL_MEMBERS.reduce>((acc, member) => { + if (member.user_id) acc[member.user_id] = member; + return acc; + }, {}); -export const ONE_MEMBER_WITH_EMPTY_USER = [ - { +export const ONE_MEMBER_WITH_EMPTY_USER: ChannelMemberResponse[] = [ + fromPartial({ banned: false, channel_role: 'channel_member', created_at: '2021-01-27T11:54:34.173125Z', @@ -119,9 +121,9 @@ export const ONE_MEMBER_WITH_EMPTY_USER = [ updated_at: '2021-02-12T12:12:35.862282Z', user: {}, user_id: 'okechukwu nwagba martin', - }, + }), ]; -export const ONE_MEMBER_WITH_EMPTY_USER_MOCK = { +export const ONE_MEMBER_WITH_EMPTY_USER_MOCK: Record = { okey: ONE_MEMBER_WITH_EMPTY_USER[0], }; diff --git a/package/src/mock-builders/api/sendMessage.js b/package/src/mock-builders/api/sendMessage.js deleted file mode 100644 index c704811c5d..0000000000 --- a/package/src/mock-builders/api/sendMessage.js +++ /dev/null @@ -1,18 +0,0 @@ -import { mockedApiResponse } from './utils'; - -import { generateMessage } from '../generator/message'; -/** - * Returns the api response for sendMessage api. - * - * api - /channels/{type}/{id}/message - * - * @param {*} message - */ -export const sendMessageApi = (message = generateMessage()) => { - const result = { - duration: 0.01, - message, - }; - - return mockedApiResponse(result, 'post'); -}; diff --git a/package/src/mock-builders/api/sendMessage.ts b/package/src/mock-builders/api/sendMessage.ts new file mode 100644 index 0000000000..d3d861dbdb --- /dev/null +++ b/package/src/mock-builders/api/sendMessage.ts @@ -0,0 +1,25 @@ +import type { LocalMessage, MessageResponse } from 'stream-chat'; + +import { mockedApiResponse, type MockedApiResponse } from './utils'; + +import { generateMessage } from '../generator/message'; + +/** + * Returns the api response for sendMessage api. + * + * api - /channels/{type}/{id}/message + * + * Accepts either `MessageResponse` or `LocalMessage`; the mock infra treats + * them interchangeably at runtime, even though the real API shape is + * `MessageResponse`. + */ +export const sendMessageApi = ( + message: MessageResponse | LocalMessage = generateMessage(), +): MockedApiResponse => { + const result = { + duration: 0.01, + message, + }; + + return mockedApiResponse(result, 'post'); +}; diff --git a/package/src/mock-builders/api/sendReaction.ts b/package/src/mock-builders/api/sendReaction.ts index 51bb5f1e82..2cf2fe3b3a 100644 --- a/package/src/mock-builders/api/sendReaction.ts +++ b/package/src/mock-builders/api/sendReaction.ts @@ -1,14 +1,18 @@ -import { mockedApiResponse } from './utils'; +import type { LocalMessage, MessageResponse, ReactionResponse } from 'stream-chat'; + +import { mockedApiResponse, type MockedApiResponse } from './utils'; import { generateReaction } from '../generator/reaction'; + /** - * Returns the api response for sendMessage api. + * Returns the api response for sendReaction api. * * api - /messages/{id}/reaction - * - * @param {*} message */ -export const sendReactionApi = (message, reaction = generateReaction()) => { +export const sendReactionApi = ( + message: MessageResponse | LocalMessage, + reaction: ReactionResponse = generateReaction(), +): MockedApiResponse => { const result = { duration: 0.01, message, diff --git a/package/src/mock-builders/api/threadReplies.js b/package/src/mock-builders/api/threadReplies.js deleted file mode 100644 index 2c88511f17..0000000000 --- a/package/src/mock-builders/api/threadReplies.js +++ /dev/null @@ -1,16 +0,0 @@ -import { mockedApiResponse } from './utils'; - -/** - * Returns the api response for thread replies api - * - * api - /messages/${parent_id}/replies - * - * @param {*} replies Array of message objects. - */ -export const threadRepliesApi = (replies = []) => { - const result = { - messages: replies, - }; - - return mockedApiResponse(result, 'get'); -}; diff --git a/package/src/mock-builders/api/threadReplies.ts b/package/src/mock-builders/api/threadReplies.ts new file mode 100644 index 0000000000..66d2e38aa3 --- /dev/null +++ b/package/src/mock-builders/api/threadReplies.ts @@ -0,0 +1,18 @@ +import type { LocalMessage, MessageResponse } from 'stream-chat'; + +import { mockedApiResponse, type MockedApiResponse } from './utils'; + +/** + * Returns the api response for thread replies api + * + * api - /messages/${parent_id}/replies + */ +export const threadRepliesApi = ( + replies: Array = [], +): MockedApiResponse => { + const result = { + messages: replies, + }; + + return mockedApiResponse(result, 'get'); +}; diff --git a/package/src/mock-builders/api/useMockedApis.js b/package/src/mock-builders/api/useMockedApis.ts similarity index 68% rename from package/src/mock-builders/api/useMockedApis.js rename to package/src/mock-builders/api/useMockedApis.ts index 1fb9a720d0..31865f954b 100644 --- a/package/src/mock-builders/api/useMockedApis.js +++ b/package/src/mock-builders/api/useMockedApis.ts @@ -1,13 +1,14 @@ +import type { StreamChat } from 'stream-chat'; + +import type { MockedApiResponse } from './utils'; + /** * Hook to mock the calls made through axios module. * You should provide the responses of Apis in order that they will be called. * You should use api functions from current directory to build these responses. * e.g., queryChannelsApi, sendMessageApi - * - * @param {StreamClient} client - * @param {*} apiResponses */ -export const useMockedApis = (client, apiResponses) => { +export const useMockedApis = (client: StreamChat, apiResponses: MockedApiResponse[]) => { apiResponses.forEach(({ response, type }) => { jest.spyOn(client.axiosInstance, type).mockImplementation().mockResolvedValue(response); }); diff --git a/package/src/mock-builders/api/utils.js b/package/src/mock-builders/api/utils.js deleted file mode 100644 index 34df5e61e4..0000000000 --- a/package/src/mock-builders/api/utils.js +++ /dev/null @@ -1,7 +0,0 @@ -export const mockedApiResponse = (response, type = 'get', status = 200) => ({ - response: { - data: response, - status, - }, - type, -}); diff --git a/package/src/mock-builders/api/utils.ts b/package/src/mock-builders/api/utils.ts new file mode 100644 index 0000000000..81080b672b --- /dev/null +++ b/package/src/mock-builders/api/utils.ts @@ -0,0 +1,16 @@ +export type MockedApiResponse = { + response: { data: unknown; status: number }; + type: 'get' | 'post' | 'put' | 'delete'; +}; + +export const mockedApiResponse = ( + response: unknown, + type: MockedApiResponse['type'] = 'get', + status = 200, +): MockedApiResponse => ({ + response: { + data: response, + status, + }, + type, +}); diff --git a/package/src/mock-builders/attachments.js b/package/src/mock-builders/attachments.ts similarity index 51% rename from package/src/mock-builders/attachments.js rename to package/src/mock-builders/attachments.ts index 19de51d537..4733cdce77 100644 --- a/package/src/mock-builders/attachments.js +++ b/package/src/mock-builders/attachments.ts @@ -1,43 +1,59 @@ +import type { Attachment } from 'stream-chat'; + import { generateRandomId } from '../utils/utils'; -export const generateLocalAttachmentData = () => ({ +type FileReference = { + name: string; + size: number; + type: string; + uri: string; +}; + +type LocalAttachmentData = { + localMetadata: { id: string }; +}; + +export const generateLocalAttachmentData = (): LocalAttachmentData => ({ localMetadata: { id: generateRandomId(), }, }); -export const generateLocalFileUploadAttachmentData = (overrides, attachmentData) => ({ +export const generateLocalFileUploadAttachmentData = ( + overrides?: Partial }>, + attachmentData?: Partial, +) => ({ localMetadata: { ...generateLocalAttachmentData().localMetadata, ...overrides, file: generateFileReference(overrides?.file ?? {}), }, - type: 'file', + type: 'file' as const, ...attachmentData, }); -export const generateImageAttachment = (a) => ({ +export const generateImageAttachment = (a?: Partial): Attachment => ({ fallback: generateRandomId() + '.png', image_url: 'https://' + generateRandomId() + '.png', type: 'image', ...a, }); -export const generateAudioAttachment = (a) => ({ +export const generateAudioAttachment = (a?: Partial): Attachment => ({ asset_url: 'https://' + generateRandomId() + '.mp3', fallback: generateRandomId() + '.mp3', type: 'audio', ...a, }); -export const generateFileAttachment = (a) => ({ +export const generateFileAttachment = (a?: Partial): Attachment => ({ asset_url: 'https://' + generateRandomId() + '.xls', fallback: generateRandomId() + '.xls', type: 'file', ...a, }); -export const generateVideoAttachment = (a) => ({ +export const generateVideoAttachment = (a?: Partial): Attachment => ({ fallback: generateRandomId() + '.mp4', image_url: 'https://' + generateRandomId() + '.mp4', type: 'video', @@ -46,7 +62,7 @@ export const generateVideoAttachment = (a) => ({ const fileName = generateRandomId() + '.png'; -export const generateFileReference = (a) => ({ +export const generateFileReference = (a?: Partial): FileReference => ({ name: fileName, size: 1000, type: 'image/png', diff --git a/package/src/mock-builders/event/channelDeleted.js b/package/src/mock-builders/event/channelDeleted.js deleted file mode 100644 index 3b05536541..0000000000 --- a/package/src/mock-builders/event/channelDeleted.js +++ /dev/null @@ -1,7 +0,0 @@ -export default (client, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'channel.deleted', - }); -}; diff --git a/package/src/mock-builders/event/channelDeleted.ts b/package/src/mock-builders/event/channelDeleted.ts new file mode 100644 index 0000000000..21576a8627 --- /dev/null +++ b/package/src/mock-builders/event/channelDeleted.ts @@ -0,0 +1,12 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'channel.deleted', + }), + ); +}; diff --git a/package/src/mock-builders/event/channelHidden.js b/package/src/mock-builders/event/channelHidden.js deleted file mode 100644 index 6c144f89ec..0000000000 --- a/package/src/mock-builders/event/channelHidden.js +++ /dev/null @@ -1,7 +0,0 @@ -export default (client, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'channel.hidden', - }); -}; diff --git a/package/src/mock-builders/event/channelHidden.ts b/package/src/mock-builders/event/channelHidden.ts new file mode 100644 index 0000000000..4d30eae961 --- /dev/null +++ b/package/src/mock-builders/event/channelHidden.ts @@ -0,0 +1,12 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'channel.hidden', + }), + ); +}; diff --git a/package/src/mock-builders/event/channelTruncated.js b/package/src/mock-builders/event/channelTruncated.js deleted file mode 100644 index 7bffbd47b2..0000000000 --- a/package/src/mock-builders/event/channelTruncated.js +++ /dev/null @@ -1,7 +0,0 @@ -export default (client, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'channel.truncated', - }); -}; diff --git a/package/src/mock-builders/event/channelTruncated.ts b/package/src/mock-builders/event/channelTruncated.ts new file mode 100644 index 0000000000..b10e1c2676 --- /dev/null +++ b/package/src/mock-builders/event/channelTruncated.ts @@ -0,0 +1,12 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'channel.truncated', + }), + ); +}; diff --git a/package/src/mock-builders/event/channelUpdated.js b/package/src/mock-builders/event/channelUpdated.js deleted file mode 100644 index 099e10804e..0000000000 --- a/package/src/mock-builders/event/channelUpdated.js +++ /dev/null @@ -1,7 +0,0 @@ -export default (client, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'channel.updated', - }); -}; diff --git a/package/src/mock-builders/event/channelUpdated.ts b/package/src/mock-builders/event/channelUpdated.ts new file mode 100644 index 0000000000..559dbb9d65 --- /dev/null +++ b/package/src/mock-builders/event/channelUpdated.ts @@ -0,0 +1,12 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'channel.updated', + }), + ); +}; diff --git a/package/src/mock-builders/event/channelVisible.js b/package/src/mock-builders/event/channelVisible.js deleted file mode 100644 index c74df7eed3..0000000000 --- a/package/src/mock-builders/event/channelVisible.js +++ /dev/null @@ -1,7 +0,0 @@ -export default (client, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'channel.visible', - }); -}; diff --git a/package/src/mock-builders/event/channelVisible.ts b/package/src/mock-builders/event/channelVisible.ts new file mode 100644 index 0000000000..42f20fc350 --- /dev/null +++ b/package/src/mock-builders/event/channelVisible.ts @@ -0,0 +1,12 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'channel.visible', + }), + ); +}; diff --git a/package/src/mock-builders/event/connectionChanged.js b/package/src/mock-builders/event/connectionChanged.js deleted file mode 100644 index adb1314180..0000000000 --- a/package/src/mock-builders/event/connectionChanged.js +++ /dev/null @@ -1,6 +0,0 @@ -export default (client, online = true) => { - client.dispatchEvent({ - online, - type: 'connection.changed', - }); -}; diff --git a/package/src/mock-builders/event/connectionChanged.ts b/package/src/mock-builders/event/connectionChanged.ts new file mode 100644 index 0000000000..158310158f --- /dev/null +++ b/package/src/mock-builders/event/connectionChanged.ts @@ -0,0 +1,11 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, online = true) => { + client.dispatchEvent( + fromPartial({ + online, + type: 'connection.changed', + }), + ); +}; diff --git a/package/src/mock-builders/event/connectionRecovered.js b/package/src/mock-builders/event/connectionRecovered.js deleted file mode 100644 index e47a21833a..0000000000 --- a/package/src/mock-builders/event/connectionRecovered.js +++ /dev/null @@ -1,5 +0,0 @@ -export default (client) => { - client.dispatchEvent({ - type: 'connection.recovered', - }); -}; diff --git a/package/src/mock-builders/event/connectionRecovered.ts b/package/src/mock-builders/event/connectionRecovered.ts new file mode 100644 index 0000000000..a311ff7b64 --- /dev/null +++ b/package/src/mock-builders/event/connectionRecovered.ts @@ -0,0 +1,10 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat) => { + client.dispatchEvent( + fromPartial({ + type: 'connection.recovered', + }), + ); +}; diff --git a/package/src/mock-builders/event/memberAdded.js b/package/src/mock-builders/event/memberAdded.js deleted file mode 100644 index b9281f98ef..0000000000 --- a/package/src/mock-builders/event/memberAdded.js +++ /dev/null @@ -1,10 +0,0 @@ -export default (client, member, channel = {}) => { - client.dispatchEvent({ - channel_id: channel.id, - channel_type: channel.type, - cid: channel.cid, - member, - type: 'member.added', - user: member.user, - }); -}; diff --git a/package/src/mock-builders/event/memberAdded.ts b/package/src/mock-builders/event/memberAdded.ts new file mode 100644 index 0000000000..bb9c8eb3ee --- /dev/null +++ b/package/src/mock-builders/event/memberAdded.ts @@ -0,0 +1,19 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelMemberResponse, ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default ( + client: StreamChat, + member: ChannelMemberResponse, + channel: Partial = {}, +) => { + client.dispatchEvent( + fromPartial({ + channel_id: channel.id, + channel_type: channel.type, + cid: channel.cid, + member, + type: 'member.added', + user: member.user, + }), + ); +}; diff --git a/package/src/mock-builders/event/memberRemoved.js b/package/src/mock-builders/event/memberRemoved.js deleted file mode 100644 index 174f7758c0..0000000000 --- a/package/src/mock-builders/event/memberRemoved.js +++ /dev/null @@ -1,9 +0,0 @@ -export default (client, member, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - member, - type: 'member.removed', - user: member.user, - }); -}; diff --git a/package/src/mock-builders/event/memberRemoved.ts b/package/src/mock-builders/event/memberRemoved.ts new file mode 100644 index 0000000000..ed9f3d181a --- /dev/null +++ b/package/src/mock-builders/event/memberRemoved.ts @@ -0,0 +1,18 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelMemberResponse, ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default ( + client: StreamChat, + member: ChannelMemberResponse, + channel: Partial = {}, +) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + member, + type: 'member.removed', + user: member.user, + }), + ); +}; diff --git a/package/src/mock-builders/event/memberUpdated.js b/package/src/mock-builders/event/memberUpdated.js deleted file mode 100644 index a337633f57..0000000000 --- a/package/src/mock-builders/event/memberUpdated.js +++ /dev/null @@ -1,9 +0,0 @@ -export default (client, member, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - member, - type: 'member.updated', - user: member.user, - }); -}; diff --git a/package/src/mock-builders/event/memberUpdated.ts b/package/src/mock-builders/event/memberUpdated.ts new file mode 100644 index 0000000000..40837f31a2 --- /dev/null +++ b/package/src/mock-builders/event/memberUpdated.ts @@ -0,0 +1,18 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelMemberResponse, ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default ( + client: StreamChat, + member: ChannelMemberResponse, + channel: Partial = {}, +) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + member, + type: 'member.updated', + user: member.user, + }), + ); +}; diff --git a/package/src/mock-builders/event/messageDeleted.js b/package/src/mock-builders/event/messageDeleted.js deleted file mode 100644 index 27f5482740..0000000000 --- a/package/src/mock-builders/event/messageDeleted.js +++ /dev/null @@ -1,8 +0,0 @@ -export default (client, message, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - message, - type: 'message.deleted', - }); -}; diff --git a/package/src/mock-builders/event/messageDeleted.ts b/package/src/mock-builders/event/messageDeleted.ts new file mode 100644 index 0000000000..9c99fc7491 --- /dev/null +++ b/package/src/mock-builders/event/messageDeleted.ts @@ -0,0 +1,23 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { + ChannelResponse, + Event, + LocalMessage, + MessageResponse, + StreamChat, +} from 'stream-chat'; + +export default ( + client: StreamChat, + message: MessageResponse | LocalMessage, + channel: Partial = {}, +) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + message: message as MessageResponse, + type: 'message.deleted', + }), + ); +}; diff --git a/package/src/mock-builders/event/messageNew.js b/package/src/mock-builders/event/messageNew.js deleted file mode 100644 index 0453a41d52..0000000000 --- a/package/src/mock-builders/event/messageNew.js +++ /dev/null @@ -1,11 +0,0 @@ -export default (client, newMessage, channel = {}) => { - client.dispatchEvent({ - channel, - channel_id: channel.id, - channel_type: channel.type, - cid: channel.cid, - message: newMessage, - type: 'message.new', - ...(newMessage.user ? { user: newMessage.user } : {}), - }); -}; diff --git a/package/src/mock-builders/event/messageNew.ts b/package/src/mock-builders/event/messageNew.ts new file mode 100644 index 0000000000..b23a169272 --- /dev/null +++ b/package/src/mock-builders/event/messageNew.ts @@ -0,0 +1,26 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { + ChannelResponse, + Event, + LocalMessage, + MessageResponse, + StreamChat, +} from 'stream-chat'; + +export default ( + client: StreamChat, + newMessage: MessageResponse | LocalMessage, + channel: Partial = {}, +) => { + client.dispatchEvent( + fromPartial({ + channel, + channel_id: channel.id, + channel_type: channel.type, + cid: channel.cid, + message: newMessage as MessageResponse, + type: 'message.new', + ...(newMessage.user ? { user: newMessage.user } : {}), + }), + ); +}; diff --git a/package/src/mock-builders/event/messageRead.js b/package/src/mock-builders/event/messageRead.js deleted file mode 100644 index 9edbab30f2..0000000000 --- a/package/src/mock-builders/event/messageRead.js +++ /dev/null @@ -1,15 +0,0 @@ -export default (client, user, channel = {}, payload = {}) => { - const newDate = new Date(); - const event = { - channel, - cid: channel.cid, - created_at: newDate, - received_at: newDate, - type: 'message.read', - user, - ...payload, - }; - client.dispatchEvent(event); - - return event; -}; diff --git a/package/src/mock-builders/event/messageRead.ts b/package/src/mock-builders/event/messageRead.ts new file mode 100644 index 0000000000..7de4293e86 --- /dev/null +++ b/package/src/mock-builders/event/messageRead.ts @@ -0,0 +1,23 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat, UserResponse } from 'stream-chat'; + +export default ( + client: StreamChat, + user: UserResponse, + channel: Partial = {}, + payload: Partial = {}, +): Event => { + const newDate = new Date() as unknown as string; + const event = fromPartial({ + channel, + cid: channel.cid, + created_at: newDate, + received_at: newDate, + type: 'message.read', + user, + ...payload, + }); + client.dispatchEvent(event); + + return event; +}; diff --git a/package/src/mock-builders/event/messageUpdated.js b/package/src/mock-builders/event/messageUpdated.js deleted file mode 100644 index 93fb81e01d..0000000000 --- a/package/src/mock-builders/event/messageUpdated.js +++ /dev/null @@ -1,8 +0,0 @@ -export default (client, newMessage, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - message: newMessage, - type: 'message.updated', - }); -}; diff --git a/package/src/mock-builders/event/messageUpdated.ts b/package/src/mock-builders/event/messageUpdated.ts new file mode 100644 index 0000000000..3ac3671d73 --- /dev/null +++ b/package/src/mock-builders/event/messageUpdated.ts @@ -0,0 +1,23 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { + ChannelResponse, + Event, + LocalMessage, + MessageResponse, + StreamChat, +} from 'stream-chat'; + +export default ( + client: StreamChat, + newMessage: MessageResponse | LocalMessage, + channel: Partial = {}, +) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + message: newMessage as MessageResponse, + type: 'message.updated', + }), + ); +}; diff --git a/package/src/mock-builders/event/notificationAddedToChannel.js b/package/src/mock-builders/event/notificationAddedToChannel.js deleted file mode 100644 index 941a1fef63..0000000000 --- a/package/src/mock-builders/event/notificationAddedToChannel.js +++ /dev/null @@ -1,7 +0,0 @@ -export default (client, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'notification.added_to_channel', - }); -}; diff --git a/package/src/mock-builders/event/notificationAddedToChannel.ts b/package/src/mock-builders/event/notificationAddedToChannel.ts new file mode 100644 index 0000000000..d9e7c8c843 --- /dev/null +++ b/package/src/mock-builders/event/notificationAddedToChannel.ts @@ -0,0 +1,12 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'notification.added_to_channel', + }), + ); +}; diff --git a/package/src/mock-builders/event/notificationChannelMutesUpdated.js b/package/src/mock-builders/event/notificationChannelMutesUpdated.js deleted file mode 100644 index 3600092681..0000000000 --- a/package/src/mock-builders/event/notificationChannelMutesUpdated.js +++ /dev/null @@ -1,7 +0,0 @@ -export default (client, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'notification.channel_mutes_updated', - }); -}; diff --git a/package/src/mock-builders/event/notificationChannelMutesUpdated.ts b/package/src/mock-builders/event/notificationChannelMutesUpdated.ts new file mode 100644 index 0000000000..100e41e310 --- /dev/null +++ b/package/src/mock-builders/event/notificationChannelMutesUpdated.ts @@ -0,0 +1,12 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'notification.channel_mutes_updated', + }), + ); +}; diff --git a/package/src/mock-builders/event/notificationMarkRead.js b/package/src/mock-builders/event/notificationMarkRead.js deleted file mode 100644 index 8978706f8f..0000000000 --- a/package/src/mock-builders/event/notificationMarkRead.js +++ /dev/null @@ -1,7 +0,0 @@ -export default (client, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'notification.mark_read', - }); -}; diff --git a/package/src/mock-builders/event/notificationMarkRead.ts b/package/src/mock-builders/event/notificationMarkRead.ts new file mode 100644 index 0000000000..0158f1673c --- /dev/null +++ b/package/src/mock-builders/event/notificationMarkRead.ts @@ -0,0 +1,12 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'notification.mark_read', + }), + ); +}; diff --git a/package/src/mock-builders/event/notificationMarkUnread.js b/package/src/mock-builders/event/notificationMarkUnread.js deleted file mode 100644 index 50dd0255c7..0000000000 --- a/package/src/mock-builders/event/notificationMarkUnread.js +++ /dev/null @@ -1,12 +0,0 @@ -export default (client, channel = {}, payload = {}, user = {}) => { - const newDate = new Date(); - client.dispatchEvent({ - channel, - cid: channel.cid, - created_at: newDate, - received_at: newDate, - type: 'notification.mark_unread', - user, - ...payload, - }); -}; diff --git a/package/src/mock-builders/event/notificationMarkUnread.ts b/package/src/mock-builders/event/notificationMarkUnread.ts new file mode 100644 index 0000000000..8bf3dd9e17 --- /dev/null +++ b/package/src/mock-builders/event/notificationMarkUnread.ts @@ -0,0 +1,22 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat, UserResponse } from 'stream-chat'; + +export default ( + client: StreamChat, + channel: Partial = {}, + payload: Partial = {}, + user: Partial = {}, +) => { + const newDate = new Date() as unknown as string; + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + created_at: newDate, + received_at: newDate, + type: 'notification.mark_unread', + user, + ...payload, + }), + ); +}; diff --git a/package/src/mock-builders/event/notificationMessageNew.js b/package/src/mock-builders/event/notificationMessageNew.js deleted file mode 100644 index 6ffeb2bba5..0000000000 --- a/package/src/mock-builders/event/notificationMessageNew.js +++ /dev/null @@ -1,7 +0,0 @@ -export default (client, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'notification.message_new', - }); -}; diff --git a/package/src/mock-builders/event/notificationMessageNew.ts b/package/src/mock-builders/event/notificationMessageNew.ts new file mode 100644 index 0000000000..4011148b92 --- /dev/null +++ b/package/src/mock-builders/event/notificationMessageNew.ts @@ -0,0 +1,12 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'notification.message_new', + }), + ); +}; diff --git a/package/src/mock-builders/event/notificationMutesUpdated.js b/package/src/mock-builders/event/notificationMutesUpdated.js deleted file mode 100644 index 3f69522848..0000000000 --- a/package/src/mock-builders/event/notificationMutesUpdated.js +++ /dev/null @@ -1,11 +0,0 @@ -export default (client, mutes = []) => { - client.dispatchEvent({ - created_at: '2020-05-26T07:11:57.968294216Z', - me: { - ...client.user, - channel_mutes: [], - mutes, - }, - type: 'notification.mutes_updated', - }); -}; diff --git a/package/src/mock-builders/event/notificationMutesUpdated.ts b/package/src/mock-builders/event/notificationMutesUpdated.ts new file mode 100644 index 0000000000..f3a331cf9b --- /dev/null +++ b/package/src/mock-builders/event/notificationMutesUpdated.ts @@ -0,0 +1,16 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { Event, Mute, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, mutes: Mute[] = []) => { + client.dispatchEvent( + fromPartial({ + created_at: '2020-05-26T07:11:57.968294216Z', + me: { + ...client.user, + channel_mutes: [], + mutes, + }, + type: 'notification.mutes_updated', + }), + ); +}; diff --git a/package/src/mock-builders/event/notificationRemovedFromChannel.js b/package/src/mock-builders/event/notificationRemovedFromChannel.js deleted file mode 100644 index 634c7d5a7a..0000000000 --- a/package/src/mock-builders/event/notificationRemovedFromChannel.js +++ /dev/null @@ -1,7 +0,0 @@ -export default (client, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'notification.removed_from_channel', - }); -}; diff --git a/package/src/mock-builders/event/notificationRemovedFromChannel.ts b/package/src/mock-builders/event/notificationRemovedFromChannel.ts new file mode 100644 index 0000000000..739e7fb978 --- /dev/null +++ b/package/src/mock-builders/event/notificationRemovedFromChannel.ts @@ -0,0 +1,12 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat } from 'stream-chat'; + +export default (client: StreamChat, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'notification.removed_from_channel', + }), + ); +}; diff --git a/package/src/mock-builders/event/reactionDeleted.js b/package/src/mock-builders/event/reactionDeleted.js deleted file mode 100644 index b7c222d654..0000000000 --- a/package/src/mock-builders/event/reactionDeleted.js +++ /dev/null @@ -1,9 +0,0 @@ -export default (client, reaction, message, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - message, - reaction, - type: 'reaction.deleted', - }); -}; diff --git a/package/src/mock-builders/event/reactionDeleted.ts b/package/src/mock-builders/event/reactionDeleted.ts new file mode 100644 index 0000000000..36c3c5eb27 --- /dev/null +++ b/package/src/mock-builders/event/reactionDeleted.ts @@ -0,0 +1,26 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { + ChannelResponse, + Event, + LocalMessage, + MessageResponse, + ReactionResponse, + StreamChat, +} from 'stream-chat'; + +export default ( + client: StreamChat, + reaction: ReactionResponse, + message: MessageResponse | LocalMessage, + channel: Partial = {}, +) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + message: message as MessageResponse, + reaction, + type: 'reaction.deleted', + }), + ); +}; diff --git a/package/src/mock-builders/event/reactionNew.js b/package/src/mock-builders/event/reactionNew.js deleted file mode 100644 index efddf9468f..0000000000 --- a/package/src/mock-builders/event/reactionNew.js +++ /dev/null @@ -1,9 +0,0 @@ -export default (client, reaction, message, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - message, - reaction, - type: 'reaction.new', - }); -}; diff --git a/package/src/mock-builders/event/reactionNew.ts b/package/src/mock-builders/event/reactionNew.ts new file mode 100644 index 0000000000..d8d8b1cd29 --- /dev/null +++ b/package/src/mock-builders/event/reactionNew.ts @@ -0,0 +1,26 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { + ChannelResponse, + Event, + LocalMessage, + MessageResponse, + ReactionResponse, + StreamChat, +} from 'stream-chat'; + +export default ( + client: StreamChat, + reaction: ReactionResponse, + message: MessageResponse | LocalMessage, + channel: Partial = {}, +) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + message: message as MessageResponse, + reaction, + type: 'reaction.new', + }), + ); +}; diff --git a/package/src/mock-builders/event/reactionUpdated.js b/package/src/mock-builders/event/reactionUpdated.js deleted file mode 100644 index 26b01e13fc..0000000000 --- a/package/src/mock-builders/event/reactionUpdated.js +++ /dev/null @@ -1,9 +0,0 @@ -export default (client, reaction, message, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - message, - reaction, - type: 'reaction.updated', - }); -}; diff --git a/package/src/mock-builders/event/reactionUpdated.ts b/package/src/mock-builders/event/reactionUpdated.ts new file mode 100644 index 0000000000..f87344d1be --- /dev/null +++ b/package/src/mock-builders/event/reactionUpdated.ts @@ -0,0 +1,26 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { + ChannelResponse, + Event, + LocalMessage, + MessageResponse, + ReactionResponse, + StreamChat, +} from 'stream-chat'; + +export default ( + client: StreamChat, + reaction: ReactionResponse, + message: MessageResponse | LocalMessage, + channel: Partial = {}, +) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + message: message as MessageResponse, + reaction, + type: 'reaction.updated', + }), + ); +}; diff --git a/package/src/mock-builders/event/typing.js b/package/src/mock-builders/event/typing.js deleted file mode 100644 index 72d6b0d215..0000000000 --- a/package/src/mock-builders/event/typing.js +++ /dev/null @@ -1,9 +0,0 @@ -export default (client, user = {}, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'typing.start', - user, - user_id: user.id, - }); -}; diff --git a/package/src/mock-builders/event/typing.ts b/package/src/mock-builders/event/typing.ts new file mode 100644 index 0000000000..efe175e1e2 --- /dev/null +++ b/package/src/mock-builders/event/typing.ts @@ -0,0 +1,18 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat, UserResponse } from 'stream-chat'; + +export default ( + client: StreamChat, + user: Partial = {}, + channel: Partial = {}, +) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'typing.start', + user, + user_id: user.id, + }), + ); +}; diff --git a/package/src/mock-builders/event/userPresence.js b/package/src/mock-builders/event/userPresence.js deleted file mode 100644 index d747b6f30e..0000000000 --- a/package/src/mock-builders/event/userPresence.js +++ /dev/null @@ -1,8 +0,0 @@ -export default (client, user, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'user.presence.changed', - user, - }); -}; diff --git a/package/src/mock-builders/event/userPresence.ts b/package/src/mock-builders/event/userPresence.ts new file mode 100644 index 0000000000..a6c5d838a1 --- /dev/null +++ b/package/src/mock-builders/event/userPresence.ts @@ -0,0 +1,13 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat, UserResponse } from 'stream-chat'; + +export default (client: StreamChat, user: UserResponse, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'user.presence.changed', + user, + }), + ); +}; diff --git a/package/src/mock-builders/event/userUpdated.js b/package/src/mock-builders/event/userUpdated.js deleted file mode 100644 index bf3cbc5918..0000000000 --- a/package/src/mock-builders/event/userUpdated.js +++ /dev/null @@ -1,8 +0,0 @@ -export default (client, user, channel = {}) => { - client.dispatchEvent({ - channel, - cid: channel.cid, - type: 'user.updated', - user, - }); -}; diff --git a/package/src/mock-builders/event/userUpdated.ts b/package/src/mock-builders/event/userUpdated.ts new file mode 100644 index 0000000000..2f0c16c9d0 --- /dev/null +++ b/package/src/mock-builders/event/userUpdated.ts @@ -0,0 +1,13 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelResponse, Event, StreamChat, UserResponse } from 'stream-chat'; + +export default (client: StreamChat, user: UserResponse, channel: Partial = {}) => { + client.dispatchEvent( + fromPartial({ + channel, + cid: channel.cid, + type: 'user.updated', + user, + }), + ); +}; diff --git a/package/src/mock-builders/generator/attachment.js b/package/src/mock-builders/generator/attachment.ts similarity index 53% rename from package/src/mock-builders/generator/attachment.js rename to package/src/mock-builders/generator/attachment.ts index 273cdafb76..a032e8cd7e 100644 --- a/package/src/mock-builders/generator/attachment.js +++ b/package/src/mock-builders/generator/attachment.ts @@ -1,15 +1,16 @@ +import type { Action, Attachment } from 'stream-chat'; import { v4 as uuidv4 } from 'uuid'; const image_url = 'http://www.jackblack.com/tenac_iousd.bmp'; -export const generateAttachmentAction = (a) => ({ +export const generateAttachmentAction = (a?: Partial): Action => ({ name: uuidv4(), text: uuidv4(), value: uuidv4(), ...a, }); -export const generateVideoAttachment = (a) => ({ +export const generateVideoAttachment = (a?: Partial): Attachment => ({ asset_url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', mime_type: 'video/mp4', thumb_url: @@ -19,15 +20,20 @@ export const generateVideoAttachment = (a) => ({ ...a, }); -export const generateImageAttachment = (a) => ({ - id: uuidv4(), +export const generateImageAttachment = (a?: Partial): Attachment => ({ image_url: uuidv4(), title: uuidv4(), type: 'image', ...a, }); -export const generateImageUploadPreview = (a) => ({ +type UploadPreview = { + file: { uri?: string; name?: string; type?: string }; + id: string; + state: string; +}; + +export const generateImageUploadPreview = (a?: Partial): UploadPreview => ({ file: { uri: image_url, }, @@ -36,9 +42,8 @@ export const generateImageUploadPreview = (a) => ({ ...a, }); -export const generateAudioAttachment = (a) => ({ +export const generateAudioAttachment = (a?: Partial): Attachment => ({ asset_url: 'http://www.jackblack.com/tribute.mp3', - description: uuidv4(), image_url, text: uuidv4(), title: uuidv4(), @@ -46,9 +51,8 @@ export const generateAudioAttachment = (a) => ({ ...a, }); -export const generateFileAttachment = (a) => ({ +export const generateFileAttachment = (a?: Partial): Attachment => ({ asset_url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', - description: uuidv4(), file_size: 1337, mime_type: uuidv4(), text: uuidv4(), @@ -57,7 +61,7 @@ export const generateFileAttachment = (a) => ({ ...a, }); -export const generateFileUploadPreview = (a) => ({ +export const generateFileUploadPreview = (a?: Partial): UploadPreview => ({ file: { name: 'dummy.pdf', type: 'file', @@ -68,7 +72,7 @@ export const generateFileUploadPreview = (a) => ({ ...a, }); -export const generateCardAttachment = (a) => ({ +export const generateCardAttachment = (a?: Partial): Attachment => ({ image_url, og_scrape_url: uuidv4(), text: uuidv4(), @@ -78,6 +82,6 @@ export const generateCardAttachment = (a) => ({ ...a, }); -export const generateImgurAttachment = () => generateCardAttachment({ type: 'imgur' }); +export const generateImgurAttachment = (): Attachment => generateCardAttachment({ type: 'imgur' }); -export const generateGiphyAttachment = () => generateCardAttachment({ type: 'giphy' }); +export const generateGiphyAttachment = (): Attachment => generateCardAttachment({ type: 'giphy' }); diff --git a/package/src/mock-builders/generator/channel.ts b/package/src/mock-builders/generator/channel.ts index 8b0efad2ad..dd7ed64b73 100644 --- a/package/src/mock-builders/generator/channel.ts +++ b/package/src/mock-builders/generator/channel.ts @@ -1,4 +1,10 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ +import type { + ChannelMemberResponse, + ChannelResponse, + LocalMessage, + MessageResponse, + ReadResponse, +} from 'stream-chat'; import { v4 as uuidv4 } from 'uuid'; import { generateUser, getUserDefaults } from './user'; @@ -29,8 +35,8 @@ const defaultConfig = { { args: '[text]', description: 'Post a random gif to the channel', - name: 'giphy', - set: 'fun_set', + name: 'giphy' as const, + set: 'fun_set' as const, }, ], connect_events: true, @@ -41,6 +47,7 @@ const defaultConfig = { name: 'messaging', reactions: true, read_events: true, + reminders: false, replies: true, search: true, typing_events: true, @@ -54,54 +61,78 @@ const defaultState = { setIsUpToDate: jest.fn(), }; -const getChannelDefaults = ( - { id, type }: { [key: string]: any } = { id: uuidv4(), type: 'messaging' }, -) => ({ - _client: {}, - channel: { - cid: `${type}:${id}`, - config: { - ...defaultConfig, - name: type, +export type GeneratedChannel = { + channel: Partial & { config: typeof defaultConfig }; + cid: string; + id: string; + messages: Partial[]; + state: typeof defaultState; + type: string; +}; + +type GeneratedChannelIdType = { id?: string; type?: string }; + +const getChannelDefaults = (opts: GeneratedChannelIdType = {}): GeneratedChannel => { + const id = opts.id ?? uuidv4(); + const type = opts.type ?? 'messaging'; + return { + channel: { + cid: `${type}:${id}`, + config: { + ...defaultConfig, + name: type, + }, + created_at: '2020-04-28T11:20:48.578147Z', + created_by: getUserDefaults(), + frozen: false, + id, + own_capabilities: defaultCapabilities, type, + updated_at: '2020-04-28T11:20:48.578147Z', }, - created_at: '2020-04-28T11:20:48.578147Z', - created_by: getUserDefaults(), - frozen: false, + cid: `${type}:${id}`, id, - own_capabilities: defaultCapabilities, + messages: [], + state: defaultState, type, - updated_at: '2020-04-28T11:20:48.578147Z', - }, - cid: `${type}:${id}`, - id, - messages: [], - state: defaultState, - type, -}); + }; +}; -export const generateChannel = (customValues: { [key: string]: any }) => - Object.keys(customValues).reduce((accumulated, current) => { +export const generateChannel = ( + customValues: Partial & Record = {}, +): GeneratedChannel => + Object.keys(customValues).reduce((accumulated, current) => { + const key = current as keyof GeneratedChannel; if (current in accumulated) { - const key = current as keyof typeof accumulated; - accumulated[key] = + (accumulated as Record)[current] = typeof accumulated[key] === 'object' - ? { ...accumulated[key], ...customValues[key] } - : (accumulated[key] = customValues[key]); + ? { ...(accumulated[key] as object), ...(customValues[current] as object) } + : customValues[current]; return accumulated; } - return { ...accumulated, [current]: customValues[current] }; + return { ...accumulated, [current]: customValues[current] } as GeneratedChannel; }, getChannelDefaults()); +type ChannelResponseMessage = Partial | LocalMessage; + +export type GeneratedChannelResponseCustomValues = { + channel?: Partial; + id?: string; + messages?: ChannelResponseMessage[]; + members?: Partial[]; + read?: Partial[]; + type?: string; +}; + export const generateChannelResponse = ( - customValues: { - channel?: Record; - id?: string; - messages?: Record[]; - members?: Record[]; - read?: Record[]; - type?: string; - } = { channel: {}, id: uuidv4(), members: [], messages: [], read: [], type: 'messaging' }, + customValues: GeneratedChannelResponseCustomValues = { + channel: {}, + id: uuidv4(), + members: [], + messages: [], + read: [], + type: 'messaging', + }, ) => { const { channel = {}, diff --git a/package/src/mock-builders/generator/member.js b/package/src/mock-builders/generator/member.js deleted file mode 100644 index 6c1bc2f412..0000000000 --- a/package/src/mock-builders/generator/member.js +++ /dev/null @@ -1,13 +0,0 @@ -import { generateUser } from './user'; - -export const generateMember = (options = {}) => { - const user = (options && options.user) || generateUser(); - return { - invited: false, - is_moderator: false, - role: 'member', - user, - user_id: user.id, - ...options, - }; -}; diff --git a/package/src/mock-builders/generator/member.ts b/package/src/mock-builders/generator/member.ts new file mode 100644 index 0000000000..2da156e8ed --- /dev/null +++ b/package/src/mock-builders/generator/member.ts @@ -0,0 +1,18 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ChannelMemberResponse } from 'stream-chat'; + +import { generateUser } from './user'; + +export const generateMember = ( + options: Partial = {}, +): ChannelMemberResponse => { + const user = (options && options.user) || generateUser(); + return fromPartial({ + invited: false, + is_moderator: false, + role: 'member', + user, + user_id: user.id, + ...options, + }); +}; diff --git a/package/src/mock-builders/generator/message.js b/package/src/mock-builders/generator/message.js deleted file mode 100644 index c0ce3cdb58..0000000000 --- a/package/src/mock-builders/generator/message.js +++ /dev/null @@ -1,32 +0,0 @@ -import { v4 as uuidv4, v5 as uuidv5 } from 'uuid'; - -import { generateUser } from './user'; - -export const generateMessage = (options = {}) => { - const timestamp = - options.timestamp || new Date(new Date().getTime() - Math.floor(Math.random() * 100000)); - - return { - attachments: [], - created_at: timestamp, - html: '

regular

', - id: uuidv4(), - message_text_updated_at: timestamp, - text: uuidv4(), - type: 'regular', - updated_at: timestamp.toString(), - user: generateUser(), - ...options, - }; -}; - -const StreamReactNativeNamespace = '9b244ee4-7d69-4d7b-ae23-cf89e9f7b035'; -export const generateStaticMessage = (seed, options, date) => - generateMessage({ - created_at: date || '2020-04-27T13:39:49.331742Z', - id: uuidv5(seed, StreamReactNativeNamespace), - message_text_updated_at: date || '2020-04-27T13:39:49.331742Z', - text: seed, - updated_at: date || '2020-04-27T13:39:49.331742Z', - ...options, - }); diff --git a/package/src/mock-builders/generator/message.ts b/package/src/mock-builders/generator/message.ts new file mode 100644 index 0000000000..13c24cb375 --- /dev/null +++ b/package/src/mock-builders/generator/message.ts @@ -0,0 +1,50 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { LocalMessage } from 'stream-chat'; +import { v4 as uuidv4, v5 as uuidv5 } from 'uuid'; + +import { generateUser } from './user'; + +type GenerateMessageOptions = Partial & { timestamp?: Date }; + +// Returns a `LocalMessage`-shaped mock. Components across this SDK consume +// `LocalMessage` (with `Date` objects for `created_at`/`updated_at`/`pinned_at`/ +// `deleted_at`), so the mock matches that shape. For tests that feed mock data +// into an API response where the server returns `MessageResponse` (strings for +// dates), cast at the call site — runtime values are the same either way. +export const generateMessage = (options: GenerateMessageOptions = {}): LocalMessage => { + const timestamp = + options.timestamp || new Date(new Date().getTime() - Math.floor(Math.random() * 100000)); + + return fromPartial({ + attachments: [], + created_at: timestamp, + deleted_at: null, + html: '

regular

', + id: uuidv4(), + message_text_updated_at: timestamp.toISOString(), + pinned_at: null, + status: 'received', + text: uuidv4(), + type: 'regular', + updated_at: timestamp, + user: generateUser(), + ...options, + }); +}; + +const StreamReactNativeNamespace = '9b244ee4-7d69-4d7b-ae23-cf89e9f7b035'; +export const generateStaticMessage = ( + seed: string, + options?: GenerateMessageOptions, + date?: string | Date, +): LocalMessage => { + const staticDate = date ? new Date(date) : new Date('2020-04-27T13:39:49.331742Z'); + return generateMessage({ + created_at: staticDate, + id: uuidv5(seed, StreamReactNativeNamespace), + message_text_updated_at: staticDate.toISOString(), + text: seed, + updated_at: staticDate, + ...options, + }); +}; diff --git a/package/src/mock-builders/generator/reaction.js b/package/src/mock-builders/generator/reaction.js deleted file mode 100644 index bac0f07783..0000000000 --- a/package/src/mock-builders/generator/reaction.js +++ /dev/null @@ -1,12 +0,0 @@ -import { generateUser } from './user'; - -export const generateReaction = (options = {}) => { - const user = options.user || generateUser(); - return { - created_at: new Date(), - type: 'love', - user, - user_id: user.id, - ...options, - }; -}; diff --git a/package/src/mock-builders/generator/reaction.ts b/package/src/mock-builders/generator/reaction.ts new file mode 100644 index 0000000000..3d4b692a4f --- /dev/null +++ b/package/src/mock-builders/generator/reaction.ts @@ -0,0 +1,15 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { ReactionResponse } from 'stream-chat'; + +import { generateUser } from './user'; + +export const generateReaction = (options: Partial = {}): ReactionResponse => { + const user = options.user || generateUser(); + return fromPartial({ + created_at: new Date() as unknown as string, + type: 'love', + user, + user_id: user.id, + ...options, + }); +}; diff --git a/package/src/mock-builders/generator/user.js b/package/src/mock-builders/generator/user.ts similarity index 51% rename from package/src/mock-builders/generator/user.js rename to package/src/mock-builders/generator/user.ts index 4ccf290795..e0aec0c55f 100644 --- a/package/src/mock-builders/generator/user.js +++ b/package/src/mock-builders/generator/user.ts @@ -1,22 +1,26 @@ +import { fromPartial } from '@total-typescript/shoehorn'; +import type { UserResponse } from 'stream-chat'; import { v4 as uuidv4 } from 'uuid'; -export const getUserDefaults = () => ({ - banned: false, - created_at: '2020-04-27T13:39:49.331742Z', - id: uuidv4(), - image: uuidv4(), - name: uuidv4(), - online: false, - role: 'user', - updated_at: '2020-04-27T13:39:49.332087Z', -}); +export const getUserDefaults = (): UserResponse => + fromPartial({ + banned: false, + created_at: '2020-04-27T13:39:49.331742Z', + id: uuidv4(), + image: uuidv4(), + name: uuidv4(), + online: false, + role: 'user', + updated_at: '2020-04-27T13:39:49.332087Z', + }); -export const generateUser = (options = {}) => ({ - ...getUserDefaults(), - ...options, -}); +export const generateUser = (options: Partial = {}): UserResponse => + fromPartial({ + ...getUserDefaults(), + ...options, + }); -const staticUsers = [ +const staticUsers: UserResponse[] = [ // By the order of... generateUser({ id: 'tommy', @@ -40,7 +44,7 @@ const staticUsers = [ }), ]; -export const generateStaticUser = (userNumber) => { +export const generateStaticUser = (userNumber: number): UserResponse => { if (userNumber - 1 > staticUsers.length) { throw new Error(`Tried getting a static user that doesn't exist. Index: ${userNumber} , number of users: ${staticUsers.length}`); diff --git a/package/src/mock-builders/mock.js b/package/src/mock-builders/mock.js deleted file mode 100644 index 0ed83d81b1..0000000000 --- a/package/src/mock-builders/mock.js +++ /dev/null @@ -1,57 +0,0 @@ -/* eslint no-underscore-dangle: 0 */ -/* eslint no-param-reassign: 0 */ - -import { StreamChat } from 'stream-chat'; - -const apiKey = 'API_KEY'; -const token = 'dummy_token'; - -export const setUser = (client, user) => - new Promise((resolve) => { - client.connectionId = 'dumm_connection_id'; - client.user = user; - client.user.mutes = []; - client._user = { ...user }; - client.userID = user.id; - client.userToken = token; - resolve(); - }); - -function mockClient(client, options = {}) { - const { disableAppSettings = true } = options; - - jest.spyOn(client, '_setToken').mockImplementation(); - jest.spyOn(client, '_setupConnection').mockImplementation(); - client.tokenManager = { - getToken: jest.fn(() => token), - tokenReady: jest.fn(() => true), - }; - client.setUser = setUser.bind(null, client); - - if (disableAppSettings) { - client.getAppSettings = jest.fn(() => ({})); - } - - return client; -} - -export const getTestClient = (options = {}) => mockClient(new StreamChat(apiKey), options); - -export const getTestClientWithUser = async (user, options = {}) => { - const { disableAppSettings = true } = options; - const client = mockClient(new StreamChat(apiKey)); - await setUser(client, user); - client.wsPromise = Promise.resolve(); - - if (disableAppSettings) { - client.getAppSettings = jest.fn(() => ({})); - } - - return client; -}; - -export const getRandomInt = (min, max) => { - min = Math.ceil(min); - max = Math.floor(max); - return Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive -}; diff --git a/package/src/mock-builders/mock.ts b/package/src/mock-builders/mock.ts new file mode 100644 index 0000000000..cb008b7648 --- /dev/null +++ b/package/src/mock-builders/mock.ts @@ -0,0 +1,79 @@ +/* eslint no-underscore-dangle: 0 */ +/* eslint no-param-reassign: 0 */ + +import { StreamChat, type OwnUserResponse, type UserResponse } from 'stream-chat'; + +const apiKey = 'API_KEY'; +const token = 'dummy_token'; + +type MockClientOptions = { disableAppSettings?: boolean }; + +// Tests reach into private/internal StreamChat fields to set up a mocked +// authenticated client without going through the real network handshake. +type MockableStreamChat = StreamChat & { + connectionId?: string; + user?: OwnUserResponse; + _user?: OwnUserResponse; + userToken?: string; + setUser?: (user: UserResponse) => Promise; + wsPromise?: Promise; + _setToken?: (...args: unknown[]) => unknown; + _setupConnection?: (...args: unknown[]) => unknown; +}; + +export const setUser = (client: StreamChat, user: UserResponse): Promise => + new Promise((resolve) => { + const c = client as MockableStreamChat; + c.connectionId = 'dumm_connection_id'; + c.user = { ...user, mutes: [] } as unknown as OwnUserResponse; + c._user = { ...c.user }; + c.userID = user.id; + c.userToken = token; + resolve(); + }); + +function mockClient(client: StreamChat, options: MockClientOptions = {}): StreamChat { + const { disableAppSettings = true } = options; + const c = client as MockableStreamChat; + + type WithPrivates = { _setToken: () => void; _setupConnection: () => void }; + const withPrivates = c as unknown as WithPrivates; + jest.spyOn(withPrivates, '_setToken').mockImplementation(); + jest.spyOn(withPrivates, '_setupConnection').mockImplementation(); + c.tokenManager = { + getToken: jest.fn(() => token), + tokenReady: jest.fn(() => true), + } as unknown as StreamChat['tokenManager']; + c.setUser = setUser.bind(null, client); + + if (disableAppSettings) { + c.getAppSettings = jest.fn(() => ({})) as unknown as StreamChat['getAppSettings']; + } + + return client; +} + +export const getTestClient = (options: MockClientOptions = {}): StreamChat => + mockClient(new StreamChat(apiKey), options); + +export const getTestClientWithUser = async ( + user: UserResponse, + options: MockClientOptions = {}, +): Promise => { + const { disableAppSettings = true } = options; + const client = mockClient(new StreamChat(apiKey)); + await setUser(client, user); + (client as MockableStreamChat).wsPromise = Promise.resolve(); + + if (disableAppSettings) { + client.getAppSettings = jest.fn(() => ({})) as unknown as StreamChat['getAppSettings']; + } + + return client; +}; + +export const getRandomInt = (min: number, max: number): number => { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive +}; diff --git a/package/src/state-store/__tests__/audio-player.test.ts b/package/src/state-store/__tests__/audio-player.test.ts index 8321a7674f..7b6c4825a8 100644 --- a/package/src/state-store/__tests__/audio-player.test.ts +++ b/package/src/state-store/__tests__/audio-player.test.ts @@ -190,7 +190,9 @@ describe('AudioPlayer', () => { it('updates playback state from the native playback callback', async () => { const playerRef = createMockNativePlayerRef(); - let onPlaybackStatusUpdate; + let onPlaybackStatusUpdate: ( + status: ReturnType, + ) => unknown = () => undefined; (NativeHandlers as { Sound: unknown }).Sound = { Player: null, initializeSound: jest.fn().mockImplementation((_source, _initialStatus, callback) => { diff --git a/package/src/state-store/__tests__/image-gallery-state-store.test.ts b/package/src/state-store/__tests__/image-gallery-state-store.test.ts index e6b7c9fd9a..76a620cd4b 100644 --- a/package/src/state-store/__tests__/image-gallery-state-store.test.ts +++ b/package/src/state-store/__tests__/image-gallery-state-store.test.ts @@ -1,4 +1,4 @@ -import type { Attachment, LocalMessage, UserResponse } from 'stream-chat'; +import type { Attachment, UserResponse } from 'stream-chat'; import { generateImageAttachment, @@ -31,11 +31,11 @@ const { isVideoPlayerAvailable } = jest.requireMock('../../native') as { const createGiphyAttachment = (overrides: Partial = {}): Attachment => ({ giphy: { fixed_height: { - height: 200, + height: '200', url: 'https://giphy.com/test.gif', - width: 200, + width: '200', }, - }, + } as unknown as Attachment['giphy'], thumb_url: 'https://giphy.com/thumb.gif', type: 'giphy', ...overrides, @@ -103,7 +103,7 @@ describe('ImageGalleryStateStore', () => { describe('messages getter and setter', () => { it('should get messages from state', () => { const store = new ImageGalleryStateStore(); - const messages = [generateMessage({ id: 1 }), generateMessage({ id: 2 })]; + const messages = [generateMessage({ id: '1' }), generateMessage({ id: '2' })]; store.messages = messages; @@ -112,7 +112,7 @@ describe('ImageGalleryStateStore', () => { it('should update state when setting messages', () => { const store = new ImageGalleryStateStore(); - const messages = [generateMessage({ id: 1 })]; + const messages = [generateMessage({ id: '1' })]; store.messages = messages; @@ -192,7 +192,7 @@ describe('ImageGalleryStateStore', () => { const imageAttachment = generateImageAttachment({ image_url: 'https://example.com/image.jpg', }); - const message = generateMessage({ attachments: [imageAttachment], id: 1 }); + const message = generateMessage({ attachments: [imageAttachment], id: '1' }); store.messages = [message]; @@ -205,7 +205,7 @@ describe('ImageGalleryStateStore', () => { const videoAttachment = generateVideoAttachment({ asset_url: 'https://example.com/video.mp4', }); - const message = generateMessage({ attachments: [videoAttachment], id: 1 }); + const message = generateMessage({ attachments: [videoAttachment], id: '1' }); store.messages = [message]; @@ -216,7 +216,7 @@ describe('ImageGalleryStateStore', () => { it('should filter messages with giphy attachments', () => { const store = new ImageGalleryStateStore(); const giphyAttachment = createGiphyAttachment(); - const message = generateMessage({ attachments: [giphyAttachment], id: 1 }); + const message = generateMessage({ attachments: [giphyAttachment], id: '1' }); store.messages = [message]; @@ -230,7 +230,7 @@ describe('ImageGalleryStateStore', () => { const videoAttachment = generateVideoAttachment({ asset_url: 'https://example.com/video.mp4', }); - const message = generateMessage({ attachments: [videoAttachment], id: 1 }); + const message = generateMessage({ attachments: [videoAttachment], id: '1' }); store.messages = [message]; @@ -243,7 +243,7 @@ describe('ImageGalleryStateStore', () => { image_url: 'https://example.com/image.jpg', title_link: 'https://example.com', }); - const message = generateMessage({ attachments: [linkPreviewAttachment], id: 1 }); + const message = generateMessage({ attachments: [linkPreviewAttachment], id: '1' }); store.messages = [message]; @@ -256,7 +256,7 @@ describe('ImageGalleryStateStore', () => { image_url: 'https://example.com/image.jpg', og_scrape_url: 'https://example.com', }); - const message = generateMessage({ attachments: [linkAttachment], id: 1 }); + const message = generateMessage({ attachments: [linkAttachment], id: '1' }); store.messages = [message]; @@ -270,7 +270,7 @@ describe('ImageGalleryStateStore', () => { image_url: 'https://example.com/preview.jpg', title_link: 'https://example.com', }); - const message = generateMessage({ attachments: [viewableImage, linkPreview], id: 1 }); + const message = generateMessage({ attachments: [viewableImage, linkPreview], id: '1' }); store.messages = [message]; @@ -283,7 +283,7 @@ describe('ImageGalleryStateStore', () => { asset_url: 'https://example.com/file.pdf', type: 'file', }; - const message = generateMessage({ attachments: [fileAttachment], id: 1 }); + const message = generateMessage({ attachments: [fileAttachment], id: '1' }); store.messages = [message]; @@ -292,7 +292,7 @@ describe('ImageGalleryStateStore', () => { it('should handle null attachments gracefully', () => { const store = new ImageGalleryStateStore(); - const message = generateMessage({ attachments: [null as unknown as Attachment], id: 1 }); + const message = generateMessage({ attachments: [null as unknown as Attachment], id: '1' }); store.messages = [message]; @@ -301,7 +301,7 @@ describe('ImageGalleryStateStore', () => { it('should handle messages without attachments array', () => { const store = new ImageGalleryStateStore(); - const message = generateMessage({ attachments: undefined, id: 1 }); + const message = generateMessage({ attachments: undefined, id: '1' }); store.messages = [message]; @@ -340,7 +340,7 @@ describe('ImageGalleryStateStore', () => { original_width: 800, thumb_url: 'https://example.com/thumb.jpg', }); - const user: Partial = { id: 'user-1', name: 'Test User' }; + const user: UserResponse = { id: 'user-1', name: 'Test User' } as UserResponse; const message = generateMessage({ attachments: [imageAttachment], cid: 'channel-msg-1', @@ -372,7 +372,7 @@ describe('ImageGalleryStateStore', () => { asset_url: 'https://example.com/video.mp4', thumb_url: 'https://example.com/video-thumb.jpg', }); - const message = generateMessage({ attachments: [videoAttachment], id: 1 }); + const message = generateMessage({ attachments: [videoAttachment], id: '1' }); store.messages = [message]; @@ -388,7 +388,7 @@ describe('ImageGalleryStateStore', () => { it('should transform giphy attachments with correct mime type', () => { const store = new ImageGalleryStateStore(); const giphyAttachment = createGiphyAttachment(); - const message = generateMessage({ attachments: [giphyAttachment], id: 1 }); + const message = generateMessage({ attachments: [giphyAttachment], id: '1' }); store.messages = [message]; @@ -405,7 +405,7 @@ describe('ImageGalleryStateStore', () => { const store = new ImageGalleryStateStore(); const attachment1 = generateImageAttachment({ image_url: 'https://example.com/image1.jpg' }); const attachment2 = generateImageAttachment({ image_url: 'https://example.com/image2.jpg' }); - const message = generateMessage({ attachments: [attachment1, attachment2], id: 1 }); + const message = generateMessage({ attachments: [attachment1, attachment2], id: '1' }); store.messages = [message]; @@ -418,12 +418,12 @@ describe('ImageGalleryStateStore', () => { const store = new ImageGalleryStateStore({ giphyVersion: 'original' }); const giphyAttachment: Attachment = { giphy: { - fixed_height: { height: 200, url: 'https://giphy.com/fixed.gif', width: 200 }, - original: { height: 400, url: 'https://giphy.com/original.gif', width: 400 }, - }, + fixed_height: { height: '200', url: 'https://giphy.com/fixed.gif', width: '200' }, + original: { height: '400', url: 'https://giphy.com/original.gif', width: '400' }, + } as unknown as Attachment['giphy'], type: 'giphy', }; - const message = generateMessage({ attachments: [giphyAttachment], id: 1 }); + const message = generateMessage({ attachments: [giphyAttachment], id: '1' }); store.messages = [message]; @@ -439,11 +439,11 @@ describe('ImageGalleryStateStore', () => { generateImageAttachment({ image_url: 'https://example.com/image1.jpg' }), generateImageAttachment({ image_url: 'https://example.com/image2.jpg' }), ], - id: 1, + id: '1', }); const message2 = generateMessage({ attachments: [generateVideoAttachment({ asset_url: 'https://example.com/video.mp4' })], - id: 2, + id: '2', }); store.messages = [message1, message2]; @@ -547,7 +547,10 @@ describe('ImageGalleryStateStore', () => { ]; const selectedUrl = 'https://example.com/1.jpg'; - store.openImageGallery({ messages, selectedAttachmentUrl: selectedUrl }); + store.openImageGallery({ + messages, + selectedAttachmentUrl: selectedUrl, + }); expect(store.messages).toEqual(messages); expect(store.selectedAttachmentUrl).toBe(selectedUrl); @@ -795,7 +798,7 @@ describe('ImageGalleryStateStore', () => { id: 'msg-1', }), user: undefined, - } as LocalMessage; + }; store.messages = [message]; diff --git a/package/src/state-store/__tests__/video-player-pool.test.ts b/package/src/state-store/__tests__/video-player-pool.test.ts index 4d5defe4c9..4d64855a3f 100644 --- a/package/src/state-store/__tests__/video-player-pool.test.ts +++ b/package/src/state-store/__tests__/video-player-pool.test.ts @@ -20,7 +20,7 @@ const createMockPlayer = (id: string, overrides: Partial = {}): Vid pause: jest.fn(), play: jest.fn(), ...overrides, - }) as unknown as VideoPlayer; + }) as VideoPlayer; describe('VideoPlayerPool', () => { beforeEach(() => { @@ -175,7 +175,7 @@ describe('VideoPlayerPool', () => { const pool = new VideoPlayerPool(); const player = pool.getOrAddPlayer({ id: 'active-player' }); - pool.setActivePlayer(player as unknown as VideoPlayer); + pool.setActivePlayer(player); expect(pool.getActivePlayer()).toBe(player); pool.removePlayer('active-player'); @@ -188,7 +188,7 @@ describe('VideoPlayerPool', () => { const activePlayer = pool.getOrAddPlayer({ id: 'active-player' }); pool.getOrAddPlayer({ id: 'other-player' }); - pool.setActivePlayer(activePlayer as unknown as VideoPlayer); + pool.setActivePlayer(activePlayer); pool.removePlayer('other-player'); expect(pool.getActivePlayer()).toBe(activePlayer); @@ -255,7 +255,7 @@ describe('VideoPlayerPool', () => { const pool = new VideoPlayerPool(); const player = pool.getOrAddPlayer({ id: 'active-player' }); - pool.setActivePlayer(player as unknown as VideoPlayer); + pool.setActivePlayer(player); expect(pool.getActivePlayer()).toBe(player); pool.clear(); @@ -277,7 +277,7 @@ describe('VideoPlayerPool', () => { it('should not change active player when player does not exist', () => { const pool = new VideoPlayerPool(); const existingPlayer = pool.getOrAddPlayer({ id: 'existing-player' }); - pool.setActivePlayer(existingPlayer as unknown as VideoPlayer); + pool.setActivePlayer(existingPlayer); pool.requestPlay('non-existent-player'); @@ -336,7 +336,7 @@ describe('VideoPlayerPool', () => { const pool = new VideoPlayerPool(); const player = pool.getOrAddPlayer({ id: 'active-player' }); - pool.setActivePlayer(player as unknown as VideoPlayer); + pool.setActivePlayer(player); expect(pool.getActivePlayer()).toBe(player); pool.notifyPaused(); @@ -369,7 +369,7 @@ describe('VideoPlayerPool', () => { ({ activeVideoPlayer }) => callback(activeVideoPlayer), ); - pool.setActivePlayer(player as unknown as VideoPlayer); + pool.setActivePlayer(player); expect(callback).toHaveBeenCalledWith(player); }); @@ -377,7 +377,7 @@ describe('VideoPlayerPool', () => { it('should notify subscribers when active player is cleared', () => { const pool = new VideoPlayerPool(); const player = pool.getOrAddPlayer({ id: 'player-1' }); - pool.setActivePlayer(player as unknown as VideoPlayer); + pool.setActivePlayer(player); const callback = jest.fn(); pool.state.subscribeWithSelector( @@ -420,7 +420,7 @@ describe('VideoPlayerPool', () => { const player1 = pool.getOrAddPlayer({ id: 'player-1' }); pool.getOrAddPlayer({ id: 'player-2' }); - pool.setActivePlayer(player1 as unknown as VideoPlayer); + pool.setActivePlayer(player1); pool.removePlayer('player-1'); expect(pool.getActivePlayer()).toBeNull(); diff --git a/package/src/store/apis/__tests__/updatePendingTask.test.ts b/package/src/store/apis/__tests__/updatePendingTask.test.ts index 4b12803372..9029a8bd87 100644 --- a/package/src/store/apis/__tests__/updatePendingTask.test.ts +++ b/package/src/store/apis/__tests__/updatePendingTask.test.ts @@ -1,3 +1,4 @@ +import type { PendingTask } from 'stream-chat'; import { v4 as uuidv4 } from 'uuid'; import { addPendingTask, getPendingTasks, updatePendingTask } from '..'; @@ -31,9 +32,14 @@ describe('updatePendingTask', () => { messageId: originalMessage.id, payload: [originalMessage, {}], type: 'send-message', - }); + } as unknown as PendingTask); - const [originalRow] = await BetterSqlite.selectFromTable('pendingTasks'); + const [originalRow] = await BetterSqlite.selectFromTable<{ + id: number; + createdAt: string; + type: string; + payload: string; + }>('pendingTasks'); const [originalTask] = await getPendingTasks({ messageId: originalMessage.id }); const editedMessage = { @@ -42,17 +48,22 @@ describe('updatePendingTask', () => { }; await updatePendingTask({ - id: originalTask.id, + id: originalTask.id as number, task: { channelId, channelType: 'messaging', messageId: originalMessage.id, payload: [editedMessage, {}], type: 'send-message', - }, + } as unknown as PendingTask, }); - const [updatedRow] = await BetterSqlite.selectFromTable('pendingTasks'); + const [updatedRow] = await BetterSqlite.selectFromTable<{ + id: number; + createdAt: string; + type: string; + payload: string; + }>('pendingTasks'); const [updatedTask] = await getPendingTasks({ messageId: originalMessage.id }); expect(updatedRow.id).toBe(originalRow.id); @@ -61,6 +72,6 @@ describe('updatePendingTask', () => { expect(JSON.parse(updatedRow.payload)[0].text).toBe('edited text'); expect(updatedTask.id).toBe(originalTask.id); expect(updatedTask.type).toBe('send-message'); - expect(updatedTask.payload[0].text).toBe('edited text'); + expect((updatedTask.payload as [{ text: string }, object])[0].text).toBe('edited text'); }); }); diff --git a/package/src/store/apis/addPendingTask.ts b/package/src/store/apis/addPendingTask.ts index 28b141e691..8aabf100fe 100644 --- a/package/src/store/apis/addPendingTask.ts +++ b/package/src/store/apis/addPendingTask.ts @@ -4,6 +4,7 @@ import { mapTaskToStorable } from '../mappers/mapTaskToStorable'; import { createDeleteQuery } from '../sqlite-utils/createDeleteQuery'; import { createUpsertQuery } from '../sqlite-utils/createUpsertQuery'; import { SqliteClient } from '../SqliteClient'; +import type { PreparedQueries } from '../types'; /* * addPendingTask - Adds a pending task to the database @@ -15,7 +16,7 @@ import { SqliteClient } from '../SqliteClient'; export const addPendingTask = async (task: PendingTask) => { const storable = mapTaskToStorable(task); const { channelId, channelType, threadId, payload, type } = storable; - const queries = []; + const queries: PreparedQueries[] = []; if (type === 'create-draft' || type === 'delete-draft') { // Only one draft pending task is allowed per entity (i.e thread, channel etc). // If multiple arrive, we'll simply take the last one (since deleteDraft does not diff --git a/package/src/store/apis/deleteMessage.ts b/package/src/store/apis/deleteMessage.ts index ac8264cd74..02fd974038 100644 --- a/package/src/store/apis/deleteMessage.ts +++ b/package/src/store/apis/deleteMessage.ts @@ -1,8 +1,9 @@ import { createDeleteQuery } from '../sqlite-utils/createDeleteQuery'; import { SqliteClient } from '../SqliteClient'; +import type { PreparedQueries } from '../types'; export const deleteMessage = async ({ execute = true, id }: { id: string; execute?: boolean }) => { - const queries = []; + const queries: PreparedQueries[] = []; queries.push( createDeleteQuery('messages', { diff --git a/package/src/store/apis/upsertDraft.ts b/package/src/store/apis/upsertDraft.ts index b774b0ff6e..f6f81f830a 100644 --- a/package/src/store/apis/upsertDraft.ts +++ b/package/src/store/apis/upsertDraft.ts @@ -1,4 +1,4 @@ -import { DraftResponse } from 'stream-chat'; +import type { DraftResponse, MessageResponseBase } from 'stream-chat'; import { upsertMessages } from './upsertMessages'; @@ -40,7 +40,7 @@ export const upsertDraft = async ({ draftMessage: storableDraftMessage, }); - const messagesToUpsert = []; + const messagesToUpsert: MessageResponseBase[] = []; if (draft.quoted_message) { messagesToUpsert.push(draft.quoted_message); diff --git a/package/src/store/sqlite-utils/appendOrderByClause.ts b/package/src/store/sqlite-utils/appendOrderByClause.ts index 5c8093f298..3e5918b5e0 100644 --- a/package/src/store/sqlite-utils/appendOrderByClause.ts +++ b/package/src/store/sqlite-utils/appendOrderByClause.ts @@ -9,7 +9,7 @@ export const appendOrderByClause = ( return [selectQuery, []]; } - const orderByClause = []; + const orderByClause: string[] = []; for (const key in orderBy) { const order = orderBy[key]; diff --git a/package/src/store/sqlite-utils/appendWhereCluase.ts b/package/src/store/sqlite-utils/appendWhereCluase.ts index 03f5ac82e7..658e1a7012 100644 --- a/package/src/store/sqlite-utils/appendWhereCluase.ts +++ b/package/src/store/sqlite-utils/appendWhereCluase.ts @@ -9,7 +9,7 @@ export const appendWhereClause = ( return [selectQuery, []]; } - const whereClause = []; + const whereClause: string[] = []; const whereParams: TableColumnValue[] = []; for (const key in whereCondition) { diff --git a/package/src/store/sqlite-utils/createCreateTableQuery.ts b/package/src/store/sqlite-utils/createCreateTableQuery.ts index 01fdc7f72f..f05e972069 100644 --- a/package/src/store/sqlite-utils/createCreateTableQuery.ts +++ b/package/src/store/sqlite-utils/createCreateTableQuery.ts @@ -20,11 +20,13 @@ export const createCreateTableQuery = (tableName: Table): PreparedQueries[] => { ) || []; const indexQueries: PreparedQueries[] = - tables[tableName].indexes?.map((index) => [ - `CREATE ${index.unique ? 'UNIQUE' : ''} INDEX IF NOT EXISTS ${ - index.name - } ON ${tableName}(${index.columns.join(',')})`, - ]) || []; + tables[tableName].indexes?.map( + (index): PreparedQueries => [ + `CREATE ${index.unique ? 'UNIQUE' : ''} INDEX IF NOT EXISTS ${ + index.name + } ON ${tableName}(${index.columns.join(',')})`, + ], + ) || []; return [ [ diff --git a/package/src/test-utils/BetterSqlite.js b/package/src/test-utils/BetterSqlite.js deleted file mode 100644 index 340c8cf485..0000000000 --- a/package/src/test-utils/BetterSqlite.js +++ /dev/null @@ -1,36 +0,0 @@ -import Database from 'better-sqlite3'; - -import { tables } from '../store/schema'; - -export class BetterSqlite { - db = null; - - static openDB = () => { - this.db = new Database('foobar.db'); - }; - - static closeDB = () => { - this.db.close(); - }; - - static getTables = async () => { - const tablesInDb = await this.db.pragma('table_list;'); - return tablesInDb; - }; - - static dropAllTables = () => { - const tableNames = Object.keys(tables); - - tableNames.forEach((name) => { - const stmt = this.db.prepare(`DROP TABLE IF EXISTS ${name}`); - stmt.run(); - }); - }; - - static selectFromTable = async (table) => { - const stmt = await this.db.prepare(`SELECT * FROM ${table}`); - const result = stmt.all(); - - return result; - }; -} diff --git a/package/src/test-utils/BetterSqlite.ts b/package/src/test-utils/BetterSqlite.ts new file mode 100644 index 0000000000..73666cc585 --- /dev/null +++ b/package/src/test-utils/BetterSqlite.ts @@ -0,0 +1,38 @@ +import Database, { type Database as DatabaseType } from 'better-sqlite3'; + +import { tables } from '../store/schema'; + +export class BetterSqlite { + static db: DatabaseType | null = null; + + static openDB = (): void => { + BetterSqlite.db = new Database('foobar.db'); + }; + + static closeDB = (): void => { + BetterSqlite.db?.close(); + }; + + static getTables = async (): Promise => { + const tablesInDb = await BetterSqlite.db?.pragma('table_list;'); + return tablesInDb; + }; + + static dropAllTables = (): void => { + const tableNames = Object.keys(tables); + + tableNames.forEach((name) => { + const stmt = BetterSqlite.db?.prepare(`DROP TABLE IF EXISTS ${name}`); + stmt?.run(); + }); + }; + + static selectFromTable = async >( + table: string, + ): Promise => { + const stmt = await BetterSqlite.db?.prepare(`SELECT * FROM ${table}`); + const result = (stmt?.all() ?? []) as TRow[]; + + return result; + }; +} diff --git a/package/src/utils/__tests__/Streami18n.test.js b/package/src/utils/__tests__/Streami18n.test.ts similarity index 72% rename from package/src/utils/__tests__/Streami18n.test.js rename to package/src/utils/__tests__/Streami18n.test.ts index a3152bf09a..d8d631fbec 100644 --- a/package/src/utils/__tests__/Streami18n.test.js +++ b/package/src/utils/__tests__/Streami18n.test.ts @@ -1,7 +1,7 @@ import { default as Dayjs } from 'dayjs'; import 'dayjs/locale/nl'; import localeData from 'dayjs/plugin/localeData'; -import moment from 'moment-timezone'; +import moment, { type Moment } from 'moment-timezone'; import frTranslations from '../../i18n/fr.json'; import nlTranslations from '../../i18n/nl.json'; @@ -39,7 +39,7 @@ describe('Streami18n instance - default', () => { it('should provide dayjs with default en locale', async () => { const { tDateTimeParser } = await streami18n.getTranslators(); expect(tDateTimeParser() instanceof Dayjs).toBe(true); - expect(tDateTimeParser().locale()).toBe('en'); + expect((tDateTimeParser() as Dayjs.Dayjs).locale()).toBe('en'); }); }); @@ -50,7 +50,7 @@ describe('Streami18n instance - with built-in language', () => { it('should provide dutch translator', async () => { const { t: _t } = await streami18n.getTranslators(); for (const key in nlTranslations) { - const value = nlTranslations[key]; + const value = nlTranslations[key as keyof typeof nlTranslations]; const hasTemplateInKey = key.indexOf('{{') > -1 && key.indexOf('}}') > -1; const hasTemplateInValue = typeof value === 'string' && value.indexOf('{{') > -1 && value.indexOf('}}') > -1; @@ -58,13 +58,13 @@ describe('Streami18n instance - with built-in language', () => { continue; } - expect(_t(key)).toBe(nlTranslations[key]); + expect(_t(key)).toBe(nlTranslations[key as keyof typeof nlTranslations]); } }); it('should provide dayjs with `nl` locale', async () => { const { tDateTimeParser } = await streami18n.getTranslators(); expect(tDateTimeParser() instanceof Dayjs).toBe(true); - expect(tDateTimeParser().locale()).toBe('nl'); + expect((tDateTimeParser() as Dayjs.Dayjs).locale()).toBe('nl'); }); }); @@ -78,7 +78,7 @@ describe('Streami18n instance - with built-in language', () => { it('should provide dutch translator', async () => { const { t: _t } = await streami18n.getTranslators(); for (const key in nlTranslations) { - const value = nlTranslations[key]; + const value = nlTranslations[key as keyof typeof nlTranslations]; const hasTemplateInKey = key.indexOf('{{') > -1 && key.indexOf('}}') > -1; const hasTemplateInValue = typeof value === 'string' && value.indexOf('{{') > -1 && value.indexOf('}}') > -1; @@ -86,14 +86,14 @@ describe('Streami18n instance - with built-in language', () => { continue; } - expect(_t(key)).toBe(nlTranslations[key]); + expect(_t(key)).toBe(nlTranslations[key as keyof typeof nlTranslations]); } }); it('should provide dayjs with default `en` locale', async () => { const { tDateTimeParser } = await streami18n.getTranslators(); expect(tDateTimeParser() instanceof Dayjs).toBe(true); - expect(tDateTimeParser().locale()).toBe('en'); + expect((tDateTimeParser() as Dayjs.Dayjs).locale()).toBe('en'); }); }); @@ -102,17 +102,26 @@ describe('Streami18n instance - with built-in language', () => { dayjsLocaleConfigForLanguage: customDayjsLocaleConfig, language: 'nl', }; - const streami18n = new Streami18n(streami18nOptions); + const streami18n = new Streami18n( + streami18nOptions as unknown as ConstructorParameters[0], + ); it('should provide dayjs with given custom locale config', async () => { const { tDateTimeParser } = await streami18n.getTranslators(); expect(tDateTimeParser() instanceof Dayjs).toBe(true); - const localeConfig = tDateTimeParser().localeData(); + const localeConfig = (tDateTimeParser() as Dayjs.Dayjs).localeData() as unknown as Record< + string, + unknown + >; for (const key in streami18nOptions.dayjsLocaleConfigForLanguage) { if (typeof localeConfig[key] === 'function') { - expect(localeConfig[key]()).toStrictEqual(customDayjsLocaleConfig[key]); + expect((localeConfig[key] as () => unknown)()).toStrictEqual( + customDayjsLocaleConfig[key as keyof typeof customDayjsLocaleConfig], + ); } else { - expect(localeConfig[key]).toStrictEqual(customDayjsLocaleConfig[key]); + expect(localeConfig[key]).toStrictEqual( + customDayjsLocaleConfig[key as keyof typeof customDayjsLocaleConfig], + ); } } }); @@ -133,7 +142,9 @@ describe('Streami18n instance - with custom translations', () => { language: 'zh', translationsForLanguage: translations, }; - const streami18n = new Streami18n(streami18nOptions); + const streami18n = new Streami18n( + streami18nOptions as unknown as ConstructorParameters[0], + ); it('should provide given (chinese in this case) translator', async () => { const { t: _t } = await streami18n.getTranslators(); @@ -146,7 +157,7 @@ describe('Streami18n instance - with custom translations', () => { it('should provide dayjs with default `en` locale', async () => { const { tDateTimeParser } = await streami18n.getTranslators(); expect(tDateTimeParser() instanceof Dayjs).toBe(true); - expect(tDateTimeParser().locale()).toBe('en'); + expect((tDateTimeParser() as Dayjs.Dayjs).locale()).toBe('en'); }); }); }); @@ -162,7 +173,11 @@ describe('registerTranslation - register new language `mr` (Marathi)', () => { text1: 'अनुवादित मजकूर 1', text2: 'अनुवादित मजकूर 2', }; - streami18n.registerTranslation(languageCode, translations, customDayjsLocaleConfig); + streami18n.registerTranslation( + languageCode, + translations as unknown as Parameters[1], + customDayjsLocaleConfig as unknown as Parameters[2], + ); streami18n.setLanguage('mr'); @@ -176,12 +191,19 @@ describe('registerTranslation - register new language `mr` (Marathi)', () => { const { tDateTimeParser } = await streami18n.getTranslators(); expect(tDateTimeParser() instanceof Dayjs).toBe(true); - const localeConfig = tDateTimeParser().localeData(); + const localeConfig = (tDateTimeParser() as Dayjs.Dayjs).localeData() as unknown as Record< + string, + unknown + >; for (const key in customDayjsLocaleConfig) { if (typeof localeConfig[key] === 'function') { - expect(localeConfig[key]()).toStrictEqual(customDayjsLocaleConfig[key]); + expect((localeConfig[key] as () => unknown)()).toStrictEqual( + customDayjsLocaleConfig[key as keyof typeof customDayjsLocaleConfig], + ); } else { - expect(localeConfig[key]).toStrictEqual(customDayjsLocaleConfig[key]); + expect(localeConfig[key]).toStrictEqual( + customDayjsLocaleConfig[key as keyof typeof customDayjsLocaleConfig], + ); } } }); @@ -197,7 +219,7 @@ describe('setLanguage - switch to french', () => { const { t: _t } = await streami18n.getTranslators(); for (const key in frTranslations) { // Skip keys with template strings or duration keys - const value = frTranslations[key]; + const value = frTranslations[key as keyof typeof frTranslations]; const hasTemplateInKey = key.indexOf('{{') > -1 && key.indexOf('}}') > -1; const hasTemplateInValue = typeof value === 'string' && value.indexOf('{{') > -1 && value.indexOf('}}') > -1; @@ -205,7 +227,7 @@ describe('setLanguage - switch to french', () => { continue; } - expect(_t(key)).toBe(frTranslations[key]); + expect(_t(key)).toBe(frTranslations[key as keyof typeof frTranslations]); } }); }); @@ -215,27 +237,34 @@ describe('Streami18n timezone', () => { it('is by default the local timezone', () => { const streamI18n = new Streami18n({ DateTimeParser: module }); const date = new Date(); - expect(streamI18n.tDateTimeParser(date).format('H')).toBe(date.getHours().toString()); + expect((streamI18n.tDateTimeParser(date) as Moment).format('H')).toBe( + date.getHours().toString(), + ); }); it('can be set to different timezone on init', () => { const streamI18n = new Streami18n({ DateTimeParser: module, timezone: 'Europe/Prague' }); const date = new Date(); - expect(streamI18n.tDateTimeParser(date).format('H')).not.toBe(date.getHours().toString()); - expect(streamI18n.tDateTimeParser(date).format('H')).not.toBe( + expect((streamI18n.tDateTimeParser(date) as Moment).format('H')).not.toBe( + date.getHours().toString(), + ); + expect((streamI18n.tDateTimeParser(date) as Moment).format('H')).not.toBe( (date.getUTCHours() - 2).toString(), ); }); it('is ignored if datetime parser does not support timezones', () => { - const tz = module.tz; - delete module.tz; + const mutableModule = module as unknown as { tz: unknown }; + const tz = mutableModule.tz; + delete (mutableModule as { tz?: unknown }).tz; const streamI18n = new Streami18n({ DateTimeParser: module, timezone: 'Europe/Prague' }); const date = new Date(); - expect(streamI18n.tDateTimeParser(date).format('H')).toBe(date.getHours().toString()); + expect((streamI18n.tDateTimeParser(date) as Moment).format('H')).toBe( + date.getHours().toString(), + ); - module.tz = tz; + mutableModule.tz = tz; }); describe('formatters property', () => { it('contains the default timestampFormatter', () => { @@ -244,17 +273,23 @@ describe('Streami18n timezone', () => { it('allows to override the default timestampFormatter', async () => { const i18n = new Streami18n({ formatters: { timestampFormatter: () => () => 'custom' }, - translationsForLanguage: { abc: '{{ value | timestampFormatter }}' }, + translationsForLanguage: { abc: '{{ value | timestampFormatter }}' } as Record< + string, + string + >, }); - await i18n.init(); + await (i18n as unknown as { init: () => Promise }).init(); expect(i18n.t('abc')).toBe('custom'); }); it('allows to add new custom formatter', async () => { const i18n = new Streami18n({ formatters: { customFormatter: () => () => 'custom' }, - translationsForLanguage: { abc: '{{ value | customFormatter }}' }, + translationsForLanguage: { abc: '{{ value | customFormatter }}' } as Record< + string, + string + >, }); - await i18n.init(); + await (i18n as unknown as { init: () => Promise }).init(); expect(i18n.t('abc')).toBe('custom'); }); }); diff --git a/package/src/utils/__tests__/getResizedImageUrl.test.ts b/package/src/utils/__tests__/getResizedImageUrl.test.ts index 1ce08d0b23..585a2e185e 100644 --- a/package/src/utils/__tests__/getResizedImageUrl.test.ts +++ b/package/src/utils/__tests__/getResizedImageUrl.test.ts @@ -61,14 +61,16 @@ describe('getResizedImageUrl (sad flow)', () => { it('handles an error correctly and log warns it', () => { let someError; jest.spyOn(console, 'warn'); - jest.spyOn(global, 'URL').mockImplementationOnce(() => ({ - // @ts-ignore - searchParams: { - get: () => { - throw (someError = new Error('some error')); - }, - }, - })); + jest.spyOn(global, 'URL').mockImplementationOnce( + () => + ({ + searchParams: { + get: () => { + throw (someError = new Error('some error')); + }, + }, + }) as unknown as URL, + ); const resizedUrl = getResizedImageUrl({ url: TEST_URL_1, }); diff --git a/package/src/utils/__tests__/utils.test.js b/package/src/utils/__tests__/utils.test.ts similarity index 98% rename from package/src/utils/__tests__/utils.test.js rename to package/src/utils/__tests__/utils.test.ts index fd41bbcd78..0c5e75e93f 100644 --- a/package/src/utils/__tests__/utils.test.js +++ b/package/src/utils/__tests__/utils.test.ts @@ -1,7 +1,7 @@ import { formatMsToMinSec, getUrlWithoutParams } from '../utils'; describe('getUrlWithoutParams', () => { - const testUrlMap = { + const testUrlMap: Record = { 'http://foo.com/blah_(wikipedia)#cite-1': 'http://foo.com/blah_(wikipedia)#cite-1', 'https://us-east.stream-io-cdn.com/102401/images/418dc024-b587-48cd-84fb-252418e14391.FB_IMG_1633228094526.jpg?Key-Pair-Id=APKAIHG36VEWPDULE23Q&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly91cy1lYXN0LnN0cmVhbS1pby1jZG4uY29tLzEwMjQwMS9pbWFnZXMvNDE4ZGMwMjQtYjU4Ny00OGNkLTg0ZmItMjUyNDE4ZTE0MzkxLkZCX0lNR18xNjMzMjI4MDk0NTI2LmpwZz9jcm9wPSomaD0qJnJlc2l6ZT0qJnJvPTAmdz0qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNjM1MTUwMDM5fX19XX0_&Signature=Yi8XTsAVYiEh2IDSkH4IK1zNEvPvgUkfYx9oJb2VrJMMVrBz2oPurbcFOHuQSk74RQTSE6LPZ-wplayHZxaSVeX4Q6IwwjE7vmnU~-UYPttxnClpRWFUKLJx79auz5sjkhwFte7uzby7oQSRRDRl3g3ritN~NRzU4cjZ0tnLFnn0AwnLDmfEk8VdjgGXm84PeqpAUujyDmSqm1TY7QJQBRnJMQ-MV7AA3Gj8ec9yxWunIOK8xn5FJTRvKAVqEcu~lnmEAMS5RXQ5oDCjp2~w7M7sNSyqgJVe7jRJ0kctRqJeOPlsDfQJB38JwLv6v-5piSt2kTYsPBXUu4EiALwVaQ__&crop=*&h=*&resize=*&ro=0&w=*': 'https://us-east.stream-io-cdn.com/102401/images/418dc024-b587-48cd-84fb-252418e14391.FB_IMG_1633228094526.jpg', diff --git a/package/tsconfig.test.json b/package/tsconfig.test.json new file mode 100644 index 0000000000..bec743aba0 --- /dev/null +++ b/package/tsconfig.test.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noUnusedLocals": false, + "noUnusedParameters": false + }, + "include": ["./src/**/*"], + "exclude": [ + "./src/components/docs/*", + "./src/emoji-data/*.js", + "./src/styleguideComponents", + "node_modules" + ] +} diff --git a/package/yarn.lock b/package/yarn.lock index 6a6ea61ebc..d47d87ee9e 100644 --- a/package/yarn.lock +++ b/package/yarn.lock @@ -1595,50 +1595,49 @@ resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98" integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA== -"@jest/console@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/console/-/console-30.0.0.tgz#7f8f66adc20ea795cc74afb74280e08947e55c13" - integrity sha512-vfpJap6JZQ3I8sUN8dsFqNAKJYO4KIGxkcB+3Fw7Q/BJiWY5HwtMMiuT1oP0avsiDhjE/TCLaDgbGfHwDdBVeg== +"@jest/console@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/console/-/console-30.3.0.tgz#42ccc3f995d400a8fe35b8850cfe10a8d4804cdf" + integrity sha512-PAwCvFJ4696XP2qZj+LAn1BWjZaJ6RjG6c7/lkMaUJnkyMS34ucuIsfqYvfskVNvUI27R/u4P1HMYFnlVXG/Ww== dependencies: - "@jest/types" "30.0.0" + "@jest/types" "30.3.0" "@types/node" "*" chalk "^4.1.2" - jest-message-util "30.0.0" - jest-util "30.0.0" + jest-message-util "30.3.0" + jest-util "30.3.0" slash "^3.0.0" -"@jest/core@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/core/-/core-30.0.0.tgz#2ea3e63dd193af0b986f70b01c2597efd0e10b27" - integrity sha512-1zU39zFtWSl5ZuDK3Rd6P8S28MmS4F11x6Z4CURrgJ99iaAJg68hmdJ2SAHEEO6ociaNk43UhUYtHxWKEWoNYw== - dependencies: - "@jest/console" "30.0.0" - "@jest/pattern" "30.0.0" - "@jest/reporters" "30.0.0" - "@jest/test-result" "30.0.0" - "@jest/transform" "30.0.0" - "@jest/types" "30.0.0" +"@jest/core@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/core/-/core-30.3.0.tgz#d06bb8456f35350f6494fd2405bcec4abb97b994" + integrity sha512-U5mVPsBxLSO6xYbf+tgkymLx+iAhvZX43/xI1+ej2ZOPnPdkdO1CzDmFKh2mZBn2s4XZixszHeQnzp1gm/DIxw== + dependencies: + "@jest/console" "30.3.0" + "@jest/pattern" "30.0.1" + "@jest/reporters" "30.3.0" + "@jest/test-result" "30.3.0" + "@jest/transform" "30.3.0" + "@jest/types" "30.3.0" "@types/node" "*" ansi-escapes "^4.3.2" chalk "^4.1.2" ci-info "^4.2.0" exit-x "^0.2.2" graceful-fs "^4.2.11" - jest-changed-files "30.0.0" - jest-config "30.0.0" - jest-haste-map "30.0.0" - jest-message-util "30.0.0" - jest-regex-util "30.0.0" - jest-resolve "30.0.0" - jest-resolve-dependencies "30.0.0" - jest-runner "30.0.0" - jest-runtime "30.0.0" - jest-snapshot "30.0.0" - jest-util "30.0.0" - jest-validate "30.0.0" - jest-watcher "30.0.0" - micromatch "^4.0.8" - pretty-format "30.0.0" + jest-changed-files "30.3.0" + jest-config "30.3.0" + jest-haste-map "30.3.0" + jest-message-util "30.3.0" + jest-regex-util "30.0.1" + jest-resolve "30.3.0" + jest-resolve-dependencies "30.3.0" + jest-runner "30.3.0" + jest-runtime "30.3.0" + jest-snapshot "30.3.0" + jest-util "30.3.0" + jest-validate "30.3.0" + jest-watcher "30.3.0" + pretty-format "30.3.0" slash "^3.0.0" "@jest/create-cache-key-function@^29.7.0": @@ -1648,20 +1647,20 @@ dependencies: "@jest/types" "^29.6.3" -"@jest/diff-sequences@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/diff-sequences/-/diff-sequences-30.0.0.tgz#402d27d14e9d5161dedfca98bf181018a8931eb1" - integrity sha512-xMbtoCeKJDto86GW6AiwVv7M4QAuI56R7dVBr1RNGYbOT44M2TIzOiske2RxopBqkumDY+A1H55pGvuribRY9A== +"@jest/diff-sequences@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/diff-sequences/-/diff-sequences-30.3.0.tgz#25b0818d3d83f00b9c7b04e069b8810f9014b143" + integrity sha512-cG51MVnLq1ecVUaQ3fr6YuuAOitHK1S4WUJHnsPFE/quQr33ADUx1FfrTCpMCRxvy0Yr9BThKpDjSlcTi91tMA== -"@jest/environment@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-30.0.0.tgz#d66484e35d6ee9a551d2ef3adb9e18728f0e4736" - integrity sha512-09sFbMMgS5JxYnvgmmtwIHhvoyzvR5fUPrVl8nOCrC5KdzmmErTcAxfWyAhJ2bv3rvHNQaKiS+COSG+O7oNbXw== +"@jest/environment@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-30.3.0.tgz#b0657c2944b6ef3352f7b25903cc3a23e6ab70f6" + integrity sha512-SlLSF4Be735yQXyh2+mctBOzNDx5s5uLv88/j8Qn1wH679PDcwy67+YdADn8NJnGjzlXtN62asGH/T4vWOkfaw== dependencies: - "@jest/fake-timers" "30.0.0" - "@jest/types" "30.0.0" + "@jest/fake-timers" "30.3.0" + "@jest/types" "30.3.0" "@types/node" "*" - jest-mock "30.0.0" + jest-mock "30.3.0" "@jest/environment@^29.7.0": version "29.7.0" @@ -1673,39 +1672,32 @@ "@types/node" "*" jest-mock "^29.7.0" -"@jest/expect-utils@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-30.0.0.tgz#118d41d9df420db61d307308848a9e12f0fc1fad" - integrity sha512-UiWfsqNi/+d7xepfOv8KDcbbzcYtkWBe3a3kVDtg6M1kuN6CJ7b4HzIp5e1YHrSaQaVS8sdCoyCMCZClTLNKFQ== - dependencies: - "@jest/get-type" "30.0.0" - -"@jest/expect-utils@^29.7.0": - version "29.7.0" - resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.7.0.tgz#023efe5d26a8a70f21677d0a1afc0f0a44e3a1c6" - integrity sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA== +"@jest/expect-utils@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-30.3.0.tgz#c45b2da9802ffed33bf43b3e019ddb95e5ad95e8" + integrity sha512-j0+W5iQQ8hBh7tHZkTQv3q2Fh/M7Je72cIsYqC4OaktgtO7v1So9UTjp6uPBHIaB6beoF/RRsCgMJKvti0wADA== dependencies: - jest-get-type "^29.6.3" + "@jest/get-type" "30.1.0" -"@jest/expect@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-30.0.0.tgz#3f6c17a333444aa6d93b507871815c24c6681f21" - integrity sha512-XZ3j6syhMeKiBknmmc8V3mNIb44kxLTbOQtaXA4IFdHy+vEN0cnXRzbRjdGBtrp4k1PWyMWNU3Fjz3iejrhpQg== +"@jest/expect@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-30.3.0.tgz#08ee7f5b610167b0068743246c0b568f4c40c773" + integrity sha512-76Nlh4xJxk2D/9URCn3wFi98d2hb19uWE1idLsTt2ywhvdOldbw3S570hBgn25P4ICUZ/cBjybrBex2g17IDbg== dependencies: - expect "30.0.0" - jest-snapshot "30.0.0" + expect "30.3.0" + jest-snapshot "30.3.0" -"@jest/fake-timers@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-30.0.0.tgz#4d4ae90695609c1b27795ad1210203d73f30dcfd" - integrity sha512-yzBmJcrMHAMcAEbV2w1kbxmx8WFpEz8Cth3wjLMSkq+LO8VeGKRhpr5+BUp7PPK+x4njq/b6mVnDR8e/tPL5ng== +"@jest/fake-timers@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-30.3.0.tgz#2b2868130c1d28233a79566874c42cae1c5a70bc" + integrity sha512-WUQDs8SOP9URStX1DzhD425CqbN/HxUYCTwVrT8sTVBfMvFqYt/s61EK5T05qnHu0po6RitXIvP9otZxYDzTGQ== dependencies: - "@jest/types" "30.0.0" - "@sinonjs/fake-timers" "^13.0.0" + "@jest/types" "30.3.0" + "@sinonjs/fake-timers" "^15.0.0" "@types/node" "*" - jest-message-util "30.0.0" - jest-mock "30.0.0" - jest-util "30.0.0" + jest-message-util "30.3.0" + jest-mock "30.3.0" + jest-util "30.3.0" "@jest/fake-timers@^29.7.0": version "29.7.0" @@ -1719,20 +1711,20 @@ jest-mock "^29.7.0" jest-util "^29.7.0" -"@jest/get-type@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/get-type/-/get-type-30.0.0.tgz#59dcb5a9cbd9eb0004d3a2ed2fa9c9c3abfbf005" - integrity sha512-VZWMjrBzqfDKngQ7sUctKeLxanAbsBFoZnPxNIG6CmxK7Gv6K44yqd0nzveNIBfuhGZMmk1n5PGbvdSTOu0yTg== +"@jest/get-type@30.1.0": + version "30.1.0" + resolved "https://registry.yarnpkg.com/@jest/get-type/-/get-type-30.1.0.tgz#4fcb4dc2ebcf0811be1c04fd1cb79c2dba431cbc" + integrity sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA== -"@jest/globals@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-30.0.0.tgz#b80a488ec3fc99637455def038e53cfcd562a18f" - integrity sha512-OEzYes5A1xwBJVMPqFRa8NCao8Vr42nsUZuf/SpaJWoLE+4kyl6nCQZ1zqfipmCrIXQVALC5qJwKy/7NQQLPhw== +"@jest/globals@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-30.3.0.tgz#40f4c90e5602629ecda1ca773a8fb21575bb64ea" + integrity sha512-+owLCBBdfpgL3HU+BD5etr1SvbXpSitJK0is1kiYjJxAAJggYMRQz5hSdd5pq1sSggfxPbw2ld71pt4x5wwViA== dependencies: - "@jest/environment" "30.0.0" - "@jest/expect" "30.0.0" - "@jest/types" "30.0.0" - jest-mock "30.0.0" + "@jest/environment" "30.3.0" + "@jest/expect" "30.3.0" + "@jest/types" "30.3.0" + jest-mock "30.3.0" "@jest/pattern@30.0.0": version "30.0.0" @@ -1742,31 +1734,39 @@ "@types/node" "*" jest-regex-util "30.0.0" -"@jest/reporters@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-30.0.0.tgz#a384cc5692e3288617f6993c3267314f8f865781" - integrity sha512-5WHNlLO0Ok+/o6ML5IzgVm1qyERtLHBNhwn67PAq92H4hZ+n5uW/BYj1VVwmTdxIcNrZLxdV9qtpdZkXf16HxA== +"@jest/pattern@30.0.1": + version "30.0.1" + resolved "https://registry.yarnpkg.com/@jest/pattern/-/pattern-30.0.1.tgz#d5304147f49a052900b4b853dedb111d080e199f" + integrity sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA== + dependencies: + "@types/node" "*" + jest-regex-util "30.0.1" + +"@jest/reporters@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-30.3.0.tgz#0c1065f6c892665e5a051df22b19df4466ed816b" + integrity sha512-a09z89S+PkQnL055bVj8+pe2Caed2PBOaczHcXCykW5ngxX9EWx/1uAwncxc/HiU0oZqfwseMjyhxgRjS49qPw== dependencies: "@bcoe/v8-coverage" "^0.2.3" - "@jest/console" "30.0.0" - "@jest/test-result" "30.0.0" - "@jest/transform" "30.0.0" - "@jest/types" "30.0.0" + "@jest/console" "30.3.0" + "@jest/test-result" "30.3.0" + "@jest/transform" "30.3.0" + "@jest/types" "30.3.0" "@jridgewell/trace-mapping" "^0.3.25" "@types/node" "*" chalk "^4.1.2" collect-v8-coverage "^1.0.2" exit-x "^0.2.2" - glob "^10.3.10" + glob "^10.5.0" graceful-fs "^4.2.11" istanbul-lib-coverage "^3.0.0" istanbul-lib-instrument "^6.0.0" istanbul-lib-report "^3.0.0" istanbul-lib-source-maps "^5.0.0" istanbul-reports "^3.1.3" - jest-message-util "30.0.0" - jest-util "30.0.0" - jest-worker "30.0.0" + jest-message-util "30.3.0" + jest-util "30.3.0" + jest-worker "30.3.0" slash "^3.0.0" string-length "^4.0.2" v8-to-istanbul "^9.0.1" @@ -1778,6 +1778,13 @@ dependencies: "@sinclair/typebox" "^0.34.0" +"@jest/schemas@30.0.5": + version "30.0.5" + resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-30.0.5.tgz#7bdf69fc5a368a5abdb49fd91036c55225846473" + integrity sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA== + dependencies: + "@sinclair/typebox" "^0.34.0" + "@jest/schemas@^29.6.3": version "29.6.3" resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03" @@ -1785,43 +1792,43 @@ dependencies: "@sinclair/typebox" "^0.27.8" -"@jest/snapshot-utils@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/snapshot-utils/-/snapshot-utils-30.0.0.tgz#95c34aa1e59840c53b91695132022bfeeeee650e" - integrity sha512-C/QSFUmvZEYptg2Vin84FggAphwHvj6la39vkw1CNOZQORWZ7O/H0BXmdeeeGnvlXDYY8TlFM5jgFnxLAxpFjA== +"@jest/snapshot-utils@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/snapshot-utils/-/snapshot-utils-30.3.0.tgz#ca003c91a3e1e4e4956dee716a2aaf04b6707f31" + integrity sha512-ORbRN9sf5PP82v3FXNSwmO1OTDR2vzR2YTaR+E3VkSBZ8zadQE6IqYdYEeFH1NIkeB2HIGdF02dapb6K0Mj05g== dependencies: - "@jest/types" "30.0.0" + "@jest/types" "30.3.0" chalk "^4.1.2" graceful-fs "^4.2.11" natural-compare "^1.4.0" -"@jest/source-map@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-30.0.0.tgz#f1318656f6ca2cab188c5860d8d7ccb2f9a0396c" - integrity sha512-oYBJ4d/NF4ZY3/7iq1VaeoERHRvlwKtrGClgescaXMIa1mmb+vfJd0xMgbW9yrI80IUA7qGbxpBWxlITrHkWoA== +"@jest/source-map@30.0.1": + version "30.0.1" + resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-30.0.1.tgz#305ebec50468f13e658b3d5c26f85107a5620aaa" + integrity sha512-MIRWMUUR3sdbP36oyNyhbThLHyJ2eEDClPCiHVbrYAe5g3CHRArIVpBw7cdSB5fr+ofSfIb2Tnsw8iEHL0PYQg== dependencies: "@jridgewell/trace-mapping" "^0.3.25" callsites "^3.1.0" graceful-fs "^4.2.11" -"@jest/test-result@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-30.0.0.tgz#9a06e3b0f2024ace56a2989075c2c8938aae5297" - integrity sha512-685zco9HdgBaaWiB9T4xjLtBuN0Q795wgaQPpmuAeZPHwHZSoKFAUnozUtU+ongfi4l5VCz8AclOE5LAQdyjxQ== +"@jest/test-result@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-30.3.0.tgz#cd8882d683d467fcffb98c09501a65687a76aae9" + integrity sha512-e/52nJGuD74AKTSe0P4y5wFRlaXP0qmrS17rqOMHeSwm278VyNyXE3gFO/4DTGF9w+65ra3lo3VKj0LBrzmgdQ== dependencies: - "@jest/console" "30.0.0" - "@jest/types" "30.0.0" + "@jest/console" "30.3.0" + "@jest/types" "30.3.0" "@types/istanbul-lib-coverage" "^2.0.6" collect-v8-coverage "^1.0.2" -"@jest/test-sequencer@30.0.0": - version "30.0.0" - resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-30.0.0.tgz#7052c0c6d56580f9096b6c3d02834220df676340" - integrity sha512-Hmvv5Yg6UmghXIcVZIydkT0nAK7M/hlXx9WMHR5cLVwdmc14/qUQt3mC72T6GN0olPC6DhmKE6Cd/pHsgDbuqQ== +"@jest/test-sequencer@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-30.3.0.tgz#27002b2093f4e0d9e0e1ebb0bc274a242fdadc14" + integrity sha512-dgbWy9b8QDlQeRZcv7LNF+/jFiiYHTKho1xirauZ7kVwY7avjFF6uTT0RqlgudB5OuIPagFdVtfFMosjVbk1eA== dependencies: - "@jest/test-result" "30.0.0" + "@jest/test-result" "30.3.0" graceful-fs "^4.2.11" - jest-haste-map "30.0.0" + jest-haste-map "30.3.0" slash "^3.0.0" "@jest/transform@30.0.0": @@ -1845,6 +1852,26 @@ slash "^3.0.0" write-file-atomic "^5.0.1" +"@jest/transform@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-30.3.0.tgz#9e6f78ffa205449bf956e269fd707c160f47ce2f" + integrity sha512-TLKY33fSLVd/lKB2YI1pH69ijyUblO/BQvCj566YvnwuzoTNr648iE0j22vRvVNk2HsPwByPxATg3MleS3gf5A== + dependencies: + "@babel/core" "^7.27.4" + "@jest/types" "30.3.0" + "@jridgewell/trace-mapping" "^0.3.25" + babel-plugin-istanbul "^7.0.1" + chalk "^4.1.2" + convert-source-map "^2.0.0" + fast-json-stable-stringify "^2.1.0" + graceful-fs "^4.2.11" + jest-haste-map "30.3.0" + jest-regex-util "30.0.1" + jest-util "30.3.0" + pirates "^4.0.7" + slash "^3.0.0" + write-file-atomic "^5.0.1" + "@jest/transform@^29.7.0": version "29.7.0" resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.7.0.tgz#df2dd9c346c7d7768b8a06639994640c642e284c" @@ -1879,6 +1906,19 @@ "@types/yargs" "^17.0.33" chalk "^4.1.2" +"@jest/types@30.3.0": + version "30.3.0" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-30.3.0.tgz#cada800d323cb74945c24ac74615fdb312a6c85f" + integrity sha512-JHm87k7bA33hpBngtU8h6UBub/fqqA9uXfw+21j5Hmk7ooPHlboRNxHq0JcMtC+n8VJGP1mcfnD3Mk+XKe1oSw== + dependencies: + "@jest/pattern" "30.0.1" + "@jest/schemas" "30.0.5" + "@types/istanbul-lib-coverage" "^2.0.6" + "@types/istanbul-reports" "^3.0.4" + "@types/node" "*" + "@types/yargs" "^17.0.33" + chalk "^4.1.2" + "@jest/types@^29.6.3": version "29.6.3" resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.6.3.tgz#1131f8cf634e7e84c5e77bab12f052af585fba59" @@ -2201,10 +2241,10 @@ dependencies: "@sinonjs/commons" "^3.0.0" -"@sinonjs/fake-timers@^13.0.0": - version "13.0.5" - resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-13.0.5.tgz#36b9dbc21ad5546486ea9173d6bea063eb1717d5" - integrity sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw== +"@sinonjs/fake-timers@^15.0.0": + version "15.3.2" + resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-15.3.2.tgz#afecc36681e26aab9e0fe809fd9ad578096a3058" + integrity sha512-mrn35Jl2pCpns+mE3HaZa1yPN5EYCRgiMI+135COjr2hr8Cls9DXqIZ57vZe2cz7y2XVSq92tcs6kGQcT1J8Rw== dependencies: "@sinonjs/commons" "^3.0.1" @@ -2310,6 +2350,11 @@ pretty-format "^29.7.0" redent "^3.0.0" +"@total-typescript/shoehorn@^0.1.2": + version "0.1.2" + resolved "https://registry.yarnpkg.com/@total-typescript/shoehorn/-/shoehorn-0.1.2.tgz#a0c095ce8cb9b4ae3556bcff42702ddb072e9d18" + integrity sha512-p7nNZbOZIofpDNyP0u1BctFbjxD44Qc+oO5jufgQdFdGIXJLc33QRloJpq7k5T59CTgLWfQSUxsuqLcmeurYRw== + "@tybys/wasm-util@^0.9.0": version "0.9.0" resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.9.0.tgz#3e75eb00604c8d6db470bf18c37b7d984a0e3355" @@ -2401,13 +2446,13 @@ dependencies: "@types/istanbul-lib-report" "*" -"@types/jest@^29.5.14": - version "29.5.14" - resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.14.tgz#2b910912fa1d6856cadcd0c1f95af7df1d6049e5" - integrity sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ== +"@types/jest@^30.0.0": + version "30.0.0" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-30.0.0.tgz#5e85ae568006712e4ad66f25433e9bdac8801f1d" + integrity sha512-XTYugzhuwqWjws0CVz8QpM36+T+Dz5mTEBKhNs/esGLnCIlGdRy+Dq78NRjd7ls7r8BC8ZRMOrKlkO1hU0JOwA== dependencies: - expect "^29.0.0" - pretty-format "^29.0.0" + expect "^30.0.0" + pretty-format "^30.0.0" "@types/json-schema@*", "@types/json-schema@^7.0.15", "@types/json-schema@^7.0.9": version "7.0.15" @@ -3123,6 +3168,19 @@ babel-jest@30.0.0: graceful-fs "^4.2.11" slash "^3.0.0" +babel-jest@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-30.3.0.tgz#3ff5553fa3bcbb8738d2d7335a4dbdc3bd1a0eb5" + integrity sha512-gRpauEU2KRrCox5Z296aeVHR4jQ98BCnu0IO332D/xpHNOsIH/bgSRk9k6GbKIbBw8vFeN6ctuu6tV8WOyVfYQ== + dependencies: + "@jest/transform" "30.3.0" + "@types/babel__core" "^7.20.5" + babel-plugin-istanbul "^7.0.1" + babel-preset-jest "30.3.0" + chalk "^4.1.2" + graceful-fs "^4.2.11" + slash "^3.0.0" + babel-jest@^29.7.0: version "29.7.0" resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.7.0.tgz#f4369919225b684c56085998ac63dbd05be020d5" @@ -3165,6 +3223,17 @@ babel-plugin-istanbul@^7.0.0: istanbul-lib-instrument "^6.0.2" test-exclude "^6.0.0" +babel-plugin-istanbul@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-7.0.1.tgz#d8b518c8ea199364cf84ccc82de89740236daf92" + integrity sha512-D8Z6Qm8jCvVXtIRkBnqNHX0zJ37rQcFJ9u8WOS6tkYOsRdHBzypCstaxWiu5ZIlqQtviRYbgnRLSoCEvjqcqbA== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@istanbuljs/load-nyc-config" "^1.0.0" + "@istanbuljs/schema" "^0.1.3" + istanbul-lib-instrument "^6.0.2" + test-exclude "^6.0.0" + babel-plugin-jest-hoist@30.0.0: version "30.0.0" resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-30.0.0.tgz#76c9bf58316ebb7026d671d71d26138ae415326b" @@ -3174,6 +3243,13 @@ babel-plugin-jest-hoist@30.0.0: "@babel/types" "^7.27.3" "@types/babel__core" "^7.20.5" +babel-plugin-jest-hoist@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-30.3.0.tgz#235ad714a45c18b12566becf439e1c604e277015" + integrity sha512-+TRkByhsws6sfPjVaitzadk1I0F5sPvOVUH5tyTSzhePpsGIVrdeunHSw/C36QeocS95OOk8lunc4rlu5Anwsg== + dependencies: + "@types/babel__core" "^7.20.5" + babel-plugin-jest-hoist@^29.6.3: version "29.6.3" resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.6.3.tgz#aadbe943464182a8922c3c927c3067ff40d24626" @@ -3269,6 +3345,27 @@ babel-preset-current-node-syntax@^1.0.0, babel-preset-current-node-syntax@^1.1.0 "@babel/plugin-syntax-private-property-in-object" "^7.14.5" "@babel/plugin-syntax-top-level-await" "^7.14.5" +babel-preset-current-node-syntax@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.2.0.tgz#20730d6cdc7dda5d89401cab10ac6a32067acde6" + integrity sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg== + dependencies: + "@babel/plugin-syntax-async-generators" "^7.8.4" + "@babel/plugin-syntax-bigint" "^7.8.3" + "@babel/plugin-syntax-class-properties" "^7.12.13" + "@babel/plugin-syntax-class-static-block" "^7.14.5" + "@babel/plugin-syntax-import-attributes" "^7.24.7" + "@babel/plugin-syntax-import-meta" "^7.10.4" + "@babel/plugin-syntax-json-strings" "^7.8.3" + "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" + "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3" + "@babel/plugin-syntax-numeric-separator" "^7.10.4" + "@babel/plugin-syntax-object-rest-spread" "^7.8.3" + "@babel/plugin-syntax-optional-catch-binding" "^7.8.3" + "@babel/plugin-syntax-optional-chaining" "^7.8.3" + "@babel/plugin-syntax-private-property-in-object" "^7.14.5" + "@babel/plugin-syntax-top-level-await" "^7.14.5" + babel-preset-jest@30.0.0: version "30.0.0" resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-30.0.0.tgz#54b16c96c1b687b9c72baa37a00b01fe9be4c4f3" @@ -3277,6 +3374,14 @@ babel-preset-jest@30.0.0: babel-plugin-jest-hoist "30.0.0" babel-preset-current-node-syntax "^1.1.0" +babel-preset-jest@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-30.3.0.tgz#21cf3d19a6f5e9924426c879ee0b7f092636d043" + integrity sha512-6ZcUbWHC+dMz2vfzdNwi87Z1gQsLNK2uLuK1Q89R11xdvejcivlYYwDlEv0FHX3VwEXpbBQ9uufB/MUNpZGfhQ== + dependencies: + babel-plugin-jest-hoist "30.3.0" + babel-preset-current-node-syntax "^1.2.0" + babel-preset-jest@^29.6.3: version "29.6.3" resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-29.6.3.tgz#fa05fa510e7d493896d7b0dd2033601c840f171c" @@ -4518,28 +4623,17 @@ expand-template@^2.0.3: resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c" integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg== -expect@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/expect/-/expect-30.0.0.tgz#460dfda282e0a8de8302aabee951dba7e79a5a53" - integrity sha512-xCdPp6gwiR9q9lsPCHANarIkFTN/IMZso6Kkq03sOm9IIGtzK/UJqml0dkhHibGh8HKOj8BIDIpZ0BZuU7QK6w== - dependencies: - "@jest/expect-utils" "30.0.0" - "@jest/get-type" "30.0.0" - jest-matcher-utils "30.0.0" - jest-message-util "30.0.0" - jest-mock "30.0.0" - jest-util "30.0.0" - -expect@^29.0.0: - version "29.7.0" - resolved "https://registry.yarnpkg.com/expect/-/expect-29.7.0.tgz#578874590dcb3214514084c08115d8aee61e11bc" - integrity sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw== +expect@30.3.0, expect@^30.0.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/expect/-/expect-30.3.0.tgz#1b82111517d1ab030f3db0cf1b4061c8aa644f61" + integrity sha512-1zQrciTiQfRdo7qJM1uG4navm8DayFa2TgCSRlzUyNkhcJ6XUZF3hjnpkyr3VhAqPH7i/9GkG7Tv5abz6fqz0Q== dependencies: - "@jest/expect-utils" "^29.7.0" - jest-get-type "^29.6.3" - jest-matcher-utils "^29.7.0" - jest-message-util "^29.7.0" - jest-util "^29.7.0" + "@jest/expect-utils" "30.3.0" + "@jest/get-type" "30.1.0" + jest-matcher-utils "30.3.0" + jest-message-util "30.3.0" + jest-mock "30.3.0" + jest-util "30.3.0" exponential-backoff@^3.1.1: version "3.1.2" @@ -4861,10 +4955,10 @@ glob@13.0.0: minipass "^7.1.2" path-scurry "^2.0.0" -glob@^10.3.10: - version "10.4.5" - resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956" - integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg== +glob@^10.5.0: + version "10.5.0" + resolved "https://registry.yarnpkg.com/glob/-/glob-10.5.0.tgz#8ec0355919cd3338c28428a23d4f24ecc5fe738c" + integrity sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg== dependencies: foreground-child "^3.1.0" jackspeak "^3.1.2" @@ -5668,96 +5762,95 @@ jackspeak@^4.0.1: dependencies: "@isaacs/cliui" "^8.0.2" -jest-changed-files@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-30.0.0.tgz#2993fc97acdf701b286310bf672a88a797b57e64" - integrity sha512-rzGpvCdPdEV1Ma83c1GbZif0L2KAm3vXSXGRlpx7yCt0vhruwCNouKNRh3SiVcISHP1mb3iJzjb7tAEnNu1laQ== +jest-changed-files@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-30.3.0.tgz#055849df695f9a9fcde0ae44024f815bbc627f3a" + integrity sha512-B/7Cny6cV5At6M25EWDgf9S617lHivamL8vl6KEpJqkStauzcG4e+WPfDgMMF+H4FVH4A2PLRyvgDJan4441QA== dependencies: execa "^5.1.1" - jest-util "30.0.0" + jest-util "30.3.0" p-limit "^3.1.0" -jest-circus@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-30.0.0.tgz#f5d32ef11dcef9beba7ee78f32dd2c82b5f51097" - integrity sha512-nTwah78qcKVyndBS650hAkaEmwWGaVsMMoWdJwMnH77XArRJow2Ir7hc+8p/mATtxVZuM9OTkA/3hQocRIK5Dw== +jest-circus@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-30.3.0.tgz#153614c11ab35867f371bd93496ecb9690b92077" + integrity sha512-PyXq5szeSfR/4f1lYqCmmQjh0vqDkURUYi9N6whnHjlRz4IUQfMcXkGLeEoiJtxtyPqgUaUUfyQlApXWBSN1RA== dependencies: - "@jest/environment" "30.0.0" - "@jest/expect" "30.0.0" - "@jest/test-result" "30.0.0" - "@jest/types" "30.0.0" + "@jest/environment" "30.3.0" + "@jest/expect" "30.3.0" + "@jest/test-result" "30.3.0" + "@jest/types" "30.3.0" "@types/node" "*" chalk "^4.1.2" co "^4.6.0" dedent "^1.6.0" is-generator-fn "^2.1.0" - jest-each "30.0.0" - jest-matcher-utils "30.0.0" - jest-message-util "30.0.0" - jest-runtime "30.0.0" - jest-snapshot "30.0.0" - jest-util "30.0.0" + jest-each "30.3.0" + jest-matcher-utils "30.3.0" + jest-message-util "30.3.0" + jest-runtime "30.3.0" + jest-snapshot "30.3.0" + jest-util "30.3.0" p-limit "^3.1.0" - pretty-format "30.0.0" + pretty-format "30.3.0" pure-rand "^7.0.0" slash "^3.0.0" stack-utils "^2.0.6" -jest-cli@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-30.0.0.tgz#d689f093e6019bd86e76407b431fae2f8beb85fe" - integrity sha512-fWKAgrhlwVVCfeizsmIrPRTBYTzO82WSba3gJniZNR3PKXADgdC0mmCSK+M+t7N8RCXOVfY6kvCkvjUNtzmHYQ== +jest-cli@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-30.3.0.tgz#5ed75a337f486a1f1c5acbb2de8acddb106ead6c" + integrity sha512-l6Tqx+j1fDXJEW5bqYykDQQ7mQg+9mhWXtnj+tQZrTWYHyHoi6Be8HPumDSA+UiX2/2buEgjA58iJzdj146uCw== dependencies: - "@jest/core" "30.0.0" - "@jest/test-result" "30.0.0" - "@jest/types" "30.0.0" + "@jest/core" "30.3.0" + "@jest/test-result" "30.3.0" + "@jest/types" "30.3.0" chalk "^4.1.2" exit-x "^0.2.2" import-local "^3.2.0" - jest-config "30.0.0" - jest-util "30.0.0" - jest-validate "30.0.0" + jest-config "30.3.0" + jest-util "30.3.0" + jest-validate "30.3.0" yargs "^17.7.2" -jest-config@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-30.0.0.tgz#77387de024f5a1b456be844f80a1390e8ef19699" - integrity sha512-p13a/zun+sbOMrBnTEUdq/5N7bZMOGd1yMfqtAJniPNuzURMay4I+vxZLK1XSDbjvIhmeVdG8h8RznqYyjctyg== +jest-config@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-30.3.0.tgz#b969e0aaaf5964419e62953bb712c16d15972425" + integrity sha512-WPMAkMAtNDY9P/oKObtsRG/6KTrhtgPJoBTmk20uDn4Uy6/3EJnnaZJre/FMT1KVRx8cve1r7/FlMIOfRVWL4w== dependencies: "@babel/core" "^7.27.4" - "@jest/get-type" "30.0.0" - "@jest/pattern" "30.0.0" - "@jest/test-sequencer" "30.0.0" - "@jest/types" "30.0.0" - babel-jest "30.0.0" + "@jest/get-type" "30.1.0" + "@jest/pattern" "30.0.1" + "@jest/test-sequencer" "30.3.0" + "@jest/types" "30.3.0" + babel-jest "30.3.0" chalk "^4.1.2" ci-info "^4.2.0" deepmerge "^4.3.1" - glob "^10.3.10" + glob "^10.5.0" graceful-fs "^4.2.11" - jest-circus "30.0.0" - jest-docblock "30.0.0" - jest-environment-node "30.0.0" - jest-regex-util "30.0.0" - jest-resolve "30.0.0" - jest-runner "30.0.0" - jest-util "30.0.0" - jest-validate "30.0.0" - micromatch "^4.0.8" + jest-circus "30.3.0" + jest-docblock "30.2.0" + jest-environment-node "30.3.0" + jest-regex-util "30.0.1" + jest-resolve "30.3.0" + jest-runner "30.3.0" + jest-util "30.3.0" + jest-validate "30.3.0" parse-json "^5.2.0" - pretty-format "30.0.0" + pretty-format "30.3.0" slash "^3.0.0" strip-json-comments "^3.1.1" -jest-diff@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-30.0.0.tgz#d3d4f75e257e3c2cb8729438fe9cec66098f6176" - integrity sha512-TgT1+KipV8JTLXXeFX0qSvIJR/UXiNNojjxb/awh3vYlBZyChU/NEmyKmq+wijKjWEztyrGJFL790nqMqNjTHA== +jest-diff@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-30.3.0.tgz#e0a4c84ef350ffd790ffd5b0016acabeecf5f759" + integrity sha512-n3q4PDQjS4LrKxfWB3Z5KNk1XjXtZTBwQp71OP0Jo03Z6V60x++K5L8k6ZrW8MY8pOFylZvHM0zsjS1RqlHJZQ== dependencies: - "@jest/diff-sequences" "30.0.0" - "@jest/get-type" "30.0.0" + "@jest/diff-sequences" "30.3.0" + "@jest/get-type" "30.1.0" chalk "^4.1.2" - pretty-format "30.0.0" + pretty-format "30.3.0" jest-diff@^29.0.1, jest-diff@^29.7.0: version "29.7.0" @@ -5769,36 +5862,36 @@ jest-diff@^29.0.1, jest-diff@^29.7.0: jest-get-type "^29.6.3" pretty-format "^29.7.0" -jest-docblock@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-30.0.0.tgz#1650e0ded4fa92ff1adeda2050641705b6b300db" - integrity sha512-By/iQ0nvTzghEecGzUMCp1axLtBh+8wB4Hpoi5o+x1stycjEmPcH1mHugL4D9Q+YKV++vKeX/3ZTW90QC8ICPg== +jest-docblock@30.2.0: + version "30.2.0" + resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-30.2.0.tgz#42cd98d69f887e531c7352309542b1ce4ee10256" + integrity sha512-tR/FFgZKS1CXluOQzZvNH3+0z9jXr3ldGSD8bhyuxvlVUwbeLOGynkunvlTMxchC5urrKndYiwCFC0DLVjpOCA== dependencies: detect-newline "^3.1.0" -jest-each@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-30.0.0.tgz#f3760fba22074c4e82b440f4a0557467f464f718" - integrity sha512-qkFEW3cfytEjG2KtrhwtldZfXYnWSanO8xUMXLe4A6yaiHMHJUalk0Yyv4MQH6aeaxgi4sGVrukvF0lPMM7U1w== +jest-each@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-30.3.0.tgz#faa7229bf7a9fa6426dc604057a7d2a173493b1e" + integrity sha512-V8eMndg/aZ+3LnCJgSm13IxS5XSBM22QSZc9BtPK8Dek6pm+hfUNfwBdvsB3d342bo1q7wnSkC38zjX259qZNA== dependencies: - "@jest/get-type" "30.0.0" - "@jest/types" "30.0.0" + "@jest/get-type" "30.1.0" + "@jest/types" "30.3.0" chalk "^4.1.2" - jest-util "30.0.0" - pretty-format "30.0.0" + jest-util "30.3.0" + pretty-format "30.3.0" -jest-environment-node@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-30.0.0.tgz#0d16b29f5720c796d8eadd9c22ada1c1c43d3ba2" - integrity sha512-sF6lxyA25dIURyDk4voYmGU9Uwz2rQKMfjxKnDd19yk+qxKGrimFqS5YsPHWTlAVBo+YhWzXsqZoaMzrTFvqfg== +jest-environment-node@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-30.3.0.tgz#aa8a57c5d0c4af0f8b1f7403ba737fec6b3aabbe" + integrity sha512-4i6HItw/JSiJVsC5q0hnKIe/hbYfZLVG9YJ/0pU9Hz2n/9qZe3Rhn5s5CUZA5ORZlcdT/vmAXRMyONXJwPrmYQ== dependencies: - "@jest/environment" "30.0.0" - "@jest/fake-timers" "30.0.0" - "@jest/types" "30.0.0" + "@jest/environment" "30.3.0" + "@jest/fake-timers" "30.3.0" + "@jest/types" "30.3.0" "@types/node" "*" - jest-mock "30.0.0" - jest-util "30.0.0" - jest-validate "30.0.0" + jest-mock "30.3.0" + jest-util "30.3.0" + jest-validate "30.3.0" jest-environment-node@^29.7.0: version "29.7.0" @@ -5835,6 +5928,24 @@ jest-haste-map@30.0.0: optionalDependencies: fsevents "^2.3.3" +jest-haste-map@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-30.3.0.tgz#1ea6843e6e45c077d91270666a4fcba958c24cd5" + integrity sha512-mMi2oqG4KRU0R9QEtscl87JzMXfUhbKaFqOxmjb2CKcbHcUGFrJCBWHmnTiUqi6JcnzoBlO4rWfpdl2k/RfLCA== + dependencies: + "@jest/types" "30.3.0" + "@types/node" "*" + anymatch "^3.1.3" + fb-watchman "^2.0.2" + graceful-fs "^4.2.11" + jest-regex-util "30.0.1" + jest-util "30.3.0" + jest-worker "30.3.0" + picomatch "^4.0.3" + walker "^1.0.8" + optionalDependencies: + fsevents "^2.3.3" + jest-haste-map@^29.7.0: version "29.7.0" resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.7.0.tgz#3c2396524482f5a0506376e6c858c3bbcc17b104" @@ -5854,23 +5965,23 @@ jest-haste-map@^29.7.0: optionalDependencies: fsevents "^2.3.2" -jest-leak-detector@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-30.0.0.tgz#056d168e6f308262b40ad05843723a52cdb58b91" - integrity sha512-E/ly1azdVVbZrS0T6FIpyYHvsdek4FNaThJTtggjV/8IpKxh3p9NLndeUZy2+sjAI3ncS+aM0uLLon/dBg8htA== +jest-leak-detector@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-30.3.0.tgz#a695a851e353f517a554a2f5c91c2742fc131c98" + integrity sha512-cuKmUUGIjfXZAiGJ7TbEMx0bcqNdPPI6P1V+7aF+m/FUJqFDxkFR4JqkTu8ZOiU5AaX/x0hZ20KaaIPXQzbMGQ== dependencies: - "@jest/get-type" "30.0.0" - pretty-format "30.0.0" + "@jest/get-type" "30.1.0" + pretty-format "30.3.0" -jest-matcher-utils@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-30.0.0.tgz#f72a65e248c0462795f7e14386682bfee6ad4386" - integrity sha512-m5mrunqopkrqwG1mMdJxe1J4uGmS9AHHKYUmoxeQOxBcLjEvirIrIDwuKmUYrecPHVB/PUBpXs2gPoeA2FSSLQ== +jest-matcher-utils@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-30.3.0.tgz#d6c739fec1ecd33809f2d2b1348f6ab01d2f2493" + integrity sha512-HEtc9uFQgaUHkC7nLSlQL3Tph4Pjxt/yiPvkIrrDCt9jhoLIgxaubo1G+CFOnmHYMxHwwdaSN7mkIFs6ZK8OhA== dependencies: - "@jest/get-type" "30.0.0" + "@jest/get-type" "30.1.0" chalk "^4.1.2" - jest-diff "30.0.0" - pretty-format "30.0.0" + jest-diff "30.3.0" + pretty-format "30.3.0" jest-matcher-utils@^29.0.1, jest-matcher-utils@^29.7.0: version "29.7.0" @@ -5882,18 +5993,18 @@ jest-matcher-utils@^29.0.1, jest-matcher-utils@^29.7.0: jest-get-type "^29.6.3" pretty-format "^29.7.0" -jest-message-util@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-30.0.0.tgz#b115d408cd877a6e3e711485a3bd240c7a27503c" - integrity sha512-pV3qcrb4utEsa/U7UI2VayNzSDQcmCllBZLSoIucrESRu0geKThFZOjjh0kACDJFJRAQwsK7GVsmS6SpEceD8w== +jest-message-util@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-30.3.0.tgz#4d723544d36890ba862ac3961db52db5b0d1ba39" + integrity sha512-Z/j4Bo+4ySJ+JPJN3b2Qbl9hDq3VrXmnjjGEWD/x0BCXeOXPTV1iZYYzl2X8c1MaCOL+ewMyNBcm88sboE6YWw== dependencies: "@babel/code-frame" "^7.27.1" - "@jest/types" "30.0.0" + "@jest/types" "30.3.0" "@types/stack-utils" "^2.0.3" chalk "^4.1.2" graceful-fs "^4.2.11" - micromatch "^4.0.8" - pretty-format "30.0.0" + picomatch "^4.0.3" + pretty-format "30.3.0" slash "^3.0.0" stack-utils "^2.0.6" @@ -5912,14 +6023,14 @@ jest-message-util@^29.7.0: slash "^3.0.0" stack-utils "^2.0.3" -jest-mock@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-30.0.0.tgz#f3b3115cd80c3eec7df93809430ab1feaeeb7229" - integrity sha512-W2sRA4ALXILrEetEOh2ooZG6fZ01iwVs0OWMKSSWRcUlaLr4ESHuiKXDNTg+ZVgOq8Ei5445i/Yxrv59VT+XkA== +jest-mock@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-30.3.0.tgz#e0fa4184a596a6c4fdec53d4f412158418923747" + integrity sha512-OTzICK8CpE+t4ndhKrwlIdbM6Pn8j00lvmSmq5ejiO+KxukbLjgOflKWMn3KE34EZdQm5RqTuKj+5RIEniYhog== dependencies: - "@jest/types" "30.0.0" + "@jest/types" "30.3.0" "@types/node" "*" - jest-util "30.0.0" + jest-util "30.3.0" jest-mock@^29.7.0: version "29.7.0" @@ -5940,113 +6051,118 @@ jest-regex-util@30.0.0: resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-30.0.0.tgz#031f385ebb947e770e409ede703d200b3405413e" integrity sha512-rT84010qRu/5OOU7a9TeidC2Tp3Qgt9Sty4pOZ/VSDuEmRupIjKZAb53gU3jr4ooMlhwScrgC9UixJxWzVu9oQ== +jest-regex-util@30.0.1: + version "30.0.1" + resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-30.0.1.tgz#f17c1de3958b67dfe485354f5a10093298f2a49b" + integrity sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA== + jest-regex-util@^29.6.3: version "29.6.3" resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-29.6.3.tgz#4a556d9c776af68e1c5f48194f4d0327d24e8a52" integrity sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg== -jest-resolve-dependencies@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-30.0.0.tgz#caf6829daa9ad6579a6da7c2723346761102ef83" - integrity sha512-Yhh7odCAUNXhluK1bCpwIlHrN1wycYaTlZwq1GdfNBEESNNI/z1j1a7dUEWHbmB9LGgv0sanxw3JPmWU8NeebQ== +jest-resolve-dependencies@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-30.3.0.tgz#4d638c9f0d93a62a6ed25dec874bfd7e756c8ce5" + integrity sha512-9ev8s3YN6Hsyz9LV75XUwkCVFlwPbaFn6Wp75qnI0wzAINYWY8Fb3+6y59Rwd3QaS3kKXffHXsZMziMavfz/nw== dependencies: - jest-regex-util "30.0.0" - jest-snapshot "30.0.0" + jest-regex-util "30.0.1" + jest-snapshot "30.3.0" -jest-resolve@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-30.0.0.tgz#8aaf8f85c8a14579fa34e651af406e57d2675092" - integrity sha512-zwWl1P15CcAfuQCEuxszjiKdsValhnWcj/aXg/R3aMHs8HVoCWHC4B/+5+1BirMoOud8NnN85GSP2LEZCbj3OA== +jest-resolve@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-30.3.0.tgz#b7bee9927279805b1b50715d2170a545553b87ff" + integrity sha512-NRtTAHQlpd15F9rUR36jqwelbrDV/dY4vzNte3S2kxCKUJRYNd5/6nTSbYiak1VX5g8IoFF23Uj5TURkUW8O5g== dependencies: chalk "^4.1.2" graceful-fs "^4.2.11" - jest-haste-map "30.0.0" + jest-haste-map "30.3.0" jest-pnp-resolver "^1.2.3" - jest-util "30.0.0" - jest-validate "30.0.0" + jest-util "30.3.0" + jest-validate "30.3.0" slash "^3.0.0" unrs-resolver "^1.7.11" -jest-runner@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-30.0.0.tgz#d4667945181e3aecb025802a3f81ff30a523f877" - integrity sha512-xbhmvWIc8X1IQ8G7xTv0AQJXKjBVyxoVJEJgy7A4RXsSaO+k/1ZSBbHwjnUhvYqMvwQPomWssDkUx6EoidEhlw== +jest-runner@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-30.3.0.tgz#fa970fc4e45d418ad7e7d581b24cac7af5944cb7" + integrity sha512-gDv6C9LGKWDPLia9TSzZwf4h3kMQCqyTpq+95PODnTRDO0g9os48XIYYkS6D236vjpBir2fF63YmJFtqkS5Duw== dependencies: - "@jest/console" "30.0.0" - "@jest/environment" "30.0.0" - "@jest/test-result" "30.0.0" - "@jest/transform" "30.0.0" - "@jest/types" "30.0.0" + "@jest/console" "30.3.0" + "@jest/environment" "30.3.0" + "@jest/test-result" "30.3.0" + "@jest/transform" "30.3.0" + "@jest/types" "30.3.0" "@types/node" "*" chalk "^4.1.2" emittery "^0.13.1" exit-x "^0.2.2" graceful-fs "^4.2.11" - jest-docblock "30.0.0" - jest-environment-node "30.0.0" - jest-haste-map "30.0.0" - jest-leak-detector "30.0.0" - jest-message-util "30.0.0" - jest-resolve "30.0.0" - jest-runtime "30.0.0" - jest-util "30.0.0" - jest-watcher "30.0.0" - jest-worker "30.0.0" + jest-docblock "30.2.0" + jest-environment-node "30.3.0" + jest-haste-map "30.3.0" + jest-leak-detector "30.3.0" + jest-message-util "30.3.0" + jest-resolve "30.3.0" + jest-runtime "30.3.0" + jest-util "30.3.0" + jest-watcher "30.3.0" + jest-worker "30.3.0" p-limit "^3.1.0" source-map-support "0.5.13" -jest-runtime@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-30.0.0.tgz#7aad9359da4054d4ae1ec8d94f83d3c07d6ce1c7" - integrity sha512-/O07qVgFrFAOGKGigojmdR3jUGz/y3+a/v9S/Yi2MHxsD+v6WcPppglZJw0gNJkRBArRDK8CFAwpM/VuEiiRjA== - dependencies: - "@jest/environment" "30.0.0" - "@jest/fake-timers" "30.0.0" - "@jest/globals" "30.0.0" - "@jest/source-map" "30.0.0" - "@jest/test-result" "30.0.0" - "@jest/transform" "30.0.0" - "@jest/types" "30.0.0" +jest-runtime@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-30.3.0.tgz#1a9bec7a9b68db12dfe4136bbe41ab883ea2c996" + integrity sha512-CgC+hIBJbuh78HEffkhNKcbXAytQViplcl8xupqeIWyKQF50kCQA8J7GeJCkjisC6hpnC9Muf8jV5RdtdFbGng== + dependencies: + "@jest/environment" "30.3.0" + "@jest/fake-timers" "30.3.0" + "@jest/globals" "30.3.0" + "@jest/source-map" "30.0.1" + "@jest/test-result" "30.3.0" + "@jest/transform" "30.3.0" + "@jest/types" "30.3.0" "@types/node" "*" chalk "^4.1.2" cjs-module-lexer "^2.1.0" collect-v8-coverage "^1.0.2" - glob "^10.3.10" + glob "^10.5.0" graceful-fs "^4.2.11" - jest-haste-map "30.0.0" - jest-message-util "30.0.0" - jest-mock "30.0.0" - jest-regex-util "30.0.0" - jest-resolve "30.0.0" - jest-snapshot "30.0.0" - jest-util "30.0.0" + jest-haste-map "30.3.0" + jest-message-util "30.3.0" + jest-mock "30.3.0" + jest-regex-util "30.0.1" + jest-resolve "30.3.0" + jest-snapshot "30.3.0" + jest-util "30.3.0" slash "^3.0.0" strip-bom "^4.0.0" -jest-snapshot@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-30.0.0.tgz#44217201c3f935e7cc5b413c8dda05341c80b0d7" - integrity sha512-6oCnzjpvfj/UIOMTqKZ6gedWAUgaycMdV8Y8h2dRJPvc2wSjckN03pzeoonw8y33uVngfx7WMo1ygdRGEKOT7w== +jest-snapshot@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-30.3.0.tgz#6e7ea75069dda86e36311a0f73189e830d4f51ad" + integrity sha512-f14c7atpb4O2DeNhwcvS810Y63wEn8O1HqK/luJ4F6M4NjvxmAKQwBUWjbExUtMxWJQ0wVgmCKymeJK6NZMnfQ== dependencies: "@babel/core" "^7.27.4" "@babel/generator" "^7.27.5" "@babel/plugin-syntax-jsx" "^7.27.1" "@babel/plugin-syntax-typescript" "^7.27.1" "@babel/types" "^7.27.3" - "@jest/expect-utils" "30.0.0" - "@jest/get-type" "30.0.0" - "@jest/snapshot-utils" "30.0.0" - "@jest/transform" "30.0.0" - "@jest/types" "30.0.0" - babel-preset-current-node-syntax "^1.1.0" + "@jest/expect-utils" "30.3.0" + "@jest/get-type" "30.1.0" + "@jest/snapshot-utils" "30.3.0" + "@jest/transform" "30.3.0" + "@jest/types" "30.3.0" + babel-preset-current-node-syntax "^1.2.0" chalk "^4.1.2" - expect "30.0.0" + expect "30.3.0" graceful-fs "^4.2.11" - jest-diff "30.0.0" - jest-matcher-utils "30.0.0" - jest-message-util "30.0.0" - jest-util "30.0.0" - pretty-format "30.0.0" + jest-diff "30.3.0" + jest-matcher-utils "30.3.0" + jest-message-util "30.3.0" + jest-util "30.3.0" + pretty-format "30.3.0" semver "^7.7.2" synckit "^0.11.8" @@ -6062,6 +6178,18 @@ jest-util@30.0.0: graceful-fs "^4.2.11" picomatch "^4.0.2" +jest-util@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-30.3.0.tgz#95a4fbacf2dac20e768e2f1744b70519f2ba7980" + integrity sha512-/jZDa00a3Sz7rdyu55NLrQCIrbyIkbBxareejQI315f/i8HjYN+ZWsDLLpoQSiUIEIyZF/R8fDg3BmB8AtHttg== + dependencies: + "@jest/types" "30.3.0" + "@types/node" "*" + chalk "^4.1.2" + ci-info "^4.2.0" + graceful-fs "^4.2.11" + picomatch "^4.0.3" + jest-util@^29.7.0: version "29.7.0" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.7.0.tgz#23c2b62bfb22be82b44de98055802ff3710fc0bc" @@ -6074,17 +6202,17 @@ jest-util@^29.7.0: graceful-fs "^4.2.9" picomatch "^2.2.3" -jest-validate@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-30.0.0.tgz#0e961bcf6ec9922edb10860039529797f02eb821" - integrity sha512-d6OkzsdlWItHAikUDs1hlLmpOIRhsZoXTCliV2XXalVQ3ZOeb9dy0CQ6AKulJu/XOZqpOEr/FiMH+FeOBVV+nw== +jest-validate@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-30.3.0.tgz#215e11b8fcc5e2ca4b99ea5d730a5b4c969e4355" + integrity sha512-I/xzC8h5G+SHCb2P2gWkJYrNiTbeL47KvKeW5EzplkyxzBRBw1ssSHlI/jXec0ukH2q7x2zAWQm7015iusg62Q== dependencies: - "@jest/get-type" "30.0.0" - "@jest/types" "30.0.0" + "@jest/get-type" "30.1.0" + "@jest/types" "30.3.0" camelcase "^6.3.0" chalk "^4.1.2" leven "^3.1.0" - pretty-format "30.0.0" + pretty-format "30.3.0" jest-validate@^29.6.3, jest-validate@^29.7.0: version "29.7.0" @@ -6098,18 +6226,18 @@ jest-validate@^29.6.3, jest-validate@^29.7.0: leven "^3.1.0" pretty-format "^29.7.0" -jest-watcher@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-30.0.0.tgz#d444ad4950e20e1cca60e470c448cc15f3f858ce" - integrity sha512-fbAkojcyS53bOL/B7XYhahORq9cIaPwOgd/p9qW/hybbC8l6CzxfWJJxjlPBAIVN8dRipLR0zdhpGQdam+YBtw== +jest-watcher@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-30.3.0.tgz#3afa1af355b9fe80f0261eb8a23981a315858596" + integrity sha512-PJ1d9ThtTR8aMiBWUdcownq9mDdLXsQzJayTk4kmaBRHKvwNQn+ANveuhEBUyNI2hR1TVhvQ8D5kHubbzBHR/w== dependencies: - "@jest/test-result" "30.0.0" - "@jest/types" "30.0.0" + "@jest/test-result" "30.3.0" + "@jest/types" "30.3.0" "@types/node" "*" ansi-escapes "^4.3.2" chalk "^4.1.2" emittery "^0.13.1" - jest-util "30.0.0" + jest-util "30.3.0" string-length "^4.0.2" jest-worker@30.0.0: @@ -6123,6 +6251,17 @@ jest-worker@30.0.0: merge-stream "^2.0.0" supports-color "^8.1.1" +jest-worker@30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-30.3.0.tgz#ae4dc1f1d93d0cba1415624fcedaec40ea764f14" + integrity sha512-DrCKkaQwHexjRUFTmPzs7sHQe0TSj9nvDALKGdwmK5mW9v7j90BudWirKAJHt3QQ9Dhrg1F7DogPzhChppkJpQ== + dependencies: + "@types/node" "*" + "@ungap/structured-clone" "^1.3.0" + jest-util "30.3.0" + merge-stream "^2.0.0" + supports-color "^8.1.1" + jest-worker@^29.6.3, jest-worker@^29.7.0: version "29.7.0" resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.7.0.tgz#acad073acbbaeb7262bd5389e1bcf43e10058d4a" @@ -6133,15 +6272,15 @@ jest-worker@^29.6.3, jest-worker@^29.7.0: merge-stream "^2.0.0" supports-color "^8.0.0" -jest@^30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/jest/-/jest-30.0.0.tgz#d1d69adb09045053762a40217238c76b19d1db6d" - integrity sha512-/3G2iFwsUY95vkflmlDn/IdLyLWqpQXcftptooaPH4qkyU52V7qVYf1BjmdSPlp1+0fs6BmNtrGaSFwOfV07ew== +jest@^30.3.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/jest/-/jest-30.3.0.tgz#6460b889dd805e9677400505f16f1d9b14c285a3" + integrity sha512-AkXIIFcaazymvey2i/+F94XRnM6TsVLZDhBMLsd1Sf/W0wzsvvpjeyUrCZD6HGG4SDYPgDJDBKeiJTBb10WzMg== dependencies: - "@jest/core" "30.0.0" - "@jest/types" "30.0.0" + "@jest/core" "30.3.0" + "@jest/types" "30.3.0" import-local "^3.2.0" - jest-cli "30.0.0" + jest-cli "30.3.0" jiti@2.6.1: version "2.6.1" @@ -7462,6 +7601,11 @@ picomatch@^4.0.2: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab" integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg== +picomatch@^4.0.3: + version "4.0.4" + resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.4.tgz#fd6f5e00a143086e074dffe4c924b8fb293b0589" + integrity sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A== + pirates@^4.0.4: version "4.0.6" resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9" @@ -7526,16 +7670,16 @@ prettier@^3.5.3: resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.5.3.tgz#4fc2ce0d657e7a02e602549f053b239cb7dfe1b5" integrity sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw== -pretty-format@30.0.0: - version "30.0.0" - resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-30.0.0.tgz#a3137bed442af87eadea2c427a1b201189e590a4" - integrity sha512-18NAOUr4ZOQiIR+BgI5NhQE7uREdx4ZyV0dyay5izh4yfQ+1T7BSvggxvRGoXocrRyevqW5OhScUjbi9GB8R8Q== +pretty-format@30.3.0, pretty-format@^30.0.0: + version "30.3.0" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-30.3.0.tgz#e977eed4bcd1b6195faed418af8eac68b9ea1f29" + integrity sha512-oG4T3wCbfeuvljnyAzhBvpN45E8iOTXCU/TD3zXW80HA3dQ4ahdqMkWGiPWZvjpQwlbyHrPTWUAqUzGzv4l1JQ== dependencies: - "@jest/schemas" "30.0.0" + "@jest/schemas" "30.0.5" ansi-styles "^5.2.0" react-is "^18.3.1" -pretty-format@^29.0.0, pretty-format@^29.0.3, pretty-format@^29.7.0: +pretty-format@^29.0.3, pretty-format@^29.7.0: version "29.7.0" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812" integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ== From 11ece32ea25ca9b2a243cc33990d9431b0197d5f Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Thu, 23 Apr 2026 23:45:07 +0200 Subject: [PATCH 3/5] fix: add missing translation keys (#3565) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 🎯 Goal ## 🛠 Implementation details ## 🎨 UI Changes
iOS
Before After
Android
Before After
## 🧪 Testing ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android --- .../AttachmentMediaPicker/AttachmentPickerItem.tsx | 6 ++++-- .../src/components/Indicators/EmptyStateIndicator.tsx | 4 +++- .../AttachmentUploadProgressIndicator.tsx | 11 ++++++++--- package/src/components/Poll/CreatePollContent.tsx | 8 +++++--- package/src/i18n/en.json | 8 ++++++++ package/src/i18n/es.json | 8 ++++++++ package/src/i18n/fr.json | 8 ++++++++ package/src/i18n/he.json | 8 ++++++++ package/src/i18n/hi.json | 8 ++++++++ package/src/i18n/it.json | 8 ++++++++ package/src/i18n/ja.json | 8 ++++++++ package/src/i18n/ko.json | 8 ++++++++ package/src/i18n/nl.json | 8 ++++++++ package/src/i18n/pt-br.json | 8 ++++++++ package/src/i18n/ru.json | 8 ++++++++ package/src/i18n/tr.json | 8 ++++++++ 16 files changed, 116 insertions(+), 9 deletions(-) diff --git a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx index feeb508af4..dbc48c3238 100644 --- a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx +++ b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx @@ -100,6 +100,7 @@ const AttachmentImage = (props: AttachmentPickerItemType) => { } = useTheme(); const styles = useStyles(); const { vw } = useViewport(); + const { t } = useTranslationContext(); const { uploadNewFile } = useMessageInputContext(); const messageComposer = useMessageComposer(); const { attachmentManager } = messageComposer; @@ -120,7 +121,7 @@ const AttachmentImage = (props: AttachmentPickerItemType) => { } } else { if (!availableUploadSlots) { - Alert.alert('Maximum number of files reached'); + Alert.alert(t('Maximum number of files reached')); return; } await uploadNewFile(asset); @@ -150,6 +151,7 @@ const AttachmentImage = (props: AttachmentPickerItemType) => { const AttachmentIosLimited = () => { const { numberOfAttachmentPickerImageColumns } = useAttachmentPickerContext(); const { vw } = useViewport(); + const { t } = useTranslationContext(); const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2; const styles = useStyles(); return ( @@ -164,7 +166,7 @@ const AttachmentIosLimited = () => { onPress={NativeHandlers.iOS14RefreshGallerySelection} > - Add more + {t('Add more')} ); }; diff --git a/package/src/components/Indicators/EmptyStateIndicator.tsx b/package/src/components/Indicators/EmptyStateIndicator.tsx index e4b9d1845d..8ce52ddc02 100644 --- a/package/src/components/Indicators/EmptyStateIndicator.tsx +++ b/package/src/components/Indicators/EmptyStateIndicator.tsx @@ -46,7 +46,9 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => { ); default: return ( - No items exist + + {t('No items exist')} + ); } }; diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx index ad6772860f..9f54a3a5ca 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx @@ -4,6 +4,7 @@ import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-nati import { LocalAttachmentUploadMetadata } from 'stream-chat'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; +import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill'; import { Warning } from '../../../../icons/exclamation-triangle-fill'; import { primitives } from '../../../../theme'; @@ -41,6 +42,7 @@ export const FileUploadRetryIndicator = ({ onPress }: FileUploadRetryIndicatorPr messageComposer: { fileUploadRetryIndicator }, }, } = useTheme(); + const { t } = useTranslationContext(); const styles = useFileUploadRetryStyles(); return ( @@ -56,7 +58,7 @@ export const FileUploadRetryIndicator = ({ onPress }: FileUploadRetryIndicatorPr width={16} /> - Network error + {t('Network error')} - Retry Upload + + {t('Retry Upload')} + ); @@ -86,9 +90,10 @@ export const FileUploadNotSupportedIndicator = ({ messageComposer: { fileUploadNotSupportedIndicator }, }, } = useTheme(); + const { t } = useTranslationContext(); const reason = localMetadata.uploadPermissionCheck?.reason === 'size_limit'; - const message = reason ? 'File too large' : 'Not supported'; + const message = reason ? t('File too large') : t('Not supported'); return ( { {t('Anonymous voting')} - Hide who voted + + {t('Hide who voted')} + { {t('Suggest an option')} - Let others add options + {t('Let others add options')} @@ -193,7 +195,7 @@ export const CreatePollContent = () => { {t('Add a comment')} - Add a comment to the poll + {t('Add a comment to the poll')} diff --git a/package/src/i18n/en.json b/package/src/i18n/en.json index 203c5b7c91..26fb6a4fae 100644 --- a/package/src/i18n/en.json +++ b/package/src/i18n/en.json @@ -5,7 +5,9 @@ "1 Reply": "1 Reply", "1 Thread Reply": "1 Thread Reply", "Add a comment": "Add a comment", + "Add a comment to the poll": "Add a comment to the poll", "Add an option": "Add an option", + "Add more": "Add more", "Allow access to your Gallery": "Allow access to your Gallery", "Allow camera access in device settings": "Allow camera access in device settings", "Also send to channel": "Also send to channel", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.", "Error while loading, please reload/refresh": "Error while loading, please reload/refresh", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "File is too large: {{ size }}, maximum upload size is {{ limit }}", + "File too large": "File too large", "File type not supported": "File type not supported", "Flag": "Flag", "Flag Message": "Flag Message", "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged.", "Generating...": "Generating...", "Giphy": "Giphy", + "Hide who voted": "Hide who voted", "Hold to start recording.": "Hold to start recording.", "How about sending your first message to a friend?": "How about sending your first message to a friend?", "Instant Commands": "Instant Commands", + "Let others add options": "Let others add options", "Let's start chatting!": "Let's start chatting!", "Links are disabled": "Links are disabled", "Live Location": "Live Location", @@ -65,11 +70,13 @@ "Message deleted": "Message deleted", "Message flagged": "Message flagged", "Multiple votes": "Multiple votes", + "Network error": "Network error", "Select more than one option": "Select more than one option", "Limit votes per person": "Limit votes per person", "Choose between 2–10 options": "Choose between 2–10 options", "Mute User": "Mute User", "No chats here yet…": "No chats here yet…", + "No items exist": "No items exist", "No threads here yet": "No threads here yet", "Not supported": "Not supported", "Nothing yet...": "Nothing yet...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "Reply to {{name}}", "Reply to Message": "Reply to Message", "Resend": "Resend", + "Retry Upload": "Retry Upload", "SEND": "SEND", "Search": "Search", "Select More Photos": "Select More Photos", diff --git a/package/src/i18n/es.json b/package/src/i18n/es.json index 4cad141dcc..c6ebf950d9 100644 --- a/package/src/i18n/es.json +++ b/package/src/i18n/es.json @@ -5,7 +5,9 @@ "1 Reply": "1 respuesta", "1 Thread Reply": "1 respuesta de hilo", "Add a comment": "Agregar un comentario", + "Add a comment to the poll": "Añadir un comentario a la encuesta", "Add an option": "Agregar una opción", + "Add more": "Añadir más", "Allow access to your Gallery": "Permitir acceso a tu galería", "Allow camera access in device settings": "Permitir el acceso a la cámara en la configuración del dispositivo", "Also send to channel": "También enviar al canal", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "Error al marcar el mensaje como no leído. No se pueden marcar mensajes no leídos más antiguos que los 100 mensajes más recientes del canal.", "Error while loading, please reload/refresh": "Error al cargar, por favor recarga/actualiza", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "El archivo es demasiado grande: {{ size }}, el tamaño máximo de carga es de {{ limit }}", + "File too large": "Archivo demasiado grande", "File type not supported": "Tipo de archivo no admitido", "Flag": "Reportar", "Flag Message": "Reportar mensaje", "Flag action failed either due to a network issue or the message is already flagged": "El reporte falló debido a un problema de red o el mensaje ya fue reportado.", "Generating...": "Generando...", "Giphy": "Giphy", + "Hide who voted": "Ocultar quién votó", "Hold to start recording.": "Mantén presionado para comenzar a grabar.", "How about sending your first message to a friend?": "¿Qué tal enviar tu primer mensaje a un amigo?", "Instant Commands": "Comandos instantáneos", + "Let others add options": "Permitir que otros añadan opciones", "Let's start chatting!": "¡Empecemos a charlar!", "Links are disabled": "Los enlaces están desactivados", "Live Location": "Ubicación en vivo", @@ -65,11 +70,13 @@ "Message deleted": "Mensaje eliminado", "Message flagged": "Mensaje reportado", "Multiple votes": "Votos múltiples", + "Network error": "Error de red", "Select more than one option": "Selecciona más de una opción", "Limit votes per person": "Limita los votos por persona", "Choose between 2–10 options": "Elige entre 2 y 10 opciones", "Mute User": "Silenciar usuario", "No chats here yet…": "No hay chats aquí todavía...", + "No items exist": "No hay elementos", "No threads here yet": "Aún no hay hilos aquí", "Not supported": "No admitido", "Nothing yet...": "Aún no hay nada...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "Responder a {{name}}", "Reply to Message": "Responder al mensaje", "Resend": "Reenviar", + "Retry Upload": "Reintentar carga", "SEND": "ENVIAR", "Search": "Buscar", "Select More Photos": "Seleccionar más fotos", diff --git a/package/src/i18n/fr.json b/package/src/i18n/fr.json index f39616f9a8..0ad0522254 100644 --- a/package/src/i18n/fr.json +++ b/package/src/i18n/fr.json @@ -5,7 +5,9 @@ "1 Reply": "1 Réponse", "1 Thread Reply": "Réponse à 1 fil", "Add a comment": "Ajouter un commentaire", + "Add a comment to the poll": "Ajouter un commentaire au sondage", "Add an option": "Ajouter une option", + "Add more": "Ajouter plus", "Allow access to your Gallery": "Autoriser l'accès à votre galerie", "Allow camera access in device settings": "Autoriser l'accès à la caméra dans les paramètres de l'appareil", "Also send to channel": "Envoyer également à la chaîne", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "Erreur lors du marquage du message comme non lu. Impossible de marquer les messages non lus plus anciens que les 100 derniers messages du canal.", "Error while loading, please reload/refresh": "Erreur lors du chargement, veuillez recharger/rafraîchir", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "Le fichier est trop volumineux : {{ size }}, la taille de téléchargement maximale est de {{ limit }}", + "File too large": "Fichier trop volumineux", "File type not supported": "Le type de fichier n'est pas pris en charge", "Flag": "Signaler", "Flag Message": "Signaler le message", "Flag action failed either due to a network issue or the message is already flagged": "L'action de signalisation a échoué en raison d'un problème de réseau ou le message est déjà signalé.", "Generating...": "Génération...", "Giphy": "Giphy", + "Hide who voted": "Masquer qui a voté", "Hold to start recording.": "Hold to start recording.", "How about sending your first message to a friend?": "Et si vous envoyiez votre premier message à un ami ?", "Instant Commands": "Commandes Instantanées", + "Let others add options": "Autoriser d'autres à ajouter des options", "Let's start chatting!": "Commençons à discuter !", "Links are disabled": "Links are disabled", "Live Location": "Position en direct", @@ -65,11 +70,13 @@ "Message deleted": "Message supprimé", "Message flagged": "Message signalé", "Multiple votes": "Votes multiples", + "Network error": "Erreur réseau", "Select more than one option": "Sélectionnez plus d’une option", "Limit votes per person": "Limiter les votes par personne", "Choose between 2–10 options": "Choisissez entre 2 et 10 options", "Mute User": "Utilisateur muet", "No chats here yet…": "Pas de discussions ici pour le moment…", + "No items exist": "Aucun élément", "No threads here yet": "Aucun fil ici pour le moment", "Not supported": "Non pris en charge", "Nothing yet...": "Aucun message...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "Répondre à {{name}}", "Reply to Message": "Répondre au message", "Resend": "Renvoyer", + "Retry Upload": "Réessayer l'envoi", "SEND": "ENVOYER", "Search": "Rechercher", "Select More Photos": "Sélectionner plus de photos", diff --git a/package/src/i18n/he.json b/package/src/i18n/he.json index 63af4d6a1a..6611b5aa45 100644 --- a/package/src/i18n/he.json +++ b/package/src/i18n/he.json @@ -5,7 +5,9 @@ "1 Reply": "תגובה אחת", "1 Thread Reply": "תגובה אחת לשרשור", "Add a comment": "הוסף תגובה", + "Add a comment to the poll": "הוסף תגובה לסקר", "Add an option": "הוסף אפשרות", + "Add more": "הוסף עוד", "Allow access to your Gallery": "אפשר גישה לגלריה שלך", "Allow camera access in device settings": "אפשר גישה למצלמה בהגדרות המכשיר", "Also send to channel": "שלח/י הודעה לשיחה", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "שגיאה ארעה בסימון ההודעה כלא נקרא. אין אפשרות לסמן הודעות כלא נקראות שהן ישנות מה-100 ההודעות האחרונות בשיחה.", "Error while loading, please reload/refresh": "שגיאה ארעה בזמן הטעינה, אנא טען מחדש/רענן", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "הקובץ גדול מדי: {{ size }}, גודל העלאה מקסימלי הוא {{ limit }}", + "File too large": "הקובץ גדול מדי", "File type not supported": "סוג הקובץ אינו נתמך", "Flag": "סמן", "Flag Message": "סמן הודעה", "Flag action failed either due to a network issue or the message is already flagged": "פעולת הסימון נכשלה בגלל בעיית רשת או שההודעה כבר סומנה.", "Generating...": "מייצר...", "Giphy": "Giphy", + "Hide who voted": "הסתר מי הצביע", "Hold to start recording.": "לחץ והחזק כדי להתחיל להקליט.", "How about sending your first message to a friend?": "מה דעתך לשלוח את ההודעה הראשונה שלך לחבר?", "Instant Commands": "פעולות מיידיות", + "Let others add options": "אפשר לאחרים להוסיף אפשרויות", "Let's start chatting!": "בואו נתחיל לשוחח!", "Links are disabled": "הקישורים מבוטלים", "Live Location": "מיקום חי", @@ -65,11 +70,13 @@ "Message deleted": "ההודעה נמחקה", "Message flagged": "ההודעה סומנה", "Multiple votes": "הצבעות מרובות", + "Network error": "שגיאת רשת", "Select more than one option": "בחר/י יותר מאפשרות אחת", "Limit votes per person": "הגבל/י את מספר ההצבעות לאדם", "Choose between 2–10 options": "בחר/י בין 2 ל-10 אפשרויות", "Mute User": "השתק/י משתמש", "No chats here yet…": "אין צ'אטים כאן עדיין...", + "No items exist": "אין פריטים", "No threads here yet": "אין שרשורים כאן עדיין", "Not supported": "לא נתמך", "Nothing yet...": "אינפורמציה תתקבל בהמשך...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "השב/י ל-{{name}}", "Reply to Message": "השב/י להודעה", "Resend": "שלח/י שוב", + "Retry Upload": "נסה להעלות שוב", "SEND": "שלח", "Search": "חפש/י", "Select More Photos": "בחר עוד תמונות", diff --git a/package/src/i18n/hi.json b/package/src/i18n/hi.json index dba733a830..6bbd367d23 100644 --- a/package/src/i18n/hi.json +++ b/package/src/i18n/hi.json @@ -5,7 +5,9 @@ "1 Reply": "1 रिप्लाई", "1 Thread Reply": "1 धागा उत्तर", "Add a comment": "एक टिप्पणी जोड़ें", + "Add a comment to the poll": "पोल में टिप्पणी जोड़ें", "Add an option": "एक विकल्प जोड़ें", + "Add more": "और जोड़ें", "Allow access to your Gallery": "अपनी गैलरी तक पहुँचने की अनुमति दें", "Allow camera access in device settings": "डिवाइस सेटिंग्स में कैमरा एक्सेस की अनुमति दें", "Also send to channel": "चैनल को भी भेजें", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "संदेश को अनरीड चिह्नित करने में त्रुटि। चैनल के नवीनतम 100 संदेशों से पुराने संदेशों को अनरीड चिह्नित नहीं किया जा सकता।", "Error while loading, please reload/refresh": "एरर, रिफ्रेश करे", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "फ़ाइल बहुत बड़ी है: {{ size }}, अधिकतम अपलोड साइज़ {{ limit }} है", + "File too large": "फ़ाइल बहुत बड़ी है", "File type not supported": "फ़ाइल प्रकार समर्थित नहीं है", "Flag": "झंडा", "Flag Message": "झंडा संदेश", "Flag action failed either due to a network issue or the message is already flagged": "फ़्लैग कार्रवाई या तो नेटवर्क समस्या के कारण विफल हो गई या संदेश पहले से फ़्लैग किया गया है।", "Generating...": "जनरेट कर रहा है...", "Giphy": "Giphy", + "Hide who voted": "वोट करने वालों को छुपाएँ", "Hold to start recording.": "रिकॉर्डिंग शुरू करने के लिए दबाएं।", "How about sending your first message to a friend?": "किसी मित्र को अपना पहला संदेश भेजने के बारे में क्या ख़याल है?", "Instant Commands": "त्वरित कमांड", + "Let others add options": "दूसरों को विकल्प जोड़ने दें", "Let's start chatting!": "आइए चैट करना शुरू करें!", "Links are disabled": "लिंक अक्षम हैं", "Live Location": "लाइव लोकेशन", @@ -65,11 +70,13 @@ "Message deleted": "मैसेज हटा दिया गया", "Message flagged": "संदेश को ध्वजांकित किया गया", "Multiple votes": "एकाधिक वोट", + "Network error": "नेटवर्क त्रुटि", "Select more than one option": "एक से अधिक विकल्प चुनें", "Limit votes per person": "प्रति व्यक्ति वोट सीमित करें", "Choose between 2–10 options": "2–10 विकल्प चुनें", "Mute User": "उपयोगकर्ता को म्यूट करें", "No chats here yet…": "अभी तक यहाँ कोई चैट नहीं है...", + "No items exist": "कोई आइटम मौजूद नहीं", "No threads here yet": "यहाँ अभी तक कोई थ्रेड्स नहीं हैं", "Not supported": "समर्थित नहीं", "Nothing yet...": "कोई मैसेज नहीं है...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "{{name}} को जवाब दें", "Reply to Message": "संदेश का जवाब दें", "Resend": "पुन: भेजें", + "Retry Upload": "अपलोड पुनः प्रयास करें", "SEND": "भेजें", "Search": "खोजें", "Select More Photos": "अधिक फ़ोटो चुनें", diff --git a/package/src/i18n/it.json b/package/src/i18n/it.json index b1ee4540f5..ebf1fc3bfd 100644 --- a/package/src/i18n/it.json +++ b/package/src/i18n/it.json @@ -5,7 +5,9 @@ "1 Reply": "1 Risposta", "1 Thread Reply": "1 Risposta alla Discussione", "Add a comment": "Aggiungi un commento", + "Add a comment to the poll": "Aggiungi un commento al sondaggio", "Add an option": "Aggiungi un'opzione", + "Add more": "Aggiungi altri", "Allow access to your Gallery": "Consenti l'accesso alla tua galleria", "Allow camera access in device settings": "Consenti l'accesso alla fotocamera nelle impostazioni del dispositivo", "Also send to channel": "Invia anche al canale", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "Errore durante il contrassegno del messaggio come non letto. Non è possibile contrassegnare i messaggi non letti più vecchi dei 100 messaggi più recenti del canale.", "Error while loading, please reload/refresh": "Errore durante il caricamento, per favore ricarica la pagina", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "Il file è troppo grande: {{ size }}, la dimensione massima di caricamento è {{ limit }}", + "File too large": "File troppo grande", "File type not supported": "Tipo di file non supportato", "Flag": "Contrassegna", "Flag Message": "Contrassegna Messaggio", "Flag action failed either due to a network issue or the message is already flagged": "L'azione di segnalazione non è riuscita a causa di un problema di rete o il messaggio è già segnalato.", "Generating...": "Generando...", "Giphy": "Giphy", + "Hide who voted": "Nascondi chi ha votato", "Hold to start recording.": "Tieni premuto per avviare la registrazione.", "How about sending your first message to a friend?": "Che ne dici di inviare il tuo primo messaggio ad un amico?", "Instant Commands": "Comandi Istantanei", + "Let others add options": "Permetti ad altri di aggiungere opzioni", "Let's start chatting!": "Iniziamo a chattare!", "Links are disabled": "I link sono disabilitati", "Live Location": "Posizione in tempo reale", @@ -65,11 +70,13 @@ "Message deleted": "Messaggio cancellato", "Message flagged": "Messaggio contrassegnato", "Multiple votes": "Voti multipli", + "Network error": "Errore di rete", "Select more than one option": "Seleziona più di un'opzione", "Limit votes per person": "Limita i voti per persona", "Choose between 2–10 options": "Scegli tra 2 e 10 opzioni", "Mute User": "Utente Muto", "No chats here yet…": "Non ci sono ancora chat qui...", + "No items exist": "Nessun elemento", "No threads here yet": "Nessun thread qui ancora", "Not supported": "non supportato", "Nothing yet...": "Ancora niente...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "Rispondi a {{name}}", "Reply to Message": "Rispondi al messaggio", "Resend": "Invia di nuovo", + "Retry Upload": "Riprova caricamento", "SEND": "INVIA", "Search": "Cerca", "Select More Photos": "Seleziona Altre foto", diff --git a/package/src/i18n/ja.json b/package/src/i18n/ja.json index 85643f3e14..a624563c91 100644 --- a/package/src/i18n/ja.json +++ b/package/src/i18n/ja.json @@ -5,7 +5,9 @@ "1 Reply": "1件の返信", "1 Thread Reply": "1件のスレッド返信", "Add a comment": "コメントを追加", + "Add a comment to the poll": "投票にコメントを追加", "Add an option": "オプションを追加", + "Add more": "さらに追加", "Allow access to your Gallery": "ギャラリーへのアクセスを許可する", "Allow camera access in device settings": "デバイス設定でカメラへのアクセスを許可する", "Also send to channel": "チャンネルにも送信", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "メッセージを未読にする際にエラーが発生しました。最新の100件のチャネルメッセージより古い未読メッセージはマークできません。", "Error while loading, please reload/refresh": "ロード中にエラーが発生しました。更新してください", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "ファイルが大きすぎます：{{ size }}、最大アップロードサイズは{{ limit }}です", + "File too large": "ファイルが大きすぎます", "File type not supported": "サポートされていないファイルです", "Flag": "フラグ", "Flag Message": "メッセージをフラグする", "Flag action failed either due to a network issue or the message is already flagged": "ネットワーク接続に問題があるか、すでにフラグが設定されているため、フラグが失敗しました。", "Generating...": "生成中...", "Giphy": "Giphy", + "Hide who voted": "投票者を非表示", "Hold to start recording.": "録音を開始するには押し続けてください。", "How about sending your first message to a friend?": "初めてのメッセージを友達に送ってみてはいかがでしょうか?", "Instant Commands": "インスタントコマンド", + "Let others add options": "他の人が選択肢を追加できるようにする", "Let's start chatting!": "チャットを始めましょう!", "Links are disabled": "リンク機能が無効になっています", "Live Location": "ライブ位置情報", @@ -65,11 +70,13 @@ "Message deleted": "メッセージが削除されました", "Message flagged": "メッセージにフラグが付けられました", "Multiple votes": "複数投票", + "Network error": "ネットワークエラー", "Select more than one option": "2つ以上のオプションを選択", "Limit votes per person": "1人あたりの投票数を制限", "Choose between 2–10 options": "2～10個のオプションから選択", "Mute User": "ユーザーをミュートする", "No chats here yet…": "まだチャットはありません…", + "No items exist": "項目がありません", "No threads here yet": "まだスレッドがありません", "Not supported": "サポートしていません", "Nothing yet...": "まだ何もありません...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "{{name}}に返信", "Reply to Message": "メッセージに返信", "Resend": "再送", + "Retry Upload": "アップロードを再試行", "SEND": "送信", "Search": "検索", "Select More Photos": "さらに写真を選択", diff --git a/package/src/i18n/ko.json b/package/src/i18n/ko.json index 61f9a4d0b5..38a4fccb64 100644 --- a/package/src/i18n/ko.json +++ b/package/src/i18n/ko.json @@ -5,7 +5,9 @@ "1 Reply": "답장 1개", "1 Thread Reply": "1개의 스레드　답글", "Add a comment": "댓글 추가", + "Add a comment to the poll": "투표에 의견 추가", "Add an option": "옵션 추가", + "Add more": "더 추가", "Allow access to your Gallery": "갤러리에 대한 액세스를 허용", "Allow camera access in device settings": "기기 설정에서 카메라 액세스를 허용하세요.", "Also send to channel": "채널에도 전송", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "메시지를 읽지 않음으로 표시하는 중 오류가 발생했습니다. 최신 100개의 채널 메시지보다 오래된 읽지 않은 메시지는 표시할 수 없습니다.", "Error while loading, please reload/refresh": "로드하는 동안 오류가 발생했습니다. 다시로드하십시오", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "파일이 너무 큽니다: {{ size }}, 최대 업로드 크기는 {{ limit }}입니다", + "File too large": "파일이 너무 큽니다", "File type not supported": "지원하지 않는 파일입니다.", "Flag": "플래그", "Flag Message": "메시지를 플래그하기", "Flag action failed either due to a network issue or the message is already flagged": "네트워크 연결에 문제가 있거나 이미 플래그 되어서 플래그에 실패했습니다.", "Generating...": "생성 중...", "Giphy": "Giphy", + "Hide who voted": "투표한 사람 숨기기", "Hold to start recording.": "녹음을 시작하려면 눌러주세요.", "How about sending your first message to a friend?": "친구에게 첫 번째 메시지를 보내는 것은 어떻습니까?", "Instant Commands": "인스턴트 명령", + "Let others add options": "다른 사람이 옵션을 추가하도록 허용", "Let's start chatting!": "채팅을 시작합시다!", "Links are disabled": "링크 기능이 비활성화되었습니다", "Live Location": "실시간 위치", @@ -65,11 +70,13 @@ "Message deleted": "메시지가 삭제되었습니다.", "Message flagged": "메시지에 플래그가 지정되었습니다", "Multiple votes": "복수 투표", + "Network error": "네트워크 오류", "Select more than one option": "두 개 이상의 옵션을 선택하세요", "Limit votes per person": "1인당 투표 수 제한", "Choose between 2–10 options": "2~10개의 옵션 중에서 선택하세요", "Mute User": "사용자를 음소거", "No chats here yet…": "아직 여기에 채팅이 없어요…", + "No items exist": "항목이 없습니다", "No threads here yet": "아직 스레드가 없습니다", "Not supported": "지원하지 않습니다", "Nothing yet...": "아직 아무것도...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "{{name}}님에게 답장", "Reply to Message": "메시지에 답장", "Resend": "재전송", + "Retry Upload": "업로드 재시도", "SEND": "보내기", "Search": "검색", "Select More Photos": "추가 사진 선택", diff --git a/package/src/i18n/nl.json b/package/src/i18n/nl.json index 06aa168b49..10811006cb 100644 --- a/package/src/i18n/nl.json +++ b/package/src/i18n/nl.json @@ -5,7 +5,9 @@ "1 Reply": "1 Antwoord", "1 Thread Reply": "1 thread antwoord", "Add a comment": "Voeg een reactie toe", + "Add a comment to the poll": "Voeg een reactie toe aan de poll", "Add an option": "Voeg een optie toe", + "Add more": "Meer toevoegen", "Allow access to your Gallery": "Geef toegang tot uw galerij", "Allow camera access in device settings": "Sta cameratoegang toe in de apparaatinstellingen", "Also send to channel": "Stuur ook naar kanaal", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "Fout bij markeren als ongelezen. Kan ongelezen berichten ouder dan de nieuwste 100 kanaalberichten niet markeren.", "Error while loading, please reload/refresh": "Probleem bij het laden, probeer opnieuw", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "Bestand is te groot: {{ size }}, maximale uploadgrootte is {{ limit }}", + "File too large": "Bestand te groot", "File type not supported": "Bestandstype niet ondersteund", "Flag": "Markeer", "Flag Message": "Markeer bericht", "Flag action failed either due to a network issue or the message is already flagged": "Rapporteren mislukt door een netwerk fout of het berich is al gerapporteerd", "Generating...": "Aan het genereren...", "Giphy": "Giphy", + "Hide who voted": "Verberg wie heeft gestemd", "Hold to start recording.": "Houd vast om opname te starten.", "How about sending your first message to a friend?": "Wat dacht je ervan om je eerste bericht naar een vriend te sturen?", "Instant Commands": "Directe Opdrachten", + "Let others add options": "Laat anderen opties toevoegen", "Let's start chatting!": "Laten we beginnen met chatten!", "Links are disabled": "Het versturen van links staat uit", "Live Location": "Live locatie", @@ -65,11 +70,13 @@ "Message deleted": "Bericht verwijderd", "Message flagged": "Bericht gemarkeerd", "Multiple votes": "Meerdere stemmen", + "Network error": "Netwerkfout", "Select more than one option": "Selecteer meer dan één optie", "Limit votes per person": "Beperk stemmen per persoon", "Choose between 2–10 options": "Kies tussen 2 en 10 opties", "Mute User": "Gebruiker dempen", "No chats here yet…": "Nog geen chats hier…", + "No items exist": "Er zijn geen items", "No threads here yet": "Hier zijn nog geen threads", "Not supported": "niet ondersteund", "Nothing yet...": "Nog niets...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "Antwoord aan {{name}}", "Reply to Message": "Beantwoord bericht", "Resend": "Opnieuw versturen", + "Retry Upload": "Uploaden opnieuw proberen", "SEND": "VERZENDEN", "Search": "Zoeken", "Select More Photos": "Selecteer Meer foto's", diff --git a/package/src/i18n/pt-br.json b/package/src/i18n/pt-br.json index 31416d809f..327684079c 100644 --- a/package/src/i18n/pt-br.json +++ b/package/src/i18n/pt-br.json @@ -5,7 +5,9 @@ "1 Reply": "1 Resposta", "1 Thread Reply": "1 Resposta de Thread", "Add a comment": "Adicionar um comentário", + "Add a comment to the poll": "Adicionar um comentário à enquete", "Add an option": "Adicionar uma opção", + "Add more": "Adicionar mais", "Allow access to your Gallery": "Permitir acesso à sua Galeria", "Allow camera access in device settings": "Permitir acesso à câmera nas configurações do dispositivo", "Also send to channel": "Também enviar para o canal", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "Erro ao marcar mensagem como não lida. Não é possível marcar mensagens não lidas mais antigas que as 100 mensagens mais recentes do canal.", "Error while loading, please reload/refresh": "Erro ao carregar, por favor recarregue/atualize", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "O arquivo é muito grande: {{ size }}, o tamanho máximo de upload é {{ limit }}", + "File too large": "Arquivo muito grande", "File type not supported": "Tipo de arquivo não suportado", "Flag": "Reportar", "Flag Message": "Reportar Mensagem", "Flag action failed either due to a network issue or the message is already flagged": "A ação para reportar a mensagem falhou devido a um problema de rede ou a mensagem já foi reportada.", "Generating...": "Gerando...", "Giphy": "Giphy", + "Hide who voted": "Ocultar quem votou", "Hold to start recording.": "Mantenha pressionado para começar a gravar.", "How about sending your first message to a friend?": "Que tal enviar sua primeira mensagem para um amigo?", "Instant Commands": "Comandos Instantâneos", + "Let others add options": "Permitir que outros adicionem opções", "Let's start chatting!": "Vamos começar a conversar!", "Links are disabled": "Links estão desabilitados", "Live Location": "Localização ao vivo", @@ -65,11 +70,13 @@ "Message deleted": "Mensagem excluída", "Message flagged": "Mensagem sinalizada", "Multiple votes": "Votos múltiplos", + "Network error": "Erro de rede", "Select more than one option": "Selecione mais de uma opção", "Limit votes per person": "Limite os votos por pessoa", "Choose between 2–10 options": "Escolha entre 2 e 10 opções", "Mute User": "Silenciar Usuário", "No chats here yet…": "Ainda não há chats aqui...", + "No items exist": "Nenhum item", "No threads here yet": "Ainda não há tópicos aqui", "Not supported": "Não suportado", "Nothing yet...": "Nada ainda...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "Responder a {{name}}", "Reply to Message": "Responder à Mensagem", "Resend": "Reenviar", + "Retry Upload": "Tentar upload novamente", "SEND": "ENVIAR", "Search": "Pesquisar", "Select More Photos": "Selecionar Mais Fotos", diff --git a/package/src/i18n/ru.json b/package/src/i18n/ru.json index 096faa6fb3..aa73598ab9 100644 --- a/package/src/i18n/ru.json +++ b/package/src/i18n/ru.json @@ -5,7 +5,9 @@ "1 Reply": "1 Ответ", "1 Thread Reply": "1 тема Ответить", "Add a comment": "Добавить комментарий", + "Add a comment to the poll": "Добавить комментарий к опросу", "Add an option": "Добавить вариант", + "Add more": "Добавить ещё", "Allow access to your Gallery": "Разрешить доступ к вашей галерее", "Allow camera access in device settings": "Разрешите доступ к камере в настройках устройства.", "Also send to channel": "Также отправить на канал", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "Ошибка при отметке сообщения как непрочитанного. Невозможно отметить непрочитанные сообщения старше новейших 100 сообщений канала.", "Error while loading, please reload/refresh": "Ошибка загрузки, пожалуйста перезагрузите или обновите", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "Файл слишком большой: {{ size }}, максимальный размер загрузки составляет {{ limit }}", + "File too large": "Файл слишком большой", "File type not supported": "Тип файла не поддерживается", "Flag": "Пометить", "Flag Message": "Пометить сообщение", "Flag action failed either due to a network issue or the message is already flagged": "Не удалось отправить жалобу. Возможные причины: проблема с подключением к интернету или ваша жалоба уже была принята.", "Generating...": "Генерирую...", "Giphy": "Giphy", + "Hide who voted": "Скрыть, кто проголосовал", "Hold to start recording.": "Удерживайте, чтобы начать запись.", "How about sending your first message to a friend?": "Как насчет отправки первого сообщения другу?", "Instant Commands": "Мгновенные Команды", + "Let others add options": "Разрешить другим добавлять варианты", "Let's start chatting!": "Давайте начнем общаться!", "Links are disabled": "Ссылки отключены", "Live Location": "Трансляция местоположения", @@ -65,11 +70,13 @@ "Message deleted": "Сообщение удалено", "Message flagged": "Сообщение отмечено", "Multiple votes": "Несколько голосов", + "Network error": "Ошибка сети", "Select more than one option": "Выберите больше одного варианта", "Limit votes per person": "Ограничить количество голосов на человека", "Choose between 2–10 options": "Выберите от 2 до 10 вариантов", "Mute User": "Отключить пользователя", "No chats here yet…": "Здесь пока нет чатов…", + "No items exist": "Нет элементов", "No threads here yet": "Здесь пока нет потоков", "Not supported": "не поддерживается", "Nothing yet...": "Пока ничего нет...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "Ответить пользователю {{name}}", "Reply to Message": "Ответить на сообщение", "Resend": "Отправить", + "Retry Upload": "Повторить загрузку", "SEND": "ОТПРАВИТЬ", "Search": "Поиск", "Select More Photos": "Выбрать больше фотографий", diff --git a/package/src/i18n/tr.json b/package/src/i18n/tr.json index 14f2cc0285..25e4cd570d 100644 --- a/package/src/i18n/tr.json +++ b/package/src/i18n/tr.json @@ -5,7 +5,9 @@ "1 Reply": "1 Cevap", "1 Thread Reply": "1 Konu Yanıtı", "Add a comment": "Yorum ekle", + "Add a comment to the poll": "Ankete yorum ekle", "Add an option": "Seçenek ekle", + "Add more": "Daha fazla ekle", "Allow access to your Gallery": "Galerinize erişime izin verin", "Allow camera access in device settings": "Cihaz ayarlarında kamera erişimine izin ver", "Also send to channel": "Kanala da gönder", @@ -42,15 +44,18 @@ "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.": "Okunmamış olarak işaretlenen mesajda hata oluştu. En yeni 100 kanal mesajından daha eski okunmamış mesajları işaretleyemezsiniz.", "Error while loading, please reload/refresh": "Yüklenirken hata oluştu, lütfen tekrar deneyiniz", "File is too large: {{ size }}, maximum upload size is {{ limit }}": "Dosya çok büyük: {{ size }}, maksimum yükleme boyutu {{ limit }}", + "File too large": "Dosya çok büyük", "File type not supported": "Dosya türü desteklenmiyor", "Flag": "Raporla", "Flag Message": "Mesajı Raporla", "Flag action failed either due to a network issue or the message is already flagged": "Mesajın daha önce raporlanmış olması veya bir ağ bağlantısı sorunu nedeniyle raporlama işlemi başarısız oldu.", "Generating...": "Oluşturuluyor...", "Giphy": "Giphy", + "Hide who voted": "Kimin oy verdiğini gizle", "Hold to start recording.": "Kayıt yapmak için basılı tutun.", "How about sending your first message to a friend?": "İlk mesajınızı bir arkadaşınıza göndermeye ne dersiniz?", "Instant Commands": "Anlık Komutlar", + "Let others add options": "Başkalarının seçenek eklemesine izin ver", "Let's start chatting!": "Haydi sohbete başlayalım!", "Links are disabled": "Bağlantılar devre dışı", "Live Location": "Canlı Konum", @@ -65,11 +70,13 @@ "Message deleted": "Mesaj silindi", "Message flagged": "Mesaj işaretlendi", "Multiple votes": "Çoklu oy", + "Network error": "Ağ hatası", "Select more than one option": "Birden fazla seçenek seçin", "Limit votes per person": "Kişi başına oy sayısını sınırla", "Choose between 2–10 options": "2 ile 10 arasında seçenek seçin", "Mute User": "Kullanıcıyı sessize al", "No chats here yet…": "Henüz burada sohbet yok…", + "No items exist": "Hiçbir öğe yok", "No threads here yet": "Burada henüz akış yok", "Not supported": "Desteklenmiyor", "Nothing yet...": "Henüz değil...", @@ -96,6 +103,7 @@ "Reply to {{name}}": "{{name}} için yanıtla", "Reply to Message": "Mesajı Yanıtla", "Resend": "Yeniden gönder", + "Retry Upload": "Yüklemeyi yeniden dene", "SEND": "GÖNDER", "Search": "Ara", "Select More Photos": "Daha Fazla Fotoğraf Seçin", From fcbdae0f50d247b946f83e36bc3e1f8a6574c0f6 Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Fri, 24 Apr 2026 14:27:42 +0200 Subject: [PATCH 4/5] feat: track attachment uploads outside of message composer (#3527) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 🎯 Goal Depends on: https://github.com/GetStream/stream-chat-js/pull/1715 ## 🛠 Implementation details ## 🎨 UI Changes
iOS
Before After
Android
Before After
## 🧪 Testing ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android --------- Co-authored-by: Ivan Sekovanikj --- .../src/components/Attachment/Attachment.tsx | 55 ++++++++- .../AttachmentFileUploadProgressIndicator.tsx | 80 +++++++++++++ .../Attachment/AttachmentUploadIndicator.tsx | 61 ++++++++++ .../Attachment/CircularProgressIndicator.tsx | 113 ++++++++++++++++++ .../components/Attachment/FileAttachment.tsx | 31 ++++- package/src/components/Attachment/Gallery.tsx | 15 +++ .../components/Attachment/VideoThumbnail.tsx | 26 +++- .../Attachment/__tests__/Attachment.test.tsx | 19 +-- .../Attachment/__tests__/Giphy.test.tsx | 14 +-- .../utils/buildGallery/buildThumbnail.ts | 3 + .../Attachment/utils/buildGallery/types.ts | 2 + package/src/components/Channel/Channel.tsx | 112 ++++++++--------- package/src/components/index.ts | 2 + package/src/hooks/index.ts | 1 + .../src/hooks/usePendingAttachmentUpload.ts | 49 ++++++++ package/src/middlewares/attachments.ts | 2 + package/src/types/types.ts | 2 + 17 files changed, 497 insertions(+), 90 deletions(-) create mode 100644 package/src/components/Attachment/AttachmentFileUploadProgressIndicator.tsx create mode 100644 package/src/components/Attachment/AttachmentUploadIndicator.tsx create mode 100644 package/src/components/Attachment/CircularProgressIndicator.tsx create mode 100644 package/src/hooks/usePendingAttachmentUpload.ts diff --git a/package/src/components/Attachment/Attachment.tsx b/package/src/components/Attachment/Attachment.tsx index 02dd621db0..75c8c8e745 100644 --- a/package/src/components/Attachment/Attachment.tsx +++ b/package/src/components/Attachment/Attachment.tsx @@ -9,8 +9,12 @@ import { isVideoAttachment, isVoiceRecordingAttachment, type Attachment as AttachmentType, + type LocalMessage, } from 'stream-chat'; +import type { AudioAttachmentProps } from './Audio/AudioAttachment'; +import { AttachmentFileUploadProgressIndicator } from '../../components/Attachment/AttachmentFileUploadProgressIndicator'; + import { useTheme } from '../../contexts'; import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext'; import { @@ -21,9 +25,11 @@ import { MessagesContextValue, useMessagesContext, } from '../../contexts/messagesContext/MessagesContext'; +import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload'; import { isSoundPackageAvailable, isVideoPlayerAvailable } from '../../native'; import { primitives } from '../../theme'; +import type { DefaultAttachmentData } from '../../types/types'; import { FileTypes } from '../../types/types'; export type ActionHandler = (name: string, value: string) => void; @@ -83,12 +89,12 @@ const AttachmentWithContext = (props: AttachmentPropsWithContext) => { if (isAudioAttachment(attachment) || isVoiceRecordingAttachment(attachment)) { if (isSoundPackageAvailable()) { return ( - ); } @@ -166,6 +172,45 @@ export const Attachment = (props: AttachmentProps) => { ); }; +type MessageAudioAttachmentProps = { + AudioAttachment: React.ComponentType; + attachment: AttachmentType; + audioAttachmentStyles: AudioAttachmentProps['styles']; + index?: number; + message: LocalMessage | undefined; +}; + +const MessageAudioAttachment = ({ + AudioAttachment: AudioAttachmentComponent, + attachment, + audioAttachmentStyles, + index, + message, +}: MessageAudioAttachmentProps) => { + const localId = (attachment as DefaultAttachmentData).localId; + const { isUploading, uploadProgress } = usePendingAttachmentUpload(localId); + + const indicator = isUploading ? ( + + ) : undefined; + + const audioItemType = isVoiceRecordingAttachment(attachment) ? 'voiceRecording' : 'audio'; + + return ( + + ); +}; + const useAudioAttachmentStyles = () => { const { theme: { semantics }, diff --git a/package/src/components/Attachment/AttachmentFileUploadProgressIndicator.tsx b/package/src/components/Attachment/AttachmentFileUploadProgressIndicator.tsx new file mode 100644 index 0000000000..6dae9297cc --- /dev/null +++ b/package/src/components/Attachment/AttachmentFileUploadProgressIndicator.tsx @@ -0,0 +1,80 @@ +import React, { useMemo } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; + +import { AttachmentUploadIndicator } from './AttachmentUploadIndicator'; + +import { useTheme } from '../../contexts/themeContext/ThemeContext'; +import { primitives } from '../../theme'; + +export type AttachmentFileUploadProgressIndicatorProps = { + totalBytes?: number | string | null; + uploadProgress: number | undefined; +}; + +const parseTotalBytes = (value: number | string | null | undefined): number | null => { + if (value == null) { + return null; + } + if (typeof value === 'number' && Number.isFinite(value)) { + return value; + } + if (typeof value === 'string') { + const n = parseFloat(value); + return Number.isFinite(n) ? n : null; + } + return null; +}; + +const formatMegabytesOneDecimal = (bytes: number) => { + if (!Number.isFinite(bytes) || bytes <= 0) { + return '0.0 MB'; + } + return `${(bytes / (1000 * 1000)).toFixed(1)} MB`; +}; + +/** + * Circular progress plus `uploaded / total` for file and audio attachments during upload. + */ +export const AttachmentFileUploadProgressIndicator = ({ + totalBytes, + uploadProgress, +}: AttachmentFileUploadProgressIndicatorProps) => { + const { + theme: { semantics }, + } = useTheme(); + + const progressLabel = useMemo(() => { + const bytes = parseTotalBytes(totalBytes); + if (bytes == null || bytes <= 0) { + return null; + } + const uploaded = ((uploadProgress ?? 0) / 100) * bytes; + return `${formatMegabytesOneDecimal(uploaded)} / ${formatMegabytesOneDecimal(bytes)}`; + }, [totalBytes, uploadProgress]); + + return ( + + + {progressLabel ? ( + + {progressLabel} + + ) : null} + + ); +}; + +const styles = StyleSheet.create({ + label: { + flex: 1, + flexShrink: 1, + fontSize: primitives.typographyFontSizeXs, + fontWeight: primitives.typographyFontWeightRegular, + lineHeight: primitives.typographyLineHeightTight, + }, + row: { + alignItems: 'center', + flexDirection: 'row', + gap: primitives.spacingXxs, + }, +}); diff --git a/package/src/components/Attachment/AttachmentUploadIndicator.tsx b/package/src/components/Attachment/AttachmentUploadIndicator.tsx new file mode 100644 index 0000000000..4f2041c375 --- /dev/null +++ b/package/src/components/Attachment/AttachmentUploadIndicator.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { ActivityIndicator, StyleSheet, View } from 'react-native'; +import type { StyleProp, ViewStyle } from 'react-native'; + +import { CircularProgressIndicator } from './CircularProgressIndicator'; + +import { useTheme } from '../../contexts/themeContext/ThemeContext'; + +export type AttachmentUploadIndicatorProps = { + size?: number; + strokeWidth?: number; + style?: StyleProp; + testID?: string; + /** When set, shows determinate `CircularProgressIndicator`; otherwise a generic spinner. */ + uploadProgress: number | undefined; +}; + +/** + * Upload state for attachment previews: determinate ring when progress is known, otherwise `ActivityIndicator`. + */ +export const AttachmentUploadIndicator = ({ + size = 16, + strokeWidth = 2, + style, + testID, + uploadProgress, +}: AttachmentUploadIndicatorProps) => { + const { + theme: { semantics }, + } = useTheme(); + + if (uploadProgress === undefined) { + return ( + + + + ); + } + + return ( + + ); +}; + +const styles = StyleSheet.create({ + indeterminateWrap: { + alignItems: 'center', + justifyContent: 'center', + }, +}); diff --git a/package/src/components/Attachment/CircularProgressIndicator.tsx b/package/src/components/Attachment/CircularProgressIndicator.tsx new file mode 100644 index 0000000000..18d9f4b6a3 --- /dev/null +++ b/package/src/components/Attachment/CircularProgressIndicator.tsx @@ -0,0 +1,113 @@ +import React, { useEffect, useMemo, useRef } from 'react'; +import type { ColorValue } from 'react-native'; +import { Animated, Easing, StyleProp, ViewStyle } from 'react-native'; +import Svg, { Circle } from 'react-native-svg'; + +export type CircularProgressIndicatorProps = { + /** Upload percent **0–100**. */ + progress: number; + color: ColorValue; + size?: number; + strokeWidth?: number; + style?: StyleProp; + testID?: string; +}; + +/** + * Circular upload progress ring (determinate) or rotating arc (indeterminate). + */ +export const CircularProgressIndicator = ({ + color, + progress, + size = 16, + strokeWidth = 2, + style, + testID, +}: CircularProgressIndicatorProps) => { + const spin = useRef(new Animated.Value(0)).current; + + useEffect(() => { + const loop = Animated.loop( + Animated.timing(spin, { + toValue: 1, + duration: 900, + easing: Easing.linear, + useNativeDriver: true, + }), + ); + loop.start(); + return () => { + loop.stop(); + spin.setValue(0); + }; + }, [progress, spin]); + + const rotate = useMemo( + () => + spin.interpolate({ + inputRange: [0, 1], + outputRange: ['0deg', '360deg'], + }), + [spin], + ); + + const { cx, cy, r, circumference } = useMemo(() => { + const pad = strokeWidth / 2; + const rInner = size / 2 - pad; + return { + cx: size / 2, + cy: size / 2, + r: rInner, + circumference: 2 * Math.PI * rInner, + }; + }, [size, strokeWidth]); + + const fraction = + progress === undefined || Number.isNaN(progress) + ? undefined + : Math.min(100, Math.max(0, progress)) / 100; + + if (fraction !== undefined) { + const offset = circumference * (1 - fraction); + return ( + + + + ); + } + + const arc = circumference * 0.22; + const gap = circumference - arc; + + return ( + + + + + + ); +}; diff --git a/package/src/components/Attachment/FileAttachment.tsx b/package/src/components/Attachment/FileAttachment.tsx index e7b3def311..bc4c230801 100644 --- a/package/src/components/Attachment/FileAttachment.tsx +++ b/package/src/components/Attachment/FileAttachment.tsx @@ -1,8 +1,9 @@ import React, { useMemo } from 'react'; -import { Pressable, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'; +import { Pressable, StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native'; import type { Attachment } from 'stream-chat'; +import { AttachmentFileUploadProgressIndicator } from './AttachmentFileUploadProgressIndicator'; import { openUrlSafely } from './utils/openUrlSafely'; import { FileIconProps } from '../../components/Attachment/FileIcon'; @@ -17,6 +18,8 @@ import { useMessagesContext, } from '../../contexts/messagesContext/MessagesContext'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; +import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload'; +import type { DefaultAttachmentData } from '../../types/types'; export type FileAttachmentPropsWithContext = Pick< MessageContextValue, @@ -50,6 +53,9 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => { } = props; const { FilePreview } = useComponentsContext(); + const localId = (attachment as DefaultAttachmentData).localId; + const { isUploading, uploadProgress } = usePendingAttachmentUpload(localId); + const defaultOnPress = () => openUrlSafely(attachment.asset_url); return ( @@ -87,11 +93,21 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => { testID='file-attachment' {...additionalPressableProps} > - + + + ) : undefined + } + styles={stylesProp} + /> + ); }; @@ -135,6 +151,9 @@ const useStyles = () => { ? semantics.chatBgAttachmentOutgoing : semantics.chatBgAttachmentIncoming, }, + previewWrap: { + position: 'relative', + }, }); }, [showBackgroundTransparent, isMyMessage, semantics]); }; diff --git a/package/src/components/Attachment/Gallery.tsx b/package/src/components/Attachment/Gallery.tsx index 2157f09dfe..d6b5dd0982 100644 --- a/package/src/components/Attachment/Gallery.tsx +++ b/package/src/components/Attachment/Gallery.tsx @@ -3,6 +3,7 @@ import { ImageErrorEvent, Pressable, StyleSheet, Text, View } from 'react-native import type { Attachment, LocalMessage } from 'stream-chat'; +import { AttachmentUploadIndicator } from './AttachmentUploadIndicator'; import { GalleryImage } from './GalleryImage'; import { buildGallery } from './utils/buildGallery/buildGallery'; @@ -36,6 +37,7 @@ import { import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useLoadingImage } from '../../hooks/useLoadingImage'; +import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload'; import { useStableCallback } from '../../hooks/useStableCallback'; import { isVideoPlayerAvailable } from '../../native'; import { primitives } from '../../theme'; @@ -299,6 +301,7 @@ const GalleryThumbnail = ({ > {thumbnail.type === FileTypes.Video ? ( @@ -344,6 +347,8 @@ const GalleryImageThumbnail = ({ }, } = useTheme(); const styles = useStyles(); + const { isUploading, uploadProgress } = usePendingAttachmentUpload(thumbnail.localId); + const onLoadStart = useStableCallback(() => { setLoadingImageError(false); setLoadingImage(true); @@ -374,6 +379,11 @@ const GalleryImageThumbnail = ({ uri={thumbnail.url} /> {isLoadingImage ? : null} + {isUploading ? ( + + + + ) : null} )} @@ -596,6 +606,11 @@ const useStyles = () => { top: 0, overflow: 'hidden', }, + uploadProgressOnImage: { + bottom: primitives.spacingXxs, + left: primitives.spacingXxs, + position: 'absolute', + }, }); }, [semantics, isMyMessage]); }; diff --git a/package/src/components/Attachment/VideoThumbnail.tsx b/package/src/components/Attachment/VideoThumbnail.tsx index f255c32531..1037b3fdb5 100644 --- a/package/src/components/Attachment/VideoThumbnail.tsx +++ b/package/src/components/Attachment/VideoThumbnail.tsx @@ -1,10 +1,21 @@ import React from 'react'; -import { ImageBackground, ImageStyle, StyleProp, StyleSheet, ViewStyle } from 'react-native'; +import { ImageBackground, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; + +import { AttachmentUploadIndicator } from './AttachmentUploadIndicator'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; +import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload'; +import { primitives } from '../../theme'; import { VideoPlayIndicator } from '../ui/VideoPlayIndicator'; const styles = StyleSheet.create({ + uploadProgressContainer: { + alignItems: 'flex-start', + bottom: primitives.spacingXxs, + justifyContent: 'flex-start', + left: primitives.spacingXxs, + position: 'absolute', + }, container: { alignItems: 'center', justifyContent: 'center', @@ -15,6 +26,10 @@ const styles = StyleSheet.create({ export type VideoThumbnailProps = { imageStyle?: StyleProp; + /** + * When set, upload state is read from `client.uploadManager` for this pending attachment id. + */ + localId?: string; style?: StyleProp; thumb_url?: string; }; @@ -27,7 +42,9 @@ export const VideoThumbnail = (props: VideoThumbnailProps) => { }, }, } = useTheme(); - const { imageStyle, style, thumb_url } = props; + const { imageStyle, localId, style, thumb_url } = props; + const { isUploading, uploadProgress } = usePendingAttachmentUpload(localId); + return ( { style={[styles.container, container, style]} > + {isUploading ? ( + + + + ) : null} ); }; diff --git a/package/src/components/Attachment/__tests__/Attachment.test.tsx b/package/src/components/Attachment/__tests__/Attachment.test.tsx index 2f68ffa95c..9af88ccced 100644 --- a/package/src/components/Attachment/__tests__/Attachment.test.tsx +++ b/package/src/components/Attachment/__tests__/Attachment.test.tsx @@ -26,18 +26,23 @@ jest.mock('../../../native.ts', () => ({ isSoundPackageAvailable: jest.fn(() => false), })); +jest.mock('../../../hooks/usePendingAttachmentUpload', () => ({ + usePendingAttachmentUpload: jest.fn(() => ({ + isUploading: false, + uploadProgress: undefined, + })), +})); + const getAttachmentComponent = (props: ComponentProps) => { const message = generateMessage(); return ( diff --git a/package/src/components/Attachment/__tests__/Giphy.test.tsx b/package/src/components/Attachment/__tests__/Giphy.test.tsx index fc4b14736b..24682b04a5 100644 --- a/package/src/components/Attachment/__tests__/Giphy.test.tsx +++ b/package/src/components/Attachment/__tests__/Giphy.test.tsx @@ -50,16 +50,12 @@ describe('Giphy', () => { return ( - + diff --git a/package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts b/package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts index 323a346b77..c69b682808 100644 --- a/package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts +++ b/package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts @@ -5,6 +5,7 @@ import type { Attachment } from 'stream-chat'; import type { Thumbnail } from './types'; import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext'; +import type { DefaultAttachmentData } from '../../../../types/types'; import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl'; import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment'; @@ -33,9 +34,11 @@ export function buildThumbnail({ ? originalImageHeight + originalImageWidth > height + width : true; const imageUrl = getUrlOfImageAttachment(image) as string; + const localId = (image as Attachment & DefaultAttachmentData).localId; return { flex, + localId, resizeMode: resizeMode ? resizeMode : ((image.original_height && image.original_width ? 'contain' : 'cover') as ImageResizeMode), diff --git a/package/src/components/Attachment/utils/buildGallery/types.ts b/package/src/components/Attachment/utils/buildGallery/types.ts index 1a066779f0..ceefd60b5a 100644 --- a/package/src/components/Attachment/utils/buildGallery/types.ts +++ b/package/src/components/Attachment/utils/buildGallery/types.ts @@ -4,6 +4,8 @@ export type Thumbnail = { resizeMode: ImageResizeMode; url: string; id?: string; + /** Same as attachment `localId` for correlating with `client.uploadManager` */ + localId?: string; thumb_url?: string; type?: string; flex?: number; diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx index d66cdf3d5a..e3b2e592a2 100644 --- a/package/src/components/Channel/Channel.tsx +++ b/package/src/components/Channel/Channel.tsx @@ -4,7 +4,6 @@ import { StyleSheet, Text, View } from 'react-native'; import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; -import { lookup } from 'mime-types'; import { Channel as ChannelClass, ChannelState, @@ -101,7 +100,7 @@ import { } from '../../state-store/channel-unread-state'; import { MessageInputHeightStore } from '../../state-store/message-input-height-store'; import { primitives } from '../../theme'; -import { FileTypes } from '../../types/types'; +import { DefaultAttachmentData, FileTypes } from '../../types/types'; import { addReactionToLocalState } from '../../utils/addReactionToLocalState'; import { compressedImageURI } from '../../utils/compressImage'; import { patchMessageTextCommand } from '../../utils/patchMessageTextCommand'; @@ -1053,73 +1052,64 @@ const ChannelWithContext = (props: PropsWithChildren) = const uploadPendingAttachments = useStableCallback(async (message: LocalMessage) => { const updatedMessage = { ...message }; - if (updatedMessage.attachments?.length) { - for (let i = 0; i < updatedMessage.attachments?.length; i++) { - const attachment = updatedMessage.attachments[i]; - - // If the attachment is already uploaded, skip it. - if ( - (attachment.image_url && !isLocalUrl(attachment.image_url)) || - (attachment.asset_url && !isLocalUrl(attachment.asset_url)) - ) { - continue; - } + if (!updatedMessage.attachments?.length || !channel?.cid) { + return updatedMessage; + } - const image = attachment.originalFile; - const file = attachment.originalFile; - if (attachment.type === FileTypes.Image && image?.uri) { - const filename = image.name ?? getFileNameFromPath(image.uri); - // if any upload is in progress, cancel it - const controller = uploadAbortControllerRef.current.get(filename); - if (controller) { - controller.abort(); - uploadAbortControllerRef.current.delete(filename); - } - const compressedUri = await compressedImageURI(image, compressImageQuality); - const contentType = lookup(filename) || 'multipart/form-data'; + const uploadOne = async (attachment: NonNullable[number]) => { + if ( + (attachment.image_url && !isLocalUrl(attachment.image_url)) || + (attachment.asset_url && !isLocalUrl(attachment.asset_url)) + ) { + return; + } - const uploadResponse = doFileUploadRequest - ? await doFileUploadRequest(image) - : await channel.sendImage(compressedUri, filename, contentType); + const originalFile = attachment.originalFile; + if (!originalFile?.uri) { + return; + } - attachment.image_url = uploadResponse.file; - delete attachment.originalFile; + const localId = (attachment as DefaultAttachmentData).localId; + if (!localId) { + console.warn('uploadPendingAttachments: local attachment missing localId, skipping upload'); + return; + } - client.offlineDb?.executeQuerySafely( - (db) => - db.updateMessage({ - message: { ...updatedMessage, cid: channel.cid }, - }), - { method: 'updateMessage' }, - ); - } + let fileForUpload = originalFile; + if (attachment.type === FileTypes.Image && !doFileUploadRequest) { + const filename = originalFile.name ?? getFileNameFromPath(originalFile.uri); + const compressedUri = await compressedImageURI(originalFile, compressImageQuality); + fileForUpload = { ...originalFile, name: filename, uri: compressedUri }; + } - if (attachment.type !== FileTypes.Image && file?.uri) { - // if any upload is in progress, cancel it - const controller = uploadAbortControllerRef.current.get(file.name); - if (controller) { - controller.abort(); - uploadAbortControllerRef.current.delete(file.name); - } - const response = doFileUploadRequest - ? await doFileUploadRequest(file) - : await channel.sendFile(file.uri, file.name, file.type); - attachment.asset_url = response.file; - if (response.thumb_url) { - attachment.thumb_url = response.thumb_url; - } + const response = await client.uploadManager.upload({ + channelCid: channel.cid, + file: fileForUpload, + id: localId, + }); - delete attachment.originalFile; - client.offlineDb?.executeQuerySafely( - (db) => - db.updateMessage({ - message: { ...updatedMessage, cid: channel.cid }, - }), - { method: 'updateMessage' }, - ); + if (attachment.type === FileTypes.Image) { + attachment.image_url = response.file; + } else { + attachment.asset_url = response.file; + if (response.thumb_url) { + attachment.thumb_url = response.thumb_url; } } - } + + delete attachment.originalFile; + delete (attachment as DefaultAttachmentData).localId; + + client.offlineDb?.executeQuerySafely( + (db) => + db.updateMessage({ + message: { ...updatedMessage, cid: channel.cid }, + }), + { method: 'updateMessage' }, + ); + }; + + await Promise.all(updatedMessage.attachments.map((att) => uploadOne(att))); return updatedMessage; }); diff --git a/package/src/components/index.ts b/package/src/components/index.ts index cb64ee005a..a898402140 100644 --- a/package/src/components/index.ts +++ b/package/src/components/index.ts @@ -6,6 +6,8 @@ export * from './Attachment/FileAttachmentGroup'; export * from './Attachment/FileIcon'; export * from './Attachment/Gallery'; export * from './Attachment/Giphy'; +export * from './Attachment/CircularProgressIndicator'; +export * from './Attachment/AttachmentUploadIndicator'; export * from './Attachment/VideoThumbnail'; export * from './Attachment/UrlPreview'; export * from './Attachment/utils/buildGallery/buildGallery'; diff --git a/package/src/hooks/index.ts b/package/src/hooks/index.ts index 8e368a9532..cb5e0f9516 100644 --- a/package/src/hooks/index.ts +++ b/package/src/hooks/index.ts @@ -3,6 +3,7 @@ export * from './useStreami18n'; export * from './useViewport'; export * from './useScreenDimensions'; export * from './useStateStore'; +export * from './usePendingAttachmentUpload'; export * from './useStableCallback'; export * from './useLoadingImage'; export * from './useMessageReminder'; diff --git a/package/src/hooks/usePendingAttachmentUpload.ts b/package/src/hooks/usePendingAttachmentUpload.ts new file mode 100644 index 0000000000..efcd145885 --- /dev/null +++ b/package/src/hooks/usePendingAttachmentUpload.ts @@ -0,0 +1,49 @@ +import { useCallback } from 'react'; + +import type { UploadManagerState } from 'stream-chat'; + +import { useStateStore } from './useStateStore'; + +import { useChatContext } from '../contexts/chatContext/ChatContext'; + +export type PendingAttachmentUpload = { + /** True when `client.uploadManager` has an in-flight upload for this attachment local id. */ + isUploading: boolean; + /** + * Upload percent **0–100** from `client.uploadManager` (same scale as `attachmentManager` + * `onProgress` / `localMetadata.uploadProgress`). `undefined` when not computable or not uploading. + */ + uploadProgress: number | undefined; +}; + +const idle: PendingAttachmentUpload = { + isUploading: false, + uploadProgress: undefined, +}; + +/** + * Subscribes to `client.uploadManager` for the pending attachment identified by `localId`. + */ +export function usePendingAttachmentUpload(localId: string | undefined): PendingAttachmentUpload { + const { client } = useChatContext(); + const selector = useCallback( + (state: UploadManagerState): PendingAttachmentUpload => { + if (!localId) { + return idle; + } + const record = state.uploads[localId]; + if (!record) { + return idle; + } + return { + isUploading: true, + uploadProgress: record.uploadProgress, + }; + }, + [localId], + ); + + const result = useStateStore(localId ? client.uploadManager.state : undefined, selector); + + return result ?? idle; +} diff --git a/package/src/middlewares/attachments.ts b/package/src/middlewares/attachments.ts index 8996af684e..aa40204dac 100644 --- a/package/src/middlewares/attachments.ts +++ b/package/src/middlewares/attachments.ts @@ -26,6 +26,7 @@ export const localAttachmentToAttachment = (localAttachment: LocalAttachment) => return { ...attachment, image_url: localMetadata?.previewUri, + localId: localMetadata?.id, originalFile: localMetadata.file, } as Attachment; } else { @@ -35,6 +36,7 @@ export const localAttachmentToAttachment = (localAttachment: LocalAttachment) => return { ...attachment, asset_url: (localMetadata.file as FileReference).uri, + localId: localMetadata?.id, originalFile: localMetadata.file, } as Attachment; } diff --git a/package/src/types/types.ts b/package/src/types/types.ts index f6f36837a9..c372b9fe8b 100644 --- a/package/src/types/types.ts +++ b/package/src/types/types.ts @@ -43,6 +43,8 @@ export type UploadAttachmentPreviewProps = { export interface DefaultAttachmentData { originalFile?: File; + /** Matches `LocalAttachment.localMetadata.id` / `uploadManager` record id for pending uploads */ + localId?: string; } export interface DefaultUserData { From 9a54ed098b9af7bfc1720e5b44bd8205d941c075 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj <31964049+isekovanic@users.noreply.github.com> Date: Fri, 24 Apr 2026 14:51:18 +0200 Subject: [PATCH 5/5] feat: native multipart upload (#3566) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 🎯 Goal This PR adds optional native multipart upload support for React Native and Expo packages, with native iOS/Android uploaders, a JS axios adapter, upload progress propagation and new attachment progress UI. Additionally, it also moves pending attachment uploads onto `client.uploadManager`, adds local attachment id tracking, improves video/document attachment handling, and updates SampleApp to exercise the new native upload path. The reason why we decided to add an opt-in native upload is related to the fact that `axios` does not always report upload progress correctly on React Native, especially Android. It will sometimes either not update the progress at all or report it badly, causing UI glitches. Additionally, native uploads are much, much faster as we take advantage of streaming directly without any intermediate ephemeral files in order to do that. Finally, `axios` can easily break if an override to the underlying RN's `fetch` implementation has been made, especially on `Android`. ## What Changed - Added a shared native multipart upload module for iOS and Android, including request parsing, file/text multipart parts, progress events, cancellation, timeouts, response handling, and bounded response body reads. - Added native package and Expo package bindings for `StreamMultipartUploader`, plus native handler registration through `stream-chat-react-native` and `stream-chat-expo` - Added core JS helpers and public types for native multipart upload requests, responses, progress events, abort handling, and uploader creation - Added `installNativeMultipartAdapter` / `wrapAxiosAdapterWithNativeMultipart` to route multipart `FormData` axios requests through the native uploader when available, while leaving non-multipart requests on the existing adapter - Added `Chat` support for enabling native multipart uploads via `useNativeMultipartUpload`; SampleApp enables this path - Reworked pending message attachment uploads to use `client.uploadManager.upload` by local attachment id instead of directly calling `channel.sendImage` / `channel.sendFile` - Added `localId` propagation from local attachments into message attachments so pending uploads can be correlated with `client.uploadManager` - Updated message sendability and upload indicator behavior to depend on `allowSendBeforeAttachmentsUpload` rather than offline support - Added upload progress UI for image, video, file, and audio attachments, including circular determinate progress, media overlays, file/audio byte progress labels, and a short completion hold to avoid UI flicker - Added new overrideable/default components for attachment upload progress: `AttachmentUploadIndicator`, `CircularProgressIndicator`, and `MediaUploadProgressOverlay` - Updated gallery/video thumbnail rendering so pending media attachments can show upload progress overlays - Updated document picking in both native and Expo packages to generate thumbnails for picked video files (this was missing from V9 initially) - Updated iOS video thumbnail URL handling to strip query and fragment data from local file URLs - Refined native iOS shimmer behavior to reduce animation restarts, handle foreground/background transitions, visibility, alpha, trait changes, and resolved color updates more reliably (this should improve shimmer performance for iOS significantly) - Updated `Android` shared native source syncing to resolve shared native sources from the canonical project path - Replaced SampleApp’s `react-native-fast-image` dependency with `@d11/react-native-fast-image` ## 🛠 Implementation details ## 🎨 UI Changes
iOS
Before After
Android
Before After
## 🧪 Testing ## ☑️ Checklist - [ ] I have signed the [Stream CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) (required) - [ ] PR targets the `develop` branch - [ ] Documentation is updated - [ ] New code is tested in main example apps, including all possible scenarios - [ ] SampleApp iOS and Android - [ ] Expo iOS and Android --------- Co-authored-by: Zita Szupera --- examples/SampleApp/App.tsx | 1 + examples/SampleApp/ios/Podfile | 41 ++ examples/SampleApp/ios/Podfile.lock | 92 +++- examples/SampleApp/package.json | 2 +- .../SampleAppComponentOverrides.tsx | 2 +- examples/SampleApp/yarn.lock | 10 +- package/expo-package/android/build.gradle | 9 +- .../streamchatexpo/StreamChatExpoPackage.java | 21 +- .../StreamMultipartUploaderModule.kt | 122 +++++ package/expo-package/package.json | 1 + package/expo-package/src/handlers/index.ts | 1 + .../src/handlers/multipartUpload.ts | 9 + package/expo-package/src/index.js | 3 +- .../native/NativeStreamMultipartUploader.ts | 52 ++ .../src/native/multipartUploader.ts | 5 + .../__tests__/pickDocument.test.ts | 88 ++++ .../src/optionalDependencies/getPhotos.ts | 13 +- .../src/optionalDependencies/pickDocument.ts | 40 +- package/native-package/android/build.gradle | 9 +- .../StreamChatReactNativePackage.java | 24 +- .../StreamMultipartUploaderModule.kt | 122 +++++ package/native-package/package.json | 1 + package/native-package/src/handlers/index.ts | 1 + .../src/handlers/multipartUpload.ts | 9 + package/native-package/src/index.js | 3 +- .../native/NativeStreamMultipartUploader.ts | 52 ++ .../src/native/multipartUploader.ts | 5 + .../__tests__/pickDocument.test.ts | 86 ++++ .../src/optionalDependencies/pickDocument.ts | 30 +- package/package.json | 2 +- .../StreamMultipartUploadFileRequestBody.kt | 25 + .../upload/StreamMultipartUploadModels.kt | 39 ++ .../upload/StreamMultipartUploadProgress.kt | 80 +++ .../StreamMultipartUploadRequestParser.kt | 110 +++++ .../StreamMultipartUploadSourceResolver.kt | 99 ++++ .../android/upload/StreamMultipartUploader.kt | 138 ++++++ .../ios/StreamMultipartUploadBodyStream.swift | 254 ++++++++++ .../ios/StreamMultipartUploadManager.swift | 462 ++++++++++++++++++ .../ios/StreamMultipartUploadModels.swift | 69 +++ .../ios/StreamMultipartUploadProgress.swift | 48 ++ .../StreamMultipartUploadSourceResolver.swift | 391 +++++++++++++++ .../ios/StreamMultipartUploader.h | 16 + .../ios/StreamMultipartUploader.mm | 109 +++++ .../ios/StreamMultipartUploaderBridge.swift | 145 ++++++ .../shared-native/ios/StreamShimmerView.swift | 257 +++++++--- .../ios/StreamVideoThumbnailGenerator.swift | 15 +- .../__tests__/nativeMultipartUpload.test.ts | 267 ++++++++++ .../src/components/Attachment/Attachment.tsx | 12 +- .../AttachmentFileUploadProgressIndicator.tsx | 42 +- .../Attachment/AttachmentUploadIndicator.tsx | 91 +++- .../Attachment/CircularProgressIndicator.tsx | 120 +++-- .../components/Attachment/FileAttachment.tsx | 13 +- package/src/components/Attachment/Gallery.tsx | 21 +- .../Attachment/MediaUploadProgressOverlay.tsx | 77 +++ .../components/Attachment/VideoThumbnail.tsx | 36 +- .../Attachment/__tests__/Attachment.test.tsx | 72 ++- .../Attachment/__tests__/Giphy.test.tsx | 14 +- package/src/components/Channel/Channel.tsx | 16 +- package/src/components/Chat/Chat.tsx | 20 + .../AttachmentUploadPreviewList.test.tsx | 57 ++- .../AudioAttachmentUploadPreview.test.tsx | 32 +- .../AttachmentUploadProgressIndicator.tsx | 74 ++- .../AudioAttachmentUploadPreview.tsx | 16 +- .../FileAttachmentUploadPreview.tsx | 25 +- .../ImageAttachmentUploadPreview.tsx | 29 +- .../VideoAttachmentUploadPreview.tsx | 8 +- package/src/components/index.ts | 1 + .../componentsContext/defaultComponents.ts | 6 + .../hooks/useCreateMessageInputContext.ts | 4 +- .../useMessageComposerHasSendableData.ts | 6 +- .../src/contexts/themeContext/utils/theme.ts | 10 + .../usePendingAttachmentUpload.test.tsx | 106 ++++ .../src/hooks/usePendingAttachmentUpload.ts | 86 +++- package/src/index.ts | 1 + package/src/native.ts | 28 ++ package/src/nativeMultipartUpload.ts | 384 +++++++++++++++ .../installNativeMultipartAdapter.test.ts | 437 +++++++++++++++++ .../utils/installNativeMultipartAdapter.ts | 302 ++++++++++++ package/src/utils/utils.ts | 6 +- package/yarn.lock | 51 +- 80 files changed, 5201 insertions(+), 382 deletions(-) create mode 100644 package/expo-package/android/src/newarch/com/streamchatexpo/StreamMultipartUploaderModule.kt create mode 100644 package/expo-package/src/handlers/multipartUpload.ts create mode 100644 package/expo-package/src/native/NativeStreamMultipartUploader.ts create mode 100644 package/expo-package/src/native/multipartUploader.ts create mode 100644 package/expo-package/src/optionalDependencies/__tests__/pickDocument.test.ts create mode 100644 package/native-package/android/src/newarch/com/streamchatreactnative/StreamMultipartUploaderModule.kt create mode 100644 package/native-package/src/handlers/multipartUpload.ts create mode 100644 package/native-package/src/native/NativeStreamMultipartUploader.ts create mode 100644 package/native-package/src/native/multipartUploader.ts create mode 100644 package/native-package/src/optionalDependencies/__tests__/pickDocument.test.ts create mode 100644 package/shared-native/android/upload/StreamMultipartUploadFileRequestBody.kt create mode 100644 package/shared-native/android/upload/StreamMultipartUploadModels.kt create mode 100644 package/shared-native/android/upload/StreamMultipartUploadProgress.kt create mode 100644 package/shared-native/android/upload/StreamMultipartUploadRequestParser.kt create mode 100644 package/shared-native/android/upload/StreamMultipartUploadSourceResolver.kt create mode 100644 package/shared-native/android/upload/StreamMultipartUploader.kt create mode 100644 package/shared-native/ios/StreamMultipartUploadBodyStream.swift create mode 100644 package/shared-native/ios/StreamMultipartUploadManager.swift create mode 100644 package/shared-native/ios/StreamMultipartUploadModels.swift create mode 100644 package/shared-native/ios/StreamMultipartUploadProgress.swift create mode 100644 package/shared-native/ios/StreamMultipartUploadSourceResolver.swift create mode 100644 package/shared-native/ios/StreamMultipartUploader.h create mode 100644 package/shared-native/ios/StreamMultipartUploader.mm create mode 100644 package/shared-native/ios/StreamMultipartUploaderBridge.swift create mode 100644 package/src/__tests__/nativeMultipartUpload.test.ts create mode 100644 package/src/components/Attachment/MediaUploadProgressOverlay.tsx create mode 100644 package/src/hooks/__tests__/usePendingAttachmentUpload.test.tsx create mode 100644 package/src/nativeMultipartUpload.ts create mode 100644 package/src/utils/__tests__/installNativeMultipartAdapter.test.ts create mode 100644 package/src/utils/installNativeMultipartAdapter.ts diff --git a/examples/SampleApp/App.tsx b/examples/SampleApp/App.tsx index 046b44170c..907ec41ac7 100644 --- a/examples/SampleApp/App.tsx +++ b/examples/SampleApp/App.tsx @@ -341,6 +341,7 @@ const DrawerNavigatorWrapper: React.FC<{ enableOfflineSupport isMessageAIGenerated={isMessageAIGenerated} i18nInstance={i18nInstance} + useNativeMultipartUpload > diff --git a/examples/SampleApp/ios/Podfile b/examples/SampleApp/ios/Podfile index 6726f8772f..26da171601 100644 --- a/examples/SampleApp/ios/Podfile +++ b/examples/SampleApp/ios/Podfile @@ -5,6 +5,34 @@ require Pod::Executable.execute_command('node', ['-p', {paths: [process.argv[1]]}, )', __dir__]).strip +react_native_path = File.dirname( + Pod::Executable.execute_command('node', ['-p', + 'require.resolve( + "react-native/package.json", + {paths: [process.argv[1]]}, + )', __dir__]).strip, +) + +fmt_podspec_path = File.join(react_native_path, 'third-party-podspecs', 'fmt.podspec') +rct_folly_podspec_path = File.join(react_native_path, 'third-party-podspecs', 'RCT-Folly.podspec') + +fmt_podspec = File.read(fmt_podspec_path) +fmt_podspec = fmt_podspec.gsub('spec.version = "11.0.2"', 'spec.version = "12.1.0"') +fmt_podspec = fmt_podspec.gsub(':tag => "11.0.2"', ':tag => "12.1.0"') +fmt_podspec = fmt_podspec.gsub( + '"GCC_WARN_INHIBIT_ALL_WARNINGS" => "YES" # Disable warnings because we don\'t control this library', + "\"GCC_WARN_INHIBIT_ALL_WARNINGS\" => \"YES\", \"OTHER_CPLUSPLUSFLAGS\" => \"$(inherited) -DFMT_USE_CONSTEVAL=0\" # Disable warnings because we don't control this library", +) +File.write(fmt_podspec_path, fmt_podspec) + +rct_folly_podspec = File.read(rct_folly_podspec_path) +rct_folly_podspec = rct_folly_podspec.gsub('spec.dependency "fmt", "11.0.2"', 'spec.dependency "fmt", "12.1.0"') +rct_folly_podspec = rct_folly_podspec.gsub( + '"GCC_WARN_INHIBIT_ALL_WARNINGS" => "YES" # Disable warnings because we don\'t control this library', + "\"GCC_WARN_INHIBIT_ALL_WARNINGS\" => \"YES\", \"OTHER_CPLUSPLUSFLAGS\" => \"$(inherited) -DFMT_USE_CONSTEVAL=0\" # Disable warnings because we don't control this library", +) +File.write(rct_folly_podspec_path, rct_folly_podspec) + platform :ios, min_ios_version_supported prepare_react_native_project! @@ -55,5 +83,18 @@ target 'SampleApp' do :mac_catalyst_enabled => false, # :ccache_enabled => true ) + + installer.pods_project.targets.each do |target| + next unless ['fmt', 'RCT-Folly'].include?(target.name) + + target.build_configurations.each do |config| + flags = Array(config.build_settings['OTHER_CPLUSPLUSFLAGS'] || '$(inherited)') + unless flags.include?('-DFMT_USE_CONSTEVAL=0') + flags << '-DFMT_USE_CONSTEVAL=0' + end + config.build_settings['OTHER_CPLUSPLUSFLAGS'] = flags + end + end + end end diff --git a/examples/SampleApp/ios/Podfile.lock b/examples/SampleApp/ios/Podfile.lock index 9deda9f191..0b806c8b1f 100644 --- a/examples/SampleApp/ios/Podfile.lock +++ b/examples/SampleApp/ios/Podfile.lock @@ -73,7 +73,7 @@ PODS: - GoogleUtilities/Reachability (~> 8.1) - GoogleUtilities/UserDefaults (~> 8.1) - nanopb (~> 3.30910.0) - - FirebaseRemoteConfigInterop (11.14.0) + - FirebaseRemoteConfigInterop (11.15.0) - FirebaseSessions (11.13.0): - FirebaseCore (~> 11.13.0) - FirebaseCoreExtension (~> 11.13.0) @@ -83,7 +83,7 @@ PODS: - GoogleUtilities/UserDefaults (~> 8.1) - nanopb (~> 3.30910.0) - PromisesSwift (~> 2.1) - - fmt (11.0.2) + - fmt (12.1.0) - glog (0.3.5) - GoogleAppMeasurement (11.13.0): - GoogleAppMeasurement/AdIdSupport (= 11.13.0) @@ -138,6 +138,11 @@ PODS: - hermes-engine (0.81.6): - hermes-engine/Pre-built (= 0.81.6) - hermes-engine/Pre-built (0.81.6) + - libavif/core (0.11.1) + - libavif/libdav1d (0.11.1): + - libavif/core + - libdav1d (>= 0.6.0) + - libdav1d (1.2.0) - libwebp (1.5.0): - libwebp/demux (= 1.5.0) - libwebp/mux (= 1.5.0) @@ -251,20 +256,20 @@ PODS: - boost - DoubleConversion - fast_float (= 8.0.0) - - fmt (= 11.0.2) + - fmt (= 12.1.0) - glog - RCT-Folly/Default (= 2024.11.18.00) - RCT-Folly/Default (2024.11.18.00): - boost - DoubleConversion - fast_float (= 8.0.0) - - fmt (= 11.0.2) + - fmt (= 12.1.0) - glog - RCT-Folly/Fabric (2024.11.18.00): - boost - DoubleConversion - fast_float (= 8.0.0) - - fmt (= 11.0.2) + - fmt (= 12.1.0) - glog - RCTDeprecation (0.81.6) - RCTRequired (0.81.6) @@ -2893,10 +2898,40 @@ PODS: - ReactCommon/turbomodule/core - SocketRocket - Yoga - - RNFastImage (8.6.3): + - RNFastImage (8.13.0): + - boost + - DoubleConversion + - fast_float + - fmt + - glog + - hermes-engine + - libavif/core (~> 0.11.1) + - libavif/libdav1d (~> 0.11.1) + - RCT-Folly + - RCT-Folly/Fabric + - RCTRequired + - RCTTypeSafety - React-Core - - SDWebImage (~> 5.11.1) - - SDWebImageWebPCoder (~> 0.8.4) + - React-debug + - React-Fabric + - React-featureflags + - React-graphics + - React-ImageManager + - React-jsi + - React-NativeModulesApple + - React-RCTFabric + - React-renderercss + - React-rendererdebug + - React-utils + - ReactCodegen + - ReactCommon/turbomodule/bridging + - ReactCommon/turbomodule/core + - SDWebImage (>= 5.19.1) + - SDWebImageAVIFCoder (~> 0.11.0) + - SDWebImageSVGCoder (~> 1.7.0) + - SDWebImageWebPCoder (~> 0.14) + - SocketRocket + - Yoga - RNFBApp (22.2.1): - Firebase/CoreOnly (= 11.13.0) - React-Core @@ -3292,12 +3327,17 @@ PODS: - ReactCommon/turbomodule/core - SocketRocket - Yoga - - SDWebImage (5.11.1): - - SDWebImage/Core (= 5.11.1) - - SDWebImage/Core (5.11.1) - - SDWebImageWebPCoder (0.8.5): + - SDWebImage (5.21.7): + - SDWebImage/Core (= 5.21.7) + - SDWebImage/Core (5.21.7) + - SDWebImageAVIFCoder (0.11.1): + - libavif/core (>= 0.11.0) + - SDWebImage (~> 5.10) + - SDWebImageSVGCoder (1.7.0): + - SDWebImage/Core (~> 5.6) + - SDWebImageWebPCoder (0.15.0): - libwebp (~> 1.0) - - SDWebImage/Core (~> 5.10) + - SDWebImage/Core (~> 5.17) - SocketRocket (0.7.1) - stream-chat-react-native (8.1.0): - boost @@ -3476,7 +3516,7 @@ DEPENDENCIES: - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)" - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)" - - RNFastImage (from `../node_modules/react-native-fast-image`) + - "RNFastImage (from `../node_modules/@d11/react-native-fast-image`)" - "RNFBApp (from `../node_modules/@react-native-firebase/app`)" - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)" - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) @@ -3508,11 +3548,15 @@ SPEC REPOS: - GoogleAppMeasurement - GoogleDataTransport - GoogleUtilities + - libavif + - libdav1d - libwebp - nanopb - PromisesObjC - PromisesSwift - SDWebImage + - SDWebImageAVIFCoder + - SDWebImageSVGCoder - SDWebImageWebPCoder - SocketRocket @@ -3689,7 +3733,7 @@ EXTERNAL SOURCES: RNCClipboard: :path: "../node_modules/@react-native-clipboard/clipboard" RNFastImage: - :path: "../node_modules/react-native-fast-image" + :path: "../node_modules/@d11/react-native-fast-image" RNFBApp: :path: "../node_modules/@react-native-firebase/app" RNFBMessaging: @@ -3731,14 +3775,16 @@ SPEC CHECKSUMS: FirebaseCrashlytics: 8281e577b6f85a08ea7aeb8b66f95e1ae430c943 FirebaseInstallations: 0ee9074f2c1e86561ace168ee1470dc67aabaf02 FirebaseMessaging: 195bbdb73e6ca1dbc76cd46e73f3552c084ef6e4 - FirebaseRemoteConfigInterop: 7b74ceaa54e28863ed17fa39da8951692725eced + FirebaseRemoteConfigInterop: 1c6135e8a094cc6368949f5faeeca7ee8948b8aa FirebaseSessions: eaa8ec037e7793769defe4201c20bd4d976f9677 - fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd + fmt: 12a698626610c2fef5e7d8de472b100baf225f93 glog: 5683914934d5b6e4240e497e0f4a3b42d1854183 GoogleAppMeasurement: 0dfca1a4b534d123de3945e28f77869d10d0d600 GoogleDataTransport: aae35b7ea0c09004c3797d53c8c41f66f219d6a7 GoogleUtilities: 00c88b9a86066ef77f0da2fab05f65d7768ed8e1 hermes-engine: 7219f6e751ad6ec7f3d7ec121830ee34dae40749 + libavif: 84bbb62fb232c3018d6f1bab79beea87e35de7b7 + libdav1d: 23581a4d8ec811ff171ed5e2e05cd27bad64c39f libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8 nanopb: fad817b59e0457d11a5dfbde799381cd727c1275 NitroModules: 62786c3090e21b6e28baf91ea69257b1b75fdcfd @@ -3746,7 +3792,7 @@ SPEC CHECKSUMS: op-sqlite: 2e58f87227360fa6251d1fe103d189f11ae8c95f PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47 PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851 - RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f + RCT-Folly: 5a8bea092f38495b327c6eff2dc52ee25c10f637 RCTDeprecation: d4ef510f229cea15314176aee5e3ba10064a8496 RCTRequired: 1e41b794629558f6626e2bc39c166ac0ec1c5878 RCTTypeSafety: 62c8105cf08af634c93d38ea1e8ec8a57b7abc2c @@ -3821,7 +3867,7 @@ SPEC CHECKSUMS: ReactCommon: 66eb46e6696f1f4816b250ab2807389018bacd78 RNCAsyncStorage: fd44f4b03e007e642e98df6726737bc66e9ba609 RNCClipboard: e560338bf6cc4656a09ff90610b62ddc0dbdad65 - RNFastImage: 462a183c4b0b6b26fdfd639e1ed6ba37536c3b87 + RNFastImage: 674d5912e174468a60971d2ba9efc7bb43d116fa RNFBApp: db9c2e6d36fe579ab19b82c0a4a417ff7569db7e RNFBMessaging: de62448d205095171915d622ed5fb45c2be5e075 RNGestureHandler: 6bc8f2f56c8a68f3380cd159f3a1ae06defcfabb @@ -3832,13 +3878,15 @@ SPEC CHECKSUMS: RNShare: c0f25f3d0ec275239c35cadbc98c94053118bee7 RNSVG: b1cb00d54dbc3066a3e98732e5418c8361335124 RNWorklets: 68ab13976d7eba39fb2f0844994a51380e76046d - SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d - SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d + SDWebImage: e9fc87c1aab89a8ab1bbd74eba378c6f53be8abf + SDWebImageAVIFCoder: afe194a084e851f70228e4be35ef651df0fc5c57 + SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c + SDWebImageWebPCoder: 0e06e365080397465cc73a7a9b472d8a3bd0f377 SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748 stream-chat-react-native: d15df89b47c1a08bc7db90c316d34b8ac4e13900 Teleport: ed828b19e62ca8b9ec101d991bf0594b1c1c8812 Yoga: ff16d80456ce825ffc9400eeccc645a0dfcccdf5 -PODFILE CHECKSUM: 4f662370295f8f9cee909f1a4c59a614999a209d +PODFILE CHECKSUM: 84efea5f3e8c9c79671ee6e525f700f244c17388 COCOAPODS: 1.15.2 diff --git a/examples/SampleApp/package.json b/examples/SampleApp/package.json index 228b0e2334..c0353722d5 100644 --- a/examples/SampleApp/package.json +++ b/examples/SampleApp/package.json @@ -32,6 +32,7 @@ "fastlane:ios-deploy": "bundle exec fastlane ios deploy_to_testflight_qa deploy:true" }, "dependencies": { + "@d11/react-native-fast-image": "^8.13.0", "@emoji-mart/data": "^1.2.1", "@notifee/react-native": "^9.1.8", "@op-engineering/op-sqlite": "^14.0.4", @@ -54,7 +55,6 @@ "react": "19.1.4", "react-native": "0.81.6", "react-native-blob-util": "^0.22.2", - "react-native-fast-image": "^8.6.3", "react-native-gesture-handler": "^2.31.0", "react-native-haptic-feedback": "^2.3.3", "react-native-image-picker": "^8.2.1", diff --git a/examples/SampleApp/src/components/SampleAppComponentOverrides.tsx b/examples/SampleApp/src/components/SampleAppComponentOverrides.tsx index d5ec67d778..5bba6e1624 100644 --- a/examples/SampleApp/src/components/SampleAppComponentOverrides.tsx +++ b/examples/SampleApp/src/components/SampleAppComponentOverrides.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { Platform, StyleSheet, useColorScheme, View } from 'react-native'; import type { ComponentOverrides } from 'stream-chat-react-native'; import { BlurView } from '@react-native-community/blur'; -import FastImage from 'react-native-fast-image'; +import FastImage from '@d11/react-native-fast-image'; import { useTheme, } from 'stream-chat-react-native'; diff --git a/examples/SampleApp/yarn.lock b/examples/SampleApp/yarn.lock index 8dac41d7b4..3dc3ab4a6a 100644 --- a/examples/SampleApp/yarn.lock +++ b/examples/SampleApp/yarn.lock @@ -1124,6 +1124,11 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== +"@d11/react-native-fast-image@^8.13.0": + version "8.13.0" + resolved "https://registry.yarnpkg.com/@d11/react-native-fast-image/-/react-native-fast-image-8.13.0.tgz#ae73d61fdc54b6c0b97cb97860773fb9f8db2b7f" + integrity sha512-zfsBtYNttiZVV/NwEnN/PzgW3PGlGYqn0/6DUOQ/tCv1lO0gO7+S0GiANmNDl35oVmh8o0DK81lF8xAhYz/aNA== + "@egjs/hammerjs@^2.0.17": version "2.0.17" resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124" @@ -7574,11 +7579,6 @@ react-native-drawer-layout@^4.1.10: dependencies: use-latest-callback "^0.2.3" -react-native-fast-image@^8.6.3: - version "8.6.3" - resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-8.6.3.tgz#6edc3f9190092a909d636d93eecbcc54a8822255" - integrity sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg== - react-native-gesture-handler@^2.31.0: version "2.31.0" resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.31.0.tgz#7963b37b5566134bb6006024ec6a20d215a5b1a0" diff --git a/package/expo-package/android/build.gradle b/package/expo-package/android/build.gradle index 0790bb703f..63e6799460 100644 --- a/package/expo-package/android/build.gradle +++ b/package/expo-package/android/build.gradle @@ -29,8 +29,9 @@ if (isNewArchitectureEnabled()) { def getExtOrIntegerDefault(name) { return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["StreamChatExpo_" + name]).toInteger() } +def canonicalProjectDir = projectDir.getCanonicalFile() def localSharedNativeRootDir = new File(projectDir, "src/main/java/com/streamchatreactnative/shared") -def sharedNativeRootDir = new File(projectDir, "../../shared-native/android") +def sharedNativeRootDir = new File(canonicalProjectDir, "../../shared-native/android") def hasNativeSources = { File dir -> dir.exists() && !fileTree(dir).matching { include "**/*.kt"; include "**/*.java" }.files.isEmpty() } @@ -88,10 +89,10 @@ tasks.register("syncSharedShimmerSources") { outputs.upToDateWhen { false } doLast { def sourceRootDir = null - if (hasNativeSources(localSharedNativeRootDir)) { - sourceRootDir = localSharedNativeRootDir - } else if (hasNativeSources(sharedNativeRootDir)) { + if (hasNativeSources(sharedNativeRootDir)) { sourceRootDir = sharedNativeRootDir + } else if (hasNativeSources(localSharedNativeRootDir)) { + sourceRootDir = localSharedNativeRootDir } if (sourceRootDir == null) { diff --git a/package/expo-package/android/src/main/java/com/streamchatexpo/StreamChatExpoPackage.java b/package/expo-package/android/src/main/java/com/streamchatexpo/StreamChatExpoPackage.java index 20fa4cab28..8f0d071417 100644 --- a/package/expo-package/android/src/main/java/com/streamchatexpo/StreamChatExpoPackage.java +++ b/package/expo-package/android/src/main/java/com/streamchatexpo/StreamChatExpoPackage.java @@ -14,12 +14,17 @@ import java.util.Map; public class StreamChatExpoPackage extends TurboReactPackage { + private static final String STREAM_MULTIPART_UPLOADER_MODULE = "StreamMultipartUploader"; private static final String STREAM_VIDEO_THUMBNAIL_MODULE = "StreamVideoThumbnail"; @Nullable @Override public NativeModule getModule(String name, ReactApplicationContext reactContext) { - if (name.equals(STREAM_VIDEO_THUMBNAIL_MODULE) && BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { + if (name.equals(STREAM_MULTIPART_UPLOADER_MODULE)) { + return createNewArchModule("com.streamchatexpo.StreamMultipartUploaderModule", reactContext); + } + + if (name.equals(STREAM_VIDEO_THUMBNAIL_MODULE)) { return createNewArchModule("com.streamchatexpo.StreamVideoThumbnailModule", reactContext); } @@ -30,7 +35,17 @@ public NativeModule getModule(String name, ReactApplicationContext reactContext) public ReactModuleInfoProvider getReactModuleInfoProvider() { return () -> { final Map moduleInfos = new HashMap<>(); - boolean isTurboModule = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; + moduleInfos.put( + STREAM_MULTIPART_UPLOADER_MODULE, + new ReactModuleInfo( + STREAM_MULTIPART_UPLOADER_MODULE, + STREAM_MULTIPART_UPLOADER_MODULE, + false, // canOverrideExistingModule + false, // needsEagerInit + false, // hasConstants + false, // isCxxModule + true // isTurboModule + )); moduleInfos.put( STREAM_VIDEO_THUMBNAIL_MODULE, new ReactModuleInfo( @@ -40,7 +55,7 @@ public ReactModuleInfoProvider getReactModuleInfoProvider() { false, // needsEagerInit false, // hasConstants false, // isCxxModule - isTurboModule // isTurboModule + true // isTurboModule )); return moduleInfos; }; diff --git a/package/expo-package/android/src/newarch/com/streamchatexpo/StreamMultipartUploaderModule.kt b/package/expo-package/android/src/newarch/com/streamchatexpo/StreamMultipartUploaderModule.kt new file mode 100644 index 0000000000..11ec5fc4af --- /dev/null +++ b/package/expo-package/android/src/newarch/com/streamchatexpo/StreamMultipartUploaderModule.kt @@ -0,0 +1,122 @@ +package com.streamchatexpo + +import com.facebook.react.bridge.Arguments +import com.facebook.react.bridge.Promise +import com.facebook.react.bridge.ReactApplicationContext +import com.facebook.react.bridge.ReadableArray +import com.facebook.react.bridge.ReadableMap +import com.facebook.react.bridge.UiThreadUtil +import com.facebook.react.modules.core.DeviceEventManagerModule +import com.streamchatreactnative.shared.upload.StreamMultipartUploadRequestParser +import com.streamchatreactnative.shared.upload.StreamMultipartUploader +import java.util.concurrent.LinkedBlockingQueue +import java.util.concurrent.ThreadPoolExecutor +import java.util.concurrent.TimeUnit + +class StreamMultipartUploaderModule( + reactContext: ReactApplicationContext, +) : NativeStreamMultipartUploaderSpec(reactContext) { + override fun getName(): String = NAME + + override fun addListener(eventType: String) = Unit + + override fun removeListeners(count: Double) = Unit + + override fun cancelUpload(uploadId: String, promise: Promise) { + StreamMultipartUploader.cancel(uploadId) + promise.resolve(null) + } + + override fun uploadMultipart( + uploadId: String, + url: String, + method: String, + headers: ReadableArray, + parts: ReadableArray, + progress: ReadableMap?, + timeoutMs: Double?, + promise: Promise, + ) { + val request = + try { + StreamMultipartUploadRequestParser.parse( + uploadId = uploadId, + url = url, + method = method, + headers = headers, + parts = parts, + progress = progress, + timeoutMs = timeoutMs, + ) + } catch (error: Throwable) { + promise.reject("stream_multipart_upload_error", error.message, error) + return + } + + try { + executor.execute { + try { + val response = + StreamMultipartUploader.upload(reactApplicationContext, request) { loaded, total -> + emitProgress(uploadId, loaded, total) + } + + val payload = Arguments.createMap().apply { + putString("body", response.body) + putArray("headers", Arguments.createArray().apply { + response.headers.forEach { (name, value) -> + pushMap( + Arguments.createMap().apply { + putString("name", name) + putString("value", value) + }, + ) + } + }) + putDouble("status", response.status.toDouble()) + putString("statusText", response.statusText) + } + promise.resolve(payload) + } catch (error: Throwable) { + promise.reject("stream_multipart_upload_error", error.message, error) + } + } + } catch (error: Throwable) { + promise.reject("stream_multipart_upload_error", error.message, error) + } + } + + private fun emitProgress(uploadId: String, loaded: Long, total: Long?) { + UiThreadUtil.runOnUiThread { + val payload = Arguments.createMap().apply { + putDouble("loaded", loaded.toDouble()) + if (total != null) { + putDouble("total", total.toDouble()) + } else { + putNull("total") + } + putString("uploadId", uploadId) + } + + reactApplicationContext + .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java) + .emit(PROGRESS_EVENT_NAME, payload) + } + } + + companion object { + const val NAME = "StreamMultipartUploader" + private const val PROGRESS_EVENT_NAME = "streamMultipartUploadProgress" + private val maxConcurrentUploads = Runtime.getRuntime().availableProcessors().coerceIn(2, 4) + private val executor = + ThreadPoolExecutor( + maxConcurrentUploads, + maxConcurrentUploads, + 30L, + TimeUnit.SECONDS, + LinkedBlockingQueue(64), + ).apply { + allowCoreThreadTimeOut(true) + } + } +} diff --git a/package/expo-package/package.json b/package/expo-package/package.json index 03dba3e651..cddbfb94e5 100644 --- a/package/expo-package/package.json +++ b/package/expo-package/package.json @@ -97,6 +97,7 @@ }, "ios": { "modulesProvider": { + "StreamMultipartUploader": "StreamMultipartUploader", "StreamVideoThumbnail": "StreamVideoThumbnail" }, "componentProvider": { diff --git a/package/expo-package/src/handlers/index.ts b/package/expo-package/src/handlers/index.ts index 8d6c44780b..83b0ed3ce3 100644 --- a/package/expo-package/src/handlers/index.ts +++ b/package/expo-package/src/handlers/index.ts @@ -1 +1,2 @@ export * from './compressImage'; +export * from './multipartUpload'; diff --git a/package/expo-package/src/handlers/multipartUpload.ts b/package/expo-package/src/handlers/multipartUpload.ts new file mode 100644 index 0000000000..5a2be4e4f4 --- /dev/null +++ b/package/expo-package/src/handlers/multipartUpload.ts @@ -0,0 +1,9 @@ +import { createNativeMultipartUpload } from 'stream-chat-react-native-core'; + +import { uploadMultipart } from '../native/multipartUploader'; +import { getLocalAssetUri } from '../optionalDependencies/getLocalAssetUri'; + +export const multipartUpload = createNativeMultipartUpload({ + getLocalAssetUri, + uploadMultipart, +}); diff --git a/package/expo-package/src/index.js b/package/expo-package/src/index.js index 53960194f9..4bb4a5b005 100644 --- a/package/expo-package/src/index.js +++ b/package/expo-package/src/index.js @@ -2,7 +2,7 @@ import { FlatList } from 'react-native'; import { registerNativeHandlers } from 'stream-chat-react-native-core'; -import { compressImage } from './handlers'; +import { compressImage, multipartUpload } from './handlers'; import { Audio, @@ -32,6 +32,7 @@ registerNativeHandlers({ getLocalAssetUri, getPhotos, iOS14RefreshGallerySelection, + multipartUpload, NativeShimmerView, oniOS14GalleryLibrarySelectionChange, overrideAudioRecordingConfiguration, diff --git a/package/expo-package/src/native/NativeStreamMultipartUploader.ts b/package/expo-package/src/native/NativeStreamMultipartUploader.ts new file mode 100644 index 0000000000..4caeacaeee --- /dev/null +++ b/package/expo-package/src/native/NativeStreamMultipartUploader.ts @@ -0,0 +1,52 @@ +import type { TurboModule } from 'react-native'; + +import { TurboModuleRegistry } from 'react-native'; + +export type UploadHeader = { + name: string; + value: string; +}; + +export type UploadPart = { + fieldName: string; + fileName?: string; + kind: string; + mimeType?: string; + uri?: string; + value?: string; +}; + +export type UploadProgressConfig = { + count?: number; + intervalMs?: number; +}; + +export type UploadProgressEvent = { + loaded: number; + total?: number; + uploadId: string; +}; + +export type UploadResponse = { + body: string; + headers?: ReadonlyArray; + status: number; + statusText?: string; +}; + +export interface Spec extends TurboModule { + addListener(eventType: string): void; + cancelUpload(uploadId: string): Promise; + removeListeners(count: number): void; + uploadMultipart( + uploadId: string, + url: string, + method: string, + headers: ReadonlyArray, + parts: ReadonlyArray, + progress?: UploadProgressConfig, + timeoutMs?: number | null, + ): Promise; +} + +export default TurboModuleRegistry.get('StreamMultipartUploader'); diff --git a/package/expo-package/src/native/multipartUploader.ts b/package/expo-package/src/native/multipartUploader.ts new file mode 100644 index 0000000000..e3010a88fa --- /dev/null +++ b/package/expo-package/src/native/multipartUploader.ts @@ -0,0 +1,5 @@ +import { createNativeMultipartUploader } from 'stream-chat-react-native-core'; + +import NativeStreamMultipartUploader from './NativeStreamMultipartUploader'; + +export const uploadMultipart = createNativeMultipartUploader(NativeStreamMultipartUploader); diff --git a/package/expo-package/src/optionalDependencies/__tests__/pickDocument.test.ts b/package/expo-package/src/optionalDependencies/__tests__/pickDocument.test.ts new file mode 100644 index 0000000000..69f82a534c --- /dev/null +++ b/package/expo-package/src/optionalDependencies/__tests__/pickDocument.test.ts @@ -0,0 +1,88 @@ +describe('expo pickDocument', () => { + afterEach(() => { + jest.resetModules(); + jest.clearAllMocks(); + }); + + it('adds a thumbnail for picked video files', async () => { + const generateThumbnails = jest.fn().mockResolvedValue({ + 'file:///video.mp4': { uri: 'file:///video-thumb.jpg' }, + }); + + jest.doMock( + 'expo-document-picker', + () => ({ + getDocumentAsync: jest.fn().mockResolvedValue({ + assets: [ + { + mimeType: 'video/mp4', + name: 'video.mp4', + uri: 'file:///video.mp4', + }, + ], + canceled: false, + }), + }), + { virtual: true }, + ); + jest.doMock('../generateThumbnail', () => ({ + generateThumbnails, + })); + + const { pickDocument } = require('../pickDocument'); + + await expect(pickDocument()).resolves.toEqual({ + assets: [ + { + mimeType: 'video/mp4', + name: 'video.mp4', + thumb_url: 'file:///video-thumb.jpg', + type: 'video/mp4', + uri: 'file:///video.mp4', + }, + ], + cancelled: false, + }); + expect(generateThumbnails).toHaveBeenCalledWith(['file:///video.mp4']); + }); + + it('does not generate thumbnails for non-video files', async () => { + const generateThumbnails = jest.fn().mockResolvedValue({}); + + jest.doMock( + 'expo-document-picker', + () => ({ + getDocumentAsync: jest.fn().mockResolvedValue({ + assets: [ + { + mimeType: 'application/pdf', + name: 'doc.pdf', + uri: 'file:///doc.pdf', + }, + ], + canceled: false, + }), + }), + { virtual: true }, + ); + jest.doMock('../generateThumbnail', () => ({ + generateThumbnails, + })); + + const { pickDocument } = require('../pickDocument'); + + await expect(pickDocument()).resolves.toEqual({ + assets: [ + { + mimeType: 'application/pdf', + name: 'doc.pdf', + thumb_url: undefined, + type: 'application/pdf', + uri: 'file:///doc.pdf', + }, + ], + cancelled: false, + }); + expect(generateThumbnails).toHaveBeenCalledWith([]); + }); +}); diff --git a/package/expo-package/src/optionalDependencies/getPhotos.ts b/package/expo-package/src/optionalDependencies/getPhotos.ts index 50a742e77e..0e4f2bd728 100644 --- a/package/expo-package/src/optionalDependencies/getPhotos.ts +++ b/package/expo-package/src/optionalDependencies/getPhotos.ts @@ -59,23 +59,26 @@ export const getPhotos = MediaLibrary const mimeType = mime.getType(asset.filename || asset.uri) || (asset.mediaType === MediaLibrary.MediaType.video ? 'video/*' : 'image/*'); - const uri = localUri || asset.uri; + const originalUri = asset.uri; + const uri = localUri || originalUri; return { asset, isVideo: asset.mediaType === MediaLibrary.MediaType.video, mimeType, + originalUri, uri, }; }), ); const videoUris = assetEntries - .filter(({ isVideo, uri }) => isVideo && !!uri) - .map(({ uri }) => uri); + .filter(({ isVideo, originalUri }) => isVideo && !!originalUri) + .map(({ originalUri }) => originalUri); const videoThumbnailResults = await generateThumbnails(videoUris); - const assets = assetEntries.map(({ asset, isVideo, mimeType, uri }) => { - const thumbnailResult = isVideo && uri ? videoThumbnailResults[uri] : undefined; + const assets = assetEntries.map(({ asset, isVideo, mimeType, originalUri, uri }) => { + const thumbnailResult = + isVideo && originalUri ? videoThumbnailResults[originalUri] : undefined; return { duration: asset.duration * 1000, diff --git a/package/expo-package/src/optionalDependencies/pickDocument.ts b/package/expo-package/src/optionalDependencies/pickDocument.ts index b906fcdbbf..0227bcbdcf 100644 --- a/package/expo-package/src/optionalDependencies/pickDocument.ts +++ b/package/expo-package/src/optionalDependencies/pickDocument.ts @@ -1,5 +1,7 @@ import mime from 'mime'; +import { generateThumbnails } from './generateThumbnail'; + let DocumentPicker; try { @@ -17,6 +19,20 @@ if (!DocumentPicker) { export const pickDocument = DocumentPicker ? async () => { try { + const addVideoThumbnails = async ( + assets: T[], + ) => { + const videoUris = assets + .filter(({ type, uri }) => type?.startsWith('video/') && !!uri) + .map(({ uri }) => uri as string); + const thumbnailResults = await generateThumbnails(videoUris); + + return assets.map((asset) => ({ + ...asset, + thumb_url: asset.uri ? thumbnailResults[asset.uri]?.uri || undefined : undefined, + })); + }; + const result = await DocumentPicker.getDocumentAsync(); // New data from latest version of expo-document-picker @@ -40,27 +56,27 @@ export const pickDocument = DocumentPicker // Applicable to latest version of expo-document-picker if (assets) { return { - assets: assets.map((asset) => ({ - ...asset, - type: - asset.mimeType || - mime.getType(asset.name || asset.uri) || - 'application/octet-stream', - })), + assets: await addVideoThumbnails( + assets.map((asset) => ({ + ...asset, + type: + asset.mimeType || + mime.getType(asset.name || asset.uri) || + 'application/octet-stream', + })), + ), cancelled: false, }; } // Applicable to older version of expo-document-picker return { - assets: [ + assets: await addVideoThumbnails([ { ...rest, type: - rest.mimeType || - mime.getType(rest.name || rest.uri) || - 'application/octet-stream', + rest.mimeType || mime.getType(rest.name || rest.uri) || 'application/octet-stream', }, - ], + ]), cancelled: false, }; } catch (err) { diff --git a/package/native-package/android/build.gradle b/package/native-package/android/build.gradle index ef113dedfe..a7e6e30000 100644 --- a/package/native-package/android/build.gradle +++ b/package/native-package/android/build.gradle @@ -36,8 +36,9 @@ def getExtOrDefault(name) { def getExtOrIntegerDefault(name) { return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ImageResizer_" + name]).toInteger() } +def canonicalProjectDir = projectDir.getCanonicalFile() def localSharedNativeRootDir = new File(projectDir, "src/main/java/com/streamchatreactnative/shared") -def sharedNativeRootDir = new File(projectDir, "../../shared-native/android") +def sharedNativeRootDir = new File(canonicalProjectDir, "../../shared-native/android") def hasNativeSources = { File dir -> dir.exists() && !fileTree(dir).matching { include "**/*.kt"; include "**/*.java" }.files.isEmpty() } @@ -101,10 +102,10 @@ tasks.register("syncSharedShimmerSources") { outputs.upToDateWhen { false } doLast { def sourceRootDir = null - if (hasNativeSources(localSharedNativeRootDir)) { - sourceRootDir = localSharedNativeRootDir - } else if (hasNativeSources(sharedNativeRootDir)) { + if (hasNativeSources(sharedNativeRootDir)) { sourceRootDir = sharedNativeRootDir + } else if (hasNativeSources(localSharedNativeRootDir)) { + sourceRootDir = localSharedNativeRootDir } if (sourceRootDir == null) { diff --git a/package/native-package/android/src/main/java/com/streamchatreactnative/StreamChatReactNativePackage.java b/package/native-package/android/src/main/java/com/streamchatreactnative/StreamChatReactNativePackage.java index ec32749c90..fc3b5e060e 100644 --- a/package/native-package/android/src/main/java/com/streamchatreactnative/StreamChatReactNativePackage.java +++ b/package/native-package/android/src/main/java/com/streamchatreactnative/StreamChatReactNativePackage.java @@ -14,6 +14,7 @@ import java.util.Map; public class StreamChatReactNativePackage extends TurboReactPackage { + private static final String STREAM_MULTIPART_UPLOADER_MODULE = "StreamMultipartUploader"; private static final String STREAM_VIDEO_THUMBNAIL_MODULE = "StreamVideoThumbnail"; @Nullable @@ -21,7 +22,12 @@ public class StreamChatReactNativePackage extends TurboReactPackage { public NativeModule getModule(String name, ReactApplicationContext reactContext) { if (name.equals(StreamChatReactNativeModule.NAME)) { return new StreamChatReactNativeModule(reactContext); - } else if (name.equals(STREAM_VIDEO_THUMBNAIL_MODULE) && BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { + } else if (name.equals(STREAM_MULTIPART_UPLOADER_MODULE)) { + return createNewArchModule( + "com.streamchatreactnative.StreamMultipartUploaderModule", + reactContext + ); + } else if (name.equals(STREAM_VIDEO_THUMBNAIL_MODULE)) { return createNewArchModule( "com.streamchatreactnative.StreamVideoThumbnailModule", reactContext @@ -35,7 +41,6 @@ public NativeModule getModule(String name, ReactApplicationContext reactContext) public ReactModuleInfoProvider getReactModuleInfoProvider() { return () -> { final Map moduleInfos = new HashMap<>(); - boolean isTurboModule = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; moduleInfos.put( StreamChatReactNativeModule.NAME, new ReactModuleInfo( @@ -45,7 +50,18 @@ public ReactModuleInfoProvider getReactModuleInfoProvider() { false, // needsEagerInit true, // hasConstants false, // isCxxModule - isTurboModule // isTurboModule + true // isTurboModule + )); + moduleInfos.put( + STREAM_MULTIPART_UPLOADER_MODULE, + new ReactModuleInfo( + STREAM_MULTIPART_UPLOADER_MODULE, + STREAM_MULTIPART_UPLOADER_MODULE, + false, // canOverrideExistingModule + false, // needsEagerInit + false, // hasConstants + false, // isCxxModule + true // isTurboModule )); moduleInfos.put( STREAM_VIDEO_THUMBNAIL_MODULE, @@ -56,7 +72,7 @@ public ReactModuleInfoProvider getReactModuleInfoProvider() { false, // needsEagerInit false, // hasConstants false, // isCxxModule - isTurboModule // isTurboModule + true // isTurboModule )); return moduleInfos; }; diff --git a/package/native-package/android/src/newarch/com/streamchatreactnative/StreamMultipartUploaderModule.kt b/package/native-package/android/src/newarch/com/streamchatreactnative/StreamMultipartUploaderModule.kt new file mode 100644 index 0000000000..006fb4282d --- /dev/null +++ b/package/native-package/android/src/newarch/com/streamchatreactnative/StreamMultipartUploaderModule.kt @@ -0,0 +1,122 @@ +package com.streamchatreactnative + +import com.facebook.react.bridge.Arguments +import com.facebook.react.bridge.Promise +import com.facebook.react.bridge.ReactApplicationContext +import com.facebook.react.bridge.ReadableArray +import com.facebook.react.bridge.ReadableMap +import com.facebook.react.bridge.UiThreadUtil +import com.facebook.react.modules.core.DeviceEventManagerModule +import com.streamchatreactnative.shared.upload.StreamMultipartUploadRequestParser +import com.streamchatreactnative.shared.upload.StreamMultipartUploader +import java.util.concurrent.LinkedBlockingQueue +import java.util.concurrent.ThreadPoolExecutor +import java.util.concurrent.TimeUnit + +class StreamMultipartUploaderModule( + reactContext: ReactApplicationContext, +) : NativeStreamMultipartUploaderSpec(reactContext) { + override fun getName(): String = NAME + + override fun addListener(eventType: String) = Unit + + override fun removeListeners(count: Double) = Unit + + override fun cancelUpload(uploadId: String, promise: Promise) { + StreamMultipartUploader.cancel(uploadId) + promise.resolve(null) + } + + override fun uploadMultipart( + uploadId: String, + url: String, + method: String, + headers: ReadableArray, + parts: ReadableArray, + progress: ReadableMap?, + timeoutMs: Double?, + promise: Promise, + ) { + val request = + try { + StreamMultipartUploadRequestParser.parse( + uploadId = uploadId, + url = url, + method = method, + headers = headers, + parts = parts, + progress = progress, + timeoutMs = timeoutMs, + ) + } catch (error: Throwable) { + promise.reject("stream_multipart_upload_error", error.message, error) + return + } + + try { + executor.execute { + try { + val response = + StreamMultipartUploader.upload(reactApplicationContext, request) { loaded, total -> + emitProgress(uploadId, loaded, total) + } + + val payload = Arguments.createMap().apply { + putString("body", response.body) + putArray("headers", Arguments.createArray().apply { + response.headers.forEach { (name, value) -> + pushMap( + Arguments.createMap().apply { + putString("name", name) + putString("value", value) + }, + ) + } + }) + putDouble("status", response.status.toDouble()) + putString("statusText", response.statusText) + } + promise.resolve(payload) + } catch (error: Throwable) { + promise.reject("stream_multipart_upload_error", error.message, error) + } + } + } catch (error: Throwable) { + promise.reject("stream_multipart_upload_error", error.message, error) + } + } + + private fun emitProgress(uploadId: String, loaded: Long, total: Long?) { + UiThreadUtil.runOnUiThread { + val payload = Arguments.createMap().apply { + putDouble("loaded", loaded.toDouble()) + if (total != null) { + putDouble("total", total.toDouble()) + } else { + putNull("total") + } + putString("uploadId", uploadId) + } + + reactApplicationContext + .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java) + .emit(PROGRESS_EVENT_NAME, payload) + } + } + + companion object { + const val NAME = "StreamMultipartUploader" + private const val PROGRESS_EVENT_NAME = "streamMultipartUploadProgress" + private val maxConcurrentUploads = Runtime.getRuntime().availableProcessors().coerceIn(2, 4) + private val executor = + ThreadPoolExecutor( + maxConcurrentUploads, + maxConcurrentUploads, + 30L, + TimeUnit.SECONDS, + LinkedBlockingQueue(64), + ).apply { + allowCoreThreadTimeOut(true) + } + } +} diff --git a/package/native-package/package.json b/package/native-package/package.json index 6fa36c871b..c2323ac413 100644 --- a/package/native-package/package.json +++ b/package/native-package/package.json @@ -95,6 +95,7 @@ "ios": { "modulesProvider": { "StreamChatReactNative": "StreamChatReactNative", + "StreamMultipartUploader": "StreamMultipartUploader", "StreamVideoThumbnail": "StreamVideoThumbnail" }, "componentProvider": { diff --git a/package/native-package/src/handlers/index.ts b/package/native-package/src/handlers/index.ts index 8d6c44780b..83b0ed3ce3 100644 --- a/package/native-package/src/handlers/index.ts +++ b/package/native-package/src/handlers/index.ts @@ -1 +1,2 @@ export * from './compressImage'; +export * from './multipartUpload'; diff --git a/package/native-package/src/handlers/multipartUpload.ts b/package/native-package/src/handlers/multipartUpload.ts new file mode 100644 index 0000000000..5a2be4e4f4 --- /dev/null +++ b/package/native-package/src/handlers/multipartUpload.ts @@ -0,0 +1,9 @@ +import { createNativeMultipartUpload } from 'stream-chat-react-native-core'; + +import { uploadMultipart } from '../native/multipartUploader'; +import { getLocalAssetUri } from '../optionalDependencies/getLocalAssetUri'; + +export const multipartUpload = createNativeMultipartUpload({ + getLocalAssetUri, + uploadMultipart, +}); diff --git a/package/native-package/src/index.js b/package/native-package/src/index.js index ee090a1cc6..3afaa684cf 100644 --- a/package/native-package/src/index.js +++ b/package/native-package/src/index.js @@ -2,7 +2,7 @@ import { Platform } from 'react-native'; import { registerNativeHandlers } from 'stream-chat-react-native-core'; -import { compressImage } from './handlers'; +import { compressImage, multipartUpload } from './handlers'; import { Audio, @@ -33,6 +33,7 @@ registerNativeHandlers({ getLocalAssetUri, getPhotos, iOS14RefreshGallerySelection, + multipartUpload, NativeShimmerView, oniOS14GalleryLibrarySelectionChange, overrideAudioRecordingConfiguration, diff --git a/package/native-package/src/native/NativeStreamMultipartUploader.ts b/package/native-package/src/native/NativeStreamMultipartUploader.ts new file mode 100644 index 0000000000..4caeacaeee --- /dev/null +++ b/package/native-package/src/native/NativeStreamMultipartUploader.ts @@ -0,0 +1,52 @@ +import type { TurboModule } from 'react-native'; + +import { TurboModuleRegistry } from 'react-native'; + +export type UploadHeader = { + name: string; + value: string; +}; + +export type UploadPart = { + fieldName: string; + fileName?: string; + kind: string; + mimeType?: string; + uri?: string; + value?: string; +}; + +export type UploadProgressConfig = { + count?: number; + intervalMs?: number; +}; + +export type UploadProgressEvent = { + loaded: number; + total?: number; + uploadId: string; +}; + +export type UploadResponse = { + body: string; + headers?: ReadonlyArray; + status: number; + statusText?: string; +}; + +export interface Spec extends TurboModule { + addListener(eventType: string): void; + cancelUpload(uploadId: string): Promise; + removeListeners(count: number): void; + uploadMultipart( + uploadId: string, + url: string, + method: string, + headers: ReadonlyArray, + parts: ReadonlyArray, + progress?: UploadProgressConfig, + timeoutMs?: number | null, + ): Promise; +} + +export default TurboModuleRegistry.get('StreamMultipartUploader'); diff --git a/package/native-package/src/native/multipartUploader.ts b/package/native-package/src/native/multipartUploader.ts new file mode 100644 index 0000000000..e3010a88fa --- /dev/null +++ b/package/native-package/src/native/multipartUploader.ts @@ -0,0 +1,5 @@ +import { createNativeMultipartUploader } from 'stream-chat-react-native-core'; + +import NativeStreamMultipartUploader from './NativeStreamMultipartUploader'; + +export const uploadMultipart = createNativeMultipartUploader(NativeStreamMultipartUploader); diff --git a/package/native-package/src/optionalDependencies/__tests__/pickDocument.test.ts b/package/native-package/src/optionalDependencies/__tests__/pickDocument.test.ts new file mode 100644 index 0000000000..50807cd8f0 --- /dev/null +++ b/package/native-package/src/optionalDependencies/__tests__/pickDocument.test.ts @@ -0,0 +1,86 @@ +describe('native pickDocument', () => { + afterEach(() => { + jest.resetModules(); + jest.clearAllMocks(); + }); + + it('adds a thumbnail for picked video files', async () => { + const generateThumbnails = jest.fn().mockResolvedValue({ + 'file:///video.mp4': { uri: 'file:///video-thumb.jpg' }, + }); + + jest.doMock( + '@react-native-documents/picker', + () => ({ + pick: jest.fn().mockResolvedValue([ + { + name: 'video.mp4', + size: 42, + type: 'video/mp4', + uri: 'file:///video.mp4', + }, + ]), + types: { allFiles: '*/*' }, + }), + { virtual: true }, + ); + jest.doMock('../generateThumbnail', () => ({ + generateThumbnails, + })); + + const { pickDocument } = require('../pickDocument'); + + await expect(pickDocument({ maxNumberOfFiles: 2 })).resolves.toEqual({ + assets: [ + { + name: 'video.mp4', + size: 42, + thumb_url: 'file:///video-thumb.jpg', + type: 'video/mp4', + uri: 'file:///video.mp4', + }, + ], + cancelled: false, + }); + expect(generateThumbnails).toHaveBeenCalledWith(['file:///video.mp4']); + }); + + it('does not generate thumbnails for non-video files', async () => { + const generateThumbnails = jest.fn().mockResolvedValue({}); + + jest.doMock( + '@react-native-documents/picker', + () => ({ + pick: jest.fn().mockResolvedValue([ + { + name: 'doc.pdf', + size: 42, + type: 'application/pdf', + uri: 'file:///doc.pdf', + }, + ]), + types: { allFiles: '*/*' }, + }), + { virtual: true }, + ); + jest.doMock('../generateThumbnail', () => ({ + generateThumbnails, + })); + + const { pickDocument } = require('../pickDocument'); + + await expect(pickDocument({ maxNumberOfFiles: 2 })).resolves.toEqual({ + assets: [ + { + name: 'doc.pdf', + size: 42, + thumb_url: undefined, + type: 'application/pdf', + uri: 'file:///doc.pdf', + }, + ], + cancelled: false, + }); + expect(generateThumbnails).toHaveBeenCalledWith([]); + }); +}); diff --git a/package/native-package/src/optionalDependencies/pickDocument.ts b/package/native-package/src/optionalDependencies/pickDocument.ts index 42aebe01bb..6ac60b9b60 100644 --- a/package/native-package/src/optionalDependencies/pickDocument.ts +++ b/package/native-package/src/optionalDependencies/pickDocument.ts @@ -3,6 +3,8 @@ * * For its full API, see https://github.com/react-native-documents/document-picker/blob/main/packages/document-picker/src/index.ts * */ +import { generateThumbnails } from './generateThumbnail'; + type ResponseValue = { name: string; size: number; @@ -31,6 +33,20 @@ try { export const pickDocument = DocumentPicker ? async ({ maxNumberOfFiles }: { maxNumberOfFiles: number }) => { try { + const addVideoThumbnails = async ( + assets: T[], + ) => { + const videoUris = assets + .filter(({ type, uri }) => type?.startsWith('video/') && !!uri) + .map(({ uri }) => uri as string); + const thumbnailResults = await generateThumbnails(videoUris); + + return assets.map((asset) => ({ + ...asset, + thumb_url: asset.uri ? thumbnailResults[asset.uri]?.uri || undefined : undefined, + })); + }; + if (!DocumentPicker) return { cancelled: true }; let res: ResponseValue[] = await DocumentPicker.pick({ allowMultiSelection: true, @@ -42,12 +58,14 @@ export const pickDocument = DocumentPicker } return { - assets: res.map(({ name, size, type, uri }) => ({ - name, - size, - type, - uri, - })), + assets: await addVideoThumbnails( + res.map(({ name, size, type, uri }) => ({ + name, + size, + type, + uri, + })), + ), cancelled: false, }; } catch (err) { diff --git a/package/package.json b/package/package.json index 426a9a8583..05f837483a 100644 --- a/package/package.json +++ b/package/package.json @@ -83,7 +83,7 @@ "path": "0.12.7", "react-native-markdown-package": "1.8.2", "react-native-url-polyfill": "^2.0.0", - "stream-chat": "^9.41.1", + "stream-chat": "^9.42.1", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { diff --git a/package/shared-native/android/upload/StreamMultipartUploadFileRequestBody.kt b/package/shared-native/android/upload/StreamMultipartUploadFileRequestBody.kt new file mode 100644 index 0000000000..f9cf7d35f3 --- /dev/null +++ b/package/shared-native/android/upload/StreamMultipartUploadFileRequestBody.kt @@ -0,0 +1,25 @@ +package com.streamchatreactnative.shared.upload + +import android.content.Context +import okhttp3.RequestBody +import okhttp3.MediaType.Companion.toMediaTypeOrNull +import okio.BufferedSink +import okio.source + +class StreamMultipartUploadFileRequestBody( + private val context: Context, + private val filePart: StreamMultipartFilePart, +) : RequestBody() { + private val resolvedMimeType = StreamMultipartUploadSourceResolver.mimeType(context, filePart) + private val resolvedContentLength = StreamMultipartUploadSourceResolver.contentLength(context, filePart.uri) + + override fun contentLength(): Long = resolvedContentLength ?: -1L + + override fun contentType() = resolvedMimeType.toMediaTypeOrNull() + + override fun writeTo(sink: BufferedSink) { + StreamMultipartUploadSourceResolver.openInputStream(context, filePart.uri).use { inputStream -> + sink.writeAll(inputStream.source()) + } + } +} diff --git a/package/shared-native/android/upload/StreamMultipartUploadModels.kt b/package/shared-native/android/upload/StreamMultipartUploadModels.kt new file mode 100644 index 0000000000..35d77a73dd --- /dev/null +++ b/package/shared-native/android/upload/StreamMultipartUploadModels.kt @@ -0,0 +1,39 @@ +package com.streamchatreactnative.shared.upload + +data class StreamMultipartUploadRequest( + val headers: Map, + val method: String, + val parts: List, + val progress: StreamMultipartUploadProgressOptions?, + val timeoutMs: Long?, + val uploadId: String, + val url: String, +) + +sealed interface StreamMultipartUploadPart { + val fieldName: String +} + +data class StreamMultipartFilePart( + override val fieldName: String, + val fileName: String, + val mimeType: String?, + val uri: String, +) : StreamMultipartUploadPart + +data class StreamMultipartTextPart( + override val fieldName: String, + val value: String, +) : StreamMultipartUploadPart + +data class StreamMultipartUploadProgressOptions( + val count: Int?, + val intervalMs: Long?, +) + +data class StreamMultipartUploadResponse( + val body: String, + val headers: Map, + val status: Int, + val statusText: String?, +) diff --git a/package/shared-native/android/upload/StreamMultipartUploadProgress.kt b/package/shared-native/android/upload/StreamMultipartUploadProgress.kt new file mode 100644 index 0000000000..a9c99c1252 --- /dev/null +++ b/package/shared-native/android/upload/StreamMultipartUploadProgress.kt @@ -0,0 +1,80 @@ +package com.streamchatreactnative.shared.upload + +import android.os.SystemClock +import okhttp3.RequestBody +import okio.Buffer +import okio.BufferedSink +import okio.ForwardingSink +import okio.Sink +import okio.buffer +import kotlin.math.floor + +class StreamMultipartUploadProgressThrottler( + options: StreamMultipartUploadProgressOptions?, + private val onProgress: (loaded: Long, total: Long?) -> Unit, +) { + private val intervalMs = (options?.intervalMs ?: 16L).coerceIn(16L, 1_000L) + private val count = (options?.count ?: 20).coerceIn(1, 100) + private var emittedBuckets = -1 + private var lastEventAtMs = 0L + + fun dispatch(loaded: Long, total: Long?) { + val now = SystemClock.elapsedRealtime() + val isTerminal = total != null && total >= 0 && loaded >= total + + if (isTerminal) { + onProgress(loaded, total) + return + } + + val passesInterval = now - lastEventAtMs >= intervalMs + val passesCount = + if (count > 0 && total != null && total > 0) { + val nextBucket = floor((loaded.toDouble() / total.toDouble()) * count.toDouble()).toInt() + if (nextBucket > emittedBuckets) { + emittedBuckets = nextBucket + true + } else { + false + } + } else { + true + } + + if (!passesInterval || !passesCount) { + return + } + + lastEventAtMs = now + onProgress(loaded, total) + } +} + +class StreamMultipartUploadProgressRequestBody( + private val requestBody: RequestBody, + private val throttler: StreamMultipartUploadProgressThrottler, +) : RequestBody() { + private val resolvedContentLength by lazy { requestBody.contentLength().takeIf { it >= 0L } } + + override fun contentLength(): Long = requestBody.contentLength() + + override fun contentType() = requestBody.contentType() + + override fun writeTo(sink: BufferedSink) { + val countingSink = + object : ForwardingSink(sink as Sink) { + private var bytesWritten = 0L + + override fun write(source: Buffer, byteCount: Long) { + super.write(source, byteCount) + + bytesWritten += byteCount + throttler.dispatch(bytesWritten, resolvedContentLength) + } + } + + val bufferedSink = countingSink.buffer() + requestBody.writeTo(bufferedSink) + bufferedSink.flush() + } +} diff --git a/package/shared-native/android/upload/StreamMultipartUploadRequestParser.kt b/package/shared-native/android/upload/StreamMultipartUploadRequestParser.kt new file mode 100644 index 0000000000..5f3fc01707 --- /dev/null +++ b/package/shared-native/android/upload/StreamMultipartUploadRequestParser.kt @@ -0,0 +1,110 @@ +package com.streamchatreactnative.shared.upload + +import com.facebook.react.bridge.ReadableArray +import com.facebook.react.bridge.ReadableMap +import com.facebook.react.bridge.ReadableType + +object StreamMultipartUploadRequestParser { + fun parse( + uploadId: String, + url: String, + method: String, + headers: ReadableArray, + parts: ReadableArray, + progress: ReadableMap?, + timeoutMs: Double?, + ): StreamMultipartUploadRequest { + return StreamMultipartUploadRequest( + headers = headers.toStringMap(), + method = method, + parts = parts.toUploadParts(), + progress = progress?.toProgressOptions(), + timeoutMs = timeoutMs?.toLong()?.takeIf { it > 0L }, + uploadId = uploadId, + url = url, + ) + } + + private fun ReadableArray.toUploadParts(): List { + val parsedParts = mutableListOf() + + for (index in 0 until size()) { + val part = getMap(index) ?: throw IllegalArgumentException("Missing multipart part at index $index") + val fieldName = + part.getString("fieldName") ?: throw IllegalArgumentException("Multipart part $index is missing fieldName") + val kind = + part.getString("kind") ?: throw IllegalArgumentException("Multipart part $index is missing kind") + + when (kind) { + "file" -> { + val uri = + part.getString("uri") ?: throw IllegalArgumentException("Multipart file part $index is missing uri") + val fileName = + part.getString("fileName") + ?: throw IllegalArgumentException("Multipart file part $index is missing fileName") + + parsedParts += StreamMultipartFilePart( + fieldName = fieldName, + fileName = fileName, + mimeType = part.getString("mimeType"), + uri = uri, + ) + } + + "text" -> { + val value = + part.getString("value") ?: throw IllegalArgumentException("Multipart text part $index is missing value") + parsedParts += StreamMultipartTextPart(fieldName = fieldName, value = value) + } + + else -> throw IllegalArgumentException("Unsupported multipart part kind: $kind") + } + } + + if (parsedParts.none { it is StreamMultipartFilePart }) { + throw IllegalArgumentException("Multipart upload must contain at least one file part") + } + + return parsedParts + } + + private fun ReadableArray.toStringMap(): Map { + val parsed = mutableMapOf() + + for (index in 0 until size()) { + val header = getMap(index) ?: throw IllegalArgumentException("Missing multipart header at index $index") + val name = + header.getString("name") ?: throw IllegalArgumentException("Multipart header $index is missing name") + if (header.getType("value") == ReadableType.Null) { + continue + } + val value = + header.getString("value") + ?: header.getDynamic("value").asString() + ?: throw IllegalArgumentException("Multipart header $index is missing value") + parsed[name] = value + } + + return parsed + } + + private fun ReadableMap.toProgressOptions(): StreamMultipartUploadProgressOptions { + val count = + if (hasKey("count") && !isNull("count")) { + getDouble("count").toInt().coerceIn(1, 100) + } else { + null + } + val intervalMs = + if (hasKey("intervalMs") && !isNull("intervalMs")) { + getDouble("intervalMs").toLong().coerceIn(16L, 1_000L) + } else { + null + } + + return StreamMultipartUploadProgressOptions( + count = count, + intervalMs = intervalMs, + ) + } +} diff --git a/package/shared-native/android/upload/StreamMultipartUploadSourceResolver.kt b/package/shared-native/android/upload/StreamMultipartUploadSourceResolver.kt new file mode 100644 index 0000000000..6aedd98039 --- /dev/null +++ b/package/shared-native/android/upload/StreamMultipartUploadSourceResolver.kt @@ -0,0 +1,99 @@ +package com.streamchatreactnative.shared.upload + +import android.content.Context +import android.database.Cursor +import android.net.Uri +import android.provider.OpenableColumns +import java.io.File +import java.io.FileInputStream +import java.io.InputStream +import java.net.URLConnection + +object StreamMultipartUploadSourceResolver { + fun contentLength(context: Context, uriString: String): Long? { + val uri = normalizeUri(uriString) + + return when (uri.scheme?.lowercase()) { + null, "file" -> { + val file = toFile(uri, uriString) + if (!file.exists()) { + throw IllegalArgumentException("File does not exist for upload: $uriString") + } + file.length() + } + + "content" -> { + context.contentResolver.openAssetFileDescriptor(uri, "r")?.use { descriptor -> + descriptor.length.takeIf { it >= 0L } + } ?: queryLongColumn(context, uri, OpenableColumns.SIZE) + } + + else -> throw IllegalArgumentException("Unsupported upload URI scheme: ${uri.scheme}") + } + } + + fun mimeType(context: Context, part: StreamMultipartFilePart): String { + val explicitMimeType = part.mimeType?.takeIf { it.isNotBlank() } + if (explicitMimeType != null) { + return explicitMimeType + } + + val uri = normalizeUri(part.uri) + val contentResolverMime = context.contentResolver.getType(uri) + if (!contentResolverMime.isNullOrBlank()) { + return contentResolverMime + } + + return URLConnection.guessContentTypeFromName(part.fileName) ?: "application/octet-stream" + } + + fun openInputStream(context: Context, uriString: String): InputStream { + val uri = normalizeUri(uriString) + + return when (uri.scheme?.lowercase()) { + null, "file" -> FileInputStream(toFile(uri, uriString)) + "content" -> + context.contentResolver.openInputStream(uri) + ?: throw IllegalArgumentException("Failed to open content URI for upload: $uriString") + else -> throw IllegalArgumentException("Unsupported upload URI scheme: ${uri.scheme}") + } + } + + private fun normalizeUri(uriString: String): Uri { + if (uriString.startsWith("/")) { + return Uri.fromFile(File(uriString)) + } + + val parsed = Uri.parse(uriString) + + if (parsed.scheme.isNullOrBlank()) { + return Uri.fromFile(File(uriString)) + } + + return parsed + } + + private fun queryLongColumn(context: Context, uri: Uri, columnName: String): Long? { + val projection = arrayOf(columnName) + val cursor: Cursor = + context.contentResolver.query(uri, projection, null, null, null) ?: return null + + cursor.use { + if (!it.moveToFirst()) { + return null + } + + val columnIndex = it.getColumnIndex(columnName) + if (columnIndex == -1 || it.isNull(columnIndex)) { + return null + } + + return it.getLong(columnIndex) + } + } + + private fun toFile(uri: Uri, original: String): File { + val path = uri.path ?: original + return File(path) + } +} diff --git a/package/shared-native/android/upload/StreamMultipartUploader.kt b/package/shared-native/android/upload/StreamMultipartUploader.kt new file mode 100644 index 0000000000..ff3b282c64 --- /dev/null +++ b/package/shared-native/android/upload/StreamMultipartUploader.kt @@ -0,0 +1,138 @@ +package com.streamchatreactnative.shared.upload + +import android.content.Context +import okhttp3.Call +import okhttp3.MultipartBody +import okhttp3.OkHttpClient +import okhttp3.Request +import okhttp3.RequestBody +import okhttp3.ResponseBody +import java.io.InterruptedIOException +import java.io.IOException +import java.util.concurrent.ConcurrentHashMap +import java.util.concurrent.TimeUnit + +object StreamMultipartUploader { + private val client: OkHttpClient = OkHttpClient.Builder().retryOnConnectionFailure(true).build() + private const val MAX_RESPONSE_BODY_BYTES = 1_048_576L + private val cancelledUploadIds = ConcurrentHashMap.newKeySet() + private val inFlightCalls = ConcurrentHashMap() + + fun cancel(uploadId: String) { + cancelledUploadIds.add(uploadId) + inFlightCalls.remove(uploadId)?.cancel() + } + + fun upload( + context: Context, + request: StreamMultipartUploadRequest, + onProgress: (loaded: Long, total: Long?) -> Unit, + ): StreamMultipartUploadResponse { + if (cancelledUploadIds.contains(request.uploadId)) { + cancelledUploadIds.remove(request.uploadId) + throw InterruptedIOException("Request aborted") + } + + val httpRequest = createRequest(context, request, onProgress) + val call = clientFor(request).newCall(httpRequest) + val existingCall = inFlightCalls.putIfAbsent(request.uploadId, call) + if (existingCall != null) { + throw IllegalStateException("Upload already in flight for id: ${request.uploadId}") + } + + try { + if (cancelledUploadIds.remove(request.uploadId)) { + call.cancel() + } + + call.execute().use { response -> + return StreamMultipartUploadResponse( + body = readResponseBody(response.body), + headers = + response.headers.names().associateWith { name -> + response.headers(name).joinToString(", ") + }, + status = response.code, + statusText = response.message, + ) + } + } finally { + inFlightCalls.remove(request.uploadId, call) + cancelledUploadIds.remove(request.uploadId) + } + } + + private fun clientFor(request: StreamMultipartUploadRequest): OkHttpClient { + val timeoutMs = request.timeoutMs ?: return client + return client.newBuilder() + .callTimeout(timeoutMs, TimeUnit.MILLISECONDS) + .build() + } + + private fun readResponseBody(body: ResponseBody?): String { + if (body == null) { + return "" + } + + val source = body.source() + source.request(MAX_RESPONSE_BODY_BYTES + 1L) + val buffer = source.buffer + + if (buffer.size > MAX_RESPONSE_BODY_BYTES) { + throw IOException("Upload response body exceeded $MAX_RESPONSE_BODY_BYTES bytes") + } + + return buffer.clone().readString(Charsets.UTF_8) + } + + private fun createMultipartBody( + context: Context, + request: StreamMultipartUploadRequest, + onProgress: (loaded: Long, total: Long?) -> Unit, + ): RequestBody { + val multipartBodyBuilder = MultipartBody.Builder().setType(MultipartBody.FORM) + + request.parts.forEach { part -> + when (part) { + is StreamMultipartFilePart -> { + multipartBodyBuilder.addFormDataPart( + part.fieldName, + part.fileName, + StreamMultipartUploadFileRequestBody(context, part), + ) + } + + is StreamMultipartTextPart -> { + multipartBodyBuilder.addFormDataPart(part.fieldName, part.value) + } + } + } + + val multipartBody = multipartBodyBuilder.build() + val throttler = StreamMultipartUploadProgressThrottler(request.progress, onProgress) + + return StreamMultipartUploadProgressRequestBody(multipartBody, throttler) + } + + private fun createRequest( + context: Context, + request: StreamMultipartUploadRequest, + onProgress: (loaded: Long, total: Long?) -> Unit, + ): Request { + val requestBuilder = Request.Builder().url(request.url) + + request.headers.forEach { (key, value) -> + if ( + key.equals("Content-Type", ignoreCase = true) || + key.equals("Content-Length", ignoreCase = true) + ) { + return@forEach + } + + requestBuilder.header(key, value) + } + + val body = createMultipartBody(context, request, onProgress) + return requestBuilder.method(request.method, body).build() + } +} diff --git a/package/shared-native/ios/StreamMultipartUploadBodyStream.swift b/package/shared-native/ios/StreamMultipartUploadBodyStream.swift new file mode 100644 index 0000000000..f3b1376cd0 --- /dev/null +++ b/package/shared-native/ios/StreamMultipartUploadBodyStream.swift @@ -0,0 +1,254 @@ +import Foundation + +private enum StreamMultipartBodyElement { + case data(Data) + case file(URL) +} + +final class StreamMultipartUploadBodyStreamFactory { + let boundary: String + let contentLength: Int64? + + private let elements: [StreamMultipartBodyElement] + + private init( + boundary: String, + contentLength: Int64?, + elements: [StreamMultipartBodyElement] + ) { + self.boundary = boundary + self.contentLength = contentLength + self.elements = elements + } + + static func create(parts: [StreamMultipartUploadPart]) async throws -> StreamMultipartUploadBodyStreamFactory { + let boundary = "stream-upload-\(UUID().uuidString)" + var elements = [StreamMultipartBodyElement]() + var totalLength: Int64 = 0 + var canComputeLength = true + + for part in parts { + switch part { + case .text(let textPart): + let data = multipartTextData(boundary: boundary, part: textPart) + elements.append(.data(data)) + totalLength += Int64(data.count) + case .file(let filePart): + let resolvedPart = try await StreamMultipartUploadSourceResolver.resolve(filePart) + let headerData = multipartFileHeaderData(boundary: boundary, part: resolvedPart) + let footerData = "\r\n".data(using: .utf8) ?? Data() + + elements.append(.data(headerData)) + elements.append(.file(resolvedPart.fileURL)) + elements.append(.data(footerData)) + + totalLength += Int64(headerData.count) + Int64(footerData.count) + if let size = resolvedPart.size { + totalLength += size + } else { + canComputeLength = false + } + } + } + + let closingBoundary = "--\(boundary)--\r\n".data(using: .utf8) ?? Data() + elements.append(.data(closingBoundary)) + totalLength += Int64(closingBoundary.count) + + return StreamMultipartUploadBodyStreamFactory( + boundary: boundary, + contentLength: canComputeLength ? totalLength : nil, + elements: elements + ) + } + + func makeStream() -> InputStream { + StreamMultipartSequentialInputStream(elements: elements) + } + + private static func multipartTextData(boundary: String, part: StreamMultipartTextPart) -> Data { + let payload = [ + "--\(boundary)", + "Content-Disposition: form-data; name=\(multipartQuotedParameter(part.fieldName))", + "", + part.value, + "", + ].joined(separator: "\r\n") + + return payload.data(using: .utf8) ?? Data() + } + + private static func multipartFileHeaderData( + boundary: String, + part: StreamMultipartResolvedFilePart + ) -> Data { + let payload = [ + "--\(boundary)", + "Content-Disposition: form-data; name=\(multipartQuotedParameter(part.fieldName)); filename=\(multipartQuotedParameter(part.fileName))", + "Content-Type: \(part.mimeType)", + "", + ].joined(separator: "\r\n") + "\r\n" + + return payload.data(using: .utf8) ?? Data() + } + + private static func multipartQuotedParameter(_ value: String) -> String { + let escaped = value + .replacingOccurrences(of: "\r", with: "%0D") + .replacingOccurrences(of: "\n", with: "%0A") + .replacingOccurrences(of: "\"", with: "%22") + + return "\"\(escaped)\"" + } +} + +private final class StreamMultipartSequentialInputStream: InputStream { + private let elements: [StreamMultipartBodyElement] + private var currentIndex = 0 + private var currentStream: InputStream? + private weak var internalDelegate: StreamDelegate? + private var internalStatus: Stream.Status = .notOpen + private var internalError: Error? + private var scheduledRunLoops: [(runLoop: RunLoop, mode: RunLoop.Mode)] = [] + + init(elements: [StreamMultipartBodyElement]) { + self.elements = elements + super.init(data: Data()) + } + + override var delegate: StreamDelegate? { + get { + internalDelegate + } + set { + internalDelegate = newValue + currentStream?.delegate = newValue + } + } + + override var hasBytesAvailable: Bool { + guard internalStatus != .closed, internalStatus != .error else { + return false + } + + if let currentStream, currentStream.hasBytesAvailable { + return true + } + + return currentIndex < elements.count + } + + override var streamError: Error? { + internalError + } + + override var streamStatus: Stream.Status { + internalStatus + } + + override func open() { + guard internalStatus == .notOpen else { + return + } + + internalStatus = .opening + advanceStreamIfNeeded() + if internalStatus == .error { + return + } + internalStatus = currentStream == nil ? .atEnd : .open + } + + override func close() { + currentStream?.close() + currentStream = nil + internalStatus = .closed + } + + override func schedule(in aRunLoop: RunLoop, forMode mode: RunLoop.Mode) { + scheduledRunLoops.append((runLoop: aRunLoop, mode: mode)) + currentStream?.schedule(in: aRunLoop, forMode: mode) + } + + override func remove(from aRunLoop: RunLoop, forMode mode: RunLoop.Mode) { + scheduledRunLoops.removeAll { $0.runLoop == aRunLoop && $0.mode == mode } + currentStream?.remove(from: aRunLoop, forMode: mode) + } + + override func read(_ buffer: UnsafeMutablePointer, maxLength len: Int) -> Int { + guard internalStatus != .closed else { + return 0 + } + + if internalStatus == .notOpen { + open() + } + + while true { + guard let currentStream else { + if internalStatus == .error { + return -1 + } + + internalStatus = .atEnd + return 0 + } + + let bytesRead = currentStream.read(buffer, maxLength: len) + + if bytesRead > 0 { + internalStatus = .open + return bytesRead + } + + if bytesRead < 0 { + internalError = currentStream.streamError + internalStatus = .error + return -1 + } + + currentStream.close() + self.currentStream = nil + advanceStreamIfNeeded() + + if self.currentStream == nil { + internalStatus = .atEnd + return 0 + } + } + } + + private func advanceStreamIfNeeded() { + guard currentStream == nil else { + return + } + + while currentIndex < elements.count { + let nextElement = elements[currentIndex] + currentIndex += 1 + + let nextStream: InputStream? + switch nextElement { + case .data(let data): + nextStream = InputStream(data: data) + case .file(let url): + nextStream = InputStream(url: url) + if nextStream == nil { + internalError = StreamMultipartUploadError.unreadableFile(url.path) + internalStatus = .error + return + } + } + + if let nextStream { + nextStream.delegate = internalDelegate + for scheduled in scheduledRunLoops { + nextStream.schedule(in: scheduled.runLoop, forMode: scheduled.mode) + } + nextStream.open() + currentStream = nextStream + return + } + } + } +} diff --git a/package/shared-native/ios/StreamMultipartUploadManager.swift b/package/shared-native/ios/StreamMultipartUploadManager.swift new file mode 100644 index 0000000000..951c988ebb --- /dev/null +++ b/package/shared-native/ios/StreamMultipartUploadManager.swift @@ -0,0 +1,462 @@ +import Foundation + +private actor StreamMultipartUploadConcurrencyLimiter { + private var activeUploads = 0 + private let maxConcurrentUploads: Int + private var waiterOrder = [UUID]() + private var waiters = [UUID: CheckedContinuation]() + + init(maxConcurrentUploads: Int) { + self.maxConcurrentUploads = max(1, maxConcurrentUploads) + } + + func acquire() async throws { + if activeUploads < maxConcurrentUploads { + activeUploads += 1 + return + } + + let waiterId = UUID() + + try await withTaskCancellationHandler { + try await withCheckedThrowingContinuation { continuation in + if activeUploads < maxConcurrentUploads { + activeUploads += 1 + continuation.resume() + return + } + + waiterOrder.append(waiterId) + waiters[waiterId] = continuation + } + } onCancel: { + Task { + await self.cancelWaiter(id: waiterId) + } + } + } + + func release() { + while !waiterOrder.isEmpty { + let waiterId = waiterOrder.removeFirst() + + guard let continuation = waiters.removeValue(forKey: waiterId) else { + continue + } + + continuation.resume() + return + } + + activeUploads = max(0, activeUploads - 1) + } + + private func cancelWaiter(id: UUID) { + waiterOrder.removeAll { $0 == id } + waiters.removeValue(forKey: id)?.resume(throwing: StreamMultipartUploadError.cancelled) + } +} + +private final class StreamMultipartUploadTaskState { + let bodyFactory: StreamMultipartUploadBodyStreamFactory + let progressThrottler: StreamMultipartUploadProgressThrottler + let task: URLSessionUploadTask + let uploadId: String + var completion: + ((Result) -> Void)? + var response: HTTPURLResponse? + var responseData = Data() + var responseDataError: Error? + + init( + bodyFactory: StreamMultipartUploadBodyStreamFactory, + progressThrottler: StreamMultipartUploadProgressThrottler, + task: URLSessionUploadTask, + uploadId: String, + completion: @escaping (Result) -> Void + ) { + self.bodyFactory = bodyFactory + self.progressThrottler = progressThrottler + self.task = task + self.uploadId = uploadId + self.completion = completion + } +} + +final class StreamMultipartUploadManager: NSObject { + static let shared = StreamMultipartUploadManager() + private let maxResponseBodyBytes = 1_048_576 + private let maxConcurrentUploads = min(max(ProcessInfo.processInfo.activeProcessorCount, 2), 4) + + private lazy var session: URLSession = { + let delegateQueue = OperationQueue() + delegateQueue.maxConcurrentOperationCount = 1 + delegateQueue.qualityOfService = .userInitiated + let configuration = URLSessionConfiguration.ephemeral + configuration.httpMaximumConnectionsPerHost = maxConcurrentUploads + configuration.waitsForConnectivity = false + return URLSession(configuration: configuration, delegate: self, delegateQueue: delegateQueue) + }() + private lazy var uploadLimiter = StreamMultipartUploadConcurrencyLimiter( + maxConcurrentUploads: maxConcurrentUploads + ) + + private let lock = NSLock() + private var cancelledUploadIds = Set() + private var statesByTaskIdentifier = [Int: StreamMultipartUploadTaskState]() + private var taskIdentifiersByUploadId = [String: Int]() + + func cancel(uploadId: String) { + cancel(uploadId: uploadId, recordCancellation: true) + } + + func cancelInFlight(uploadId: String) { + cancel(uploadId: uploadId, recordCancellation: false) + } + + private func cancel(uploadId: String, recordCancellation: Bool) { + lock.lock() + if recordCancellation { + cancelledUploadIds.insert(uploadId) + } + let taskIdentifier = taskIdentifiersByUploadId[uploadId] + let task: URLSessionUploadTask? + if let taskIdentifier { + task = statesByTaskIdentifier[taskIdentifier]?.task + } else { + task = nil + } + lock.unlock() + + task?.cancel() + } + + func uploadMultipart( + uploadId: String, + url: String, + method: String, + headers: [String: String], + parts: [[String: Any]], + progress: [String: Any]?, + timeoutMs: TimeInterval?, + onProgress: @escaping (Int64, Int64?) -> Void + ) async throws -> StreamMultipartUploadResponse { + let request = try parseRequest( + uploadId: uploadId, + url: url, + method: method, + headers: headers, + parts: parts, + progress: progress, + timeoutMs: timeoutMs + ) + + try throwIfCancelled(uploadId: uploadId) + let bodyFactory = try await StreamMultipartUploadBodyStreamFactory.create(parts: request.parts) + try throwIfCancelled(uploadId: uploadId) + var urlRequest = URLRequest(url: request.url) + urlRequest.httpMethod = request.method + if let timeoutMs = request.timeoutMs, timeoutMs > 0 { + urlRequest.timeoutInterval = timeoutMs / 1_000 + } + + request.headers.forEach { key, value in + if + key.caseInsensitiveCompare("Content-Type") == .orderedSame || + key.caseInsensitiveCompare("Content-Length") == .orderedSame + { + return + } + urlRequest.setValue(value, forHTTPHeaderField: key) + } + + urlRequest.setValue( + "multipart/form-data; boundary=\(bodyFactory.boundary)", + forHTTPHeaderField: "Content-Type" + ) + + if let contentLength = bodyFactory.contentLength { + urlRequest.setValue(String(contentLength), forHTTPHeaderField: "Content-Length") + } + + let progressThrottler = + StreamMultipartUploadProgressThrottler(options: request.progress, onProgress: onProgress) + try await uploadLimiter.acquire() + + return try await withCheckedThrowingContinuation { continuation in + let task = session.uploadTask(withStreamedRequest: urlRequest) + let state = StreamMultipartUploadTaskState( + bodyFactory: bodyFactory, + progressThrottler: progressThrottler, + task: task, + uploadId: uploadId + ) { result in + Task { + await self.uploadLimiter.release() + } + continuation.resume(with: result) + } + + guard register(state) else { + task.cancel() + Task { + await self.uploadLimiter.release() + } + continuation.resume(throwing: StreamMultipartUploadError.cancelled) + return + } + + task.resume() + } + } + + private func parseRequest( + uploadId: String, + url: String, + method: String, + headers: [String: String], + parts: [[String: Any]], + progress: [String: Any]?, + timeoutMs: TimeInterval? + ) throws -> StreamMultipartUploadRequest { + guard let parsedURL = URL(string: url) else { + throw StreamMultipartUploadError.invalidURL(url) + } + + let uploadParts = try parts.enumerated().map { index, rawPart -> StreamMultipartUploadPart in + guard let fieldName = rawPart["fieldName"] as? String else { + throw StreamMultipartUploadError.invalidRequest( + "Multipart part \(index) is missing fieldName" + ) + } + + guard let kind = rawPart["kind"] as? String else { + throw StreamMultipartUploadError.invalidRequest("Multipart part \(index) is missing kind") + } + + switch kind { + case "text": + guard let value = rawPart["value"] as? String else { + throw StreamMultipartUploadError.invalidRequest( + "Multipart text part \(index) is missing value" + ) + } + return .text( + StreamMultipartTextPart(fieldName: fieldName, value: value) + ) + case "file": + guard let uri = rawPart["uri"] as? String else { + throw StreamMultipartUploadError.invalidRequest( + "Multipart file part \(index) is missing uri" + ) + } + guard let fileName = rawPart["fileName"] as? String else { + throw StreamMultipartUploadError.invalidRequest( + "Multipart file part \(index) is missing fileName" + ) + } + return .file( + StreamMultipartFilePart( + fieldName: fieldName, + fileName: fileName, + mimeType: rawPart["mimeType"] as? String, + uri: uri + ) + ) + default: + throw StreamMultipartUploadError.invalidRequest("Unsupported multipart kind: \(kind)") + } + } + + if !uploadParts.contains(where: { + if case .file = $0 { + return true + } + return false + }) { + throw StreamMultipartUploadError.invalidRequest( + "Multipart upload must contain at least one file part" + ) + } + + let progressOptions = StreamMultipartUploadProgressOptions( + count: progress?["count"] as? Int ?? (progress?["count"] as? NSNumber)?.intValue, + intervalMs: progress?["intervalMs"] as? Double ?? (progress?["intervalMs"] as? NSNumber)?.doubleValue + ) + + let parsedTimeoutMs = timeoutMs.flatMap { $0 > 0 ? $0 : nil } + + return StreamMultipartUploadRequest( + headers: headers, + method: method, + parts: uploadParts, + progress: progress == nil ? nil : progressOptions, + timeoutMs: parsedTimeoutMs, + uploadId: uploadId, + url: parsedURL + ) + } + + private func throwIfCancelled(uploadId: String) throws { + lock.lock() + let wasCancelled = cancelledUploadIds.remove(uploadId) != nil + lock.unlock() + + if wasCancelled { + throw StreamMultipartUploadError.cancelled + } + } + + private func register(_ state: StreamMultipartUploadTaskState) -> Bool { + lock.lock() + if cancelledUploadIds.remove(state.uploadId) != nil { + lock.unlock() + return false + } + + statesByTaskIdentifier[state.task.taskIdentifier] = state + taskIdentifiersByUploadId[state.uploadId] = state.task.taskIdentifier + lock.unlock() + return true + } + + private func removeState(taskIdentifier: Int) -> StreamMultipartUploadTaskState? { + lock.lock() + let state = statesByTaskIdentifier.removeValue(forKey: taskIdentifier) + if let uploadId = state?.uploadId { + if taskIdentifiersByUploadId[uploadId] == taskIdentifier { + taskIdentifiersByUploadId.removeValue(forKey: uploadId) + } + cancelledUploadIds.remove(uploadId) + } + lock.unlock() + return state + } + + private func state(taskIdentifier: Int) -> StreamMultipartUploadTaskState? { + lock.lock() + let state = statesByTaskIdentifier[taskIdentifier] + lock.unlock() + return state + } +} + +extension StreamMultipartUploadManager: URLSessionDataDelegate, URLSessionTaskDelegate { + func urlSession( + _ session: URLSession, + dataTask: URLSessionDataTask, + didReceive data: Data + ) { + guard let state = state(taskIdentifier: dataTask.taskIdentifier) else { + return + } + + if state.responseData.count + data.count > maxResponseBodyBytes { + state.responseDataError = StreamMultipartUploadError.responseBodyTooLarge(maxResponseBodyBytes) + dataTask.cancel() + return + } + + state.responseData.append(data) + } + + func urlSession( + _ session: URLSession, + dataTask: URLSessionDataTask, + didReceive response: URLResponse, + completionHandler: @escaping (URLSession.ResponseDisposition) -> Void + ) { + state(taskIdentifier: dataTask.taskIdentifier)?.response = response as? HTTPURLResponse + completionHandler(.allow) + } + + func urlSession( + _ session: URLSession, + task: URLSessionTask, + didCompleteWithError error: Error? + ) { + guard let state = removeState(taskIdentifier: task.taskIdentifier) else { + return + } + + if let error { + if let responseDataError = state.responseDataError { + state.completion?(.failure(responseDataError)) + state.completion = nil + return + } + + let nsError = error as NSError + + if nsError.domain == NSURLErrorDomain, nsError.code == NSURLErrorCancelled { + state.completion?(.failure(StreamMultipartUploadError.cancelled)) + } else { + state.completion?(.failure(nsError)) + } + state.completion = nil + return + } + + guard let response = state.response else { + state.completion?(.failure(StreamMultipartUploadError.missingHTTPResponse)) + state.completion = nil + return + } + + let headers = + response.allHeaderFields.reduce(into: [String: String]()) { partialResult, entry in + guard let key = entry.key as? String else { + return + } + + let value = String(describing: entry.value) + if let existingValue = partialResult[key] { + partialResult[key] = "\(existingValue), \(value)" + } else { + partialResult[key] = value + } + } + + let body = String(decoding: state.responseData, as: UTF8.self) + + state.completion?( + .success( + StreamMultipartUploadResponse( + body: body, + headers: headers, + status: response.statusCode, + statusText: HTTPURLResponse.localizedString(forStatusCode: response.statusCode) + ) + ) + ) + state.completion = nil + } + + func urlSession( + _ session: URLSession, + task: URLSessionTask, + didSendBodyData bytesSent: Int64, + totalBytesSent: Int64, + totalBytesExpectedToSend: Int64 + ) { + let total: Int64? + if totalBytesExpectedToSend > 0 { + total = totalBytesExpectedToSend + } else { + total = nil + } + + state(taskIdentifier: task.taskIdentifier)?.progressThrottler.dispatch( + loaded: totalBytesSent, + total: total + ) + } + + func urlSession( + _ session: URLSession, + task: URLSessionTask, + needNewBodyStream completionHandler: @escaping (InputStream?) -> Void + ) { + completionHandler(state(taskIdentifier: task.taskIdentifier)?.bodyFactory.makeStream()) + } +} diff --git a/package/shared-native/ios/StreamMultipartUploadModels.swift b/package/shared-native/ios/StreamMultipartUploadModels.swift new file mode 100644 index 0000000000..ab5ba841ca --- /dev/null +++ b/package/shared-native/ios/StreamMultipartUploadModels.swift @@ -0,0 +1,69 @@ +import Foundation + +struct StreamMultipartUploadRequest { + let headers: [String: String] + let method: String + let parts: [StreamMultipartUploadPart] + let progress: StreamMultipartUploadProgressOptions? + let timeoutMs: TimeInterval? + let uploadId: String + let url: URL +} + +enum StreamMultipartUploadPart { + case file(StreamMultipartFilePart) + case text(StreamMultipartTextPart) +} + +struct StreamMultipartFilePart { + let fieldName: String + let fileName: String + let mimeType: String? + let uri: String +} + +struct StreamMultipartTextPart { + let fieldName: String + let value: String +} + +struct StreamMultipartUploadProgressOptions { + let count: Int? + let intervalMs: TimeInterval? +} + +struct StreamMultipartUploadResponse { + let body: String + let headers: [String: String] + let status: Int + let statusText: String? +} + +enum StreamMultipartUploadError: LocalizedError { + case cancelled + case invalidRequest(String) + case invalidURL(String) + case missingHTTPResponse + case responseBodyTooLarge(Int) + case unreadableFile(String) + case unsupportedSource(String) + + var errorDescription: String? { + switch self { + case .cancelled: + return "Request aborted" + case .invalidRequest(let message): + return message + case .invalidURL(let value): + return "Invalid upload URL: \(value)" + case .missingHTTPResponse: + return "Upload completed without an HTTP response" + case .responseBodyTooLarge(let maxBytes): + return "Upload response body exceeded \(maxBytes) bytes" + case .unreadableFile(let path): + return "Unable to read upload file: \(path)" + case .unsupportedSource(let uri): + return "Unsupported upload URI: \(uri)" + } + } +} diff --git a/package/shared-native/ios/StreamMultipartUploadProgress.swift b/package/shared-native/ios/StreamMultipartUploadProgress.swift new file mode 100644 index 0000000000..d6a943a233 --- /dev/null +++ b/package/shared-native/ios/StreamMultipartUploadProgress.swift @@ -0,0 +1,48 @@ +import Foundation + +final class StreamMultipartUploadProgressThrottler { + private let count: Int + private let intervalMs: TimeInterval + private let onProgress: (Int64, Int64?) -> Void + private var emittedBucket = -1 + private var lastEventAt: TimeInterval = 0 + + init( + options: StreamMultipartUploadProgressOptions?, + onProgress: @escaping (Int64, Int64?) -> Void + ) { + self.count = min(max(options?.count ?? 20, 1), 100) + self.intervalMs = min(max(options?.intervalMs ?? 16, 16), 1_000) + self.onProgress = onProgress + } + + func dispatch(loaded: Int64, total: Int64?) { + if let total, loaded >= total { + onProgress(loaded, total) + return + } + + let now = Date().timeIntervalSince1970 * 1000 + let passesInterval = now - lastEventAt >= intervalMs + let passesCount: Bool + + if count > 0, let total = total, total > 0 { + let nextBucket = Int(floor((Double(loaded) / Double(total)) * Double(count))) + if nextBucket > emittedBucket { + emittedBucket = nextBucket + passesCount = true + } else { + passesCount = false + } + } else { + passesCount = true + } + + guard passesInterval, passesCount else { + return + } + + lastEventAt = now + onProgress(loaded, total) + } +} diff --git a/package/shared-native/ios/StreamMultipartUploadSourceResolver.swift b/package/shared-native/ios/StreamMultipartUploadSourceResolver.swift new file mode 100644 index 0000000000..112156a8b8 --- /dev/null +++ b/package/shared-native/ios/StreamMultipartUploadSourceResolver.swift @@ -0,0 +1,391 @@ +import AVFoundation +import Foundation +import MobileCoreServices +import Photos +import UniformTypeIdentifiers + +private final class StreamPhotoRequestBox { + private let lock = NSLock() + private var isCancelled = false + private var requestId: PHImageRequestID = PHInvalidImageRequestID + + func set(_ requestId: PHImageRequestID) { + let shouldCancel: Bool + + lock.lock() + if isCancelled { + shouldCancel = true + } else { + self.requestId = requestId + shouldCancel = false + } + lock.unlock() + + if shouldCancel, requestId != PHInvalidImageRequestID { + PHImageManager.default().cancelImageRequest(requestId) + } + } + + func cancel() { + lock.lock() + isCancelled = true + let requestId = self.requestId + lock.unlock() + + if requestId != PHInvalidImageRequestID { + PHImageManager.default().cancelImageRequest(requestId) + } + } +} + +private final class StreamContentEditingInputRequestBox { + private let lock = NSLock() + private weak var asset: PHAsset? + private var isCancelled = false + private var requestId: PHContentEditingInputRequestID = 0 + + init(asset: PHAsset) { + self.asset = asset + } + + func set(_ requestId: PHContentEditingInputRequestID) { + let asset: PHAsset? + let shouldCancel: Bool + + lock.lock() + asset = self.asset + if isCancelled { + shouldCancel = true + } else { + self.requestId = requestId + shouldCancel = false + } + lock.unlock() + + if shouldCancel, requestId != 0 { + asset?.cancelContentEditingInputRequest(requestId) + } + } + + func cancel() { + lock.lock() + isCancelled = true + let requestId = self.requestId + let asset = self.asset + lock.unlock() + + if requestId != 0 { + asset?.cancelContentEditingInputRequest(requestId) + } + } +} + +private final class StreamMultipartContinuationBox { + private let lock = NSLock() + private var continuation: CheckedContinuation? + private var pendingResult: Result? + private var hasResumed = false + + func set(_ continuation: CheckedContinuation) { + let result: Result? + + lock.lock() + if let pendingResult { + self.pendingResult = nil + result = pendingResult + } else if hasResumed { + result = nil + } else { + self.continuation = continuation + result = nil + } + lock.unlock() + + if let result { + resume(continuation, with: result) + } + } + + func resume(returning value: Value) { + resume(with: .success(value)) + } + + func resume(throwing error: Error) { + resume(with: .failure(error)) + } + + private func resume(with result: Result) { + let continuationToResume: CheckedContinuation? + + lock.lock() + if hasResumed { + continuationToResume = nil + } else if let continuation { + self.continuation = nil + hasResumed = true + continuationToResume = continuation + } else { + pendingResult = result + hasResumed = true + continuationToResume = nil + } + lock.unlock() + + if let continuationToResume { + resume(continuationToResume, with: result) + } + } + + private func resume( + _ continuation: CheckedContinuation, + with result: Result + ) { + switch result { + case .success(let value): + continuation.resume(returning: value) + case .failure(let error): + continuation.resume(throwing: error) + } + } +} + +struct StreamMultipartResolvedFilePart { + let fieldName: String + let fileName: String + let fileURL: URL + let mimeType: String + let size: Int64? +} + +enum StreamMultipartUploadSourceResolver { + static func resolve(_ part: StreamMultipartFilePart) async throws -> StreamMultipartResolvedFilePart { + try Task.checkCancellation() + let fileURL = sanitizeFileURL(try await resolveFileURL(from: part.uri)) + try Task.checkCancellation() + let mimeType = part.mimeType ?? guessMimeType(fileURL: fileURL, fallbackFileName: part.fileName) + let size = fileSize(url: fileURL) + + return StreamMultipartResolvedFilePart( + fieldName: part.fieldName, + fileName: part.fileName, + fileURL: fileURL, + mimeType: mimeType, + size: size + ) + } + + private static func resolveFileURL(from uri: String) async throws -> URL { + if uri.lowercased().hasPrefix("ph://") { + return try await resolvePhotoLibraryURL(from: uri) + } + + if uri.lowercased().hasPrefix("assets-library://") { + return try await resolveAssetsLibraryURL(from: uri) + } + + if uri.hasPrefix("/") { + return URL(fileURLWithPath: uri) + } + + guard let parsedURL = URL(string: uri) else { + throw StreamMultipartUploadError.unsupportedSource(uri) + } + + if parsedURL.isFileURL { + return parsedURL + } + + throw StreamMultipartUploadError.unsupportedSource(uri) + } + + private static func sanitizeFileURL(_ url: URL) -> URL { + guard url.isFileURL else { + return url + } + + guard var components = URLComponents(url: url, resolvingAgainstBaseURL: false) else { + return url + } + + components.fragment = nil + components.query = nil + + return components.url ?? url + } + + private static func resolvePhotoLibraryURL(from uri: String) async throws -> URL { + let identifier = photoLibraryIdentifier(from: uri) + guard !identifier.isEmpty else { + throw StreamMultipartUploadError.unsupportedSource(uri) + } + + let result = PHAsset.fetchAssets(withLocalIdentifiers: [identifier], options: nil) + guard let asset = result.firstObject else { + throw StreamMultipartUploadError.unsupportedSource(uri) + } + + return try await resolveAssetURL(asset) + } + + @available(iOS, deprecated: 11.0) + private static func resolveAssetsLibraryURL(from uri: String) async throws -> URL { + guard let assetURL = URL(string: uri) else { + throw StreamMultipartUploadError.unsupportedSource(uri) + } + + let result = PHAsset.fetchAssets(withALAssetURLs: [assetURL], options: nil) + guard let asset = result.firstObject else { + throw StreamMultipartUploadError.unsupportedSource(uri) + } + + return try await resolveAssetURL(asset) + } + + private static func resolveAssetURL(_ asset: PHAsset) async throws -> URL { + switch asset.mediaType { + case .video: + return try await requestVideoAssetURL(asset) + case .image: + return try await requestImageAssetURL(asset) + default: + throw StreamMultipartUploadError.unsupportedSource(asset.localIdentifier) + } + } + + private static func requestImageAssetURL(_ asset: PHAsset) async throws -> URL { + let options = PHContentEditingInputRequestOptions() + options.isNetworkAccessAllowed = true + let requestBox = StreamContentEditingInputRequestBox(asset: asset) + let continuationBox = StreamMultipartContinuationBox() + + return try await withTaskCancellationHandler { + try await withCheckedThrowingContinuation { continuation in + continuationBox.set(continuation) + if Task.isCancelled { + continuationBox.resume(throwing: StreamMultipartUploadError.cancelled) + return + } + + let requestId = asset.requestContentEditingInput(with: options) { input, _ in + if Task.isCancelled { + continuationBox.resume(throwing: StreamMultipartUploadError.cancelled) + return + } + + if let url = input?.fullSizeImageURL { + continuationBox.resume(returning: url) + return + } + + continuationBox.resume( + throwing: StreamMultipartUploadError.unsupportedSource(asset.localIdentifier) + ) + } + requestBox.set(requestId) + } + } onCancel: { + requestBox.cancel() + continuationBox.resume(throwing: StreamMultipartUploadError.cancelled) + } + } + + private static func requestVideoAssetURL(_ asset: PHAsset) async throws -> URL { + let options = PHVideoRequestOptions() + options.deliveryMode = .highQualityFormat + options.isNetworkAccessAllowed = true + options.version = .current + let requestBox = StreamPhotoRequestBox() + let continuationBox = StreamMultipartContinuationBox() + + return try await withTaskCancellationHandler { + try await withCheckedThrowingContinuation { continuation in + continuationBox.set(continuation) + if Task.isCancelled { + continuationBox.resume(throwing: StreamMultipartUploadError.cancelled) + return + } + + let requestId = PHImageManager.default().requestAVAsset(forVideo: asset, options: options) { avAsset, _, info in + if Task.isCancelled { + continuationBox.resume(throwing: StreamMultipartUploadError.cancelled) + return + } + + if let isCancelled = (info?[PHImageCancelledKey] as? NSNumber)?.boolValue, isCancelled { + continuationBox.resume(throwing: StreamMultipartUploadError.cancelled) + return + } + + if let error = info?[PHImageErrorKey] as? Error { + continuationBox.resume(throwing: error) + return + } + + if let url = (avAsset as? AVURLAsset)?.url { + continuationBox.resume(returning: url) + return + } + + continuationBox.resume( + throwing: StreamMultipartUploadError.unsupportedSource(asset.localIdentifier) + ) + } + requestBox.set(requestId) + } + } onCancel: { + requestBox.cancel() + continuationBox.resume(throwing: StreamMultipartUploadError.cancelled) + } + } + + private static func guessMimeType(fileURL: URL, fallbackFileName: String) -> String { + if #available(iOS 14.0, *), let type = UTType(filenameExtension: fileURL.pathExtension) { + return type.preferredMIMEType ?? "application/octet-stream" + } + + let fileName = fileURL.lastPathComponent.isEmpty ? fallbackFileName : fileURL.lastPathComponent + return mimeTypeFromExtension(fileName) ?? "application/octet-stream" + } + + private static func mimeTypeFromExtension(_ fileName: String) -> String? { + let pathExtension = (fileName as NSString).pathExtension + guard !pathExtension.isEmpty else { + return nil + } + + if let unmanaged = UTTypeCreatePreferredIdentifierForTag( + kUTTagClassFilenameExtension, + pathExtension as CFString, + nil + )?.takeRetainedValue(), + let mime = UTTypeCopyPreferredTagWithClass(unmanaged, kUTTagClassMIMEType)?.takeRetainedValue() + { + return mime as String + } + + return nil + } + + private static func fileSize(url: URL) -> Int64? { + let values = try? url.resourceValues(forKeys: [.fileSizeKey]) + guard let fileSize = values?.fileSize else { + return nil + } + return Int64(fileSize) + } + + private static func photoLibraryIdentifier(from url: String) -> String { + guard let parsedURL = URL(string: url), parsedURL.scheme?.lowercased() == "ph" else { + return url + .replacingOccurrences(of: "ph://", with: "", options: [.caseInsensitive]) + .removingPercentEncoding? + .trimmingCharacters(in: CharacterSet(charactersIn: "/")) ?? "" + } + + let host = parsedURL.host ?? "" + let path = parsedURL.path + let combined = host.isEmpty ? path : "\(host)\(path)" + return combined.removingPercentEncoding? + .trimmingCharacters(in: CharacterSet(charactersIn: "/")) ?? "" + } +} diff --git a/package/shared-native/ios/StreamMultipartUploader.h b/package/shared-native/ios/StreamMultipartUploader.h new file mode 100644 index 0000000000..bf565134ce --- /dev/null +++ b/package/shared-native/ios/StreamMultipartUploader.h @@ -0,0 +1,16 @@ +#ifdef RCT_NEW_ARCH_ENABLED + +#import + +#if __has_include("StreamChatReactNativeSpec.h") +#import "StreamChatReactNativeSpec.h" +#elif __has_include("StreamChatExpoSpec.h") +#import "StreamChatExpoSpec.h" +#else +#error "Unable to find generated codegen spec header for StreamMultipartUploader." +#endif + +@interface StreamMultipartUploader : RCTEventEmitter +@end + +#endif diff --git a/package/shared-native/ios/StreamMultipartUploader.mm b/package/shared-native/ios/StreamMultipartUploader.mm new file mode 100644 index 0000000000..058c5988d2 --- /dev/null +++ b/package/shared-native/ios/StreamMultipartUploader.mm @@ -0,0 +1,109 @@ +#import "StreamMultipartUploader.h" + +#ifdef RCT_NEW_ARCH_ENABLED + +#if __has_include() +#import +#elif __has_include() +#import +#elif __has_include("stream_chat_react_native-Swift.h") +#import "stream_chat_react_native-Swift.h" +#elif __has_include("stream_chat_expo-Swift.h") +#import "stream_chat_expo-Swift.h" +#else +#error "Unable to import generated Swift header for StreamMultipartUploader." +#endif + +static NSString *const StreamMultipartUploadProgressEventName = @"streamMultipartUploadProgress"; + +static NSDictionary *StreamMultipartUploadProgressDictionary( + const JS::NativeStreamMultipartUploader::UploadProgressConfig &progress) +{ + NSMutableDictionary *payload = [NSMutableDictionary dictionaryWithCapacity:2]; + + if (progress.count().has_value()) { + payload[@"count"] = @(progress.count().value()); + } + + if (progress.intervalMs().has_value()) { + payload[@"intervalMs"] = @(progress.intervalMs().value()); + } + + return payload; +} + +@implementation StreamMultipartUploader + +RCT_EXPORT_MODULE(StreamMultipartUploader) + ++ (BOOL)requiresMainQueueSetup +{ + return NO; +} + +- (NSArray *)supportedEvents +{ + return @[ StreamMultipartUploadProgressEventName ]; +} + +- (void)uploadMultipart:(NSString *)uploadId + url:(NSString *)url + method:(NSString *)method + headers:(NSArray *> *)headers + parts:(NSArray *> *)parts + progress:(JS::NativeStreamMultipartUploader::UploadProgressConfig &)progress + timeoutMs:(NSNumber *)timeoutMs + resolve:(RCTPromiseResolveBlock)resolve + reject:(RCTPromiseRejectBlock)reject +{ + __weak __typeof__(self) weakSelf = self; + NSDictionary *progressOptions = StreamMultipartUploadProgressDictionary(progress); + + [StreamMultipartUploaderBridge uploadMultipartWithUploadId:uploadId + url:url + method:method + headers:headers + parts:parts + progress:progressOptions + timeoutMs:timeoutMs + onProgress:^(NSNumber *loaded, NSNumber * _Nullable total) { + __strong __typeof__(weakSelf) strongSelf = weakSelf; + if (strongSelf == nil) { + return; + } + + dispatch_async(dispatch_get_main_queue(), ^{ + NSMutableDictionary *payload = [NSMutableDictionary dictionaryWithCapacity:3]; + payload[@"uploadId"] = uploadId; + payload[@"loaded"] = loaded; + payload[@"total"] = total ?: [NSNull null]; + [strongSelf sendEventWithName:StreamMultipartUploadProgressEventName body:payload]; + }); + } + completion:^(NSDictionary * _Nullable response, NSError * _Nullable error) { + if (error != nil) { + reject(@"stream_multipart_upload_error", error.localizedDescription, error); + return; + } + + resolve(response ?: @{}); + }]; +} + +- (void)cancelUpload:(NSString *)uploadId + resolve:(RCTPromiseResolveBlock)resolve + reject:(RCTPromiseRejectBlock)reject +{ + [StreamMultipartUploaderBridge cancelUploadWithUploadId:uploadId]; + resolve(nil); +} + +- (std::shared_ptr)getTurboModule: +(const facebook::react::ObjCTurboModule::InitParams &)params +{ + return std::make_shared(params); +} + +@end + +#endif diff --git a/package/shared-native/ios/StreamMultipartUploaderBridge.swift b/package/shared-native/ios/StreamMultipartUploaderBridge.swift new file mode 100644 index 0000000000..0dc41f84e1 --- /dev/null +++ b/package/shared-native/ios/StreamMultipartUploaderBridge.swift @@ -0,0 +1,145 @@ +import Foundation + +private final class StreamMultipartUploadBridgeTaskBox { + private let lock = NSLock() + private var isCancelled = false + private var task: Task? + + func setTask(_ task: Task) { + lock.lock() + if isCancelled { + lock.unlock() + task.cancel() + return + } + + self.task = task + lock.unlock() + } + + func cancel() { + lock.lock() + isCancelled = true + let task = self.task + lock.unlock() + + task?.cancel() + } +} + +@objcMembers +public final class StreamMultipartUploaderBridge: NSObject { + private static let taskLock = NSLock() + private static var tasksByUploadId = [String: StreamMultipartUploadBridgeTaskBox]() + + @objc(uploadMultipartWithUploadId:url:method:headers:parts:progress:timeoutMs:onProgress:completion:) + public static func uploadMultipart( + uploadId: String, + url: String, + method: String, + headers: [[String: String]], + parts: [[String: Any]], + progress: [String: Any]?, + timeoutMs: NSNumber?, + onProgress: @escaping (NSNumber, NSNumber?) -> Void, + completion: @escaping (NSDictionary?, NSError?) -> Void + ) { + let taskBox = StreamMultipartUploadBridgeTaskBox() + var replacedTaskBox: StreamMultipartUploadBridgeTaskBox? + + taskLock.lock() + replacedTaskBox = tasksByUploadId[uploadId] + tasksByUploadId[uploadId] = taskBox + taskLock.unlock() + if replacedTaskBox != nil { + replacedTaskBox?.cancel() + StreamMultipartUploadManager.shared.cancelInFlight(uploadId: uploadId) + } + + let task = Task(priority: .userInitiated) { + defer { + taskLock.lock() + if tasksByUploadId[uploadId] === taskBox { + tasksByUploadId.removeValue(forKey: uploadId) + } + taskLock.unlock() + } + + do { + let response = try await StreamMultipartUploadManager.shared.uploadMultipart( + uploadId: uploadId, + url: url, + method: method, + headers: dictionary(from: headers), + parts: parts, + progress: progress, + timeoutMs: timeoutMs?.doubleValue, + onProgress: { loaded, total in + onProgress(NSNumber(value: loaded), total.map { NSNumber(value: $0) }) + } + ) + + let payload = NSMutableDictionary(capacity: 4) + payload["body"] = response.body + payload["headers"] = headerEntries(from: response.headers) + payload["status"] = NSNumber(value: response.status) + payload["statusText"] = response.statusText ?? NSNull() + + completion(payload, nil) + } catch { + completion(nil, error.asStreamMultipartNSError()) + } + } + + taskBox.setTask(task) + } + + @objc(cancelUploadWithUploadId:) + public static func cancelUpload(uploadId: String) { + taskLock.lock() + let taskBox = tasksByUploadId.removeValue(forKey: uploadId) + taskLock.unlock() + + taskBox?.cancel() + StreamMultipartUploadManager.shared.cancel(uploadId: uploadId) + } + + private static func dictionary(from headers: [[String: String]]) -> [String: String] { + headers.reduce(into: [String: String]()) { result, header in + guard let name = header["name"], let value = header["value"] else { + return + } + result[name] = value + } + } + + private static func headerEntries(from headers: [String: String]) -> [[String: String]] { + headers.map { name, value in + ["name": name, "value": value] + } + } +} + +private extension Error { + func asStreamMultipartNSError() -> NSError { + if self is CancellationError { + return NSError( + domain: "StreamMultipartUploader", + code: 2, + userInfo: [NSLocalizedDescriptionKey: StreamMultipartUploadError.cancelled.localizedDescription] + ) + } + + let nsError = self as NSError + + if nsError.domain != NSCocoaErrorDomain || nsError.code != 0 { + return nsError + } + + return NSError( + domain: "StreamMultipartUploader", + code: 1, + userInfo: [NSLocalizedDescriptionKey: localizedDescription] + ) + } +} diff --git a/package/shared-native/ios/StreamShimmerView.swift b/package/shared-native/ios/StreamShimmerView.swift index cea996385c..d126cdd5b2 100644 --- a/package/shared-native/ios/StreamShimmerView.swift +++ b/package/shared-native/ios/StreamShimmerView.swift @@ -1,6 +1,74 @@ import QuartzCore import UIKit +private protocol StreamShimmerAppLifecycleObserving: AnyObject { + func shimmerAppLifecycleDidChange(isActive: Bool) +} + +private final class StreamShimmerAppLifecycleCoordinator: NSObject { + static let shared = StreamShimmerAppLifecycleCoordinator() + + private let observers = NSHashTable.weakObjects() + + private(set) var isAppActive: Bool + + private init(notificationCenter: NotificationCenter = .default) { + isAppActive = Self.currentAppActiveState() + super.init() + + notificationCenter.addObserver( + self, + selector: #selector(handleWillEnterForeground), + name: UIApplication.willEnterForegroundNotification, + object: nil + ) + notificationCenter.addObserver( + self, + selector: #selector(handleDidEnterBackground), + name: UIApplication.didEnterBackgroundNotification, + object: nil + ) + } + + func addObserver(_ observer: StreamShimmerAppLifecycleObserving) { + observers.add(observer as AnyObject) + observer.shimmerAppLifecycleDidChange(isActive: isAppActive) + } + + func removeObserver(_ observer: StreamShimmerAppLifecycleObserving) { + observers.remove(observer as AnyObject) + } + + @objc + private func handleWillEnterForeground() { + broadcastAppState(isActive: true) + } + + @objc + private func handleDidEnterBackground() { + broadcastAppState(isActive: false) + } + + private func broadcastAppState(isActive: Bool) { + self.isAppActive = isActive + + for case let observer as StreamShimmerAppLifecycleObserving in observers.allObjects { + observer.shimmerAppLifecycleDidChange(isActive: isActive) + } + } + + private static func currentAppActiveState() -> Bool { + switch UIApplication.shared.applicationState { + case .active, .inactive: + return true + case .background: + return false + @unknown default: + return true + } + } +} + /// Native shimmer view used by the Fabric component view. /// /// It renders a base layer and a moving gradient highlight entirely in native code, so shimmer @@ -8,14 +76,16 @@ import UIKit /// stops animation when it is not drawable (backgrounded, detached, hidden, or zero sized). @objcMembers public final class StreamShimmerView: UIView { - private static let edgeHighlightAlpha: CGFloat = 0.1 private static let softHighlightAlpha: CGFloat = 0.24 - private static let midHighlightAlpha: CGFloat = 0.48 - private static let innerHighlightAlpha: CGFloat = 0.72 private static let defaultHighlightAlpha: CGFloat = 0.35 private static let defaultShimmerDuration: CFTimeInterval = 1.2 private static let shimmerStripWidthRatio: CGFloat = 1.25 private static let shimmerAnimationKey = "stream_shimmer_translate_x" + private static let gradientLocations: [NSNumber] = [0.0, 0.35, 0.5, 0.65, 1.0] + private static let gradientAlphaFactors: [CGFloat] = [0, softHighlightAlpha, 1, softHighlightAlpha, 0] + private static var animationDistanceTolerance: CGFloat { + 1 / max(UIScreen.main.scale, 1) + } private let baseLayer = CALayer() private let shimmerLayer = CAGradientLayer() @@ -25,23 +95,37 @@ public final class StreamShimmerView: UIView { private var enabled = false private var shimmerDuration: CFTimeInterval = defaultShimmerDuration private var lastAnimatedDuration: CFTimeInterval = 0 - private var lastAnimatedSize: CGSize = .zero - private var isAppActive = true + private var lastAnimatedTravelDistance: CGFloat = 0 + private var isAppActive = StreamShimmerAppLifecycleCoordinator.shared.isAppActive + private var needsBaseColorUpdate = true + private var needsGradientColorUpdate = true + + public override var isHidden: Bool { + didSet { + updateLayersForCurrentState() + } + } + + public override var alpha: CGFloat { + didSet { + updateLayersForCurrentState() + } + } public override init(frame: CGRect) { super.init(frame: frame) setupLayers() - setupLifecycleObservers() + StreamShimmerAppLifecycleCoordinator.shared.addObserver(self) } public required init?(coder: NSCoder) { super.init(coder: coder) setupLayers() - setupLifecycleObservers() + StreamShimmerAppLifecycleCoordinator.shared.addObserver(self) } deinit { - NotificationCenter.default.removeObserver(self) + StreamShimmerAppLifecycleCoordinator.shared.removeObserver(self) } public override func layoutSubviews() { @@ -69,6 +153,7 @@ public final class StreamShimmerView: UIView { { // In current usage, colors are typically driven by JS props. We still refresh on trait // changes so dynamically resolved native colors remain correct if that path is used later. + invalidateResolvedColors() updateLayersForCurrentState() } } @@ -79,17 +164,34 @@ public final class StreamShimmerView: UIView { durationMilliseconds: Double, enabled: Bool ) { - self.baseColor = baseColor - self.gradientColor = gradientColor - shimmerDuration = Self.normalizedDuration(milliseconds: durationMilliseconds) + let normalizedDuration = Self.normalizedDuration(milliseconds: durationMilliseconds) + let baseColorChanged = !self.baseColor.isEqual(baseColor) + let gradientColorChanged = !self.gradientColor.isEqual(gradientColor) + let durationChanged = shimmerDuration != normalizedDuration + let enabledChanged = self.enabled != enabled + + if baseColorChanged { + self.baseColor = baseColor + needsBaseColorUpdate = true + } + + if gradientColorChanged { + self.gradientColor = gradientColor + needsGradientColorUpdate = true + } + + shimmerDuration = normalizedDuration self.enabled = enabled - updateLayersForCurrentState() + + if baseColorChanged || gradientColorChanged || durationChanged || enabledChanged { + updateLayersForCurrentState() + } } public func stopAnimation() { shimmerLayer.removeAnimation(forKey: Self.shimmerAnimationKey) lastAnimatedDuration = 0 - lastAnimatedSize = .zero + lastAnimatedTravelDistance = 0 } private func setupLayers() { @@ -99,86 +201,73 @@ public final class StreamShimmerView: UIView { shimmerLayer.allowsEdgeAntialiasing = true shimmerLayer.startPoint = CGPoint(x: 0, y: 0.5) shimmerLayer.endPoint = CGPoint(x: 1, y: 0.5) - shimmerLayer.locations = [0.0, 0.08, 0.2, 0.32, 0.4, 0.5, 0.6, 0.68, 0.8, 0.92, 1.0] + shimmerLayer.locations = Self.gradientLocations layer.addSublayer(baseLayer) layer.addSublayer(shimmerLayer) } - private func setupLifecycleObservers() { - NotificationCenter.default.addObserver( - self, - selector: #selector(handleWillEnterForeground), - name: UIApplication.willEnterForegroundNotification, - object: nil - ) - NotificationCenter.default.addObserver( - self, - selector: #selector(handleDidEnterBackground), - name: UIApplication.didEnterBackgroundNotification, - object: nil - ) - } - - @objc - private func handleWillEnterForeground() { - // iOS can drop active layer animations while the app is backgrounded. We explicitly rerun - // a state update on foreground so shimmer reliably restarts when returning to the app. - isAppActive = true - updateLayersForCurrentState() - } - - @objc - private func handleDidEnterBackground() { - isAppActive = false - stopAnimation() - } - private func updateLayersForCurrentState() { let bounds = self.bounds + let shouldHideShimmer = !enabled || bounds.isEmpty || isHidden || alpha <= 0.01 + + shimmerLayer.isHidden = shouldHideShimmer + guard !bounds.isEmpty else { stopAnimation() return } baseLayer.frame = bounds - baseLayer.backgroundColor = baseColor.cgColor - - updateShimmerLayer(for: bounds) + updateBaseLayerColorIfNeeded() + updateShimmerGeometry(for: bounds) + updateShimmerColorsIfNeeded() updateShimmerAnimation(for: bounds) } - private func updateShimmerLayer(for bounds: CGRect) { - // Rebuild the shimmer gradient for current width/colors. Keep this tied to real state changes - // such as layout/prop updates, not continuous per frame calls. + private func updateBaseLayerColorIfNeeded() { + guard needsBaseColorUpdate else { return } + baseLayer.backgroundColor = baseColor.resolvedColor(with: traitCollection).cgColor + needsBaseColorUpdate = false + } + + private func updateShimmerGeometry(for bounds: CGRect) { let shimmerWidth = max(bounds.width * Self.shimmerStripWidthRatio, 1) - let transparentHighlight = color(gradientColor, alphaFactor: 0) shimmerLayer.frame = CGRect(x: -shimmerWidth, y: 0, width: shimmerWidth, height: bounds.height) - shimmerLayer.colors = [ - transparentHighlight.cgColor, - color(gradientColor, alphaFactor: Self.edgeHighlightAlpha).cgColor, - color(gradientColor, alphaFactor: Self.softHighlightAlpha).cgColor, - color(gradientColor, alphaFactor: Self.midHighlightAlpha).cgColor, - color(gradientColor, alphaFactor: Self.innerHighlightAlpha).cgColor, - gradientColor.cgColor, - color(gradientColor, alphaFactor: Self.innerHighlightAlpha).cgColor, - color(gradientColor, alphaFactor: Self.midHighlightAlpha).cgColor, - color(gradientColor, alphaFactor: Self.softHighlightAlpha).cgColor, - color(gradientColor, alphaFactor: Self.edgeHighlightAlpha).cgColor, - transparentHighlight.cgColor, - ] - shimmerLayer.isHidden = !enabled + } + + private func updateShimmerColorsIfNeeded() { + guard needsGradientColorUpdate else { return } + + let resolvedGradientColor = gradientColor.resolvedColor(with: traitCollection) + shimmerLayer.colors = Self.gradientAlphaFactors.map { + color(resolvedGradientColor, alphaFactor: $0).cgColor + } + needsGradientColorUpdate = false } private func updateShimmerAnimation(for bounds: CGRect) { - guard enabled, isAppActive, window != nil, bounds.width > 0, bounds.height > 0 else { + guard + enabled, + isAppActive, + window != nil, + !isHidden, + alpha > 0.01, + bounds.width > 0, + bounds.height > 0 + else { stopAnimation() return } - // If an animation already exists for the same size, keep it running instead of restarting. + let shimmerWidth = max(bounds.width * Self.shimmerStripWidthRatio, 1) + let animationTravelDistance = bounds.width + shimmerWidth + + // If an animation already exists for the same travel distance, keep it running instead of + // restarting. Fabric can relayout the view for height-only or subpixel changes that do not + // require a new horizontal sweep. if shimmerLayer.animation(forKey: Self.shimmerAnimationKey) != nil, - lastAnimatedSize == bounds.size, + abs(lastAnimatedTravelDistance - animationTravelDistance) <= Self.animationDistanceTolerance, lastAnimatedDuration == shimmerDuration { return @@ -187,17 +276,16 @@ public final class StreamShimmerView: UIView { stopAnimation() // Start just outside the left edge and sweep fully past the right edge for a clean pass. - let shimmerWidth = max(bounds.width * Self.shimmerStripWidthRatio, 1) let animation = CABasicAnimation(keyPath: "transform.translation.x") animation.fromValue = 0 - animation.toValue = bounds.width + shimmerWidth + animation.toValue = animationTravelDistance animation.duration = shimmerDuration animation.repeatCount = .infinity animation.timingFunction = CAMediaTimingFunction(name: .linear) animation.isRemovedOnCompletion = true shimmerLayer.add(animation, forKey: Self.shimmerAnimationKey) lastAnimatedDuration = shimmerDuration - lastAnimatedSize = bounds.size + lastAnimatedTravelDistance = animationTravelDistance } private static func normalizedDuration(milliseconds: Double) -> CFTimeInterval { @@ -205,28 +293,30 @@ public final class StreamShimmerView: UIView { return milliseconds / 1000 } - private func color(_ color: UIColor, alphaFactor: CGFloat) -> UIColor { - // Preserve the resolved color channels and shape only alpha for smooth highlight falloff. - let resolvedColor = color.resolvedColor(with: traitCollection) + private func invalidateResolvedColors() { + needsBaseColorUpdate = true + needsGradientColorUpdate = true + } + private func color(_ color: UIColor, alphaFactor: CGFloat) -> UIColor { var red: CGFloat = 0 var green: CGFloat = 0 var blue: CGFloat = 0 var alpha: CGFloat = 0 - if resolvedColor.getRed(&red, green: &green, blue: &blue, alpha: &alpha) { + if color.getRed(&red, green: &green, blue: &blue, alpha: &alpha) { return UIColor(red: red, green: green, blue: blue, alpha: alpha * alphaFactor) } guard - let converted = resolvedColor.cgColor.converted( + let converted = color.cgColor.converted( to: CGColorSpace(name: CGColorSpace.extendedSRGB)!, intent: .defaultIntent, options: nil ), let components = converted.components else { - return resolvedColor.withAlphaComponent(resolvedColor.cgColor.alpha * alphaFactor) + return color.withAlphaComponent(color.cgColor.alpha * alphaFactor) } switch components.count { @@ -243,7 +333,20 @@ public final class StreamShimmerView: UIView { alpha: components[3] * alphaFactor ) default: - return resolvedColor.withAlphaComponent(resolvedColor.cgColor.alpha * alphaFactor) + return color.withAlphaComponent(color.cgColor.alpha * alphaFactor) + } + } +} + +extension StreamShimmerView: StreamShimmerAppLifecycleObserving { + func shimmerAppLifecycleDidChange(isActive: Bool) { + // iOS can drop active layer animations while the app is backgrounded. We explicitly rerun + // a state update on foreground so shimmer reliably restarts when returning to the app. + self.isAppActive = isActive + if isActive { + updateLayersForCurrentState() + } else { + stopAnimation() } } } diff --git a/package/shared-native/ios/StreamVideoThumbnailGenerator.swift b/package/shared-native/ios/StreamVideoThumbnailGenerator.swift index 71336dbe41..6b5fa51974 100644 --- a/package/shared-native/ios/StreamVideoThumbnailGenerator.swift +++ b/package/shared-native/ios/StreamVideoThumbnailGenerator.swift @@ -314,13 +314,24 @@ public final class StreamVideoThumbnailGenerator: NSObject { private static func normalizeLocalURL(_ url: String) -> URL? { if let parsedURL = URL(string: url), let scheme = parsedURL.scheme?.lowercased() { if scheme == "file" { - return parsedURL + return sanitizedFileURL(parsedURL) } return nil } - return URL(fileURLWithPath: url) + return sanitizedFileURL(URL(fileURLWithPath: url)) + } + + private static func sanitizedFileURL(_ url: URL) -> URL { + guard var components = URLComponents(url: url, resolvingAgainstBaseURL: false) else { + return url + } + + components.fragment = nil + components.query = nil + + return components.url ?? url } private static func thumbnailError( diff --git a/package/src/__tests__/nativeMultipartUpload.test.ts b/package/src/__tests__/nativeMultipartUpload.test.ts new file mode 100644 index 0000000000..1591e5996e --- /dev/null +++ b/package/src/__tests__/nativeMultipartUpload.test.ts @@ -0,0 +1,267 @@ +import { + createNativeMultipartUpload, + createNativeMultipartUploader, + NativeMultipartAbortSignal, + NativeMultipartUploadEventEmitter, + NativeMultipartUploadNativeResponse, + NativeMultipartUploadProgressEvent, + NativeMultipartUploaderModule, +} from '../nativeMultipartUpload'; + +const progressEventName = 'streamMultipartUploadProgress'; + +const filePart = { + fieldName: 'file', + fileName: 'test.jpg', + kind: 'file' as const, + mimeType: 'image/jpeg', + uri: 'file:///tmp/test.jpg', +}; + +const createNativeModule = () => ({ + addListener: jest.fn(), + cancelUpload: jest.fn(() => Promise.resolve()), + removeListeners: jest.fn(), + uploadMultipart: jest.fn< + ReturnType, + Parameters + >(() => + Promise.resolve({ + body: 'ok', + headers: [{ name: 'x-test', value: 'yes' }], + status: 201, + statusText: 'Created', + }), + ), +}); + +const createEventEmitter = () => { + const listeners = new Map void>>(); + const subscriptions: Array<{ remove: jest.Mock }> = []; + + const eventEmitter: NativeMultipartUploadEventEmitter & { + emit: (eventType: string, event: NativeMultipartUploadProgressEvent) => void; + subscriptions: Array<{ remove: jest.Mock }>; + } = { + addListener: jest.fn((eventType, listener) => { + const eventListeners = listeners.get(eventType) ?? new Set(); + eventListeners.add(listener); + listeners.set(eventType, eventListeners); + + const subscription = { + remove: jest.fn(() => { + eventListeners.delete(listener); + }), + }; + subscriptions.push(subscription); + return subscription; + }), + emit: (eventType, event) => { + listeners.get(eventType)?.forEach((listener) => listener(event)); + }, + subscriptions, + }; + + return eventEmitter; +}; + +describe('nativeMultipartUpload', () => { + it('does not create a native uploader when the native module is missing', () => { + expect(createNativeMultipartUploader(null)).toBeUndefined(); + }); + + it('passes requests to the native module and forwards matching progress events', async () => { + const nativeModule = createNativeModule(); + const eventEmitter = createEventEmitter(); + let resolveUpload: (response: NativeMultipartUploadNativeResponse) => void; + nativeModule.uploadMultipart.mockImplementation( + () => + new Promise((resolve) => { + resolveUpload = (response) => resolve(response); + }), + ); + const uploadMultipart = createNativeMultipartUploader(nativeModule, { eventEmitter }); + const onProgress = jest.fn(); + + const responsePromise = uploadMultipart?.({ + headers: { Authorization: 'token' }, + method: 'POST', + onProgress, + parts: [filePart], + progress: { count: 10 }, + timeoutMs: 1234, + uploadId: 'upload-id', + url: 'https://example.com/upload', + }); + + eventEmitter.emit(progressEventName, { + loaded: 5, + total: 10, + uploadId: 'other-upload-id', + }); + eventEmitter.emit(progressEventName, { + loaded: 10, + total: null, + uploadId: 'upload-id', + }); + resolveUpload!({ + body: 'ok', + headers: [{ name: 'x-test', value: 'yes' }], + status: 201, + statusText: null, + }); + + await expect(responsePromise).resolves.toEqual({ + body: 'ok', + headers: { 'x-test': 'yes' }, + status: 201, + statusText: undefined, + }); + expect(onProgress).toHaveBeenCalledTimes(1); + expect(onProgress).toHaveBeenCalledWith({ loaded: 10, total: undefined }); + expect(nativeModule.uploadMultipart).toHaveBeenCalledWith( + 'upload-id', + 'https://example.com/upload', + 'POST', + [{ name: 'Authorization', value: 'token' }], + [filePart], + { count: 10 }, + 1234, + ); + expect(eventEmitter.subscriptions[0].remove).toHaveBeenCalledTimes(1); + }); + + it('throws an Axios-compatible cancellation error without pre-canceling native uploads', async () => { + const nativeModule = createNativeModule(); + const uploadMultipart = createNativeMultipartUploader(nativeModule, { + eventEmitter: createEventEmitter(), + }); + + await expect( + uploadMultipart?.({ + headers: {}, + method: 'POST', + parts: [filePart], + signal: { aborted: true }, + uploadId: 'upload-id', + url: 'https://example.com/upload', + }), + ).rejects.toMatchObject({ + __CANCEL__: true, + code: 'ERR_CANCELED', + name: 'CanceledError', + }); + expect(nativeModule.cancelUpload).not.toHaveBeenCalled(); + expect(nativeModule.uploadMultipart).not.toHaveBeenCalled(); + }); + + it('supports onabort-only signals and restores the previous handler', async () => { + const nativeModule = createNativeModule(); + const eventEmitter = createEventEmitter(); + let rejectUpload: (error: Error) => void; + nativeModule.uploadMultipart.mockImplementation( + () => + new Promise((_, reject) => { + rejectUpload = reject; + }), + ); + const uploadMultipart = createNativeMultipartUploader(nativeModule, { eventEmitter }); + const previousOnAbort = jest.fn(); + const signal: NativeMultipartAbortSignal = { + aborted: false, + onabort: previousOnAbort, + }; + + const responsePromise = uploadMultipart?.({ + headers: {}, + method: 'POST', + parts: [filePart], + signal, + uploadId: 'upload-id', + url: 'https://example.com/upload', + }); + + signal.aborted = true; + signal.onabort?.('abort-event'); + rejectUpload!(new Error('native aborted')); + + await expect(responsePromise).rejects.toMatchObject({ + __CANCEL__: true, + code: 'ERR_CANCELED', + name: 'CanceledError', + }); + expect(previousOnAbort).toHaveBeenCalledWith('abort-event'); + expect(nativeModule.cancelUpload).toHaveBeenCalledWith('upload-id'); + expect(signal.onabort).toBe(previousOnAbort); + }); + + it('does not create a multipart upload handler without an uploader', () => { + expect(createNativeMultipartUpload({ uploadMultipart: undefined })).toBeUndefined(); + }); + + it('resolves photo library URIs and strips non-native progress options', async () => { + const uploadMultipart = jest.fn(() => + Promise.resolve({ + body: 'ok', + status: 200, + }), + ); + const getLocalAssetUri = jest.fn(() => Promise.resolve('/tmp/image.jpg?token=1#fragment')); + const multipartUpload = createNativeMultipartUpload({ + getLocalAssetUri, + uploadIdFactory: () => 'generated-upload-id', + uploadMultipart, + }); + + await multipartUpload?.({ + headers: {}, + method: 'POST', + parts: [{ ...filePart, uri: 'ph://asset-id' }], + progress: { + completionProgressCap: 75, + count: 10, + intervalMs: 50, + }, + url: 'https://example.com/upload', + }); + + expect(getLocalAssetUri).toHaveBeenCalledWith('ph://asset-id'); + expect(uploadMultipart).toHaveBeenCalledWith( + expect.objectContaining({ + parts: [{ ...filePart, uri: 'file:///tmp/image.jpg' }], + progress: { + count: 10, + intervalMs: 50, + }, + uploadId: 'generated-upload-id', + }), + ); + }); + + it('falls back to the original photo library URI when JS resolution fails', async () => { + const uploadMultipart = jest.fn(() => + Promise.resolve({ + body: 'ok', + status: 200, + }), + ); + const multipartUpload = createNativeMultipartUpload({ + getLocalAssetUri: jest.fn(() => Promise.reject(new Error('resolution failed'))), + uploadIdFactory: () => 'generated-upload-id', + uploadMultipart, + }); + + await multipartUpload?.({ + headers: {}, + method: 'POST', + parts: [{ ...filePart, uri: 'assets-library://asset-id' }], + url: 'https://example.com/upload', + }); + + expect(uploadMultipart).toHaveBeenCalledWith( + expect.objectContaining({ + parts: [{ ...filePart, uri: 'assets-library://asset-id' }], + }), + ); + }); +}); diff --git a/package/src/components/Attachment/Attachment.tsx b/package/src/components/Attachment/Attachment.tsx index 75c8c8e745..8232065edc 100644 --- a/package/src/components/Attachment/Attachment.tsx +++ b/package/src/components/Attachment/Attachment.tsx @@ -13,6 +13,7 @@ import { } from 'stream-chat'; import type { AudioAttachmentProps } from './Audio/AudioAttachment'; + import { AttachmentFileUploadProgressIndicator } from '../../components/Attachment/AttachmentFileUploadProgressIndicator'; import { useTheme } from '../../contexts'; @@ -31,6 +32,7 @@ import { isSoundPackageAvailable, isVideoPlayerAvailable } from '../../native'; import { primitives } from '../../theme'; import type { DefaultAttachmentData } from '../../types/types'; import { FileTypes } from '../../types/types'; +import { isLocalUrl } from '../../utils/utils'; export type ActionHandler = (name: string, value: string) => void; @@ -188,12 +190,14 @@ const MessageAudioAttachment = ({ message, }: MessageAudioAttachmentProps) => { const localId = (attachment as DefaultAttachmentData).localId; - const { isUploading, uploadProgress } = usePendingAttachmentUpload(localId); - - const indicator = isUploading ? ( + const sourceUrl = attachment.asset_url ?? attachment.originalFile?.uri; + const shouldTrackPendingUpload = !!localId && !!sourceUrl && isLocalUrl(sourceUrl); + const pendingUpload = usePendingAttachmentUpload(shouldTrackPendingUpload ? localId : undefined); + const indicator = pendingUpload.isUploading ? ( ) : undefined; diff --git a/package/src/components/Attachment/AttachmentFileUploadProgressIndicator.tsx b/package/src/components/Attachment/AttachmentFileUploadProgressIndicator.tsx index 6dae9297cc..208ac9c319 100644 --- a/package/src/components/Attachment/AttachmentFileUploadProgressIndicator.tsx +++ b/package/src/components/Attachment/AttachmentFileUploadProgressIndicator.tsx @@ -1,14 +1,18 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text, View } from 'react-native'; +import type { StyleProp, ViewStyle } from 'react-native'; -import { AttachmentUploadIndicator } from './AttachmentUploadIndicator'; - +import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; +import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload'; import { primitives } from '../../theme'; +import { isLocalUrl } from '../../utils/utils'; export type AttachmentFileUploadProgressIndicatorProps = { + containerStyle?: StyleProp; + localId?: string; + sourceUrl?: string; totalBytes?: number | string | null; - uploadProgress: number | undefined; }; const parseTotalBytes = (value: number | string | null | undefined): number | null => { @@ -35,13 +39,20 @@ const formatMegabytesOneDecimal = (bytes: number) => { /** * Circular progress plus `uploaded / total` for file and audio attachments during upload. */ -export const AttachmentFileUploadProgressIndicator = ({ +export const AttachmentFileUploadProgressIndicatorUI = ({ + containerStyle, + localId, + sourceUrl, totalBytes, - uploadProgress, }: AttachmentFileUploadProgressIndicatorProps) => { const { theme: { semantics }, } = useTheme(); + const { AttachmentUploadIndicator } = useComponentsContext(); + const shouldTrackPendingUpload = !!localId && !!sourceUrl && isLocalUrl(sourceUrl); + const pendingUpload = usePendingAttachmentUpload(shouldTrackPendingUpload ? localId : undefined); + const uploadProgress = pendingUpload.uploadProgress; + const shouldRender = pendingUpload.isUploading; const progressLabel = useMemo(() => { const bytes = parseTotalBytes(totalBytes); @@ -52,9 +63,13 @@ export const AttachmentFileUploadProgressIndicator = ({ return `${formatMegabytesOneDecimal(uploaded)} / ${formatMegabytesOneDecimal(bytes)}`; }, [totalBytes, uploadProgress]); + if (!shouldRender) { + return null; + } + return ( - - + + {progressLabel ? ( {progressLabel} @@ -64,6 +79,19 @@ export const AttachmentFileUploadProgressIndicator = ({ ); }; +export const AttachmentFileUploadProgressIndicator = ( + props: AttachmentFileUploadProgressIndicatorProps, +) => { + const { localId, sourceUrl } = props; + const shouldTrackPendingUpload = !!localId && !!sourceUrl && isLocalUrl(sourceUrl); + + if (!shouldTrackPendingUpload) { + return null; + } + + return ; +}; + const styles = StyleSheet.create({ label: { flex: 1, diff --git a/package/src/components/Attachment/AttachmentUploadIndicator.tsx b/package/src/components/Attachment/AttachmentUploadIndicator.tsx index 4f2041c375..093ec3566b 100644 --- a/package/src/components/Attachment/AttachmentUploadIndicator.tsx +++ b/package/src/components/Attachment/AttachmentUploadIndicator.tsx @@ -2,53 +2,104 @@ import React from 'react'; import { ActivityIndicator, StyleSheet, View } from 'react-native'; import type { StyleProp, ViewStyle } from 'react-native'; -import { CircularProgressIndicator } from './CircularProgressIndicator'; - +import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; +import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload'; +import { isLocalUrl } from '../../utils/utils'; export type AttachmentUploadIndicatorProps = { + containerStyle?: StyleProp; + localId?: string; size?: number; + sourceUrl?: string; strokeWidth?: number; style?: StyleProp; testID?: string; - /** When set, shows determinate `CircularProgressIndicator`; otherwise a generic spinner. */ - uploadProgress: number | undefined; + variant?: 'compact' | 'overlay'; }; /** * Upload state for attachment previews: determinate ring when progress is known, otherwise `ActivityIndicator`. */ -export const AttachmentUploadIndicator = ({ +export const AttachmentUploadIndicatorUI = ({ + containerStyle, + localId, size = 16, strokeWidth = 2, style, testID, - uploadProgress, + variant = 'compact', }: AttachmentUploadIndicatorProps) => { const { theme: { semantics }, } = useTheme(); + const { CircularProgressIndicator, MediaUploadProgressOverlay } = useComponentsContext(); + const pendingUpload = usePendingAttachmentUpload(localId); + const uploadProgress = pendingUpload.uploadProgress; + const shouldRender = pendingUpload.isUploading; + const resolvedSize = variant === 'overlay' && size === 16 ? 28 : size; + const resolvedStrokeWidth = variant === 'overlay' && strokeWidth === 2 ? 3 : strokeWidth; + + if (!shouldRender) { + return null; + } - if (uploadProgress === undefined) { + if (variant === 'overlay') { return ( - - - + /> ); } return ( - + {uploadProgress === undefined ? ( + + + + ) : ( + + )} + + ); +}; + +export const AttachmentUploadIndicator = ({ + containerStyle, + localId, + sourceUrl, + variant, + ...props +}: AttachmentUploadIndicatorProps) => { + const shouldTrackPendingUpload = !!localId && !!sourceUrl && isLocalUrl(sourceUrl); + + if (!shouldTrackPendingUpload) { + return null; + } + + return ( + ); }; diff --git a/package/src/components/Attachment/CircularProgressIndicator.tsx b/package/src/components/Attachment/CircularProgressIndicator.tsx index 18d9f4b6a3..0a9f0caaa2 100644 --- a/package/src/components/Attachment/CircularProgressIndicator.tsx +++ b/package/src/components/Attachment/CircularProgressIndicator.tsx @@ -1,12 +1,26 @@ -import React, { useEffect, useMemo, useRef } from 'react'; -import type { ColorValue } from 'react-native'; -import { Animated, Easing, StyleProp, ViewStyle } from 'react-native'; +import React, { useEffect, useMemo } from 'react'; +import type { ColorValue, StyleProp, ViewStyle } from 'react-native'; +import Animated, { + cancelAnimation, + Easing, + useAnimatedProps, + useAnimatedStyle, + useSharedValue, + withRepeat, + withTiming, +} from 'react-native-reanimated'; import Svg, { Circle } from 'react-native-svg'; +const AnimatedCircle = Animated.createAnimatedComponent(Circle); +const SPIN_DURATION_MS = 900; +const PROGRESS_ANIMATION_DURATION_MS = 1200; + export type CircularProgressIndicatorProps = { /** Upload percent **0–100**. */ + backgroundColor: ColorValue; + filledColor: ColorValue; progress: number; - color: ColorValue; + unfilledColor: ColorValue; size?: number; strokeWidth?: number; style?: StyleProp; @@ -17,39 +31,17 @@ export type CircularProgressIndicatorProps = { * Circular upload progress ring (determinate) or rotating arc (indeterminate). */ export const CircularProgressIndicator = ({ - color, + backgroundColor, + filledColor, progress, size = 16, strokeWidth = 2, style, testID, + unfilledColor, }: CircularProgressIndicatorProps) => { - const spin = useRef(new Animated.Value(0)).current; - - useEffect(() => { - const loop = Animated.loop( - Animated.timing(spin, { - toValue: 1, - duration: 900, - easing: Easing.linear, - useNativeDriver: true, - }), - ); - loop.start(); - return () => { - loop.stop(); - spin.setValue(0); - }; - }, [progress, spin]); - - const rotate = useMemo( - () => - spin.interpolate({ - inputRange: [0, 1], - outputRange: ['0deg', '360deg'], - }), - [spin], - ); + const animatedProgress = useSharedValue(0); + const rotation = useSharedValue(0); const { cx, cy, r, circumference } = useMemo(() => { const pad = strokeWidth / 2; @@ -67,18 +59,66 @@ export const CircularProgressIndicator = ({ ? undefined : Math.min(100, Math.max(0, progress)) / 100; + useEffect(() => { + if (fraction === undefined) { + animatedProgress.value = 0; + return; + } + + animatedProgress.value = withTiming(fraction, { + duration: PROGRESS_ANIMATION_DURATION_MS, + easing: Easing.out(Easing.cubic), + }); + }, [animatedProgress, fraction]); + + useEffect(() => { + if (fraction !== undefined) { + cancelAnimation(rotation); + rotation.value = 0; + return; + } + + rotation.value = withRepeat( + withTiming(360, { + duration: SPIN_DURATION_MS, + easing: Easing.linear, + }), + -1, + false, + ); + + return () => { + cancelAnimation(rotation); + }; + }, [fraction, rotation]); + + const animatedCircleProps = useAnimatedProps(() => ({ + strokeDashoffset: circumference * (1 - animatedProgress.value), + })); + + const animatedSpinStyle = useAnimatedStyle(() => ({ + transform: [{ rotate: `${rotation.value}deg` }], + })); + if (fraction !== undefined) { - const offset = circumference * (1 - fraction); return ( + + { const { FilePreview } = useComponentsContext(); const localId = (attachment as DefaultAttachmentData).localId; - const { isUploading, uploadProgress } = usePendingAttachmentUpload(localId); const defaultOnPress = () => openUrlSafely(attachment.asset_url); @@ -98,12 +96,11 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => { attachment={attachment} attachmentIconSize={attachmentIconSize} indicator={ - isUploading ? ( - - ) : undefined + } styles={stylesProp} /> diff --git a/package/src/components/Attachment/Gallery.tsx b/package/src/components/Attachment/Gallery.tsx index d6b5dd0982..716d2e325c 100644 --- a/package/src/components/Attachment/Gallery.tsx +++ b/package/src/components/Attachment/Gallery.tsx @@ -3,7 +3,6 @@ import { ImageErrorEvent, Pressable, StyleSheet, Text, View } from 'react-native import type { Attachment, LocalMessage } from 'stream-chat'; -import { AttachmentUploadIndicator } from './AttachmentUploadIndicator'; import { GalleryImage } from './GalleryImage'; import { buildGallery } from './utils/buildGallery/buildGallery'; @@ -37,7 +36,6 @@ import { import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useLoadingImage } from '../../hooks/useLoadingImage'; -import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload'; import { useStableCallback } from '../../hooks/useStableCallback'; import { isVideoPlayerAvailable } from '../../native'; import { primitives } from '../../theme'; @@ -333,7 +331,8 @@ const GalleryImageThumbnail = ({ borderRadius, thumbnail, }: Pick) => { - const { ImageLoadingFailedIndicator, ImageLoadingIndicator } = useComponentsContext(); + const { AttachmentUploadIndicator, ImageLoadingFailedIndicator, ImageLoadingIndicator } = + useComponentsContext(); const { isLoadingImage, isLoadingImageError, @@ -347,7 +346,6 @@ const GalleryImageThumbnail = ({ }, } = useTheme(); const styles = useStyles(); - const { isUploading, uploadProgress } = usePendingAttachmentUpload(thumbnail.localId); const onLoadStart = useStableCallback(() => { setLoadingImageError(false); @@ -379,11 +377,11 @@ const GalleryImageThumbnail = ({ uri={thumbnail.url} /> {isLoadingImage ? : null} - {isUploading ? ( - - - - ) : null} + )} @@ -606,11 +604,6 @@ const useStyles = () => { top: 0, overflow: 'hidden', }, - uploadProgressOnImage: { - bottom: primitives.spacingXxs, - left: primitives.spacingXxs, - position: 'absolute', - }, }); }, [semantics, isMyMessage]); }; diff --git a/package/src/components/Attachment/MediaUploadProgressOverlay.tsx b/package/src/components/Attachment/MediaUploadProgressOverlay.tsx new file mode 100644 index 0000000000..f36a89b57f --- /dev/null +++ b/package/src/components/Attachment/MediaUploadProgressOverlay.tsx @@ -0,0 +1,77 @@ +import React, { useMemo } from 'react'; +import { ActivityIndicator, StyleSheet, View } from 'react-native'; + +import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext'; +import { useTheme } from '../../contexts/themeContext/ThemeContext'; + +export type MediaUploadProgressOverlayProps = { + progress?: number; + size?: number; + strokeWidth?: number; + testID?: string; +}; + +/** + * Full-cover upload overlay for image and video thumbnails. + */ +export const MediaUploadProgressOverlay = ({ + progress, + size = 18, + strokeWidth = 3, + testID, +}: MediaUploadProgressOverlayProps) => { + const styles = useStyles(); + const { CircularProgressIndicator } = useComponentsContext(); + const { + theme: { + messageItemView: { attachmentUploadIndicator }, + semantics, + }, + } = useTheme(); + + return ( + + {typeof progress === 'number' ? ( + + ) : ( + + )} + + ); +}; + +const useStyles = () => { + const { + theme: { semantics }, + } = useTheme(); + return useMemo( + () => + StyleSheet.create({ + indicatorContainer: { + alignItems: 'center', + justifyContent: 'center', + backgroundColor: semantics.backgroundCoreOverlayLight, + }, + }), + [semantics], + ); +}; diff --git a/package/src/components/Attachment/VideoThumbnail.tsx b/package/src/components/Attachment/VideoThumbnail.tsx index 1037b3fdb5..8e30036bbb 100644 --- a/package/src/components/Attachment/VideoThumbnail.tsx +++ b/package/src/components/Attachment/VideoThumbnail.tsx @@ -1,21 +1,11 @@ import React from 'react'; -import { ImageBackground, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; - -import { AttachmentUploadIndicator } from './AttachmentUploadIndicator'; +import { ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; +import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { usePendingAttachmentUpload } from '../../hooks/usePendingAttachmentUpload'; -import { primitives } from '../../theme'; import { VideoPlayIndicator } from '../ui/VideoPlayIndicator'; const styles = StyleSheet.create({ - uploadProgressContainer: { - alignItems: 'flex-start', - bottom: primitives.spacingXxs, - justifyContent: 'flex-start', - left: primitives.spacingXxs, - position: 'absolute', - }, container: { alignItems: 'center', justifyContent: 'center', @@ -42,22 +32,18 @@ export const VideoThumbnail = (props: VideoThumbnailProps) => { }, }, } = useTheme(); + const { AttachmentUploadIndicator, ImageComponent } = useComponentsContext(); const { imageStyle, localId, style, thumb_url } = props; - const { isUploading, uploadProgress } = usePendingAttachmentUpload(localId); return ( - + + - {isUploading ? ( - - - - ) : null} - + + ); }; diff --git a/package/src/components/Attachment/__tests__/Attachment.test.tsx b/package/src/components/Attachment/__tests__/Attachment.test.tsx index 9af88ccced..ba8869acac 100644 --- a/package/src/components/Attachment/__tests__/Attachment.test.tsx +++ b/package/src/components/Attachment/__tests__/Attachment.test.tsx @@ -1,8 +1,12 @@ import React, { ComponentProps } from 'react'; +import { StyleSheet, View } from 'react-native'; + +import type { ReactTestInstance } from 'react-test-renderer'; import { render, waitFor } from '@testing-library/react-native'; import { v4 as uuidv4 } from 'uuid'; +import { AudioPlayerProvider } from '../../../contexts/audioPlayerContext/AudioPlayerContext'; import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext'; import { MessageProvider } from '../../../contexts/messageContext/MessageContext'; import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext'; @@ -21,10 +25,21 @@ import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator'; import { Attachment } from '../Attachment'; import { FilePreview as FilePreviewDefault } from '../FilePreview'; -jest.mock('../../../native.ts', () => ({ - isVideoPlayerAvailable: jest.fn(() => false), - isSoundPackageAvailable: jest.fn(() => false), -})); +jest.mock('../../../native.ts', () => { + const { View } = require('react-native'); + + return { + NativeHandlers: { + SDK: 'stream-chat-react-native', + Sound: { + initializeSound: jest.fn(() => null), + Player: View, + }, + }, + isVideoPlayerAvailable: jest.fn(() => false), + isSoundPackageAvailable: jest.fn(() => false), + }; +}); jest.mock('../../../hooks/usePendingAttachmentUpload', () => ({ usePendingAttachmentUpload: jest.fn(() => ({ @@ -37,21 +52,32 @@ const getAttachmentComponent = (props: ComponentProps) => { const message = generateMessage(); return ( - - - - - + + + + + + + ); }; +const getWaveformBarCount = (root: ReactTestInstance) => + root.findAllByType(View).filter((node: ReactTestInstance) => { + const flattenedStyle = StyleSheet.flatten(node.props.style); + return flattenedStyle?.width === 2 && typeof flattenedStyle?.height === 'number'; + }).length; + describe('Attachment', () => { it('should render File component for "audio" type attachment', async () => { const attachment = generateAudioAttachment(); @@ -80,6 +106,22 @@ describe('Attachment', () => { }); }); + it('should render waveform for playable audio attachments without an active upload', async () => { + const { isSoundPackageAvailable } = require('../../../native'); + isSoundPackageAvailable.mockReturnValue(true); + const attachment = generateAudioAttachment({ + duration: 10, + waveform_data: [0.2, 0.6, 0.4], + }); + const { getByLabelText, root } = render(getAttachmentComponent({ attachment })); + + await waitFor(() => { + expect(getByLabelText('audio-attachment-preview')).toBeTruthy(); + expect(getWaveformBarCount(root)).toBeGreaterThan(0); + }); + isSoundPackageAvailable.mockReturnValue(false); + }); + it('should render UrlPreview component if attachment has title_link or og_scrape_url', async () => { const attachment = generateImageAttachment({ og_scrape_url: uuidv4(), diff --git a/package/src/components/Attachment/__tests__/Giphy.test.tsx b/package/src/components/Attachment/__tests__/Giphy.test.tsx index 24682b04a5..fc4b14736b 100644 --- a/package/src/components/Attachment/__tests__/Giphy.test.tsx +++ b/package/src/components/Attachment/__tests__/Giphy.test.tsx @@ -50,12 +50,16 @@ describe('Giphy', () => { return ( - + diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx index e3b2e592a2..23f27fc2fb 100644 --- a/package/src/components/Channel/Channel.tsx +++ b/package/src/components/Channel/Channel.tsx @@ -1082,7 +1082,21 @@ const ChannelWithContext = (props: PropsWithChildren) = fileForUpload = { ...originalFile, name: filename, uri: compressedUri }; } - const response = await client.uploadManager.upload({ + const response = await ( + client as typeof client & { + uploadManager: { + upload(args: { + channelCid: string; + file: { + name?: string; + type?: string; + uri: string; + }; + id: string; + }): Promise<{ file: string; thumb_url?: string }>; + }; + } + ).uploadManager.upload({ channelCid: channel.cid, file: fileForUpload, id: localId, diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx index 1648abbbd2..89df8a737e 100644 --- a/package/src/components/Chat/Chat.tsx +++ b/package/src/components/Chat/Chat.tsx @@ -26,6 +26,7 @@ import { NativeHandlers } from '../../native'; import { OfflineDB } from '../../store/OfflineDB'; import type { Streami18n } from '../../utils/i18n/Streami18n'; +import { installNativeMultipartAdapter } from '../../utils/installNativeMultipartAdapter'; import { version } from '../../version.json'; init(); @@ -43,6 +44,16 @@ export type ChatProps = Pick & * Enables offline storage and loading for chat data. */ enableOfflineSupport?: boolean; + /** + * When true, multipart uploads use the SDK's native upload adapter when available. + * When false, uploads stay on the default axios adapter. + * + * This only controls whether the native adapter gets installed by this Chat instance. + * It does not uninstall an adapter that was already installed on the client. + * + * @default true + */ + useNativeMultipartUpload?: boolean; /** * Instance of Streami18n class should be provided to Chat component to enable internationalization. * @@ -141,6 +152,7 @@ const ChatWithContext = (props: PropsWithChildren) => { i18nInstance, isMessageAIGenerated, style, + useNativeMultipartUpload = false, } = props; const { ChatLoadingIndicator } = useComponentsContext(); @@ -241,6 +253,14 @@ const ChatWithContext = (props: PropsWithChildren) => { }; }, [client]); + useEffect(() => { + if (!useNativeMultipartUpload) { + return; + } + + installNativeMultipartAdapter(client); + }, [client, useNativeMultipartUpload]); + const initialisedDatabase = !!offlineDbInitialized && userID === offlineDbUserId; const appSettings = useAppSettings(client, isOnline, enableOfflineSupport, initialisedDatabase); diff --git a/package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx b/package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx index df959fc386..20d9216c28 100644 --- a/package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx +++ b/package/src/components/MessageInput/__tests__/AttachmentUploadPreviewList.test.tsx @@ -1,5 +1,9 @@ import React, { ComponentProps } from 'react'; +import { ActivityIndicator } from 'react-native'; + +import type { ReactTestInstance } from 'react-test-renderer'; + import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native'; import type { Attachment, Channel as ChannelType, LocalAttachment, StreamChat } from 'stream-chat'; @@ -35,6 +39,7 @@ jest.mock('../../../native.ts', () => { isDocumentPickerAvailable: jest.fn(() => true), isImageMediaLibraryAvailable: jest.fn(() => true), isImagePickerAvailable: jest.fn(() => true), + isNativeMultipartUploadAvailable: jest.fn(() => false), isSoundPackageAvailable: jest.fn(() => false), NativeHandlers: { Sound: { @@ -64,6 +69,28 @@ const renderComponent = ({ ); }; +type PendingUploadRecord = { + id: string; + uploadProgress?: number; +}; + +const setPendingUploads = (client: StreamChat, uploads: PendingUploadRecord[]) => { + act(() => { + client.uploadManager.state.partialNext({ + uploads: Object.fromEntries( + uploads.map(({ id, uploadProgress }) => [id, { id, uploadProgress }]), + ), + }); + }); +}; + +const countActivityIndicators = (nodes: ReactTestInstance[]) => + nodes.reduce( + (count: number, node: ReactTestInstance) => + count + node.findAllByType(ActivityIndicator).length, + 0, + ); + describe('AttachmentUploadPreviewList', () => { let client: StreamChat; let channel: ChannelType; @@ -78,6 +105,7 @@ describe('AttachmentUploadPreviewList', () => { jest.clearAllMocks(); cleanup(); act(() => { + client?.uploadManager?.reset(); channel.messageComposer.attachmentManager.initState(); }); }); @@ -121,7 +149,11 @@ describe('AttachmentUploadPreviewList', () => { it('should render FileAttachmentUploadPreview when the sound package is unavailable', async () => { const attachments = [ generateAudioAttachment({ + asset_url: undefined, localMetadata: { + file: { + uri: 'file://audio-attachment.mp3', + }, id: 'audio-attachment', uploadState: FileState.UPLOADING, }, @@ -133,14 +165,15 @@ describe('AttachmentUploadPreviewList', () => { act(() => { channel.messageComposer.attachmentManager.upsertAttachments(attachments); }); + setPendingUploads(client, [{ id: 'audio-attachment' }]); renderComponent({ channel, client, props }); - const { queryAllByTestId } = screen; + const { getAllByTestId, queryAllByTestId } = screen; await waitFor(() => { expect(queryAllByTestId('file-attachment-upload-preview')).toHaveLength(1); - expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1); + expect(countActivityIndicators(getAllByTestId('file-attachment-upload-preview'))).toBe(1); }); }); @@ -148,13 +181,20 @@ describe('AttachmentUploadPreviewList', () => { it('should render FileAttachmentUploadPreview with all uploading files', async () => { const attachments = [ generateFileAttachment({ + asset_url: undefined, localMetadata: { + file: { + uri: 'file://file-attachment.xls', + }, id: 'file-attachment', uploadState: FileState.UPLOADING, }, }), generateVideoAttachment({ localMetadata: { + file: { + uri: 'file://video-attachment.mp4', + }, id: 'video-attachment', uploadState: FileState.UPLOADING, }, @@ -165,6 +205,7 @@ describe('AttachmentUploadPreviewList', () => { act(() => { channel.messageComposer.attachmentManager.upsertAttachments(attachments); }); + setPendingUploads(client, [{ id: 'file-attachment' }, { id: 'video-attachment' }]); renderComponent({ channel, client, props }); @@ -172,7 +213,7 @@ describe('AttachmentUploadPreviewList', () => { await waitFor(() => { expect(queryAllByTestId('file-attachment-upload-preview')).toHaveLength(2); - expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(2); + expect(countActivityIndicators(getAllByTestId('file-attachment-upload-preview'))).toBe(2); }); act(() => { @@ -303,6 +344,7 @@ describe('AttachmentUploadPreviewList', () => { generateImageAttachment({ localMetadata: { id: 'image-attachment', + previewUri: 'file://image-attachment.png', uploadState: FileState.UPLOADING, }, }), @@ -312,6 +354,7 @@ describe('AttachmentUploadPreviewList', () => { await act(() => { channel.messageComposer.attachmentManager.upsertAttachments(attachments ?? []); }); + setPendingUploads(client, [{ id: 'image-attachment' }]); renderComponent({ channel, client, props }); @@ -319,7 +362,7 @@ describe('AttachmentUploadPreviewList', () => { await waitFor(() => { expect(queryAllByTestId('image-attachment-upload-preview')).toHaveLength(1); - expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1); + expect(countActivityIndicators(getAllByTestId('image-attachment-upload-preview'))).toBe(1); }); await act(() => { @@ -455,6 +498,7 @@ describe('AttachmentUploadPreviewList', () => { generateImageAttachment({ localMetadata: { id: 'image-attachment-1', + previewUri: 'file://image-attachment-1.png', uploadState: FileState.UPLOADING, }, }), @@ -482,10 +526,11 @@ describe('AttachmentUploadPreviewList', () => { await act(() => { channel.messageComposer.attachmentManager.upsertAttachments(attachments ?? []); }); + setPendingUploads(client, [{ id: 'image-attachment-1' }]); renderComponent({ channel, client, props }); - const { queryAllByTestId } = screen; + const { getAllByTestId, queryAllByTestId } = screen; await waitFor(() => { const imageAttachments = queryAllByTestId('image-attachment-upload-preview-image'); @@ -496,7 +541,7 @@ describe('AttachmentUploadPreviewList', () => { await waitFor(() => { expect(queryAllByTestId('image-attachment-upload-preview')).toHaveLength(4); - expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1); + expect(countActivityIndicators(getAllByTestId('image-attachment-upload-preview'))).toBe(1); expect(queryAllByTestId('retry-upload-progress-indicator')).toHaveLength(1); expect(queryAllByTestId('inline-not-supported-indicator')).toHaveLength(1); }); diff --git a/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.tsx b/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.tsx index 45569459a2..59fc47dc79 100644 --- a/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.tsx +++ b/package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreview.test.tsx @@ -1,5 +1,9 @@ import React, { ComponentProps } from 'react'; +import { ActivityIndicator } from 'react-native'; + +import type { ReactTestInstance } from 'react-test-renderer'; + import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native'; import type { Attachment, Channel as ChannelType, LocalAttachment, StreamChat } from 'stream-chat'; @@ -24,6 +28,7 @@ jest.mock('../../../native.ts', () => { isDocumentPickerAvailable: jest.fn(() => true), isImageMediaLibraryAvailable: jest.fn(() => true), isImagePickerAvailable: jest.fn(() => true), + isNativeMultipartUploadAvailable: jest.fn(() => false), isSoundPackageAvailable: jest.fn(() => true), NativeHandlers: { Sound: { @@ -53,6 +58,28 @@ const renderComponent = ({ ); }; +type PendingUploadRecord = { + id: string; + uploadProgress?: number; +}; + +const setPendingUploads = (client: StreamChat, uploads: PendingUploadRecord[]) => { + act(() => { + client.uploadManager.state.partialNext({ + uploads: Object.fromEntries( + uploads.map(({ id, uploadProgress }) => [id, { id, uploadProgress }]), + ), + }); + }); +}; + +const countActivityIndicators = (nodes: ReactTestInstance[]) => + nodes.reduce( + (count: number, node: ReactTestInstance) => + count + node.findAllByType(ActivityIndicator).length, + 0, + ); + describe('AudioAttachmentUploadPreview render', () => { let client: StreamChat; let channel: ChannelType; @@ -67,6 +94,7 @@ describe('AudioAttachmentUploadPreview render', () => { jest.clearAllMocks(); cleanup(); act(() => { + client?.uploadManager?.reset(); channel.messageComposer.attachmentManager.initState(); }); }); @@ -74,6 +102,7 @@ describe('AudioAttachmentUploadPreview render', () => { it('should render AudioAttachmentUploadPreview with all uploading files', async () => { const attachments = [ generateAudioAttachment({ + asset_url: undefined, localMetadata: { file: { uri: 'file://audio-attachment.mp3', @@ -88,6 +117,7 @@ describe('AudioAttachmentUploadPreview render', () => { act(() => { channel.messageComposer.attachmentManager.upsertAttachments(attachments); }); + setPendingUploads(client, [{ id: 'audio-attachment' }]); renderComponent({ channel, client, props }); @@ -95,7 +125,7 @@ describe('AudioAttachmentUploadPreview render', () => { await waitFor(() => { expect(queryAllByTestId('audio-attachment-upload-preview')).toHaveLength(1); - expect(queryAllByTestId('upload-progress-indicator')).toHaveLength(1); + expect(countActivityIndicators(getAllByTestId('audio-attachment-upload-preview'))).toBe(1); }); act(() => { diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx index 9f54a3a5ca..c42939150a 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx @@ -1,8 +1,10 @@ import React, { useMemo } from 'react'; -import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native'; +import { Pressable, StyleSheet, Text, View } from 'react-native'; import { LocalAttachmentUploadMetadata } from 'stream-chat'; +import { AttachmentFileUploadProgressIndicator } from '../../../../components/Attachment/AttachmentFileUploadProgressIndicator'; +import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill'; @@ -10,24 +12,30 @@ import { Warning } from '../../../../icons/exclamation-triangle-fill'; import { primitives } from '../../../../theme'; import { RetryBadge } from '../../../ui/Badge/RetryBadge'; -export const FileUploadInProgressIndicator = () => { +export type UploadInProgressIndicatorProps = { + localId?: string; + sourceUrl?: string; + totalBytes?: number | string | null; +}; + +export const FileUploadInProgressIndicator = ({ + localId, + sourceUrl, + totalBytes, +}: UploadInProgressIndicatorProps = {}) => { const { theme: { - semantics, messageComposer: { fileUploadInProgressIndicator }, }, } = useTheme(); return ( - - - + ); }; @@ -108,24 +116,13 @@ export const FileUploadNotSupportedIndicator = ({ ); }; -export const ImageUploadInProgressIndicator = () => { - const { - theme: { - semantics, - messageComposer: { imageUploadInProgressIndicator }, - }, - } = useTheme(); - const styles = useImageUploadInProgressIndicatorStyles(); - return ( - - - - ); +export const ImageUploadInProgressIndicator = ({ + localId, + sourceUrl, +}: UploadInProgressIndicatorProps = {}) => { + const { AttachmentUploadIndicator } = useComponentsContext(); + + return ; }; export type ImageUploadRetryIndicatorProps = { @@ -158,16 +155,6 @@ export const ImageUploadNotSupportedIndicator = () => { ); }; -const useImageUploadInProgressIndicatorStyles = () => { - return StyleSheet.create({ - container: { - position: 'absolute', - left: primitives.spacingXxs, - bottom: primitives.spacingXxs, - }, - }); -}; - const useImageUploadNotSupportedIndicatorStyles = () => { const { theme: { semantics }, @@ -235,9 +222,8 @@ const useFileUploadNotSupportedStyles = () => { }; const styles = StyleSheet.create({ - activityIndicatorContainer: {}, - activityIndicator: { - alignItems: 'flex-start', - justifyContent: 'flex-start', + activityIndicatorContainer: { + alignItems: 'center', + justifyContent: 'center', }, }); diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx index fd81d1eaa3..1db5d7a83a 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx @@ -13,8 +13,8 @@ import { import { AudioAttachment } from '../../../../components/Attachment/Audio'; import { useTheme } from '../../../../contexts'; -import { useChatContext } from '../../../../contexts/chatContext/ChatContext'; import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer'; +import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext'; import { primitives } from '../../../../theme'; import { UploadAttachmentPreviewProps } from '../../../../types/types'; import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../../../utils/utils'; @@ -30,10 +30,10 @@ export const AudioAttachmentUploadPreview = ({ removeAttachments, }: AudioAttachmentUploadPreviewProps) => { const styles = useStyles(); - const { enableOfflineSupport } = useChatContext(); + const { allowSendBeforeAttachmentsUpload } = useMessageInputContext(); const indicatorType = getIndicatorTypeForFileState( attachment.localMetadata.uploadState, - enableOfflineSupport, + !!allowSendBeforeAttachmentsUpload, ); const messageComposer = useMessageComposer(); const isDraft = messageComposer.draftId; @@ -63,7 +63,13 @@ export const AudioAttachmentUploadPreview = ({ const renderIndicator = useMemo(() => { if (indicatorType === ProgressIndicatorTypes.IN_PROGRESS) { - return ; + return ( + + ); } if (indicatorType === ProgressIndicatorTypes.RETRY) { return ; @@ -72,7 +78,7 @@ export const AudioAttachmentUploadPreview = ({ return ; } return null; - }, [attachment.localMetadata, indicatorType, onRetryHandler]); + }, [assetUrl, attachment.file_size, attachment.localMetadata, indicatorType, onRetryHandler]); return ( diff --git a/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx index 86f3a0442c..11c4137d6e 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview.tsx @@ -2,13 +2,18 @@ import React, { useCallback, useMemo } from 'react'; import { StyleSheet, View } from 'react-native'; -import { LocalAudioAttachment, LocalFileAttachment, LocalVideoAttachment } from 'stream-chat'; +import { + FileReference, + LocalAudioAttachment, + LocalFileAttachment, + LocalVideoAttachment, +} from 'stream-chat'; import { AttachmentRemoveControl } from './AttachmentRemoveControl'; import { FilePreview } from '../../../../components/Attachment/FilePreview'; -import { useChatContext } from '../../../../contexts/chatContext/ChatContext'; import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext'; +import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { primitives } from '../../../../theme'; import { UploadAttachmentPreviewProps } from '../../../../types/types'; @@ -27,15 +32,17 @@ export const FileAttachmentUploadPreview = ({ removeAttachments, }: FileAttachmentUploadPreviewProps) => { const styles = useStyles(); + const sourceUrl = + attachment.asset_url ?? (attachment.localMetadata.file as FileReference | undefined)?.uri; const { FileUploadInProgressIndicator, FileUploadRetryIndicator, FileUploadNotSupportedIndicator, } = useComponentsContext(); - const { enableOfflineSupport } = useChatContext(); + const { allowSendBeforeAttachmentsUpload } = useMessageInputContext(); const indicatorType = getIndicatorTypeForFileState( attachment.localMetadata.uploadState, - enableOfflineSupport, + !!allowSendBeforeAttachmentsUpload, ); const { @@ -56,7 +63,13 @@ export const FileAttachmentUploadPreview = ({ const renderIndicator = useMemo(() => { if (indicatorType === ProgressIndicatorTypes.IN_PROGRESS) { - return ; + return ( + + ); } if (indicatorType === ProgressIndicatorTypes.RETRY) { return ; @@ -70,8 +83,10 @@ export const FileAttachmentUploadPreview = ({ FileUploadNotSupportedIndicator, FileUploadRetryIndicator, attachment.localMetadata, + attachment.file_size, indicatorType, onRetryHandler, + sourceUrl, ]); return ( diff --git a/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx index ff47d481fe..4fd9148217 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx @@ -6,8 +6,8 @@ import { LocalImageAttachment } from 'stream-chat'; import { AttachmentRemoveControl } from './AttachmentRemoveControl'; -import { useChatContext } from '../../../../contexts/chatContext/ChatContext'; import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext'; +import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { primitives } from '../../../../theme'; import { UploadAttachmentPreviewProps } from '../../../../types/types'; @@ -24,15 +24,20 @@ export const ImageAttachmentUploadPreview = ({ removeAttachments, }: ImageAttachmentUploadPreviewProps) => { const [loading, setLoading] = useState(true); - const { enableOfflineSupport } = useChatContext(); + const { allowSendBeforeAttachmentsUpload } = useMessageInputContext(); const { + ImageLoadingIndicator, ImageUploadInProgressIndicator, ImageUploadRetryIndicator, ImageUploadNotSupportedIndicator, } = useComponentsContext(); - const indicatorType = loading - ? ProgressIndicatorTypes.IN_PROGRESS - : getIndicatorTypeForFileState(attachment.localMetadata.uploadState, enableOfflineSupport); + const indicatorType = getIndicatorTypeForFileState( + attachment.localMetadata.uploadState, + !!allowSendBeforeAttachmentsUpload, + ); + const previewUri = attachment.localMetadata.previewUri ?? attachment.image_url; + const shouldShowImageLoadingIndicator = + loading && indicatorType !== ProgressIndicatorTypes.IN_PROGRESS; const { theme: { @@ -65,15 +70,21 @@ export const ImageAttachmentUploadPreview = ({ - {indicatorType === ProgressIndicatorTypes.IN_PROGRESS && } - {indicatorType === ProgressIndicatorTypes.RETRY && ( + {shouldShowImageLoadingIndicator ? : null} + {indicatorType === ProgressIndicatorTypes.IN_PROGRESS && ( + + )} + {!loading && indicatorType === ProgressIndicatorTypes.RETRY && ( )} - {indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED && ( + {!loading && indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED && ( )} diff --git a/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx b/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx index ebad74359f..1fb06388a4 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx @@ -7,6 +7,7 @@ import { LocalImageAttachment, LocalVideoAttachment } from 'stream-chat'; import { FileAttachmentUploadPreview } from './FileAttachmentUploadPreview'; import { ImageAttachmentUploadPreview } from './ImageAttachmentUploadPreview'; +import { useMessageInputContext } from '../../../../contexts'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { Recorder } from '../../../../icons'; import { primitives } from '../../../../theme'; @@ -22,6 +23,9 @@ export const VideoAttachmentUploadPreview = ({ removeAttachments, }: VideoAttachmentUploadPreviewProps) => { const previewUri = attachment.thumb_url ?? attachment.localMetadata.previewUri; + const { allowSendBeforeAttachmentsUpload } = useMessageInputContext(); + const shouldShowMetadataPill = + allowSendBeforeAttachmentsUpload || attachment.localMetadata.uploadState !== 'uploading'; return previewUri ? ( <> @@ -38,7 +42,9 @@ export const VideoAttachmentUploadPreview = ({ handleRetry={handleRetry} removeAttachments={removeAttachments} /> - + {shouldShowMetadataPill ? ( + + ) : null} ) : ( = { const components = { Attachment, + AttachmentUploadIndicator, AttachButton, AttachmentPickerContent, AttachmentPickerSelectionBar, @@ -176,6 +180,7 @@ const components = { AutoCompleteSuggestionList, ChannelDetailsBottomSheet, CooldownTimer, + CircularProgressIndicator, DateHeader, EmptyStateIndicator, FileAttachment, @@ -206,6 +211,7 @@ const components = { LoadingErrorIndicator, ChannelListLoadingIndicator, MessageListLoadingIndicator: LoadingIndicator, + MediaUploadProgressOverlay, Message, MessageActionList, MessageActionListItem, diff --git a/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts b/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts index 5343dad8e0..6b0b681ad7 100644 --- a/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts +++ b/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts @@ -5,6 +5,7 @@ import type { MessageInputContextValue } from '../MessageInputContext'; export const useCreateMessageInputContext = ({ additionalTextInputProps, + allowSendBeforeAttachmentsUpload, asyncMessagesLockDistance, asyncMessagesMinimumPressDuration, asyncMessagesSlideToCancelDistance, @@ -47,6 +48,7 @@ export const useCreateMessageInputContext = ({ const messageInputContext: MessageInputContextValue = useMemo( () => ({ additionalTextInputProps, + allowSendBeforeAttachmentsUpload, asyncMessagesLockDistance, asyncMessagesMinimumPressDuration, asyncMessagesSlideToCancelDistance, @@ -84,7 +86,7 @@ export const useCreateMessageInputContext = ({ stopVoiceRecording, }), // eslint-disable-next-line react-hooks/exhaustive-deps - [threadId, showPollCreationDialog], + [threadId, showPollCreationDialog, allowSendBeforeAttachmentsUpload], ); return messageInputContext; diff --git a/package/src/contexts/messageInputContext/hooks/useMessageComposerHasSendableData.ts b/package/src/contexts/messageInputContext/hooks/useMessageComposerHasSendableData.ts index e3017cc62b..e4de4689d7 100644 --- a/package/src/contexts/messageInputContext/hooks/useMessageComposerHasSendableData.ts +++ b/package/src/contexts/messageInputContext/hooks/useMessageComposerHasSendableData.ts @@ -3,11 +3,15 @@ import type { EditingAuditState } from 'stream-chat'; import { useMessageComposer } from './useMessageComposer'; import { useStateStore } from '../../../hooks/useStateStore'; +import { useMessageInputContext } from '../MessageInputContext'; const editingAuditStateStateSelector = (state: EditingAuditState) => state; export const useMessageComposerHasSendableData = () => { + const { allowSendBeforeAttachmentsUpload } = useMessageInputContext(); const messageComposer = useMessageComposer(); useStateStore(messageComposer.editingAuditState, editingAuditStateStateSelector); - return messageComposer.hasSendableData; + return allowSendBeforeAttachmentsUpload + ? !messageComposer.contentIsEmpty + : messageComposer.hasSendableData; }; diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts index d722ea2a81..8eee45fdf3 100644 --- a/package/src/contexts/themeContext/utils/theme.ts +++ b/package/src/contexts/themeContext/utils/theme.ts @@ -677,6 +677,11 @@ export type Theme = { attachmentContainer: ViewStyle; container: ViewStyle; }; + attachmentUploadIndicator: { + indicator: ViewStyle; + overlay: ViewStyle; + overlayContent: ViewStyle; + }; gallery: { galleryContainer: ViewStyle; galleryItemColumn: ViewStyle; @@ -1602,6 +1607,11 @@ export const defaultTheme: Theme = { attachmentContainer: {}, container: {}, }, + attachmentUploadIndicator: { + indicator: {}, + overlay: {}, + overlayContent: {}, + }, gallery: { galleryContainer: {}, galleryItemColumn: {}, diff --git a/package/src/hooks/__tests__/usePendingAttachmentUpload.test.tsx b/package/src/hooks/__tests__/usePendingAttachmentUpload.test.tsx new file mode 100644 index 0000000000..6af644decc --- /dev/null +++ b/package/src/hooks/__tests__/usePendingAttachmentUpload.test.tsx @@ -0,0 +1,106 @@ +import React, { PropsWithChildren } from 'react'; + +import { act, renderHook } from '@testing-library/react-native'; +import { StateStore } from 'stream-chat'; + +import { ChatProvider } from '../../contexts/chatContext/ChatContext'; +import { usePendingAttachmentUpload } from '../usePendingAttachmentUpload'; + +type UploadManagerState = { + uploads: Record< + string, + { + id: string; + uploadProgress?: number; + } + >; +}; + +const createWrapper = (state: StateStore) => { + const client = { + uploadManager: { + state, + }, + }; + + return ({ children }: PropsWithChildren) => ( + {children} + ); +}; + +describe('usePendingAttachmentUpload', () => { + beforeEach(() => { + jest.useFakeTimers(); + }); + + afterEach(() => { + jest.useRealTimers(); + }); + + it('briefly holds completed upload progress after a ready upload record disappears', () => { + const state = new StateStore({ uploads: {} }); + const { result } = renderHook(() => usePendingAttachmentUpload('upload-id'), { + wrapper: createWrapper(state), + }); + + expect(result.current).toEqual({ + isUploading: false, + uploadProgress: undefined, + }); + + act(() => { + state.partialNext({ + uploads: { + 'upload-id': { id: 'upload-id', uploadProgress: 90 }, + }, + }); + }); + + expect(result.current).toEqual({ + isUploading: true, + uploadProgress: 90, + }); + + act(() => { + state.partialNext({ uploads: {} }); + }); + + expect(result.current).toEqual({ + isUploading: true, + uploadProgress: 100, + }); + + act(() => { + jest.advanceTimersByTime(350); + }); + + expect(result.current).toEqual({ + isUploading: false, + uploadProgress: undefined, + }); + }); + + it('does not hold completed progress when an upload record disappears before reaching the ready threshold', () => { + const state = new StateStore({ uploads: {} }); + const { result } = renderHook(() => usePendingAttachmentUpload('upload-id'), { + wrapper: createWrapper(state), + }); + + act(() => { + state.partialNext({ + uploads: { + 'upload-id': { id: 'upload-id', uploadProgress: 50 }, + }, + }); + }); + + act(() => { + state.partialNext({ uploads: {} }); + }); + + expect(result.current).toEqual({ + isUploading: false, + uploadProgress: undefined, + }); + }); +}); diff --git a/package/src/hooks/usePendingAttachmentUpload.ts b/package/src/hooks/usePendingAttachmentUpload.ts index efcd145885..048e8e0a19 100644 --- a/package/src/hooks/usePendingAttachmentUpload.ts +++ b/package/src/hooks/usePendingAttachmentUpload.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import type { UploadManagerState } from 'stream-chat'; @@ -21,11 +21,28 @@ const idle: PendingAttachmentUpload = { uploadProgress: undefined, }; +const completed: PendingAttachmentUpload = { + isUploading: true, + uploadProgress: 100, +}; + +const COMPLETION_HOLD_MS = 350; +const COMPLETION_READY_PROGRESS = 90; + +const now = () => Date.now(); + /** * Subscribes to `client.uploadManager` for the pending attachment identified by `localId`. */ export function usePendingAttachmentUpload(localId: string | undefined): PendingAttachmentUpload { const { client } = useChatContext(); + const [, setRenderTick] = useState(0); + const completedHoldUntilRef = useRef(0); + const holdTimeoutRef = useRef | undefined>(undefined); + const lastUploadProgressRef = useRef(undefined); + const previousLocalIdRef = useRef(localId); + const wasUploadingRef = useRef(false); + const selector = useCallback( (state: UploadManagerState): PendingAttachmentUpload => { if (!localId) { @@ -44,6 +61,71 @@ export function usePendingAttachmentUpload(localId: string | undefined): Pending ); const result = useStateStore(localId ? client.uploadManager.state : undefined, selector); + const isUploading = result?.isUploading ?? false; + const uploadProgress = result?.uploadProgress; + + if (previousLocalIdRef.current !== localId) { + previousLocalIdRef.current = localId; + completedHoldUntilRef.current = 0; + wasUploadingRef.current = false; + lastUploadProgressRef.current = undefined; + } + + let pendingAttachmentUpload = result ?? idle; + if (localId && isUploading) { + completedHoldUntilRef.current = 0; + wasUploadingRef.current = true; + if (typeof uploadProgress === 'number') { + lastUploadProgressRef.current = uploadProgress; + } + } else if (localId && completedHoldUntilRef.current > now()) { + pendingAttachmentUpload = completed; + } else if (localId) { + const shouldStartCompletionHold = + wasUploadingRef.current && + typeof lastUploadProgressRef.current === 'number' && + lastUploadProgressRef.current >= COMPLETION_READY_PROGRESS; + + wasUploadingRef.current = false; + lastUploadProgressRef.current = undefined; + + if (shouldStartCompletionHold) { + completedHoldUntilRef.current = now() + COMPLETION_HOLD_MS; + pendingAttachmentUpload = completed; + } else { + completedHoldUntilRef.current = 0; + } + } else { + completedHoldUntilRef.current = 0; + wasUploadingRef.current = false; + lastUploadProgressRef.current = undefined; + } + + useEffect(() => { + if (holdTimeoutRef.current) { + clearTimeout(holdTimeoutRef.current); + holdTimeoutRef.current = undefined; + } + + const holdForMs = completedHoldUntilRef.current - now(); + if (holdForMs <= 0) { + return; + } + + holdTimeoutRef.current = setTimeout(() => { + holdTimeoutRef.current = undefined; + setRenderTick((tick) => tick + 1); + }, holdForMs); + }, [localId, pendingAttachmentUpload]); + + useEffect( + () => () => { + if (holdTimeoutRef.current) { + clearTimeout(holdTimeoutRef.current); + } + }, + [], + ); - return result ?? idle; + return pendingAttachmentUpload; } diff --git a/package/src/index.ts b/package/src/index.ts index 2d53b2f005..8a8eacfb28 100644 --- a/package/src/index.ts +++ b/package/src/index.ts @@ -18,6 +18,7 @@ export * from './utils/i18n/Streami18n'; export * from './utils/setupCommandUIMiddlewares'; export * from './utils/createGenerateVideoThumbnails'; export * from './utils/utils'; +export * from './nativeMultipartUpload'; export { default as enTranslations } from './i18n/en.json'; export { default as esTranslations } from './i18n/es.json'; diff --git a/package/src/native.ts b/package/src/native.ts index f151487703..783eee3e90 100644 --- a/package/src/native.ts +++ b/package/src/native.ts @@ -7,7 +7,27 @@ import { ViewStyle, } from 'react-native'; +import type { NativeMultipartUpload } from './nativeMultipartUpload'; import type { File } from './types/types'; + +export type { + NativeMultipartAbortSignal, + NativeMultipartCanceledError, + NativeMultipartUpload, + NativeMultipartUploadEventEmitter, + NativeMultipartUploadHeader, + NativeMultipartUploadNativeResponse, + NativeMultipartUploadPart, + NativeMultipartUploadProgressConfig, + NativeMultipartUploadProgressEvent, + NativeMultipartUploadRequest, + NativeMultipartUploadResult, + NativeMultipartUploader, + NativeMultipartUploaderModule, + NativeMultipartUploaderProgressConfig, + NativeMultipartUploaderRequest, +} from './nativeMultipartUpload'; + const fail = () => { throw Error( 'Native handler was not registered, you should import stream-chat-expo or stream-chat-react-native', @@ -308,6 +328,7 @@ type Handlers = { getLocalAssetUri?: GetLocalAssetUri; getPhotos?: GetPhotos; iOS14RefreshGallerySelection?: iOS14RefreshGallerySelection; + multipartUpload?: NativeMultipartUpload; oniOS14GalleryLibrarySelectionChange?: OniOS14LibrarySelectionChange; overrideAudioRecordingConfiguration?: ( audioRecordingConfiguration: AudioRecordingConfiguration, @@ -338,6 +359,7 @@ export const NativeHandlers: Pick< | 'getLocalAssetUri' | 'getPhotos' | 'iOS14RefreshGallerySelection' + | 'multipartUpload' | 'oniOS14GalleryLibrarySelectionChange' | 'pickDocument' | 'pickImage' @@ -355,6 +377,7 @@ export const NativeHandlers: Pick< getLocalAssetUri: fail, getPhotos: fail, iOS14RefreshGallerySelection: fail, + multipartUpload: fail, oniOS14GalleryLibrarySelectionChange: fail, pickDocument: fail, pickImage: fail, @@ -404,6 +427,10 @@ export const registerNativeHandlers = (handlers: Handlers) => { NativeHandlers.iOS14RefreshGallerySelection = handlers.iOS14RefreshGallerySelection; } + if (handlers.multipartUpload !== undefined) { + NativeHandlers.multipartUpload = handlers.multipartUpload; + } + if (handlers.oniOS14GalleryLibrarySelectionChange !== undefined) { NativeHandlers.oniOS14GalleryLibrarySelectionChange = handlers.oniOS14GalleryLibrarySelectionChange; @@ -469,3 +496,4 @@ export const isImageMediaLibraryAvailable = () => !!NativeHandlers.iOS14RefreshGallerySelection && !!NativeHandlers.oniOS14GalleryLibrarySelectionChange && !!NativeHandlers.getLocalAssetUri; +export const isNativeMultipartUploadAvailable = () => NativeHandlers.multipartUpload !== fail; diff --git a/package/src/nativeMultipartUpload.ts b/package/src/nativeMultipartUpload.ts new file mode 100644 index 0000000000..81164eaf20 --- /dev/null +++ b/package/src/nativeMultipartUpload.ts @@ -0,0 +1,384 @@ +import { NativeEventEmitter } from 'react-native'; + +const STREAM_MULTIPART_UPLOAD_PROGRESS_EVENT = 'streamMultipartUploadProgress'; +const CANCELED_ERROR_CODE = 'ERR_CANCELED'; + +export type NativeMultipartAbortSignal = { + aborted: boolean; + addEventListener?: (...args: unknown[]) => unknown; + onabort?: ((...args: unknown[]) => unknown) | null; + removeEventListener?: (...args: unknown[]) => unknown; +}; + +export type NativeMultipartUploadHeader = { + name: string; + value: string; +}; + +export type NativeMultipartUploadPart = + | { + fieldName: string; + kind: 'file'; + fileName: string; + mimeType?: string; + uri: string; + } + | { + fieldName: string; + kind: 'text'; + value: string; + }; + +export type NativeMultipartUploaderProgressConfig = { + count?: number; + intervalMs?: number; +}; + +export type NativeMultipartUploadProgressConfig = NativeMultipartUploaderProgressConfig & { + /** + * Maximum progress percentage reported while the native request body is still being sent. + * Completion is represented by the upload request resolving and the upload indicator being removed. + * + * @default 90 + */ + completionProgressCap?: number; +}; + +export type NativeMultipartUploadProgressEvent = { + loaded: number; + total?: number | null; + uploadId: string; +}; + +export type NativeMultipartUploadNativeResponse = { + body: string; + headers?: ReadonlyArray | null; + status: number; + statusText?: string | null; +}; + +export type NativeMultipartUploadResult = { + body: string; + headers?: Record; + status: number; + statusText?: string; +}; + +export type NativeMultipartUploadRequest = { + headers: Record; + method: string; + onProgress?: (progress: { loaded: number; total?: number }) => void; + parts: NativeMultipartUploadPart[]; + progress?: NativeMultipartUploadProgressConfig; + signal?: NativeMultipartAbortSignal; + timeoutMs?: number; + url: string; +}; + +export type NativeMultipartUploaderRequest = Omit & { + progress?: NativeMultipartUploaderProgressConfig; + uploadId: string; +}; + +export type NativeMultipartUpload = ( + request: NativeMultipartUploadRequest, +) => Promise | never; + +export type NativeMultipartUploader = ( + request: NativeMultipartUploaderRequest, +) => Promise; + +export type NativeMultipartUploaderModule = { + addListener(eventType: string): void; + cancelUpload(uploadId: string): Promise; + removeListeners(count: number): void; + uploadMultipart( + uploadId: string, + url: string, + method: string, + headers: ReadonlyArray, + parts: ReadonlyArray, + progress?: NativeMultipartUploaderProgressConfig, + timeoutMs?: number | null, + ): Promise; +}; + +export type NativeMultipartUploadEventEmitter = { + addListener( + eventType: string, + listener: (event: NativeMultipartUploadProgressEvent) => void, + ): { remove: () => void }; +}; + +export type NativeMultipartCanceledError = Error & { + __CANCEL__: true; + code: typeof CANCELED_ERROR_CODE; +}; + +type CreateNativeMultipartUploaderOptions = { + eventEmitter?: NativeMultipartUploadEventEmitter; +}; + +type CreateNativeMultipartUploadOptions = { + getLocalAssetUri?: ((uri: string) => Promise) | null; + uploadIdFactory?: () => string; + uploadMultipart?: NativeMultipartUploader; +}; + +const createDefaultUploadId = () => + `stream-upload-${Date.now()}-${Math.random().toString(16).slice(2)}`; + +const createCanceledError = (): NativeMultipartCanceledError => { + const error = new Error('Request aborted') as NativeMultipartCanceledError; + error.name = 'CanceledError'; + error.code = CANCELED_ERROR_CODE; + // eslint-disable-next-line no-underscore-dangle -- Axios marks cancellation with this legacy field, and callers still use axios.isCancel. + error.__CANCEL__ = true; + return error; +}; + +const toUploadHeaders = (headers: Record): NativeMultipartUploadHeader[] => + Object.entries(headers).map(([name, value]) => ({ name, value })); + +const fromUploadHeaders = ( + headers?: ReadonlyArray | null, +): Record | undefined => { + if (!headers?.length) { + return undefined; + } + + return headers.reduce>((acc, header) => { + acc[header.name] = header.value; + return acc; + }, {}); +}; + +const addAbortHandler = (signal: NativeMultipartAbortSignal | undefined, onAbort: () => void) => { + if (!signal) { + return () => undefined; + } + + let handled = false; + const handleAbort = () => { + if (handled) { + return; + } + + handled = true; + onAbort(); + }; + + if (typeof signal.addEventListener === 'function') { + signal.addEventListener('abort', handleAbort, { once: true }); + return () => { + signal.removeEventListener?.('abort', handleAbort); + }; + } + + const previousOnAbort = signal.onabort; + const chainedOnAbort = (...args: unknown[]) => { + previousOnAbort?.(...args); + handleAbort(); + }; + + signal.onabort = chainedOnAbort; + + return () => { + if (signal.onabort === chainedOnAbort) { + signal.onabort = previousOnAbort ?? null; + } + }; +}; + +const getNativeProgressConfig = ( + progress?: NativeMultipartUploadProgressConfig, +): NativeMultipartUploaderProgressConfig | undefined => { + if (!progress) { + return undefined; + } + + const nativeProgressConfig = { ...progress }; + delete nativeProgressConfig.completionProgressCap; + + return Object.keys(nativeProgressConfig).length ? nativeProgressConfig : undefined; +}; + +const isPhotoLibraryUri = (uri: string) => { + const normalizedUri = uri.toLowerCase(); + return normalizedUri.startsWith('ph://') || normalizedUri.startsWith('assets-library://'); +}; + +const sanitizeResolvedFileUri = (uri: string) => { + const normalizedUri = uri.startsWith('/') ? `file://${uri}` : uri; + + if (!normalizedUri.startsWith('file://')) { + return normalizedUri; + } + + return normalizedUri.split('#')[0].split('?')[0]; +}; + +const resolvePartUri = async ( + part: NativeMultipartUploadPart, + getLocalAssetUri: CreateNativeMultipartUploadOptions['getLocalAssetUri'], +): Promise => { + if ( + part.kind !== 'file' || + typeof getLocalAssetUri !== 'function' || + !isPhotoLibraryUri(part.uri) + ) { + return part; + } + + try { + const resolvedUri = await getLocalAssetUri(part.uri); + + return { + ...part, + uri: resolvedUri ? sanitizeResolvedFileUri(resolvedUri) : part.uri, + }; + } catch { + return part; + } +}; + +export const createNativeMultipartUploader = ( + nativeModule: NativeMultipartUploaderModule | null | undefined, + options: CreateNativeMultipartUploaderOptions = {}, +): NativeMultipartUploader | undefined => { + if (!nativeModule) { + return undefined; + } + + const multipartUploadEventEmitter = options.eventEmitter ?? new NativeEventEmitter(nativeModule); + + return async ({ + headers, + method, + onProgress, + parts, + progress, + signal, + timeoutMs, + uploadId, + url, + }: NativeMultipartUploaderRequest): Promise => { + let progressSubscription: + | { + remove: () => void; + } + | undefined; + let uploadStarted = false; + + const abortUpload = async () => { + try { + await nativeModule.cancelUpload(uploadId); + } catch { + // Ignore cancellation races for already-finished uploads. + } + }; + + const handleAbort = () => { + if (uploadStarted) { + abortUpload().catch(() => undefined); + } + }; + + if (signal?.aborted) { + throw createCanceledError(); + } + + const removeAbortListener = addAbortHandler(signal, handleAbort); + + if (signal?.aborted) { + removeAbortListener(); + throw createCanceledError(); + } + + if (onProgress) { + progressSubscription = multipartUploadEventEmitter.addListener( + STREAM_MULTIPART_UPLOAD_PROGRESS_EVENT, + (event: NativeMultipartUploadProgressEvent) => { + if (event.uploadId !== uploadId) { + return; + } + + onProgress({ + loaded: event.loaded, + total: typeof event.total === 'number' ? event.total : undefined, + }); + }, + ); + } + + try { + uploadStarted = true; + const response = await nativeModule.uploadMultipart( + uploadId, + url, + method, + toUploadHeaders(headers), + parts, + progress ?? {}, + timeoutMs, + ); + + if (signal?.aborted) { + throw createCanceledError(); + } + + return { + body: response.body, + headers: fromUploadHeaders(response.headers), + status: response.status, + statusText: typeof response.statusText === 'string' ? response.statusText : undefined, + }; + } catch (error) { + if (signal?.aborted) { + throw createCanceledError(); + } + + throw error; + } finally { + progressSubscription?.remove(); + removeAbortListener(); + } + }; +}; + +export const createNativeMultipartUpload = ({ + getLocalAssetUri, + uploadIdFactory = createDefaultUploadId, + uploadMultipart, +}: CreateNativeMultipartUploadOptions): NativeMultipartUpload | undefined => { + if (!uploadMultipart) { + return undefined; + } + + return async ({ + headers, + method, + onProgress, + parts, + progress, + signal, + timeoutMs, + url, + }: NativeMultipartUploadRequest) => { + const resolvedParts = await Promise.all( + parts.map((part) => resolvePartUri(part, getLocalAssetUri)), + ); + + return uploadMultipart({ + headers, + method, + onProgress, + parts: resolvedParts, + progress: getNativeProgressConfig(progress), + signal, + timeoutMs, + uploadId: uploadIdFactory(), + url, + }); + }; +}; diff --git a/package/src/utils/__tests__/installNativeMultipartAdapter.test.ts b/package/src/utils/__tests__/installNativeMultipartAdapter.test.ts new file mode 100644 index 0000000000..cbb14c3109 --- /dev/null +++ b/package/src/utils/__tests__/installNativeMultipartAdapter.test.ts @@ -0,0 +1,437 @@ +import type { AxiosProgressEvent, AxiosRequestConfig } from 'axios'; + +import { getTestClient } from '../../mock-builders/mock'; +import { NativeHandlers, NativeMultipartUploadProgressConfig } from '../../native'; +import { + installNativeMultipartAdapter, + wrapAxiosAdapterWithNativeMultipart, +} from '../installNativeMultipartAdapter'; + +type NativeMultipartTestAxiosConfig = AxiosRequestConfig & { + uploadProgress?: (event: AxiosProgressEvent) => void; + uploadProgressOptions?: NativeMultipartUploadProgressConfig; +}; + +const nativeMultipartConfig = (config: NativeMultipartTestAxiosConfig) => config; + +describe('installNativeMultipartAdapter', () => { + const originalMultipartUpload = NativeHandlers.multipartUpload; + + beforeEach(() => { + NativeHandlers.multipartUpload = jest.fn().mockResolvedValue({ + body: JSON.stringify({ file: 'https://example.com/file.jpg' }), + headers: { 'content-type': 'application/json' }, + status: 200, + statusText: 'OK', + }); + }); + + const preserveRequestData = (client: ReturnType) => { + client.axiosInstance.defaults.transformRequest = [(data) => data]; + }; + + afterEach(() => { + NativeHandlers.multipartUpload = originalMultipartUpload; + jest.clearAllMocks(); + }); + + it('routes multipart requests through the native handler', async () => { + const client = getTestClient(); + preserveRequestData(client); + const defaultAdapter = jest.fn().mockResolvedValue({ + config: {}, + data: 'default', + headers: {}, + status: 200, + statusText: 'OK', + }); + + client.axiosInstance.defaults.adapter = defaultAdapter; + + installNativeMultipartAdapter(client); + const formData = { + _parts: [ + [ + 'file', + { + name: 'test.jpg', + type: 'image/jpeg', + uri: 'file:///tmp/test.jpg', + }, + ], + ['user', JSON.stringify({ id: 'john' })], + ], + }; + + const response = await client.axiosInstance.post('/uploads/image', formData, { + headers: { + Authorization: 'token', + 'Content-Type': 'multipart/form-data', + 'X-Stream-Client': 'stream-test', + }, + params: { + api_key: 'test-key', + }, + timeout: 1234, + }); + + expect(defaultAdapter).not.toHaveBeenCalled(); + expect(NativeHandlers.multipartUpload).toHaveBeenCalledWith( + expect.objectContaining({ + headers: expect.objectContaining({ + Authorization: 'token', + 'Content-Type': 'multipart/form-data', + 'X-Stream-Client': 'stream-test', + }), + timeoutMs: 1234, + parts: [ + { + fieldName: 'file', + fileName: 'test.jpg', + kind: 'file', + mimeType: 'image/jpeg', + uri: 'file:///tmp/test.jpg', + }, + { + fieldName: 'user', + kind: 'text', + value: JSON.stringify({ id: 'john' }), + }, + ], + }), + ); + expect(response.status).toBe(200); + }); + + it('leaves non-multipart requests on the fallback adapter', async () => { + const client = getTestClient(); + preserveRequestData(client); + const defaultAdapter = jest.fn().mockResolvedValue({ + config: {}, + data: 'default', + headers: {}, + status: 200, + statusText: 'OK', + }); + + client.axiosInstance.defaults.adapter = defaultAdapter; + + installNativeMultipartAdapter(client); + + await client.axiosInstance.post('/messages', { text: 'hello' }); + + expect(defaultAdapter).toHaveBeenCalled(); + expect(NativeHandlers.multipartUpload).not.toHaveBeenCalled(); + }); + + it('forwards native upload progress to axios upload progress callbacks', async () => { + NativeHandlers.multipartUpload = jest.fn().mockImplementation(({ onProgress }) => { + onProgress?.({ + loaded: '50' as unknown as number, + total: '100' as unknown as number, + }); + + return { + body: JSON.stringify({ file: 'https://example.com/file.jpg' }), + headers: { 'content-type': 'application/json' }, + status: 200, + statusText: 'OK', + }; + }); + + const client = getTestClient(); + preserveRequestData(client); + installNativeMultipartAdapter(client); + const onUploadProgress = jest.fn(); + const uploadProgress = jest.fn(); + const formData = { + _parts: [ + [ + 'file', + { + name: 'test.jpg', + type: 'image/jpeg', + uri: 'file:///tmp/test.jpg', + }, + ], + ], + }; + + await client.axiosInstance.post( + '/uploads/image', + formData, + nativeMultipartConfig({ + onUploadProgress, + uploadProgressOptions: { + count: 10, + intervalMs: 25, + }, + uploadProgress, + }), + ); + + expect(onUploadProgress).toHaveBeenCalledWith( + expect.objectContaining({ + lengthComputable: true, + loaded: 50, + progress: 0.5, + total: 100, + }), + ); + expect(uploadProgress).toHaveBeenCalledWith( + expect.objectContaining({ + lengthComputable: true, + loaded: 50, + progress: 0.5, + total: 100, + }), + ); + expect(NativeHandlers.multipartUpload).toHaveBeenCalledWith( + expect.objectContaining({ + progress: { + count: 10, + intervalMs: 25, + }, + }), + ); + }); + + it('caps native multipart body progress to 90 percent while waiting for the response', async () => { + NativeHandlers.multipartUpload = jest.fn().mockImplementation(({ onProgress }) => { + onProgress?.({ + loaded: 100, + total: 100, + }); + + return { + body: JSON.stringify({ file: 'https://example.com/file.jpg' }), + headers: { 'content-type': 'application/json' }, + status: 200, + statusText: 'OK', + }; + }); + + const client = getTestClient(); + preserveRequestData(client); + installNativeMultipartAdapter(client); + const onUploadProgress = jest.fn(); + const formData = { + _parts: [ + [ + 'file', + { + name: 'test.jpg', + type: 'image/jpeg', + uri: 'file:///tmp/test.jpg', + }, + ], + ], + }; + + await client.axiosInstance.post('/uploads/image', formData, { onUploadProgress }); + + expect(onUploadProgress).toHaveBeenCalledTimes(1); + expect(onUploadProgress).toHaveBeenCalledWith( + expect.objectContaining({ + bytes: 90, + lengthComputable: true, + loaded: 90, + progress: 0.9, + total: 100, + }), + ); + }); + + it('allows overriding the native multipart completion progress cap', async () => { + NativeHandlers.multipartUpload = jest.fn().mockImplementation(({ onProgress }) => { + onProgress?.({ + loaded: 100, + total: 100, + }); + + return { + body: JSON.stringify({ file: 'https://example.com/file.jpg' }), + headers: { 'content-type': 'application/json' }, + status: 200, + statusText: 'OK', + }; + }); + + const client = getTestClient(); + preserveRequestData(client); + installNativeMultipartAdapter(client); + const onUploadProgress = jest.fn(); + const formData = { + _parts: [ + [ + 'file', + { + name: 'test.jpg', + type: 'image/jpeg', + uri: 'file:///tmp/test.jpg', + }, + ], + ], + }; + + await client.axiosInstance.post( + '/uploads/image', + formData, + nativeMultipartConfig({ + onUploadProgress, + uploadProgressOptions: { + completionProgressCap: 75, + count: 10, + intervalMs: 25, + }, + }), + ); + + expect(onUploadProgress).toHaveBeenCalledTimes(1); + expect(onUploadProgress).toHaveBeenCalledWith( + expect.objectContaining({ + bytes: 75, + loaded: 75, + progress: 0.75, + total: 100, + }), + ); + expect(NativeHandlers.multipartUpload).toHaveBeenCalledWith( + expect.objectContaining({ + progress: { + count: 10, + intervalMs: 25, + }, + }), + ); + }); + + it('uses the final config after user request interceptors run', async () => { + const client = getTestClient(); + preserveRequestData(client); + const defaultAdapter = jest.fn().mockResolvedValue({ + config: {}, + data: 'default', + headers: {}, + status: 200, + statusText: 'OK', + }); + + client.axiosInstance.defaults.adapter = defaultAdapter; + + const interceptorId = client.axiosInstance.interceptors.request.use((config) => { + config.headers.set('X-CDN-Route', 'custom-cdn'); + config.url = '/uploads/file'; + return config; + }); + + installNativeMultipartAdapter(client); + const formData = { + _parts: [ + [ + 'file', + { + name: 'test.jpg', + type: 'image/jpeg', + uri: 'file:///tmp/test.jpg', + }, + ], + ], + }; + + await client.axiosInstance.post('/uploads/image', formData, { + headers: { + Authorization: 'token', + }, + }); + + expect(NativeHandlers.multipartUpload).toHaveBeenCalledWith( + expect.objectContaining({ + headers: expect.objectContaining({ + Authorization: 'token', + 'X-CDN-Route': 'custom-cdn', + }), + url: expect.stringContaining('/uploads/file'), + }), + ); + expect(defaultAdapter).not.toHaveBeenCalled(); + + client.axiosInstance.interceptors.request.eject(interceptorId); + }); + + it('installs only once per client', async () => { + const client = getTestClient(); + preserveRequestData(client); + const defaultAdapter = jest.fn().mockResolvedValue({ + config: {}, + data: 'default', + headers: {}, + status: 200, + statusText: 'OK', + }); + + client.axiosInstance.defaults.adapter = defaultAdapter; + + installNativeMultipartAdapter(client); + const installedAdapter = client.axiosInstance.defaults.adapter; + installNativeMultipartAdapter(client); + + const formData = { + _parts: [ + [ + 'file', + { + name: 'test.jpg', + type: 'image/jpeg', + uri: 'file:///tmp/test.jpg', + }, + ], + ], + }; + + await client.axiosInstance.post('/uploads/image', formData); + + expect(client.axiosInstance.defaults.adapter).toBe(installedAdapter); + expect(defaultAdapter).not.toHaveBeenCalled(); + expect(NativeHandlers.multipartUpload).toHaveBeenCalled(); + }); + + it('composes explicitly with a custom adapter', async () => { + const client = getTestClient(); + preserveRequestData(client); + const customAdapter = jest.fn().mockResolvedValue({ + config: {}, + data: 'custom', + headers: {}, + status: 200, + statusText: 'OK', + }); + + client.axiosInstance.defaults.adapter = wrapAxiosAdapterWithNativeMultipart( + client, + customAdapter, + ); + + const multipartFormData = { + _parts: [ + [ + 'file', + { + name: 'test.jpg', + type: 'image/jpeg', + uri: 'file:///tmp/test.jpg', + }, + ], + ], + }; + + await client.axiosInstance.post('/uploads/image', multipartFormData); + + expect(NativeHandlers.multipartUpload).toHaveBeenCalled(); + expect(customAdapter).not.toHaveBeenCalled(); + + await client.axiosInstance.post('/messages', { text: 'hello' }); + + expect(customAdapter).toHaveBeenCalled(); + }); +}); diff --git a/package/src/utils/installNativeMultipartAdapter.ts b/package/src/utils/installNativeMultipartAdapter.ts new file mode 100644 index 0000000000..38a5913c36 --- /dev/null +++ b/package/src/utils/installNativeMultipartAdapter.ts @@ -0,0 +1,302 @@ +import axios from 'axios'; +import type { AxiosAdapter, AxiosProgressEvent, InternalAxiosRequestConfig } from 'axios'; +import type { StreamChat } from 'stream-chat'; + +import { + isNativeMultipartUploadAvailable, + NativeHandlers, + NativeMultipartUploadProgressConfig, + NativeMultipartUploadRequest, +} from '../native'; + +type FormDataPartValue = + | string + | { + contentType?: string; + name?: string; + type?: string; + uri: string; + }; + +type NativeMultipartAxiosRequestConfig = InternalAxiosRequestConfig & { + onUploadProgress?: (event: AxiosProgressEvent) => void; + uploadProgressOptions?: NativeMultipartUploadProgressConfig; + uploadProgress?: (event: AxiosProgressEvent) => void; +}; + +type ResolvableAxiosAdapter = Parameters[0]; + +const DEFAULT_COMPLETION_PROGRESS_CAP = 90; + +const installedAdapters = new WeakSet(); + +const getFormDataEntries = (data: unknown): [string, FormDataPartValue][] | null => { + if (!data || typeof data !== 'object') { + return null; + } + + if ('entries' in data && typeof data.entries === 'function') { + return Array.from(data.entries()) as [string, FormDataPartValue][]; + } + + const parts = Reflect.get(data, '_parts'); + + if (Array.isArray(parts)) { + return parts as [string, FormDataPartValue][]; + } + + return null; +}; + +const normalizeHeaders = ( + headers: NativeMultipartAxiosRequestConfig['headers'], +): Record => { + const rawHeaders = headers?.toJSON() ?? {}; + const normalizedHeaders: Record = {}; + + Object.entries(rawHeaders ?? {}).forEach(([key, value]) => { + if (value == null) { + return; + } + + normalizedHeaders[key] = Array.isArray(value) ? value.join(', ') : String(value); + }); + + return normalizedHeaders; +}; + +const getFileNameFromUri = (uri: string) => uri.split('/').filter(Boolean).pop() || 'file'; + +const getNativeProgressOptions = ( + progress?: NativeMultipartUploadProgressConfig, +): NativeMultipartUploadProgressConfig | undefined => { + if (!progress) { + return undefined; + } + + const nativeProgressOptions = { ...progress }; + delete nativeProgressOptions.completionProgressCap; + + return Object.keys(nativeProgressOptions).length ? nativeProgressOptions : undefined; +}; + +const createNativeMultipartRequest = ( + client: StreamChat, + config: NativeMultipartAxiosRequestConfig, +): NativeMultipartUploadRequest | null => { + const entries = getFormDataEntries(config.data); + + if (!entries) { + return null; + } + + const parts: NativeMultipartUploadRequest['parts'] = []; + + for (const [fieldName, value] of entries) { + if (typeof value === 'string') { + parts.push({ + fieldName, + kind: 'text', + value, + }); + continue; + } + + if (value && typeof value === 'object' && 'uri' in value && typeof value.uri === 'string') { + parts.push({ + fieldName, + fileName: value.name || getFileNameFromUri(value.uri), + kind: 'file', + mimeType: value.type || value.contentType, + uri: value.uri, + }); + continue; + } + + return null; + } + + if (!parts.some((part) => part.kind === 'file')) { + return null; + } + + return { + headers: normalizeHeaders(config.headers), + method: (config.method || 'POST').toUpperCase(), + parts, + progress: getNativeProgressOptions(config.uploadProgressOptions), + signal: config.signal, + timeoutMs: config.timeout, + url: client.axiosInstance.getUri(config), + }; +}; + +const toFiniteNumber = (value: unknown) => { + if (typeof value === 'number') { + return Number.isFinite(value) ? value : undefined; + } + + if (typeof value === 'string' && value.trim()) { + const parsed = Number(value); + return Number.isFinite(parsed) ? parsed : undefined; + } + + return undefined; +}; + +const getCompletionProgressCap = (config: NativeMultipartAxiosRequestConfig) => { + const cap = toFiniteNumber(config.uploadProgressOptions?.completionProgressCap); + if (cap === undefined) { + return DEFAULT_COMPLETION_PROGRESS_CAP; + } + + return Math.min(100, Math.max(0, cap)); +}; + +const getDisplayLoaded = ({ + completionProgressCap, + loaded, + total, +}: { + completionProgressCap: number; + loaded: number; + total?: number; +}) => { + if (typeof total !== 'number' || total <= 0) { + return loaded; + } + + return Math.min(loaded, total * (completionProgressCap / 100)); +}; + +const getUploadProgressCallbacks = (config: NativeMultipartAxiosRequestConfig) => { + const callbacks = [config.onUploadProgress, config.uploadProgress].filter( + (callback): callback is NonNullable => + typeof callback === 'function', + ); + + return Array.from(new Set(callbacks)); +}; + +const createUploadProgressEvent = ({ + bytes, + loaded, + total, +}: { + bytes: unknown; + loaded: unknown; + total?: unknown; +}) => { + const normalizedBytes = toFiniteNumber(bytes) ?? 0; + const normalizedLoaded = toFiniteNumber(loaded) ?? 0; + const normalizedTotal = toFiniteNumber(total); + + return { + bytes: normalizedBytes, + download: false, + event: undefined, + lengthComputable: typeof normalizedTotal === 'number' && normalizedTotal > 0, + loaded: normalizedLoaded, + progress: + typeof normalizedTotal === 'number' && normalizedTotal > 0 + ? normalizedLoaded / normalizedTotal + : undefined, + total: normalizedTotal, + upload: true, + }; +}; + +const nativeMultipartAxiosAdapter = async ( + request: NativeMultipartUploadRequest, + config: NativeMultipartAxiosRequestConfig, +) => { + const uploadProgressCallbacks = getUploadProgressCallbacks(config); + const completionProgressCap = getCompletionProgressCap(config); + let lastLoaded = 0; + + const response = await NativeHandlers.multipartUpload({ + ...request, + onProgress: uploadProgressCallbacks.length + ? ({ loaded, total }) => { + const normalizedLoaded = toFiniteNumber(loaded) ?? 0; + const normalizedTotal = toFiniteNumber(total); + const displayLoaded = getDisplayLoaded({ + completionProgressCap, + loaded: normalizedLoaded, + total: normalizedTotal, + }); + const event = createUploadProgressEvent({ + bytes: Math.max(0, displayLoaded - lastLoaded), + loaded: displayLoaded, + total: normalizedTotal, + }); + lastLoaded = displayLoaded; + uploadProgressCallbacks.forEach((callback) => callback(event)); + } + : undefined, + }); + + if (!response) { + throw new Error('Native multipart upload did not return a response'); + } + + return { + config, + data: response.body, + headers: response.headers ?? {}, + request: null, + status: response.status, + statusText: response.statusText ?? '', + }; +}; + +const resolveAxiosAdapter = (adapter: ResolvableAxiosAdapter): AxiosAdapter => + axios.getAdapter(adapter); + +const createNativeMultipartAwareAdapter = ( + client: StreamChat, + fallbackAdapter: ResolvableAxiosAdapter, +): AxiosAdapter => { + const resolvedFallbackAdapter = resolveAxiosAdapter(fallbackAdapter); + + return (config) => { + const nativeMultipartRequest = createNativeMultipartRequest( + client, + config as NativeMultipartAxiosRequestConfig, + ); + + if (!nativeMultipartRequest) { + return resolvedFallbackAdapter(config); + } + + return nativeMultipartAxiosAdapter(nativeMultipartRequest, config); + }; +}; + +export const wrapAxiosAdapterWithNativeMultipart = ( + client: StreamChat, + fallbackAdapter: ResolvableAxiosAdapter, +): AxiosAdapter => { + if (!isNativeMultipartUploadAvailable()) { + return resolveAxiosAdapter(fallbackAdapter); + } + + return createNativeMultipartAwareAdapter(client, fallbackAdapter); +}; + +export const installNativeMultipartAdapter = (client: StreamChat) => { + if (!isNativeMultipartUploadAvailable()) { + return; + } + + if (installedAdapters.has(client)) { + return; + } + + const previousAdapter = client.axiosInstance.defaults.adapter; + client.axiosInstance.defaults.adapter = wrapAxiosAdapterWithNativeMultipart( + client, + previousAdapter, + ); + installedAdapters.add(client); +}; diff --git a/package/src/utils/utils.ts b/package/src/utils/utils.ts index f40c9bde89..2c6533634f 100644 --- a/package/src/utils/utils.ts +++ b/package/src/utils/utils.ts @@ -57,14 +57,14 @@ type IndicatorStatesMap = Record; export const getIndicatorTypeForFileState = ( fileState: AttachmentLoadingState, - enableOfflineSupport: boolean, + allowSendBeforeAttachmentsUpload: boolean, ): Progress | undefined => { const indicatorMap: IndicatorStatesMap = { - [FileState.UPLOADING]: enableOfflineSupport + [FileState.UPLOADING]: allowSendBeforeAttachmentsUpload ? ProgressIndicatorTypes.INACTIVE : ProgressIndicatorTypes.IN_PROGRESS, [FileState.BLOCKED]: ProgressIndicatorTypes.NOT_SUPPORTED, - [FileState.FAILED]: enableOfflineSupport + [FileState.FAILED]: allowSendBeforeAttachmentsUpload ? ProgressIndicatorTypes.INACTIVE : ProgressIndicatorTypes.RETRY, [FileState.PENDING]: ProgressIndicatorTypes.PENDING, diff --git a/package/yarn.lock b/package/yarn.lock index d47d87ee9e..b7dc20eabe 100644 --- a/package/yarn.lock +++ b/package/yarn.lock @@ -3134,14 +3134,14 @@ available-typed-arrays@^1.0.7: dependencies: possible-typed-array-names "^1.0.0" -axios@^1.12.2: - version "1.12.2" - resolved "https://registry.yarnpkg.com/axios/-/axios-1.12.2.tgz#6c307390136cf7a2278d09cec63b136dfc6e6da7" - integrity sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw== +axios@^1.15.1: + version "1.15.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.15.2.tgz#eb8fb6d30349abace6ade5b4cb4d9e8a0dc23e5b" + integrity sha512-wLrXxPtcrPTsNlJmKjkPnNPK2Ihe0hn0wGSaTEiHRPxwjvJwT3hKmXF4dpqxmPO9SoNb2FsYXj/xEo0gHN+D5A== dependencies: - follow-redirects "^1.15.6" - form-data "^4.0.4" - proxy-from-env "^1.1.0" + follow-redirects "^1.15.11" + form-data "^4.0.5" + proxy-from-env "^2.1.0" babel-eslint@10.1.0: version "10.1.0" @@ -4772,10 +4772,10 @@ flow-enums-runtime@^0.0.6: resolved "https://registry.yarnpkg.com/flow-enums-runtime/-/flow-enums-runtime-0.0.6.tgz#5bb0cd1b0a3e471330f4d109039b7eba5cb3e787" integrity sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw== -follow-redirects@^1.15.6: - version "1.15.9" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1" - integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ== +follow-redirects@^1.15.11: + version "1.16.0" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.16.0.tgz#28474a159d3b9d11ef62050a14ed60e4df6d61bc" + integrity sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw== for-each@^0.3.3: version "0.3.5" @@ -4803,6 +4803,17 @@ form-data@^4.0.4: hasown "^2.0.2" mime-types "^2.1.12" +form-data@^4.0.5: + version "4.0.5" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.5.tgz#b49e48858045ff4cbf6b03e1805cebcad3679053" + integrity sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + es-set-tostringtag "^2.1.0" + hasown "^2.0.2" + mime-types "^2.1.12" + fresh@0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7" @@ -7729,10 +7740,10 @@ prop-types@^15.5.10, prop-types@^15.8.1: object-assign "^4.1.1" react-is "^16.13.1" -proxy-from-env@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" - integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== +proxy-from-env@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-2.1.0.tgz#a7487568adad577cfaaa7e88c49cab3ab3081aba" + integrity sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA== pump@^3.0.0: version "3.0.2" @@ -8496,14 +8507,14 @@ stdin-discarder@^0.2.2: resolved "https://registry.yarnpkg.com/stdin-discarder/-/stdin-discarder-0.2.2.tgz#390037f44c4ae1a1ae535c5fe38dc3aba8d997be" integrity sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ== -stream-chat@^9.41.1: - version "9.41.1" - resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.41.1.tgz#a877c8aa800d78b497eec2fad636345d4422309c" - integrity sha512-W8zjfINYol2UtdRMz2t/NN2GyjDrvb4pJgKmhtuRYzCY1u0Cjezcsu5OCNgyAM0QsenlY6tRqnvAU8Qam5R49Q== +stream-chat@^9.42.1: + version "9.42.1" + resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.42.1.tgz#8b6aa4e3e73a39ed07bb2a4f2a6829ba9354567a" + integrity sha512-o+9wQO4Ruu1A48T0IrX9ZH8+9F5xPgGLPvflaswaPeLyIZXcy8bsQdcT/HSrPmT7gs0WGD3qcbXaAJU5lMQezQ== dependencies: "@types/jsonwebtoken" "^9.0.8" "@types/ws" "^8.5.14" - axios "^1.12.2" + axios "^1.15.1" base64-js "^1.5.1" form-data "^4.0.4" isomorphic-ws "^5.0.0"