stream-chat-react-native-core 4.9.0-beta.2 → 4.9.0

package/lib/typescript/mock-builders/generator/channel.d.ts

@@ -0,0 +1,116 @@
+export function generateChannel(customValues: any): {
+    _client: {};
+    data: {
+        cid: string;
+        config: {
+            name: string;
+            type: string;
+            automod: string;
+            automod_behavior: string;
+            commands: {
+                args: string;
+                description: string;
+                name: string;
+                set: string;
+            }[];
+            connect_events: boolean;
+            created_at: string;
+            max_message_length: number;
+            message_retention: string;
+            mutes: boolean;
+            reactions: boolean;
+            read_events: boolean;
+            replies: boolean;
+            search: boolean;
+            typing_events: boolean;
+            updated_at: string;
+            uploads: boolean;
+            url_enrichment: boolean;
+        };
+        created_at: string;
+        created_by: {
+            banned: boolean;
+            created_at: string;
+            id: string;
+            image: string;
+            name: string;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        frozen: boolean;
+        id: string;
+        own_capabilities: string[];
+        type: string;
+        updated_at: string;
+    };
+    id: string;
+    state: {
+        members: {};
+        messages: never[];
+        setIsUpToDate: jest.Mock<any, any>;
+    };
+    type: string;
+};
+export function generateChannelResponse(customValues?: {
+    channel: {};
+    id: string;
+    type: string;
+}): {
+    channel: {
+        id: string;
+        type: string;
+        user: {
+            banned: boolean;
+            created_at: string;
+            id: string;
+            image: string;
+            name: string;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        cid: string;
+        config: {
+            name: string;
+            type: string;
+            automod: string;
+            automod_behavior: string;
+            commands: {
+                args: string;
+                description: string;
+                name: string;
+                set: string;
+            }[];
+            connect_events: boolean;
+            created_at: string;
+            max_message_length: number;
+            message_retention: string;
+            mutes: boolean;
+            reactions: boolean;
+            read_events: boolean;
+            replies: boolean;
+            search: boolean;
+            typing_events: boolean;
+            updated_at: string;
+            uploads: boolean;
+            url_enrichment: boolean;
+        };
+        created_at: string;
+        created_by: {
+            banned: boolean;
+            created_at: string;
+            id: string;
+            image: string;
+            name: string;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        frozen: boolean;
+        own_capabilities: string[];
+        updated_at: string;
+    };
+    members: never[];
+    messages: never[];
+};

package/lib/typescript/mock-builders/generator/message.d.ts

@@ -0,0 +1,38 @@
+export function generateMessage(options?: {}): {
+    attachments: never[];
+    created_at: any;
+    html: string;
+    id: string;
+    text: string;
+    type: string;
+    updated_at: any;
+    user: {
+        banned: boolean;
+        created_at: string;
+        id: string;
+        image: string;
+        name: string;
+        online: boolean;
+        role: string;
+        updated_at: string;
+    };
+};
+export function generateStaticMessage(seed: any, options: any, date: any): {
+    attachments: never[];
+    created_at: any;
+    html: string;
+    id: string;
+    text: string;
+    type: string;
+    updated_at: any;
+    user: {
+        banned: boolean;
+        created_at: string;
+        id: string;
+        image: string;
+        name: string;
+        online: boolean;
+        role: string;
+        updated_at: string;
+    };
+};

package/lib/typescript/mock-builders/generator/user.d.ts

@@ -1,9 +1,9 @@
 export function getUserDefaults(): {
     banned: boolean;
     created_at: string;
-    id: any;
-    image: any;
-    name: any;
+    id: string;
+    image: string;
+    name: string;
     online: boolean;
     role: string;
     updated_at: string;
@@ -11,9 +11,9 @@ export function getUserDefaults(): {
 export function generateUser(options?: {}): {
     banned: boolean;
     created_at: string;
-    id: any;
-    image: any;
-    name: any;
+    id: string;
+    image: string;
+    name: string;
     online: boolean;
     role: string;
     updated_at: string;
@@ -21,9 +21,9 @@ export function generateUser(options?: {}): {
 export function generateStaticUser(userNumber: any): {
     banned: boolean;
     created_at: string;
-    id: any;
-    image: any;
-    name: any;
+    id: string;
+    image: string;
+    name: string;
     online: boolean;
     role: string;
     updated_at: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.9.0-beta.2",
+  "version": "4.9.0",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -34,7 +34,8 @@
     "prepare-distribution": "cd examples/SampleApp && npm version patch && react-native-version && git add ./ && git commit -m 'Bump build version' --no-verify",
     "prettier": "prettier --list-different '**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
     "prettier-fix": "prettier --write '**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
-    "test:unit": "TZ=UTC jest --coverage",
+    "test:coverage": "yarn test:unit --coverage",
+    "test:unit": "TZ=UTC jest",
     "validate-translations": "node bin/validate-translations.js",
     "get-version": "echo $npm_package_version",
     "version": "bash ./bin/before-tag.sh",
@@ -79,7 +80,7 @@
     "react-art": "^17.0.2",
     "react-native-markdown-package": "1.8.1",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "6.2.0"
+    "stream-chat": "6.7.0"
   },
   "peerDependencies": {
     "react-native-svg": "^12.1.0"
@@ -87,18 +88,18 @@
   "devDependencies": {
     "@babel/cli": "^7.12.17",
     "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
     "@babel/plugin-proposal-object-rest-spread": "7.13.8",
     "@babel/plugin-transform-runtime": "7.13.10",
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.13.12",
     "@babel/preset-typescript": "7.13.0",
+    "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "2.0.0",
     "@react-native-community/eslint-plugin": "1.1.0",
     "@react-native-community/netinfo": "6.0.0",
     "@testing-library/jest-native": "4.0.4",
-    "@testing-library/react-native": "9.0.0",
     "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/react-native": "9.0.0",
     "@types/eslint": "7.2.10",
     "@types/jest": "26.0.23",
     "@types/lodash": "4.14.169",
@@ -106,6 +107,7 @@
     "@types/react": "17.0.5",
     "@types/react-native": "0.67.3",
     "@types/react-test-renderer": "17.0.1",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "babel-eslint": "10.1.0",

package/src/components/Attachment/Gallery.tsx

@@ -1,10 +1,13 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import { GalleryImage } from './GallaryImage';
 import { useLoadingImage } from './hooks/useLoadingImage';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
+import type { Thumbnail } from './utils/buildGallery/types';
 import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius';
 
 import { openUrlSafely } from './utils/openUrlSafely';
@@ -135,26 +138,18 @@ const GalleryWithContext = <
     VideoThumbnail,
   } = props;
 
-  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
-    useLoadingImage();
-
   const {
     theme: {
-      colors: { overlay },
       messageSimple: {
         gallery: {
           galleryContainer,
           galleryItemColumn,
           gridHeight,
           gridWidth,
-          image,
-          imageContainer,
           maxHeight,
           maxWidth,
           minHeight,
           minWidth,
-          moreImagesContainer,
-          moreImagesText,
         },
       },
     },
@@ -180,8 +175,6 @@ const GalleryWithContext = <
   );
 
   if (!imagesAndVideos?.length) return null;
-  const messageText = message?.text;
-  const messageId = message?.id;
   const numOfColumns = thumbnailGrid.length;
 
   return (
@@ -212,31 +205,7 @@ const GalleryWithContext = <
             ]}
             testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
           >
-            {rows.map(({ height, resizeMode, type, url, width }, rowIndex) => {
-              const openImageViewer = () => {
-                if (!legacyImageViewerSwipeBehaviour && message) {
-                  // Added if-else to keep the logic readable, instead of DRY.
-                  // if - legacyImageViewerSwipeBehaviour is disabled
-                  // else - legacyImageViewerSwipeBehaviour is enabled
-                  setImages([message]);
-                  setImage({ messageId: message.id, url });
-                  setOverlay('gallery');
-                } else if (legacyImageViewerSwipeBehaviour) {
-                  setImage({ messageId: message?.id, url });
-                  setOverlay('gallery');
-                }
-              };
-
-              const defaultOnPress = () => {
-                if (type === 'video' && !isVideoPackageAvailable()) {
-                  // This condition is kinda unreachable, since we render videos as file attachment if the video
-                  // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
-                  openUrlSafely(url);
-                } else {
-                  openImageViewer();
-                }
-              };
-
+            {rows.map((thumbnail, rowIndex) => {
               const borderRadius = getGalleryImageBorderRadius({
                 alignment,
                 colIndex,
@@ -244,7 +213,7 @@ const GalleryWithContext = <
                 hasThreadReplies,
                 height,
                 invertedDirections,
-                messageText,
+                messageText: message?.text,
                 numOfColumns,
                 numOfRows,
                 rowIndex,
@@ -253,111 +222,35 @@ const GalleryWithContext = <
                 width,
               });
 
+              if (message === undefined) {
+                return null;
+              }
+
               return (
-                <TouchableOpacity
-                  activeOpacity={0.8}
-                  disabled={preventPress}
-                  key={`gallery-item-${messageId}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
-                  onLongPress={(event) => {
-                    if (onLongPress) {
-                      onLongPress({
-                        emitter: 'gallery',
-                        event,
-                      });
-                    }
-                  }}
-                  onPress={(event) => {
-                    if (onPress) {
-                      onPress({
-                        defaultHandler: defaultOnPress,
-                        emitter: 'gallery',
-                        event,
-                      });
-                    }
-                  }}
-                  onPressIn={(event) => {
-                    if (onPressIn) {
-                      onPressIn({
-                        defaultHandler: defaultOnPress,
-                        emitter: 'gallery',
-                        event,
-                      });
-                    }
-                  }}
-                  style={[
-                    styles.imageContainer,
-                    {
-                      height,
-                      width,
-                    },
-                    imageContainer,
-                  ]}
-                  testID={`gallery-${
-                    invertedDirections ? 'row' : 'column'
-                  }-${colIndex}-item-${rowIndex}`}
-                  {...additionalTouchableProps}
-                >
-                  {type === 'video' ? (
-                    <VideoThumbnail
-                      style={[
-                        borderRadius,
-                        image,
-                        {
-                          height: height - 1,
-                          width: width - 1,
-                        },
-                      ]}
-                    />
-                  ) : (
-                    <View style={styles.imageContainerStyle}>
-                      <MemoizedGalleryImage
-                        onError={(error) => {
-                          console.warn(error);
-                          setLoadingImage(false);
-                          setLoadingImageError(true);
-                        }}
-                        onLoadEnd={() => setLoadingImage(false)}
-                        onLoadStart={() => setLoadingImage(true)}
-                        resizeMode={resizeMode}
-                        style={[
-                          borderRadius,
-                          image,
-                          {
-                            height: height - 1,
-                            width: width - 1,
-                          },
-                        ]}
-                        uri={url}
-                      />
-                      {isLoadingImage && (
-                        <View style={{ position: 'absolute' }}>
-                          <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
-                        </View>
-                      )}
-                      {isLoadingImageError && (
-                        <View style={{ position: 'absolute' }}>
-                          <ImageLoadingFailedIndicator style={styles.imageLoadingIndicatorStyle} />
-                        </View>
-                      )}
-                    </View>
-                  )}
-                  {colIndex === numOfColumns - 1 &&
-                  rowIndex === numOfRows - 1 &&
-                  imagesAndVideos.length > 4 ? (
-                    <View
-                      style={[
-                        StyleSheet.absoluteFillObject,
-                        styles.moreImagesContainer,
-                        { backgroundColor: overlay },
-                        moreImagesContainer,
-                      ]}
-                    >
-                      <Text style={[styles.moreImagesText, moreImagesText]}>
-                        {`+${imagesAndVideos.length - 4}`}
-                      </Text>
-                    </View>
-                  ) : null}
-                </TouchableOpacity>
+                <GalleryThumbnail
+                  additionalTouchableProps={additionalTouchableProps}
+                  borderRadius={borderRadius}
+                  colIndex={colIndex}
+                  ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
+                  ImageLoadingIndicator={ImageLoadingIndicator}
+                  imagesAndVideos={imagesAndVideos}
+                  invertedDirections={invertedDirections || false}
+                  key={rowIndex}
+                  legacyImageViewerSwipeBehaviour={legacyImageViewerSwipeBehaviour}
+                  message={message}
+                  numOfColumns={numOfColumns}
+                  numOfRows={numOfRows}
+                  onLongPress={onLongPress}
+                  onPress={onPress}
+                  onPressIn={onPressIn}
+                  preventPress={preventPress}
+                  rowIndex={rowIndex}
+                  setImage={setImage}
+                  setImages={setImages}
+                  setOverlay={setOverlay}
+                  thumbnail={thumbnail}
+                  VideoThumbnail={VideoThumbnail}
+                />
               );
             })}
           </View>
@@ -367,6 +260,204 @@ const GalleryWithContext = <
   );
 };
 
+type GalleryThumbnailProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  borderRadius: {
+    borderBottomLeftRadius: number;
+    borderBottomRightRadius: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+  };
+  colIndex: number;
+  imagesAndVideos: Attachment<StreamChatGenerics>[];
+  invertedDirections: boolean;
+  message: MessageType<StreamChatGenerics>;
+  numOfColumns: number;
+  numOfRows: number;
+  rowIndex: number;
+  thumbnail: Thumbnail;
+} & Pick<
+  MessagesContextValue<StreamChatGenerics>,
+  | 'additionalTouchableProps'
+  | 'legacyImageViewerSwipeBehaviour'
+  | 'VideoThumbnail'
+  | 'ImageLoadingIndicator'
+  | 'ImageLoadingFailedIndicator'
+> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
+  > &
+  Pick<OverlayContextValue, 'setOverlay'>;
+
+const GalleryThumbnail = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  additionalTouchableProps,
+  borderRadius,
+  colIndex,
+  ImageLoadingFailedIndicator,
+  ImageLoadingIndicator,
+  imagesAndVideos,
+  invertedDirections,
+  legacyImageViewerSwipeBehaviour,
+  message,
+  numOfColumns,
+  numOfRows,
+  onLongPress,
+  onPress,
+  onPressIn,
+  preventPress,
+  rowIndex,
+  setImage,
+  setImages,
+  setOverlay,
+  thumbnail,
+  VideoThumbnail,
+}: GalleryThumbnailProps<StreamChatGenerics>) => {
+  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
+    useLoadingImage();
+
+  const {
+    theme: {
+      colors: { overlay },
+      messageSimple: {
+        gallery: { image, imageContainer, moreImagesContainer, moreImagesText },
+      },
+    },
+  } = useTheme();
+
+  const openImageViewer = () => {
+    if (!legacyImageViewerSwipeBehaviour && message) {
+      // Added if-else to keep the logic readable, instead of DRY.
+      // if - legacyImageViewerSwipeBehaviour is disabled
+      // else - legacyImageViewerSwipeBehaviour is enabled
+      setImages([message]);
+      setImage({ messageId: message.id, url: thumbnail.url });
+      setOverlay('gallery');
+    } else if (legacyImageViewerSwipeBehaviour) {
+      setImage({ messageId: message?.id, url: thumbnail.url });
+      setOverlay('gallery');
+    }
+  };
+
+  const defaultOnPress = () => {
+    if (thumbnail.type === 'video' && !isVideoPackageAvailable()) {
+      // This condition is kinda unreachable, since we render videos as file attachment if the video
+      // library is not installed. But doesn't hurt to have extra safeguard, in case of some customizations.
+      openUrlSafely(thumbnail.url);
+    } else {
+      openImageViewer();
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      disabled={preventPress}
+      key={`gallery-item-${message.id}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
+      onLongPress={(event) => {
+        if (onLongPress) {
+          onLongPress({
+            emitter: 'gallery',
+            event,
+          });
+        }
+      }}
+      onPress={(event) => {
+        if (onPress) {
+          onPress({
+            defaultHandler: defaultOnPress,
+            emitter: 'gallery',
+            event,
+          });
+        }
+      }}
+      onPressIn={(event) => {
+        if (onPressIn) {
+          onPressIn({
+            defaultHandler: defaultOnPress,
+            emitter: 'gallery',
+            event,
+          });
+        }
+      }}
+      style={[
+        styles.imageContainer,
+        {
+          height: thumbnail.height,
+          width: thumbnail.width,
+        },
+        imageContainer,
+      ]}
+      testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}-item-${rowIndex}`}
+      {...additionalTouchableProps}
+    >
+      {thumbnail.type === 'video' ? (
+        <VideoThumbnail
+          style={[
+            borderRadius,
+            image,
+            {
+              height: thumbnail.height - 1,
+              width: thumbnail.width - 1,
+            },
+          ]}
+          thumb_url={thumbnail.thumb_url}
+        />
+      ) : (
+        <View style={styles.imageContainerStyle}>
+          <MemoizedGalleryImage
+            onError={(error) => {
+              console.warn(error);
+              setLoadingImage(false);
+              setLoadingImageError(true);
+            }}
+            onLoadEnd={() => setLoadingImage(false)}
+            onLoadStart={() => setLoadingImage(true)}
+            resizeMode={thumbnail.resizeMode}
+            style={[
+              borderRadius,
+              image,
+              {
+                height: thumbnail.height - 1,
+                width: thumbnail.width - 1,
+              },
+            ]}
+            uri={thumbnail.url}
+          />
+          {isLoadingImage && (
+            <View style={{ position: 'absolute' }}>
+              <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
+            </View>
+          )}
+          {isLoadingImageError && (
+            <View style={{ position: 'absolute' }}>
+              <ImageLoadingFailedIndicator style={styles.imageLoadingIndicatorStyle} />
+            </View>
+          )}
+        </View>
+      )}
+      {colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1 && imagesAndVideos.length > 4 ? (
+        <View
+          style={[
+            StyleSheet.absoluteFillObject,
+            styles.moreImagesContainer,
+            { backgroundColor: overlay },
+            moreImagesContainer,
+          ]}
+        >
+          <Text style={[styles.moreImagesText, moreImagesText]}>
+            {`+${imagesAndVideos.length - 4}`}
+          </Text>
+        </View>
+      ) : null}
+    </TouchableOpacity>
+  );
+};
+
 const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   prevProps: GalleryPropsWithContext<StreamChatGenerics>,
   nextProps: GalleryPropsWithContext<StreamChatGenerics>,