stream-chat-react-native-core 7.0.0-rc.8 → 7.0.0

package/src/contexts/threadContext/ThreadContext.tsx

@@ -1,23 +1,21 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { ChannelState, Thread } from 'stream-chat';
-
-import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import { ChannelState, LocalMessage, Thread } from 'stream-chat';
 
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-export type ThreadType = { thread: MessageType; threadInstance: Thread };
+export type ThreadType = { thread: LocalMessage; threadInstance: Thread };
 
 export type ThreadContextValue = {
   allowThreadMessagesInChannel: boolean;
   closeThread: () => void;
   loadMoreThread: () => Promise<void>;
-  openThread: (message: MessageType) => void;
+  openThread: (message: LocalMessage) => void;
   reloadThread: () => void;
   setThreadLoadingMore: React.Dispatch<React.SetStateAction<boolean>>;
-  thread: MessageType | null;
+  thread: LocalMessage | null;
   threadHasMore: boolean;
   threadMessages: ChannelState['threads'][string];
   loadMoreRecentThread?: (opts: { limit?: number }) => Promise<void>;

package/src/contexts/threadsContext/ThreadListItemContext.tsx

@@ -1,8 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { Channel, Thread } from 'stream-chat';
-
-import { MessageType } from '../../components';
+import { Channel, LocalMessage, Thread } from 'stream-chat';
 
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -10,9 +8,9 @@ export type ThreadListItemContextValue = {
   channel: Channel;
   dateString: string | number | undefined;
   deletedAtDateString: string | number | undefined;
-  lastReply: MessageType | undefined;
+  lastReply: LocalMessage | undefined;
   ownUnreadMessageCount: number;
-  parentMessage: MessageType | undefined;
+  parentMessage: LocalMessage | undefined;
   thread: Thread;
 };
 

package/src/hooks/index.ts

@@ -3,3 +3,5 @@ export * from './useStreami18n';
 export * from './useViewport';
 export * from './useScreenDimensions';
 export * from './useStateStore';
+export * from './useStableCallback';
+export * from './useLoadingImage';

package/src/hooks/useAudioPlayer.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { NativeHandlers, SoundReturnType } from '../native';
 
@@ -15,7 +15,7 @@ export const useAudioPlayer = (props: UseSoundPlayerProps) => {
 
   const isExpoCLI = NativeHandlers.SDK === 'stream-chat-expo';
 
-  const playAudio = async () => {
+  const playAudio = useCallback(async () => {
     if (isExpoCLI) {
       if (soundRef.current?.playAsync) {
         await soundRef.current.playAsync();
@@ -25,9 +25,9 @@ export const useAudioPlayer = (props: UseSoundPlayerProps) => {
         soundRef.current.resume();
       }
     }
-  };
+  }, [isExpoCLI, soundRef]);
 
-  const pauseAudio = async () => {
+  const pauseAudio = useCallback(async () => {
     if (isExpoCLI) {
       if (soundRef.current?.pauseAsync) {
         await soundRef.current.pauseAsync();
@@ -37,39 +37,45 @@ export const useAudioPlayer = (props: UseSoundPlayerProps) => {
         soundRef.current.pause();
       }
     }
-  };
+  }, [isExpoCLI, soundRef]);
 
-  const seekAudio = async (currentTime: number) => {
-    if (isExpoCLI) {
-      if (currentTime === 0) {
-        // If currentTime is 0, we should replay the video from 0th position.
-        if (soundRef.current?.replayAsync) {
-          await soundRef.current.replayAsync({
-            positionMillis: 0,
-            shouldPlay: false,
-          });
+  const seekAudio = useCallback(
+    async (currentTime: number) => {
+      if (isExpoCLI) {
+        if (currentTime === 0) {
+          // If currentTime is 0, we should replay the video from 0th position.
+          if (soundRef.current?.replayAsync) {
+            await soundRef.current.replayAsync({
+              positionMillis: 0,
+              shouldPlay: false,
+            });
+          }
+        } else {
+          if (soundRef.current?.setPositionAsync) {
+            await soundRef.current.setPositionAsync(currentTime * 1000);
+          }
         }
       } else {
-        if (soundRef.current?.setPositionAsync) {
-          await soundRef.current.setPositionAsync(currentTime * 1000);
+        if (soundRef.current?.seek) {
+          soundRef.current.seek(currentTime);
         }
       }
-    } else {
-      if (soundRef.current?.seek) {
-        soundRef.current.seek(currentTime);
-      }
-    }
-  };
+    },
+    [isExpoCLI, soundRef],
+  );
 
-  const changeAudioSpeed = async (speed: number) => {
-    // Handled through prop `rate` in `Sound.Player`
-    if (!isExpoCLI) {
-      return;
-    }
-    if (soundRef.current?.setRateAsync) {
-      await soundRef.current.setRateAsync(speed);
-    }
-  };
+  const changeAudioSpeed = useCallback(
+    async (speed: number) => {
+      // Handled through prop `rate` in `Sound.Player`
+      if (!isExpoCLI) {
+        return;
+      }
+      if (soundRef.current?.setRateAsync) {
+        await soundRef.current.setRateAsync(speed, true, 'high');
+      }
+    },
+    [isExpoCLI, soundRef],
+  );
 
   return { changeAudioSpeed, pauseAudio, playAudio, seekAudio };
 };

package/src/hooks/useStableCallback.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef } from 'react';
+
+export type StableCallback<A extends unknown[], R> = (...args: A) => R;
+
+/**
+ * A utility hook implementing a stable callback. It takes in an unstable method that
+ * is supposed to be invoked somewhere deeper in the DOM tree without making it
+ * change its reference every time the parent component rerenders. It will also return
+ * the value of the callback if it does return one.
+ * A common use-case would be having a function whose invocation depends on state
+ * somewhere high up in the DOM tree and wanting to use the same function deeper
+ * down, for example in a leaf node and simply using useCallback results in
+ * cascading dependency hell. If we wrap it in useStableCallback, we would be able
+ * to:
+ * - Use the same function as a dependency of another hook (since it is stable)
+ * - Still invoke it and get the latest state
+ *
+ * **Caveats:**
+ * - Never wrap a function that is supposed to return a React.ReactElement in
+ *   useStableCallback, since React will not know that the DOM needs to be updated
+ *   whenever the callback value changes (for example, renderItem from FlatList must
+ *   never be wrapped in this hook)
+ * - Always prefer using a standard useCallback/stable function wherever possible
+ *   (the purpose of useStableCallback is to bridge the gap between top level contexts
+ *   and cascading rereders in downstream components - **not** as an escape hatch)
+ * @param callback - the callback we want to stabilize
+ */
+export const useStableCallback = <A extends unknown[], R>(
+  callback: StableCallback<A, R>,
+): StableCallback<A, R> => {
+  const ref = useRef(callback);
+  ref.current = callback;
+
+  return useCallback<StableCallback<A, R>>((...args) => {
+    return ref.current(...args);
+  }, []);
+};

package/src/hooks/useTranslatedMessage.ts

@@ -1,10 +1,10 @@
-import type { FormatMessageResponse, MessageResponse, TranslationLanguages } from 'stream-chat';
+import type { LocalMessage, MessageResponse, TranslationLanguages } from 'stream-chat';
 
 import { useTranslationContext } from '../contexts/translationContext/TranslationContext';
 
 type TranslationKey = `${TranslationLanguages}_text`;
 
-export const useTranslatedMessage = (message?: MessageResponse | FormatMessageResponse) => {
+export const useTranslatedMessage = (message?: MessageResponse | LocalMessage) => {
   const { userLanguage } = useTranslationContext();
 
   const translationKey: TranslationKey = `${userLanguage}_text`;

package/src/i18n/en.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 Reply",
   "1 Thread Reply": "1 Thread Reply",
   "Add a comment": "Add a comment",

package/src/i18n/es.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 respuesta",
   "1 Thread Reply": "1 respuesta de hilo",
   "Add a comment": "Agregar un comentario",

package/src/i18n/fr.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 Réponse",
   "1 Thread Reply": "Réponse à 1 fil",
   "Add a comment": "Ajouter un commentaire",

package/src/i18n/he.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
+  "+{{count}}_two": "+{{count}}",
   "1 Reply": "תגובה אחת",
   "1 Thread Reply": "תגובה אחת לשרשור",
   "Add a comment": "הוסף תגובה",

package/src/i18n/hi.json

@@ -1,4 +1,6 @@
 {
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 रिप्लाई",
   "1 Thread Reply": "1 धागा उत्तर",
   "Add a comment": "एक टिप्पणी जोड़ें",

package/src/i18n/it.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 Risposta",
   "1 Thread Reply": "1 Risposta alla Discussione",
   "Add a comment": "Aggiungi un commento",

package/src/i18n/ja.json

@@ -1,4 +1,5 @@
 {
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1件の返信",
   "1 Thread Reply": "1件のスレッド返信",
   "Add a comment": "コメントを追加",

package/src/i18n/ko.json

@@ -1,4 +1,5 @@
 {
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "답장 1개",
   "1 Thread Reply": "1개의 스레드\u3000답글",
   "Add a comment": "댓글 추가",

package/src/i18n/nl.json

@@ -1,4 +1,6 @@
 {
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 Antwoord",
   "1 Thread Reply": "1 thread antwoord",
   "Add a comment": "Voeg een reactie toe",

package/src/i18n/pt-br.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 Resposta",
   "1 Thread Reply": "1 Resposta de Thread",
   "Add a comment": "Adicionar um comentário",

package/src/i18n/ru.json

@@ -1,4 +1,8 @@
 {
+  "+{{count}}_few": "+{{count}}",
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 Ответ",
   "1 Thread Reply": "1 тема Ответить",
   "Add a comment": "Добавить комментарий",

package/src/i18n/tr.json

@@ -1,4 +1,6 @@
 {
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 Cevap",
   "1 Thread Reply": "1 Konu Yanıtı",
   "Add a comment": "Yorum ekle",

package/src/mock-builders/api/channelMocks.tsx

@@ -1,10 +1,4 @@
-import type {
-  Attachment,
-  Channel,
-  FormatMessageResponse,
-  MessageResponse,
-  UserResponse,
-} from 'stream-chat';
+import type { Attachment, Channel, LocalMessage, MessageResponse, UserResponse } from 'stream-chat';
 
 import {
   GROUP_CHANNEL_MEMBERS_MOCK,
@@ -168,7 +162,7 @@ const LATEST_MESSAGE = {
   user: { id: 'okechukwu' } as unknown as UserResponse,
 } as unknown as MessageResponse;
 
-const FORMATTED_MESSAGE: FormatMessageResponse = {
+const FORMATTED_MESSAGE: LocalMessage = {
   created_at: new Date('2021-02-12T12:12:35.862282Z'),
   id: '',
   message: {} as unknown as MessageResponse,

package/src/native.ts

@@ -1,8 +1,7 @@
 import type React from 'react';
 import { FlatList as DefaultFlatList, StyleProp, ViewStyle } from 'react-native';
 
-import type { Asset, File } from './types/types';
-
+import type { File } from './types/types';
 const fail = () => {
   throw Error(
     'Native handler was not registered, you should import stream-chat-expo or stream-chat-react-native',
@@ -31,7 +30,7 @@ type iOS14RefreshGallerySelection = () => Promise<void>;
 
 type GetPhotos = ({ after, first }: { first: number; after?: string }) =>
   | Promise<{
-      assets: Array<Omit<Asset, 'source'> & { source: 'picker' }>;
+      assets: File[];
       endCursor: string;
       hasNextPage: boolean;
       iOSLimited: boolean;
@@ -47,7 +46,7 @@ type PickDocument = ({ maxNumberOfFiles }: { maxNumberOfFiles?: number }) =>
 
 type PickImageAssetType = {
   askToOpenSettings?: boolean;
-  assets?: Array<Omit<Asset, 'source'> & { source: 'picker' }>;
+  assets?: File[];
   cancelled?: boolean;
 };
 
@@ -67,8 +66,7 @@ type ShareOptions = {
 };
 type ShareImage = (options: ShareOptions) => Promise<boolean> | never;
 
-type Photo = Omit<Asset, 'source'> & {
-  source: 'camera';
+type TakePhotoFileType = File & {
   askToOpenSettings?: boolean;
   cancelled?: boolean;
 };
@@ -78,7 +76,7 @@ export type MediaTypes = 'image' | 'video' | 'mixed';
 type TakePhoto = (options: {
   compressImageQuality?: number;
   mediaType?: MediaTypes;
-}) => Promise<Photo> | never;
+}) => Promise<TakePhotoFileType> | never;
 
 type HapticFeedbackMethod =
   | 'impactHeavy'
@@ -107,9 +105,12 @@ export type PlaybackStatus = {
   shouldPlay: boolean;
 };
 
+export type PitchCorrectionQuality = 'low' | 'medium' | 'high';
+
 export type AVPlaybackStatusToSet = {
   isLooping: boolean;
   isMuted: boolean;
+  pitchCorrectionQuality: PitchCorrectionQuality;
   positionMillis: number;
   progressUpdateIntervalMillis: number;
   rate: number;
@@ -152,7 +153,11 @@ export type SoundReturnType = {
   seek?: (progress: number, tolerance?: number) => void;
   setPositionAsync?: (millis: number) => void;
   setProgressUpdateIntervalAsync?: (progressUpdateIntervalMillis: number) => void;
-  setRateAsync?: (rate: number) => void;
+  setRateAsync?: (
+    rate: number,
+    shouldCorrectPitch: boolean,
+    pitchCorrectionQuality?: PitchCorrectionQuality,
+  ) => void;
   soundRef?: React.RefObject<SoundReturnType>;
   stopAsync?: () => void;
   style?: StyleProp<ViewStyle>;

package/src/store/apis/insertReaction.ts

@@ -1,4 +1,4 @@
-import type { FormatMessageResponse, MessageResponse, ReactionResponse } from 'stream-chat';
+import type { LocalMessage, MessageResponse, ReactionResponse } from 'stream-chat';
 
 import { mapReactionToStorable } from '../mappers/mapReactionToStorable';
 import { createUpdateQuery } from '../sqlite-utils/createUpdateQuery';
@@ -11,7 +11,7 @@ export const insertReaction = async ({
   message,
   reaction,
 }: {
-  message: MessageResponse | FormatMessageResponse;
+  message: MessageResponse | LocalMessage;
   reaction: ReactionResponse;
   flush?: boolean;
 }) => {

package/src/store/apis/updateMessage.ts

@@ -1,4 +1,4 @@
-import type { FormatMessageResponse, MessageResponse } from 'stream-chat';
+import type { LocalMessage, MessageResponse } from 'stream-chat';
 
 import { mapMessageToStorable } from '../mappers/mapMessageToStorable';
 import { mapReactionToStorable } from '../mappers/mapReactionToStorable';
@@ -14,7 +14,7 @@ export const updateMessage = async ({
   flush = true,
   message,
 }: {
-  message: MessageResponse | FormatMessageResponse;
+  message: MessageResponse | LocalMessage;
   flush?: boolean;
 }) => {
   const queries: PreparedQueries[] = [];

package/src/store/apis/updateReaction.ts

@@ -1,4 +1,4 @@
-import type { FormatMessageResponse, MessageResponse, ReactionResponse } from 'stream-chat';
+import type { LocalMessage, MessageResponse, ReactionResponse } from 'stream-chat';
 
 import { mapMessageToStorable } from '../mappers/mapMessageToStorable';
 import { mapReactionToStorable } from '../mappers/mapReactionToStorable';
@@ -13,7 +13,7 @@ export const updateReaction = async ({
   message,
   reaction,
 }: {
-  message: MessageResponse | FormatMessageResponse;
+  message: MessageResponse | LocalMessage;
   reaction: ReactionResponse;
   flush?: boolean;
 }) => {

package/src/store/mappers/mapMessageToStorable.ts

@@ -1,11 +1,11 @@
-import type { FormatMessageResponse, MessageResponse } from 'stream-chat';
+import type { LocalMessage, MessageResponse } from 'stream-chat';
 
 import { mapDateTimeToStorable } from './mapDateTimeToStorable';
 
 import type { TableRow } from '../types';
 
 export const mapMessageToStorable = (
-  message: MessageResponse | FormatMessageResponse,
+  message: MessageResponse | LocalMessage,
 ): TableRow<'messages'> => {
   const {
     attachments,

package/src/types/stream-chat-common-custom-data.d.ts

@@ -1,42 +1,42 @@
 import 'stream-chat';
 import {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMemberType,
-  DefaultMessageType,
-  DefaultPollOptionType,
-  DefaultPollType,
-  DefaultReactionType,
-  DefaultThreadType,
-  DefaultUserType,
+  DefaultAttachmentData,
+  DefaultChannelData,
+  DefaultCommandData,
+  DefaultEventData,
+  DefaultMemberData,
+  DefaultMessageData,
+  DefaultPollData,
+  DefaultPollOptionData,
+  DefaultReactionData,
+  DefaultThreadData,
+  DefaultUserData,
 } from './types';
 
 declare module 'stream-chat' {
   /* eslint-disable @typescript-eslint/no-empty-object-type */
 
-  interface CustomAttachmentData extends DefaultAttachmentType {}
+  interface CustomAttachmentData extends DefaultAttachmentData {}
 
-  interface CustomChannelData extends DefaultChannelType {}
+  interface CustomChannelData extends DefaultChannelData {}
 
-  interface CustomCommandData extends DefaultCommandType {}
+  interface CustomCommandData extends DefaultCommandData {}
 
-  interface CustomEventData extends DefaultEventType {}
+  interface CustomEventData extends DefaultEventData {}
 
-  interface CustomMemberData extends DefaultMemberType {}
+  interface CustomMemberData extends DefaultMemberData {}
 
-  interface CustomUserData extends DefaultUserType {}
+  interface CustomUserData extends DefaultUserData {}
 
-  interface CustomMessageData extends DefaultMessageType {}
+  interface CustomMessageData extends DefaultMessageData {}
 
-  interface CustomPollOptionData extends DefaultPollOptionType {}
+  interface CustomPollOptionData extends DefaultPollOptionData {}
 
-  interface CustomPollData extends DefaultPollType {}
+  interface CustomPollData extends DefaultPollData {}
 
-  interface CustomReactionData extends DefaultReactionType {}
+  interface CustomReactionData extends DefaultReactionData {}
 
-  interface CustomThreadData extends DefaultThreadType {}
+  interface CustomThreadData extends DefaultThreadData {}
 
   /* eslint-enable @typescript-eslint/no-empty-object-type */
 }