Merge pull request #2163 from GetStream/develop

vanGalilea · web-flow · commit 232d2576770c · 2023-07-03T11:20:01.000+02:00
Next release
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@
 
 ## 📖 React Native Chat Tutorial
 
-The best place to start is the [React Native Chat Tutorial](https://github.com/GetStream/stream-chat-react-native/wiki/Tutorial-v3.0). It teaches you how to use this SDK and also shows how to make frequently required changes.
+The best place to start is the [React Native Chat Tutorial](https://getstream.io/chat/react-native-chat/tutorial/). It teaches you how to use this SDK and also shows how to make frequently required changes.
 
 ## Free for Makers
 
diff --git a/package/expo-package/package.json b/package/expo-package/package.json
@@ -47,7 +47,7 @@
     "expo-file-system": "^11.0.2",
     "expo-image-manipulator": "^9.1.0",
     "expo-image-picker": "^14.1.1",
-    "expo-media-library": "^12.0.2"
+    "expo-media-library": "~15.2.3"
   },
   "scripts": {
     "prepack": " cp ../../README.md .",
diff --git a/package/expo-package/src/handlers/getLocalAssetUri.ts b/package/expo-package/src/handlers/getLocalAssetUri.ts
@@ -1,6 +1,6 @@
 import * as MediaLibrary from 'expo-media-library';
 
-export const getLocalAssetUri = async (assetId: string): Promise<string> => {
+export const getLocalAssetUri = async (assetId: string): Promise<string | undefined> => {
   try {
     const { localUri } = await MediaLibrary.getAssetInfoAsync(assetId);
     return localUri;
diff --git a/package/expo-package/yarn.lock b/package/expo-package/yarn.lock
@@ -1935,13 +1935,10 @@ expo-keep-awake@~10.0.2:
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-10.0.2.tgz#706bda839782bb3e8ad4cbe43bde471a56368813"
   integrity sha512-Ro1lgyKldbFs4mxhWM+goX9sg0S2SRR8FiJJeOvaRzf8xNhrZfWA00Zpr+/3ocCoWQ3eEL+X9UF4PXXHf0KoOg==
 
-expo-media-library@^12.0.2:
-  version "12.1.2"
-  resolved "https://registry.yarnpkg.com/expo-media-library/-/expo-media-library-12.1.2.tgz#7a152f5ddf9e5e55d07aa28c8a5bd04113c0ebd2"
-  integrity sha512-e2Wh3TD4N2JjmKFFiQ453QgWWARNqc1/vILkEVnxjs34uJmUoT4a89wromr6Xl2fZJUvJDmgmVmL+A9iBWFgaA==
-  dependencies:
-    "@expo/config-plugins" "^3.0.0"
-    expo-modules-core "~0.2.0"
+expo-media-library@~15.2.3:
+  version "15.2.3"
+  resolved "https://registry.yarnpkg.com/expo-media-library/-/expo-media-library-15.2.3.tgz#188f3c77f58b354f0ea6250f6756ac1e1a226291"
+  integrity sha512-Oz8b8Xsvfj7YcutUBtI84NUIqSnt7iCM5HZ5DyKoWKKiDK/+aUuj3RXNQELG8jUw6pQPgEwgbZ1+J8SdH/y9jw==
 
 expo-modules-autolinking@0.5.5:
   version "0.5.5"
diff --git a/package/native-package/yarn.lock b/package/native-package/yarn.lock
@@ -4381,10 +4381,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@5.15.0:
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.0.tgz#e4d52ca3b492b7a3f2550049fccd85e025bfed2e"
-  integrity sha512-MJf9qV1MZf0r4HTt0afZGxF5/HytbY+Sap/8QTDNE6OucWmxa44kOY7SfHmfdkxOLTUPHMeK7Glc+wCmYZVVLA==
+stream-chat-react-native-core@5.15.1:
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.15.1.tgz#a7f8f3a5f2998bdd3f779d3dc82e3a0a8e0fec22"
+  integrity sha512-UnybqEl9nqDrTrvb8CU4gxDamr73Iv0M56rwxhPrTtPiWiVGpG4gddkfJVGpVGYTyCBm9CKKeNmYBktuEbeW8Q==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.5"
diff --git a/package/src/components/Message/MessageSimple/MessageStatus.tsx b/package/src/components/Message/MessageSimple/MessageStatus.tsx
@@ -56,7 +56,9 @@ const MessageStatusWithContext = <
     );
   }
 
-  if (isMessageWithStylesReadByAndDateSeparator(message) && !threadList) {
+  if (threadList || message.status === MessageStatusTypes.FAILED) return null;
+
+  if (isMessageWithStylesReadByAndDateSeparator(message)) {
     return (
       <View style={[styles.statusContainer, statusContainer]}>
         {typeof message.readBy === 'number' ? (
@@ -76,11 +78,7 @@ const MessageStatusWithContext = <
     );
   }
 
-  if (
-    message.status === MessageStatusTypes.RECEIVED &&
-    message.type !== 'ephemeral' &&
-    !threadList
-  ) {
+  if (message.status === MessageStatusTypes.RECEIVED && message.type !== 'ephemeral') {
     return (
       <View style={[styles.statusContainer, statusContainer]} testID='delivered-container'>
         <Check pathFill={grey_dark} {...checkIcon} />
diff --git a/package/src/components/MessageInput/UploadProgressIndicator.tsx b/package/src/components/MessageInput/UploadProgressIndicator.tsx
@@ -15,45 +15,6 @@ import { ProgressIndicatorTypes } from '../../utils/utils';
 
 const REFRESH_ICON_SIZE = 18;
 
-const styles = StyleSheet.create({
-  activityIndicatorContainer: {
-    alignItems: 'center',
-    bottom: 0,
-    justifyContent: 'center',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-  container: {
-    alignItems: 'center',
-    height: '100%',
-    justifyContent: 'center',
-    position: 'absolute',
-    width: '100%',
-  },
-  overflowHidden: {
-    overflow: 'hidden',
-  },
-  overlay: {
-    alignItems: 'center',
-    height: '100%',
-    justifyContent: 'center',
-    opacity: 0,
-    position: 'absolute',
-    width: '100%',
-  },
-  retryButtonContainer: {
-    alignItems: 'center',
-    bottom: 0,
-    justifyContent: 'center',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-});
-
 export type UploadProgressIndicatorProps = {
   /** Action triggered when clicked indicator */
   action?: (event: GestureResponderEvent) => void;
@@ -130,5 +91,44 @@ const RetryIndicator = ({ action }: Pick<UploadProgressIndicatorProps, 'action'>
   );
 };
 
+const styles = StyleSheet.create({
+  activityIndicatorContainer: {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  container: {
+    alignItems: 'center',
+    height: '100%',
+    justifyContent: 'center',
+    position: 'absolute',
+    width: '100%',
+  },
+  overflowHidden: {
+    overflow: 'hidden',
+  },
+  overlay: {
+    alignItems: 'center',
+    height: '100%',
+    justifyContent: 'center',
+    opacity: 0,
+    position: 'absolute',
+    width: '100%',
+  },
+  retryButtonContainer: {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+});
+
 UploadProgressIndicator.displayName =
   'UploadProgressIndicator{messageInput{uploadProgressIndicator}}';
diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
@@ -55,6 +55,8 @@ import {
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
+const WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT = 150;
+const MAX_RETRIES_AFTER_SCROLL_FAILURE = 10;
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
@@ -550,6 +552,7 @@ const MessageListWithContext = <
       }
       return false;
     }
+
     const isCurrentMessageUnread = isMessageUnread(index);
     const showUnreadUnderlay = isCurrentMessageUnread && scrollToBottomButtonVisible;
     const insertInlineUnreadIndicator = showUnreadUnderlay && !isMessageUnread(index + 1); // show only if previous message is read
@@ -783,19 +786,22 @@ const MessageListWithContext = <
     }
   };
 
+  const scrollToIndexFailedRetryCountRef = useRef<number>(0);
+  const failScrollTimeoutId = useRef<NodeJS.Timeout>();
   const onScrollToIndexFailedRef = useRef<
     FlatListProps<MessageType<StreamChatGenerics>>['onScrollToIndexFailed']
   >((info) => {
     // We got a failure as we tried to scroll to an item that was outside the render length
-    if (flatListRef.current) {
-      // we dont know the actual size of all items but we can see the average, so scroll to the closest offset
-      flatListRef.current.scrollToOffset({
-        animated: false,
-        offset: info.averageItemLength * info.index,
-      });
-      // since we used only an average offset.. we wont go to the center of the item yet
-      // with a little delay to wait for scroll to offset to complete, we can then scroll to the index
-      setTimeout(() => {
+    if (!flatListRef.current) return;
+    // we don't know the actual size of all items but we can see the average, so scroll to the closest offset
+    flatListRef.current.scrollToOffset({
+      animated: false,
+      offset: info.averageItemLength * info.index,
+    });
+    // since we used only an average offset... we won't go to the center of the item yet
+    // with a little delay to wait for scroll to offset to complete, we can then scroll to the index
+    failScrollTimeoutId.current = setTimeout(() => {
+      try {
         flatListRef.current?.scrollToIndex({
           animated: false,
           index: info.index,
@@ -804,8 +810,30 @@ const MessageListWithContext = <
         if (messageIdLastScrolledToRef.current) {
           setTargetedMessage(messageIdLastScrolledToRef.current);
         }
-      }, 150);
-    }
+        scrollToIndexFailedRetryCountRef.current = 0;
+      } catch (e) {
+        if (
+          !onScrollToIndexFailedRef.current ||
+          scrollToIndexFailedRetryCountRef.current > MAX_RETRIES_AFTER_SCROLL_FAILURE
+        ) {
+          console.log(
+            `Scrolling to index failed after ${MAX_RETRIES_AFTER_SCROLL_FAILURE} retries`,
+            e,
+          );
+          scrollToIndexFailedRetryCountRef.current = 0;
+          return;
+        }
+        // At some cases the index we're trying to scroll to, doesn't exist yet in the messageList
+        // Scrolling to an index not in range of the Flatlist's data will result in a crash that
+        // won't call onScrollToIndexFailed.
+        // By catching this error we retry scrolling by calling onScrollToIndexFailedRef
+        scrollToIndexFailedRetryCountRef.current += 1;
+        onScrollToIndexFailedRef.current(info);
+      }
+    }, WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT);
+
+    // Only when index is greater than 0 and in range of items in FlatList
+    // this onScrollToIndexFailed will be called again
   });
 
   const goToMessage = useCallback(
@@ -814,6 +842,8 @@ const MessageListWithContext = <
         (message) => message?.id === messageId,
       );
       if (indexOfParentInMessageList !== -1 && flatListRef.current) {
+        clearTimeout(failScrollTimeoutId.current);
+        scrollToIndexFailedRetryCountRef.current = 0;
         flatListRef.current.scrollToIndex({
           animated: true,
           index: indexOfParentInMessageList,
@@ -855,6 +885,9 @@ const MessageListWithContext = <
         (message) => message?.id === messageIdToScroll,
       );
       if (indexOfParentInMessageList !== -1 && flatListRef.current) {
+        // By a fresh scroll we should clear the retries for the previous failed scroll
+        clearTimeout(failScrollTimeoutId.current);
+        scrollToIndexFailedRetryCountRef.current = 0;
         flatListRef.current.scrollToIndex({
           animated: false,
           index: indexOfParentInMessageList,
@@ -867,6 +900,7 @@ const MessageListWithContext = <
       }
     }, 150);
     return () => {
+      clearTimeout(failScrollTimeoutId.current);
       clearTimeout(scrollToDebounceTimeoutRef.current);
       clearTimeout(initialScrollSettingTimeoutRef.current);
     };
diff --git a/package/src/contexts/messageInputContext/MessageInputContext.tsx b/package/src/contexts/messageInputContext/MessageInputContext.tsx
@@ -969,7 +969,7 @@ export const MessageInputProvider = <
       if (value.doDocUploadRequest) {
         response = await value.doDocUploadRequest(file, channel);
       } else if (channel && file.uri) {
-        // For the case of expo messaging app where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
+        // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
         const localAssetURI = Platform.OS === 'ios' && file.id && (await getLocalAssetUri(file.id));
         response = await channel.sendFile(localAssetURI || file.uri, file.name, file.type);
       }
@@ -990,7 +990,7 @@ export const MessageInputProvider = <
     let response = {} as SendFileAPIResponse;
 
     try {
-      // For the case of expo messaging app where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
+      // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
       const localAssetURI = Platform.OS === 'ios' && file.id && (await getLocalAssetUri(file.id));
       const uri = localAssetURI || file.uri || '';
       /**
diff --git a/package/src/native.ts b/package/src/native.ts
@@ -27,7 +27,7 @@ export let compressImage: CompressImage = fail;
 type DeleteFile = ({ uri }: { uri: string }) => Promise<boolean> | never;
 export let deleteFile: DeleteFile = fail;
 
-type GetLocalAssetUri = (uriOrAssetId: string) => Promise<string> | never;
+type GetLocalAssetUri = (uriOrAssetId: string) => Promise<string | undefined> | never;
 export let getLocalAssetUri: GetLocalAssetUri = fail;
 
 type OniOS14LibrarySelectionChange = (callback: () => void) => { unsubscribe: () => void };
diff --git a/package/src/utils/DBSyncManager.ts b/package/src/utils/DBSyncManager.ts
@@ -1,4 +1,5 @@
 import type { AxiosError } from 'axios';
+import dayjs from 'dayjs';
 import type { APIErrorResponse, StreamChat } from 'stream-chat';
 
 import { handleEventToSyncDB } from '../components/Chat/hooks/handleEventToSyncDB';
@@ -91,29 +92,39 @@ export class DBSyncManager {
 
   static sync = async () => {
     if (!this.client?.user) return;
+    const cids = getAllChannelIds();
+    // If there are no channels, then there is no need to sync.
+    if (cids.length === 0) return;
 
     const lastSyncedAt = getLastSyncedAt({
       currentUserId: this.client.user.id,
     });
-    const cids = getAllChannelIds();
-    // If there are no channels, then there is no need to sync.
-    if (cids.length === 0) return;
 
     if (lastSyncedAt) {
-      try {
-        const result = await this.client.sync(cids, new Date(lastSyncedAt).toISOString());
-        const queries = result.events.reduce<PreparedQueries[]>((queries, event) => {
-          queries = queries.concat(handleEventToSyncDB(event, false));
-          return queries;
-        }, []);
-
-        if (queries.length) {
-          QuickSqliteClient.executeSqlBatch(queries);
-        }
-      } catch (e) {
-        // Error will be raised by the sync API if there are too many events.
+      const lastSyncedAtDate = new Date(lastSyncedAt);
+      const lastSyncedAtDayJs = dayjs(lastSyncedAtDate);
+      const nowDayJs = dayjs();
+      const diff = nowDayJs.diff(lastSyncedAtDayJs, 'days');
+      if (diff > 30) {
+        // stream backend will send an error if we try to sync after 30 days.
         // In that case reset the entire DB and start fresh.
         QuickSqliteClient.resetDB();
+      } else {
+        try {
+          const result = await this.client.sync(cids, lastSyncedAtDate.toISOString());
+          const queries = result.events.reduce<PreparedQueries[]>((queries, event) => {
+            queries = queries.concat(handleEventToSyncDB(event, false));
+            return queries;
+          }, []);
+
+          if (queries.length) {
+            QuickSqliteClient.executeSqlBatch(queries);
+          }
+        } catch (e) {
+          // Error will be raised by the sync API if there are too many events.
+          // In that case reset the entire DB and start fresh.
+          QuickSqliteClient.resetDB();
+        }
       }
     }
     upsertUserSyncStatus({
