stream-chat-react-native-core 3.9.0-next.4 → 3.9.0-next.8

package/src/components/Attachment/Gallery.tsx

@@ -26,8 +26,9 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { makeImageCompatibleUrl } from '../../utils/utils';
+import { getUrlWithoutParams, makeImageCompatibleUrl } from '../../utils/utils';
 
+import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -104,7 +105,6 @@ export type GalleryPropsWithContext<
     | 'alignment'
     | 'groupStyles'
     | 'images'
-    | 'message'
     | 'onLongPress'
     | 'onPress'
     | 'onPressIn'
@@ -116,7 +116,21 @@ export type GalleryPropsWithContext<
     'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour'
   > &
   Pick<OverlayContextValue, 'setBlurType' | 'setOverlay'> & {
+    /**
+     * `message` prop has been introduced here as part of `legacyImageViewerSwipeBehaviour` prop.
+     * https://github.com/GetStream/stream-chat-react-native/commit/d5eac6193047916f140efe8e396a671675c9a63f
+     * messageId and messageText may seem redundant now, but to avoid breaking change as part
+     * of minor release, we are keeping those props.
+     *
+     * Also `message` type should ideally be imported from MessageContextValue and not be explicitely mentioned
+     * here, but due to some circular dependencies within the SDK, it causes "exccesive deep nesting" issue with
+     * typescript within Channel component. We should take it as a mini-project and resolve all these circular imports.
+     *
+     * TODO[major]: remove messageId and messageText
+     * TODO: Fix circular dependencies of imports
+     */
     hasThreadReplies?: boolean;
+    message?: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
     messageId?: string;
     messageText?: string;
   };
@@ -141,7 +155,7 @@ const GalleryWithContext = <
     legacyImageViewerSwipeBehaviour,
     message,
     messageId,
-    messageText,
+    messageText: messageTextProp,
     onLongPress,
     onPress,
     onPressIn,
@@ -199,6 +213,7 @@ const GalleryWithContext = <
   }, [] as { height: number | string; url: string }[][]);
 
   const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+  const messageText = messageTextProp || message?.text;
 
   return (
     <View
@@ -224,12 +239,19 @@ const GalleryWithContext = <
         >
           {column.map(({ height, url }, rowIndex) => {
             const defaultOnPress = () => {
-              if (!legacyImageViewerSwipeBehaviour) {
+              // Added if-else to keep the logic readable, instead of DRY.
+              // if - legacyImageViewerSwipeBehaviour is disabled
+              // else - legacyImageViewerSwipeBehaviour is enabled
+              if (!legacyImageViewerSwipeBehaviour && message) {
                 setImages([message]);
+                setImage({ messageId: messageId || message.id, url });
+                setBlurType(blurType);
+                setOverlay('gallery');
+              } else if (legacyImageViewerSwipeBehaviour) {
+                setImage({ messageId: messageId || message?.id, url });
+                setBlurType(blurType);
+                setOverlay('gallery');
               }
-              setImage({ messageId, url });
-              setBlurType(blurType);
-              setOverlay('gallery');
             };
 
             return (
@@ -371,8 +393,8 @@ const areEqual = <
     prevImages.length === nextImages.length &&
     prevImages.every(
       (image, index) =>
-        image.image_url === nextImages[index].image_url &&
-        image.thumb_url === nextImages[index].thumb_url,
+        getUrlWithoutParams(image.image_url) === getUrlWithoutParams(nextImages[index].image_url) &&
+        getUrlWithoutParams(image.thumb_url) === getUrlWithoutParams(nextImages[index].thumb_url),
     );
   if (!imagesEqual) return false;
 

package/src/components/Channel/Channel.tsx

@@ -160,7 +160,7 @@ const scrollToFirstUnreadThreshold = 4;
 const defaultThrottleInterval = 500;
 const defaultDebounceInterval = 500;
 const throttleOptions = {
-  leading: false,
+  leading: true,
   trailing: true,
 };
 const debounceOptions = {
@@ -252,6 +252,7 @@ export type ChannelPropsWithContext<
       | 'handleThreadReply'
       | 'InlineDateSeparator'
       | 'InlineUnreadIndicator'
+      | 'legacyImageViewerSwipeBehaviour'
       | 'markdownRules'
       | 'Message'
       | 'messageActions'
@@ -362,7 +363,6 @@ export type ChannelPropsWithContext<
      */
     KeyboardCompatibleView?: React.ComponentType<KeyboardAvoidingViewProps>;
     keyboardVerticalOffset?: number;
-    legacyImageViewerSwipeBehaviour?: boolean;
     /**
      * Custom loading error indicator to override the Stream default
      */
@@ -370,6 +370,7 @@ export type ChannelPropsWithContext<
     maxMessageLength?: number;
     messageId?: string;
     mutesEnabled?: boolean;
+    newMessageStateUpdateThrottleInterval?: number;
     quotedRepliesEnabled?: boolean;
     reactionsEnabled?: boolean;
     readEventsEnabled?: boolean;
@@ -465,6 +466,7 @@ const ChannelWithContext = <
     keyboardBehavior,
     KeyboardCompatibleView = KeyboardCompatibleViewDefault,
     keyboardVerticalOffset,
+    // TODO[major]: switch to false.
     legacyImageViewerSwipeBehaviour = true,
     LoadingErrorIndicator = LoadingErrorIndicatorDefault,
     LoadingIndicator = LoadingIndicatorDefault,
@@ -497,6 +499,7 @@ const ChannelWithContext = <
     mutesEnabled: mutesEnabledProp,
     muteUser,
     myMessageTheme,
+    newMessageStateUpdateThrottleInterval = defaultThrottleInterval,
     NetworkDownIndicator = NetworkDownIndicatorDefault,
     numberOfLines = 5,
     onChangeText,
@@ -682,6 +685,18 @@ const ChannelWithContext = <
     ),
   ).current;
 
+  const copyMessagesState = useRef(
+    throttle(
+      () => {
+        if (channel) {
+          setMessages([...channel.state.messages]);
+        }
+      },
+      newMessageStateUpdateThrottleInterval,
+      throttleOptions,
+    ),
+  ).current;
+
   const copyTypingState = useRef(
     throttle(
       () => {
@@ -755,6 +770,8 @@ const ChannelWithContext = <
       copyTypingState();
     } else if (event.type === 'message.read') {
       copyReadState();
+    } else if (event.type === 'message.new') {
+      copyMessagesState();
     } else if (channel) {
       copyChannelState();
     }

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -57,7 +57,6 @@ export const usePaginatedChannels = <
   const lastRefresh = useRef(Date.now());
   const [loadingChannels, setLoadingChannels] = useState(false);
   const [loadingNextPage, setLoadingNextPage] = useState(false);
-  const [offset, setOffset] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
 
   const queryChannels = async (queryType = '', retryCount = 0): Promise<void> => {
@@ -73,7 +72,7 @@ export const usePaginatedChannels = <
 
     const newOptions = {
       limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
-      offset: queryType === 'reload' || queryType === 'refresh' ? 0 : offset,
+      offset: queryType === 'reload' || queryType === 'refresh' ? 0 : channels.length,
       ...options,
     };
 
@@ -89,7 +88,6 @@ export const usePaginatedChannels = <
 
       setChannels(newChannels);
       setHasNextPage(channelQueryResponse.length >= newOptions.limit);
-      setOffset(newChannels.length);
       setError(false);
     } catch (err) {
       await wait(2000);

package/src/utils/__tests__/utils.test.js

@@ -0,0 +1,19 @@
+import { getUrlWithoutParams } from '../utils';
+
+describe('getUrlWithoutParams', () => {
+  const testUrlMap = {
+    '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',
+    'https://us-east.stream-io-cdn.com/62344/images/69c62680-45ba-4c6c-af49-66f3acee39cf.C8B8DF8D-A326-44A6-8030-C2B1C61116A5.jpg?Key-Pair-Id=APKAIHG36VEWPDULE23Q&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly91cy1lYXN0LnN0cmVhbS1pby1jZG4uY29tLzYyMzQ0L2ltYWdlcy82OWM2MjY4MC00NWJhLTRjNmMtYWY0OS02NmYzYWNlZTM5Y2YuQzhCOERGOEQtQTMyNi00NEE2LTgwMzAtQzJCMUM2MTExNkE1LmpwZz9jcm9wPSomaD0qJnJlc2l6ZT0qJnJvPTAmdz0qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNjE3OTU5MTk2fX19XX0_&Signature=b0DMJSOQmRO2AMemtlo-yhnUNuPtwC90QG5kn23Oaw13o8jlcFs93i2NgDarmJzanjHgOBsqv6dc-troCV2tTfUIz77CeAPjMXvPjmrUUgHUsBJrdr5DbjnhjfFIC9MTJxV9qkJNsD22M0qdR8MHzhHPNF~ZD76M-e~JZ7QuiUOG9Nw1YscXnYxn0x1RDjm8jKObPd0T3qTqPAADbfIYSxAxrInnUAj5CtYMyTVsV2zyxJpWfzm6gYs5lW0mvPUuCQ77AECTGiHCrfxdRI8LJFEmxrr1-KC8iCysAFPx-kPLYyQRosevtpnwoZDQqNPeYReiQG2SnW3I4TQWqjw-Pw__&crop=*&h=*&resize=*&ro=0&w=*':
+      'https://us-east.stream-io-cdn.com/62344/images/69c62680-45ba-4c6c-af49-66f3acee39cf.C8B8DF8D-A326-44A6-8030-C2B1C61116A5.jpg',
+  };
+
+  it('should return a url without params', () => {
+    const urls = Object.keys(testUrlMap);
+
+    urls.forEach((url) => {
+      expect(getUrlWithoutParams(url)).toBe(testUrlMap[url]);
+    });
+  });
+});

package/src/utils/utils.ts

@@ -153,8 +153,12 @@ const queryMembers = async <
   channel: Channel<At, Ch, Co, Ev, Me, Re, Us>,
   query: SuggestionUser<Us>['name'],
   onReady?: (users: SuggestionUser<Us>[]) => void,
-  limit = defaultAutoCompleteSuggestionsLimit,
+  options: {
+    limit?: number;
+  } = {},
 ): Promise<void> => {
+  const { limit = defaultAutoCompleteSuggestionsLimit } = options;
+
   if (typeof query === 'string') {
     const response = (await (channel as unknown as Channel).queryMembers(
       {
@@ -535,6 +539,15 @@ export const ACITriggerSettings = <
 export const makeImageCompatibleUrl = (url: string) =>
   (url.indexOf('//') === 0 ? `https:${url}` : url).trim();
 
+export const getUrlWithoutParams = (url?: string) => {
+  if (!url) return url;
+
+  const indexOfQuestion = url.indexOf('?');
+  if (indexOfQuestion === -1) return url;
+
+  return url.substring(0, url.indexOf('?'));
+};
+
 export const vw = (percentageWidth: number, rounded = false) => {
   const value = Dimensions.get('window').width * (percentageWidth / 100);
   return rounded ? Math.round(value) : value;

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "3.9.0-next.4"
+  "version": "3.9.0-next.8"
 }