stream-chat-react-native-core 4.0.0-beta.1 → 4.0.0-beta.5

package/src/components/Attachment/Giphy.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import type { Attachment } from 'stream-chat';
+
 import {
   MessageContextValue,
   useMessageContext,
@@ -10,13 +12,8 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Left } from '../../icons/Left';
+import { GiphyIcon } from '../../icons';
 import { Lightning } from '../../icons/Lightning';
-import { Right } from '../../icons/Right';
-import { makeImageCompatibleUrl } from '../../utils/utils';
-
-import type { Attachment } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -27,27 +24,23 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { makeImageCompatibleUrl } from '../../utils/utils';
 
 const styles = StyleSheet.create({
+  buttonContainer: { alignItems: 'center', borderTopWidth: 1, flex: 1, justifyContent: 'center' },
   cancel: {
     fontSize: 14,
     fontWeight: '600',
     paddingVertical: 16,
   },
-  cancelContainer: {
-    alignItems: 'center',
-    borderRightWidth: 1,
-    flex: 1,
-    justifyContent: 'center',
-  },
   container: {
     overflow: 'hidden',
-    width: 256,
+    width: 270,
   },
   giphy: {
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-    height: 140,
+    borderRadius: 2,
+    height: 170,
+    width: 270,
   },
   giphyContainer: {
     alignItems: 'center',
@@ -57,36 +50,47 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 68,
   },
+  giphyHeaderText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  giphyHeaderTitle: {
+    fontSize: 14,
+  },
   giphyMask: {
     bottom: 8,
     left: 8,
     position: 'absolute',
   },
-  giphyText: { fontSize: 11, fontWeight: '600' },
+  giphyMaskText: { fontSize: 13, fontWeight: '600' },
+  header: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 8,
+    width: '60%',
+  },
   margin: {
-    margin: 8,
+    margin: 1,
   },
   row: { flexDirection: 'row' },
   selectionContainer: {
-    borderRadius: 8,
+    borderBottomLeftRadius: 8,
     borderWidth: 1,
     overflow: 'hidden',
-    width: 250,
-  },
-  selector: {
-    alignItems: 'center',
-    borderBottomWidth: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingBottom: 8,
-    paddingHorizontal: 8,
+    width: 272,
   },
   send: {
     fontSize: 14,
     fontWeight: '600',
     paddingVertical: 16,
   },
-  sendContainer: { alignItems: 'center', flex: 1, justifyContent: 'center' },
+  shuffle: {
+    fontSize: 14,
+    fontWeight: '600',
+    paddingVertical: 16,
+  },
   shuffleButton: {
     alignItems: 'center',
     borderRadius: 16,
@@ -95,11 +99,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 32,
   },
-  title: {
-    fontSize: 14,
-    fontStyle: 'italic',
-    fontWeight: '500',
-  },
 });
 
 export type GiphyPropsWithContext<
@@ -143,22 +142,22 @@ const GiphyWithContext = <
 
   const {
     theme: {
-      colors: { accent_blue, black, border, grey, overlay, white },
+      colors: { accent_blue, black, grey, grey_dark, grey_gainsboro, white },
       messageSimple: {
         giphy: {
+          buttonContainer,
           cancel,
-          cancelContainer,
           container,
           giphy,
           giphyContainer,
+          giphyHeaderText,
+          giphyHeaderTitle,
           giphyMask,
-          giphyText,
+          giphyMaskText,
+          header,
           selectionContainer,
-          selector,
           send,
-          sendContainer,
-          shuffleButton,
-          title: titleStyle,
+          shuffle,
         },
       },
     },
@@ -176,51 +175,49 @@ const GiphyWithContext = <
         selectionContainer,
       ]}
     >
+      <View style={[styles.header, header]}>
+        <GiphyIcon />
+        <Text style={[styles.giphyHeaderText, giphyHeaderText]}>Giphy</Text>
+        <Text
+          style={[styles.giphyHeaderTitle, giphyHeaderTitle, { color: grey_dark }]}
+        >{`/giphy ${title}`}</Text>
+      </View>
       <View style={styles.margin}>
         <Image
           resizeMode='cover'
           source={{ uri: makeImageCompatibleUrl(uri) }}
           style={[styles.giphy, giphy]}
         />
-        <View style={[styles.giphyMask, giphyMask]}>
-          <View style={[styles.giphyContainer, { backgroundColor: overlay }, giphyContainer]}>
-            <Lightning height={16} pathFill={white} width={16} />
-            <Text style={[styles.giphyText, { color: white }, giphyText]}>
-              {type?.toUpperCase()}
-            </Text>
-          </View>
-        </View>
       </View>
       <View>
-        <View style={[styles.selector, { borderBottomColor: border }, selector]}>
-          <TouchableOpacity
-            onPress={() => handleAction('image_action', 'shuffle')}
-            style={[styles.shuffleButton, { borderColor: border }, shuffleButton]}
-          >
-            <Left />
-          </TouchableOpacity>
-          <Text style={[styles.title, { color: black }, titleStyle]}>{`"${title}"`}</Text>
+        <View style={styles.row}>
           <TouchableOpacity
             onPress={() => {
-              if (actions?.[1].name && actions?.[1].value && handleAction) {
-                handleAction(actions[1].name, actions[1].value);
+              if (actions?.[2].name && actions?.[2].value && handleAction) {
+                handleAction(actions[2].name, actions[2].value);
               }
             }}
-            style={[styles.shuffleButton, shuffleButton]}
+            style={[
+              styles.buttonContainer,
+              { borderColor: grey_gainsboro, borderRightWidth: 1 },
+              buttonContainer,
+            ]}
           >
-            <Right />
+            <Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
           </TouchableOpacity>
-        </View>
-        <View style={styles.row}>
           <TouchableOpacity
             onPress={() => {
-              if (actions?.[2].name && actions?.[2].value && handleAction) {
-                handleAction(actions[2].name, actions[2].value);
+              if (actions?.[1].name && actions?.[1].value && handleAction) {
+                handleAction(actions[1].name, actions[1].value);
               }
             }}
-            style={[styles.cancelContainer, { borderRightColor: border }, cancelContainer]}
+            style={[
+              styles.buttonContainer,
+              { borderColor: grey_gainsboro, borderRightWidth: 1 },
+              buttonContainer,
+            ]}
           >
-            <Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
+            <Text style={[styles.shuffle, { color: grey }, shuffle]}>{actions?.[1].text}</Text>
           </TouchableOpacity>
           <TouchableOpacity
             onPress={() => {
@@ -228,7 +225,7 @@ const GiphyWithContext = <
                 handleAction(actions[0].name, actions[0].value);
               }
             }}
-            style={[styles.sendContainer, sendContainer]}
+            style={[styles.buttonContainer, { borderColor: grey_gainsboro }, buttonContainer]}
           >
             <Text style={[styles.send, { color: accent_blue }, send]}>{actions?.[0].text}</Text>
           </TouchableOpacity>
@@ -273,9 +270,9 @@ const GiphyWithContext = <
           style={[styles.giphy, giphy]}
         />
         <View style={[styles.giphyMask, giphyMask]}>
-          <View style={[styles.giphyContainer, { backgroundColor: overlay }, giphyContainer]}>
+          <View style={[styles.giphyContainer, { backgroundColor: grey_dark }, giphyContainer]}>
             <Lightning height={16} pathFill={white} width={16} />
-            <Text style={[styles.giphyText, { color: white }, giphyText]}>
+            <Text style={[styles.giphyMaskText, { color: white }, giphyMaskText]}>
               {type?.toUpperCase()}
             </Text>
           </View>

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { Attachment } from '../Attachment';
-import { AttachmentActions } from '../AttachmentActions';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { v4 as uuidv4 } from 'uuid';
 
+import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
   generateAttachmentAction,
@@ -15,7 +15,8 @@ import {
   generateImgurAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
-import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import { Attachment } from '../Attachment';
+import { AttachmentActions } from '../AttachmentActions';
 
 const getAttachmentComponent = (props) => {
   const message = generateMessage();
@@ -71,7 +72,10 @@ describe('Attachment', () => {
   });
 
   it('should render UrlPreview component if attachment has title_link or og_scrape_url', async () => {
-    const attachment = generateImageAttachment();
+    const attachment = generateImageAttachment({
+      og_scrape_url: uuidv4(),
+      title_link: uuidv4(),
+    });
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
@@ -80,14 +84,11 @@ describe('Attachment', () => {
   });
 
   it('should render Gallery component if image does not have title_link or og_scrape_url', async () => {
-    const attachment = generateImageAttachment({
-      og_scrape_url: undefined,
-      title_link: undefined,
-    });
+    const attachment = generateImageAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
-      expect(getByTestId('image-multiple')).toBeTruthy();
+      expect(getByTestId('gallery-container')).toBeTruthy();
     });
   });
 

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -0,0 +1,233 @@
+import React from 'react';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
+import { generateMember } from '../../../mock-builders/generator/member';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageList } from '../../MessageList/MessageList';
+
+describe('Gallery', () => {
+  const user1 = generateUser();
+
+  const getComponent = async (attachments = []) => {
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [generateMessage({ attachments, user: user1 })],
+    });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    return (
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    );
+  };
+
+  /**
+   * -----------
+   * |    |    |
+   * |    |    |
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render two portrait images in two columns', async () => {
+    const attachment1 = generateImageAttachment({
+      original_height: 600,
+      original_width: 400,
+    });
+    const attachment2 = generateImageAttachment({
+      original_height: 700,
+      original_width: 400,
+    });
+    const component = await getComponent([attachment1, attachment2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      // expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+    });
+  });
+
+  it('should render portrait and landscape image in two rows', async () => {
+    const attachment1 = generateImageAttachment({
+      original_height: 600,
+      original_width: 400,
+    });
+    const attachment2 = generateImageAttachment({
+      original_height: 200,
+      original_width: 400,
+    });
+    const component = await getComponent([attachment1, attachment2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-0-item-1').length).toBe(1);
+    });
+  });
+
+  /**
+   *
+   * ----------
+   * |        |
+   * ----------
+   * |        |
+   * ----------
+   */
+  it('should render two landscape images in two rows', async () => {
+    const attachment1 = generateImageAttachment({
+      original_height: 200,
+      original_width: 400,
+    });
+    const attachment2 = generateImageAttachment({
+      original_height: 300,
+      original_width: 400,
+    });
+    const component = await getComponent([attachment1, attachment2]);
+    const { queryAllByTestId } = render(component);
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+    });
+  });
+
+  /**
+   * -----------
+   * |    |    |
+   * |    |    |
+   * |    |----|
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render 3 images containing a portrait image in two columns, with portrait in its own column', async () => {
+    const portraitImage = generateImageAttachment({
+      original_height: 600,
+      original_width: 300,
+    });
+    const squareImage1 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const squareImage2 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+
+    const component = await getComponent([portraitImage, squareImage1, squareImage2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-column-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-column-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
+    });
+  });
+
+  /**
+   * -----------
+   * |         |
+   * |         |
+   * |---------|
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render 3 images containing a landscape image in two rows, with landscape in its own row', async () => {
+    const portraitImage = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+    const squareImage1 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const squareImage2 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+
+    const component = await getComponent([portraitImage, squareImage1, squareImage2]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-row-1-item-1').length).toBe(1);
+    });
+  });
+
+  /**
+   * -----------
+   * |    |    |
+   * |    |    |
+   * -----------
+   * |    |    |
+   * |    |    |
+   * -----------
+   */
+  it('should render 4 images in grid of two columns and 2 rows', async () => {
+    const image1 = generateImageAttachment({
+      original_height: 300,
+      original_width: 600,
+    });
+    const image2 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const image3 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+    const image4 = generateImageAttachment({
+      original_height: 400,
+      original_width: 400,
+    });
+
+    const component = await getComponent([image1, image2, image3, image4]);
+    const { queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-column-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-column-0-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-0-item-1').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-0').length).toBe(1);
+      expect(queryAllByTestId('gallery-column-1-item-1').length).toBe(1);
+    });
+  });
+});

package/src/components/Attachment/__tests__/buildGallery.test.js

@@ -0,0 +1,131 @@
+import { PixelRatio } from 'react-native';
+
+import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
+import { buildGallery } from '../utils/buildGallery/buildGallery';
+
+describe('buildGallery', () => {
+  const defaultSizeConfig = {
+    gridHeight: 100,
+    gridWidth: 200,
+    maxHeight: 300,
+    maxWidth: 350,
+    minHeight: 10,
+    minWidth: 20,
+  };
+
+  it('gallery size should not exceed max sizes provided by size config', () => {
+    const imageSizeTestCases = [
+      { original_height: 1000, original_width: 2000 },
+      { original_height: 100, original_width: 200 },
+      { original_height: 10, original_width: 20 },
+      { original_height: 200, original_width: 300 },
+    ];
+
+    imageSizeTestCases.forEach((size) => {
+      const attachments = [];
+      for (let numOfImages = 0; numOfImages < 4; numOfImages++) {
+        const a1 = generateImageAttachment({
+          ...size,
+        });
+
+        attachments.push(a1);
+
+        const { height, thumbnailGrid, width } = buildGallery({
+          images: attachments,
+          sizeConfig: defaultSizeConfig,
+        });
+
+        expect(height).toBeLessThanOrEqual(defaultSizeConfig.maxHeight);
+        expect(height).toBeGreaterThanOrEqual(defaultSizeConfig.minHeight);
+
+        expect(width).toBeLessThanOrEqual(defaultSizeConfig.maxWidth);
+        expect(width).toBeGreaterThanOrEqual(defaultSizeConfig.minWidth);
+
+        expect(thumbnailGrid[0][0].height).toBeLessThanOrEqual(height);
+        expect(thumbnailGrid[0][0].width).toBeLessThanOrEqual(width);
+      }
+    });
+  });
+
+  it('aspect ratio of gallery container should be same as that of original image', () => {
+    const sizeConfig = {
+      ...defaultSizeConfig,
+      maxHeight: 10000,
+      maxWidth: 10000,
+      minHeight: 0,
+      minWidth: 0,
+    };
+
+    const imageSizeTestCases = [
+      { original_height: 1000, original_width: 2000 },
+      { original_height: 100, original_width: 200 },
+      { original_height: 10, original_width: 20 },
+      { original_height: 200, original_width: 300 },
+    ];
+
+    imageSizeTestCases.forEach((size) => {
+      const a1 = generateImageAttachment({
+        ...size,
+      });
+
+      const { height, width } = buildGallery({
+        images: [a1],
+        sizeConfig,
+      });
+
+      const originalAspectRatio = size.original_width / size.original_height;
+      const resultingAspectRatio = width / height;
+      expect(originalAspectRatio).toBe(resultingAspectRatio);
+    });
+  });
+
+  it('gallery size should default to gridHeight and gridWidth if original image size is unavailable', () => {
+    const attachments = [];
+    for (let numOfImages = 0; numOfImages < 4; numOfImages++) {
+      // During each iteration, size of attachments goes up.
+      attachments.push(generateImageAttachment());
+      const { height, width } = buildGallery({
+        images: attachments,
+        sizeConfig: defaultSizeConfig,
+      });
+
+      expect(height).toBe(defaultSizeConfig.gridHeight);
+      expect(width).toBe(defaultSizeConfig.gridWidth);
+    }
+  });
+
+  it('thumbnail size should be smaller than the limits set by sizeConfig', () => {
+    const bigImage = generateImageAttachment({
+      image_url:
+        'https://stream-io.cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
+      original_height: 1200,
+      original_width: 900,
+    });
+
+    const { thumbnailGrid: tg1 } = buildGallery({
+      images: [bigImage],
+      sizeConfig: defaultSizeConfig,
+    });
+    const t1 = tg1[0][0];
+    expect(t1.url.includes(`h=${PixelRatio.getPixelSizeForLayoutSize(t1.height)}`)).toBe(true);
+    expect(t1.url.includes(`&w=${PixelRatio.getPixelSizeForLayoutSize(t1.width)}`)).toBe(true);
+    expect(t1.url.includes(`&resize=clip`)).toBe(true);
+
+    const smallImage = generateImageAttachment({
+      image_url:
+        'https://stream-io.cdn.com/23kn4k2j3n4k2n3k4n23?sig=34k23n4k23nk423&h=*&w=*&resize=*',
+      original_height: 30,
+      original_width: 20,
+    });
+
+    const { thumbnailGrid: tg2 } = buildGallery({
+      images: [smallImage],
+      sizeConfig: defaultSizeConfig,
+    });
+
+    const t2 = tg2[0][0];
+    expect(t2.url.includes(`h=*`)).toBe(true);
+    expect(t2.url.includes(`&w=*`)).toBe(true);
+    expect(t2.url.includes(`&resize=*`)).toBe(true);
+  });
+});