Merge pull request #2398 from GetStream/develop

Next Release
GetStream · Jan 23, 2024 · 38a986f · 38a986f
2 parents a8cee30 + da7eb56
commit 38a986f
Show file tree

Hide file tree

Showing 9 changed files with 615 additions and 1,122 deletions.
diff --git a/examples/TypeScriptMessaging/ios/Podfile.lock b/examples/TypeScriptMessaging/ios/Podfile.lock
diff --git a/examples/TypeScriptMessaging/ios/TypeScriptMessaging.xcodeproj/project.pbxproj b/examples/TypeScriptMessaging/ios/TypeScriptMessaging.xcodeproj/project.pbxproj
@@ -580,6 +580,7 @@
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"DEBUG=1",
 					"$(inherited)",
+					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
 				);
 				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@@ -600,6 +601,11 @@
 				);
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 			};
@@ -641,6 +647,10 @@
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"$(inherited)",
+					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
+				);
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
 				GCC_WARN_UNDECLARED_SELECTOR = YES;
@@ -658,6 +668,11 @@
 					"\"$(inherited)\"",
 				);
 				MTL_ENABLE_DEBUG_INFO = NO;
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

diff --git a/examples/TypeScriptMessaging/package.json b/examples/TypeScriptMessaging/package.json
@@ -20,7 +20,7 @@
     "@react-navigation/stack": "^6.3.16",
     "@stream-io/flat-list-mvcp": "0.10.3",
     "react": "18.2.0",
-    "react-native": "0.71.7",
+    "react-native": "0.71.15",
     "react-native-document-picker": "^9.0.1",
     "react-native-fs": "2.20.0",
     "react-native-gesture-handler": "~2.9.0",

diff --git a/examples/TypeScriptMessaging/yarn.lock b/examples/TypeScriptMessaging/yarn.lock
diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx
@@ -1,20 +1,29 @@
-import React from 'react';
-import { FlatList, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import {
+  LayoutChangeEvent,
+  Pressable,
+  PressableProps,
+  PressableStateCallbackType,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import type { AutoCompleteSuggestionHeaderProps } from './AutoCompleteSuggestionHeader';
 import type { AutoCompleteSuggestionItemProps } from './AutoCompleteSuggestionItem';
 
 import {
-  isSuggestionCommand,
-  isSuggestionEmoji,
   isSuggestionUser,
   Suggestion,
   SuggestionsContextValue,
   useSuggestionsContext,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { FlatList } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
+const AUTO_COMPLETE_SUGGESTION_LIST_HEADER_HEIGHT = 30;
+
 type AutoCompleteSuggestionListComponentProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<SuggestionsContextValue, 'queryText' | 'triggerType'> & {
@@ -31,9 +40,19 @@ export type AutoCompleteSuggestionListPropsWithContext<
 > &
   AutoCompleteSuggestionListComponentProps<StreamChatGenerics>;
 
-const SuggestionsItem: React.FC<TouchableOpacityProps> = (props) => {
-  const { children, ...touchableOpacityProps } = props;
-  return <TouchableOpacity {...touchableOpacityProps}>{children}</TouchableOpacity>;
+const SuggestionsItem: React.FC<PressableProps> = (props) => {
+  const { children, style: propsStyle, ...pressableProps } = props;
+
+  const style = ({ pressed }: PressableStateCallbackType) => [
+    propsStyle as ViewStyle,
+    { opacity: pressed ? 0.2 : 1 },
+  ];
+
+  return (
+    <Pressable {...pressableProps} style={style}>
+      {children}
+    </Pressable>
+  );
 };
 
 SuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';
@@ -43,6 +62,7 @@ export const AutoCompleteSuggestionListWithContext = <
 >(
   props: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
 ) => {
+  const [itemHeight, setItemHeight] = useState<number>(0);
   const {
     active,
     AutoCompleteSuggestionHeader,
@@ -55,6 +75,7 @@ export const AutoCompleteSuggestionListWithContext = <
 
   const {
     theme: {
+      colors: { white },
       messageInput: {
         container: { maxHeight },
         suggestions: { item: itemStyle },
@@ -63,62 +84,37 @@ export const AutoCompleteSuggestionListWithContext = <
     },
   } = useTheme();
 
-  const renderItem = ({ index, item }: { index: number; item: Suggestion<StreamChatGenerics> }) => {
+  const flatlistHeight = useMemo(() => {
+    let totalItemHeight;
+    if (triggerType === 'emoji') {
+      totalItemHeight = data.length < 7 ? data.length * itemHeight : itemHeight * 6;
+    } else {
+      totalItemHeight = data.length < 4 ? data.length * itemHeight : itemHeight * 3;
+    }
+
+    return triggerType === 'emoji' || triggerType === 'command'
+      ? totalItemHeight + AUTO_COMPLETE_SUGGESTION_LIST_HEADER_HEIGHT
+      : totalItemHeight;
+  }, [itemHeight, data.length]);
+
+  const renderItem = ({ item }: { item: Suggestion<StreamChatGenerics> }) => {
     switch (triggerType) {
-      case 'mention':
-        if (isSuggestionUser(item)) {
-          return (
-            <SuggestionsItem
-              onPress={() => {
-                onSelect(item);
-              }}
-              style={[
-                {
-                  paddingBottom: index === data.length - 1 ? 8 : 0,
-                  paddingTop: index === 0 ? 8 : 0,
-                },
-                itemStyle,
-              ]}
-            >
-              {AutoCompleteSuggestionItem && (
-                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
-              )}
-            </SuggestionsItem>
-          );
-        }
-        return null;
       case 'command':
-        if (isSuggestionCommand(item)) {
-          return (
-            <SuggestionsItem
-              onPress={() => {
-                onSelect(item);
-              }}
-              style={[itemStyle]}
-            >
-              {AutoCompleteSuggestionItem && (
-                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
-              )}
-            </SuggestionsItem>
-          );
-        }
-        return null;
+      case 'mention':
       case 'emoji':
-        if (isSuggestionEmoji(item)) {
-          return (
-            <SuggestionsItem
-              onPress={() => {
-                onSelect(item);
-              }}
-              style={[itemStyle]}
-            >
-              {AutoCompleteSuggestionItem && (
-                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
-              )}
-            </SuggestionsItem>
-          );
-        }
-        return null;
+        return (
+          <SuggestionsItem
+            onLayout={(event: LayoutChangeEvent) => setItemHeight(event.nativeEvent.layout.height)}
+            onPress={() => {
+              onSelect(item);
+            }}
+            style={itemStyle}
+          >
+            {AutoCompleteSuggestionItem && (
+              <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
+            )}
+          </SuggestionsItem>
+        );
       default:
         return null;
     }
@@ -127,20 +123,22 @@ export const AutoCompleteSuggestionListWithContext = <
   if (!active || data.length === 0) return null;
 
   return (
-    <FlatList
-      data={data}
-      keyboardShouldPersistTaps='always'
-      keyExtractor={(item, index) =>
-        `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`
-      }
-      ListHeaderComponent={
-        AutoCompleteSuggestionHeader ? (
-          <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />
-        ) : null
-      }
-      renderItem={renderItem}
-      style={[flatlist, { maxHeight }]}
-    />
+    <View style={[styles.container, { backgroundColor: white, height: flatlistHeight }]}>
+      <FlatList
+        data={data}
+        keyboardShouldPersistTaps='always'
+        keyExtractor={(item, index) =>
+          `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`
+        }
+        ListHeaderComponent={
+          AutoCompleteSuggestionHeader ? (
+            <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />
+          ) : null
+        }
+        renderItem={renderItem}
+        style={[flatlist, { maxHeight }]}
+      />
+    </View>
   );
 };
 
@@ -206,5 +204,16 @@ export const AutoCompleteSuggestionList = <
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    elevation: 3,
+    marginHorizontal: 8,
+    marginVertical: 8,
+    shadowOffset: { height: 1, width: 0 },
+    shadowOpacity: 0.15,
+  },
+});
+
 AutoCompleteSuggestionList.displayName =
   'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -777,15 +777,18 @@ const ChannelWithContext = <
   useEffect(() => {
     const handleEvent: EventHandler<StreamChatGenerics> = (event) => {
       if (shouldSyncChannel) {
-        if (thread) {
-          const updatedThreadMessages =
-            (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
-          setThreadMessages(updatedThreadMessages);
-        }
+        const isTypingEvent = event.type === 'typing.start' || event.type === 'typing.stop';
+        if (!isTypingEvent) {
+          if (thread?.id) {
+            const updatedThreadMessages =
+              (thread.id && channel && channel.state.threads[thread.id]) || threadMessages;
+            setThreadMessages(updatedThreadMessages);
+          }
 
-        if (channel && thread && event.message?.id === thread.id) {
-          const updatedThread = channel.state.formatMessage(event.message);
-          setThread(updatedThread);
+          if (channel && thread?.id && event.message?.id === thread.id) {
+            const updatedThread = channel.state.formatMessage(event.message);
+            setThread(updatedThread);
+          }
         }
 
         // only update channel state if the events are not the previously subscribed useEffect's subscription events
@@ -1097,11 +1100,11 @@ const ChannelWithContext = <
     channelQueryCallRef.current(async () => {
       if (!channel?.initialized || !channel.state.isUpToDate) {
         await channel?.watch();
+        channel?.state.setIsUpToDate(true);
+        setHasNoMoreRecentMessagesToLoad(true);
       } else {
-        await loadLatestMessagesRef.current(true);
+        await channel.state.loadMessageIntoState('latest');
       }
-      channel?.state.setIsUpToDate(true);
-      setHasNoMoreRecentMessagesToLoad(true);
     });
 
   const reloadThread = async () => {
@@ -1999,11 +2002,14 @@ const ChannelWithContext = <
   /**
    * THREAD METHODS
    */
-  const openThread: ThreadContextValue<StreamChatGenerics>['openThread'] = (message) => {
-    const newThreadMessages = message?.id ? channel?.state?.threads[message.id] || [] : [];
-    setThread(message);
-    setThreadMessages(newThreadMessages);
-  };
+  const openThread: ThreadContextValue<StreamChatGenerics>['openThread'] = useCallback(
+    (message) => {
+      const newThreadMessages = message?.id ? channel?.state?.threads[message.id] || [] : [];
+      setThread(message);
+      setThreadMessages(newThreadMessages);
+    },
+    [setThread, setThreadMessages],
+  );
 
   const closeThread: ThreadContextValue<StreamChatGenerics>['closeThread'] = useCallback(() => {
     setThread(null);
@@ -2365,7 +2371,6 @@ export const Channel = <
 
   return (
     <ChannelWithContext<StreamChatGenerics>
-      key={props.channel?.cid}
       {...{
         client,
         enableOfflineSupport,