stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/mock-builders/generator/channel.js

@@ -1,56 +1,111 @@
 import { v4 as uuidv4 } from 'uuid';
 
-export const generateChannel = (options = { channel: {} }) => {
-  const { channel: optionsChannel, ...optionsBesidesChannel } = options;
-  const id = (optionsChannel && optionsChannel.id) || uuidv4();
-  const type = (optionsChannel && optionsChannel.type) || 'messaging';
+import { generateUser, getUserDefaults } from './user';
+
+const defaultCapabilities = [
+  'ban-channel-members',
+  'delete-any-message',
+  'delete-own-message',
+  'flag-message',
+  'mute-channel',
+  'pin-message',
+  'quote-message',
+  'read-events',
+  'send-links',
+  'send-message',
+  'send-reaction',
+  'send-reply',
+  'typing-events',
+  'update-any-message',
+  'update-own-message',
+  'upload-file',
+];
+
+const defaultConfig = {
+  automod: 'disabled',
+  automod_behavior: 'flag',
+  commands: [
+    {
+      args: '[text]',
+      description: 'Post a random gif to the channel',
+      name: 'giphy',
+      set: 'fun_set',
+    },
+  ],
+  connect_events: true,
+  created_at: '2020-04-24T11:36:43.859020368Z',
+  max_message_length: 5000,
+  message_retention: 'infinite',
+  mutes: true,
+  name: 'messaging',
+  reactions: true,
+  read_events: true,
+  replies: true,
+  search: true,
+  typing_events: true,
+  updated_at: '2020-04-24T11:36:43.859022903Z',
+  uploads: true,
+  url_enrichment: true,
+};
+const defaultState = {
+  members: {},
+  messages: [],
+  setIsUpToDate: jest.fn(),
+};
+
+const getChannelDefaults = ({ id, type } = { id: uuidv4(), type: 'messaging' }) => ({
+  _client: {},
+  data: {
+    cid: `${type}:${id}`,
+    config: {
+      ...defaultConfig,
+      name: type,
+      type,
+    },
+    created_at: '2020-04-28T11:20:48.578147Z',
+    created_by: getUserDefaults(),
+    frozen: false,
+    id,
+    own_capabilities: defaultCapabilities,
+    type,
+    updated_at: '2020-04-28T11:20:48.578147Z',
+  },
+  id,
+  state: defaultState,
+  type,
+});
+
+export const generateChannel = (customValues) =>
+  Object.keys(customValues).reduce((accumulated, current) => {
+    if (Object.prototype.hasOwnProperty.call(accumulated, current)) {
+      accumulated[current] =
+        typeof accumulated[current] === 'object'
+          ? { ...accumulated[current], ...customValues[current] }
+          : (accumulated[current] = customValues[current]);
+      return accumulated;
+    }
+    return { ...accumulated, [current]: customValues[current] };
+  }, getChannelDefaults());
+
+export const generateChannelResponse = (
+  customValues = { channel: {}, id: uuidv4(), type: 'messaging' },
+) => {
+  const { id = uuidv4(), type = 'messaging', channel = {}, ...rest } = customValues;
+
+  const defaults = getChannelDefaults();
   return {
     channel: {
-      cid: `${type}:${id}`,
-      config: {
-        automod: 'disabled',
-        automod_behavior: 'flag',
-        commands: [
-          {
-            args: '[text]',
-            description: 'Post a random gif to the channel',
-            name: 'giphy',
-            set: 'fun_set',
-          },
-        ],
-        connect_events: true,
-        created_at: '2020-04-24T11:36:43.859020368Z',
-        max_message_length: 5000,
-        message_retention: 'infinite',
-        mutes: true,
-        name: 'messaging',
-        reactions: true,
-        read_events: true,
-        replies: true,
-        search: true,
-        typing_events: true,
-        updated_at: '2020-04-24T11:36:43.859022903Z',
-        uploads: true,
-        url_enrichment: true,
-      },
-      created_at: '2020-04-28T11:20:48.578147Z',
-      created_by: {
-        banned: false,
-        created_at: '2020-04-27T13:05:13.847572Z',
-        id: 'vishal',
-        last_active: '2020-04-28T11:21:08.353026Z',
-        online: false,
-        role: 'user',
-        updated_at: '2020-04-28T11:21:08.357468Z',
+      ...defaults.data,
+      ...{
+        cid: `${type}:${id}`,
+        ...channel,
+        id,
+        type,
+        user: generateUser(),
       },
-      frozen: false,
-      id,
-      type,
-      updated_at: '2020-04-28T11:20:48.578147Z',
-      ...optionsChannel,
     },
     members: [],
     messages: [],
-    ...optionsBesidesChannel,
+    ...rest,
   };
 };

package/src/mock-builders/generator/user.js

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 
-export const generateUser = (options = {}) => ({
+export const getUserDefaults = () => ({
   banned: false,
   created_at: '2020-04-27T13:39:49.331742Z',
   id: uuidv4(),
@@ -9,34 +9,41 @@ export const generateUser = (options = {}) => ({
   online: false,
   role: 'user',
   updated_at: '2020-04-27T13:39:49.332087Z',
+});
+
+export const generateUser = (options = {}) => ({
+  ...getUserDefaults(),
   ...options,
 });
 
+const staticUsers = [
+  // By the order of...
+  generateUser({
+    id: 'tommy',
+    image: 'https://i.imgur.com/ytIyojl.png',
+    name: 'Thomas',
+  }),
+  generateUser({
+    id: 'arthur',
+    image: 'https://i.imgur.com/LuuGvh0.png',
+    name: 'Arthur',
+  }),
+  generateUser({
+    id: 'john',
+    image: 'https://i.imgur.com/LbtxRjf.png',
+    name: 'John',
+  }),
+  generateUser({
+    id: 'finn',
+    image: 'https://i.imgur.com/spueyAP.png',
+    name: 'Finn',
+  }),
+];
+
 export const generateStaticUser = (userNumber) => {
-  switch (userNumber) {
-    case 0:
-      return generateUser({
-        id: 'DannyBoi1',
-        image: 'https://images-na.ssl-images-amazon.com/images/I/51t29lLkg8L._AC_SL1000_.jpg',
-        name: 'Dan',
-      });
-    case 1:
-      return generateUser({
-        id: 'GrantyBoi2',
-        image: 'https://i.imgur.com/SLx06PP.png',
-        name: 'Grant',
-      });
-    case 2:
-      return generateUser({
-        id: 'ViriBoi2',
-        image: 'https://i.imgur.com/iNaC3K7.jpg',
-        name: 'Vir',
-      });
-    default:
-      return generateUser({
-        id: 'NeiliBoi3',
-        image: 'https://i.imgur.com/T68W8nR_d.webp?maxwidth=728&fidelity=grand',
-        name: 'Neil',
-      });
+  if (userNumber - 1 > staticUsers.length) {
+    throw new Error(`Tried getting a static user that doesn't exist.
+Index: ${userNumber} , number of users: ${staticUsers.length}`);
   }
+  return staticUsers[userNumber];
 };

package/src/mock-builders/mock.js

@@ -28,10 +28,10 @@ function mockClient(client) {
   return client;
 }
 
-export const getTestClient = () => mockClient(StreamChat.getInstance(apiKey));
+export const getTestClient = () => mockClient(new StreamChat(apiKey));
 
 export const getTestClientWithUser = async (user) => {
-  const client = mockClient(StreamChat.getInstance(apiKey));
+  const client = mockClient(new StreamChat(apiKey));
   await setUser(client, user);
   client.wsPromise = Promise.resolve();
   return client;

package/src/mock-builders/native/react-native-mock.js

@@ -1 +1 @@
-jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package/src/native.ts

@@ -1,4 +1,5 @@
-import { FlatList as DefaultFlatList, StyleProp, ViewStyle } from 'react-native';
+import { FlatList as DefaultFlatList } from 'react-native';
+
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
 
 const fail = () => {
@@ -7,13 +8,6 @@ const fail = () => {
   );
 };
 
-type BlurView = React.ComponentType<{
-  blurAmount?: number;
-  blurType?: string;
-  style?: StyleProp<ViewStyle>;
-}>;
-export let BlurView: BlurView = fail;
-
 type CompressImage = ({
   compressImageQuality,
   height,
@@ -111,7 +105,6 @@ export let triggerHaptic: TriggerHaptic = fail;
 export let SDK: string;
 
 type Handlers = {
-  BlurView?: BlurView;
   compressImage?: CompressImage;
   deleteFile?: DeleteFile;
   FlatList?: typeof DefaultFlatList;
@@ -127,10 +120,6 @@ type Handlers = {
 };
 
 export const registerNativeHandlers = (handlers: Handlers) => {
-  if (handlers.BlurView) {
-    BlurView = handlers.BlurView;
-  }
-
   if (handlers.compressImage) {
     compressImage = handlers.compressImage;
   }

package/src/types/types.ts

@@ -1,24 +1,22 @@
-import type { LiteralStringForUnion } from 'stream-chat';
+import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
 
-export type DefaultAttachmentType = UnknownType & {
-  file_size?: number | string;
-  mime_type?: string;
-};
-
-export type DefaultChannelType = UnknownType & {
+interface DefaultUserType extends UnknownType {
   image?: string;
-};
-
-export type DefaultCommandType = LiteralStringForUnion;
-
-export type DefaultEventType = UnknownType;
-
-export type DefaultMessageType = UnknownType;
-
-export type DefaultReactionType = UnknownType;
+}
 
-export type DefaultUserType = UnknownType & {
+interface DefaultChannelType extends UnknownType {
+  [key: string]: unknown;
   image?: string;
-};
+}
+
+export interface DefaultStreamChatGenerics extends ExtendableGenerics {
+  attachmentType: UnknownType;
+  channelType: DefaultChannelType;
+  commandType: LiteralStringForUnion;
+  eventType: UnknownType;
+  messageType: UnknownType;
+  reactionType: UnknownType;
+  userType: DefaultUserType;
+}
 
 export type UnknownType = Record<string, unknown>;

package/src/utils/Streami18n.ts

@@ -6,10 +6,15 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import i18n, { FallbackLng, TFunction } from 'i18next';
 
+import type moment from 'moment';
+
+import type { TDateTimeParser } from '../contexts/translationContext/TranslationContext';
 import enTranslations from '../i18n/en.json';
 import frTranslations from '../i18n/fr.json';
 import hiTranslations from '../i18n/hi.json';
 import itTranslations from '../i18n/it.json';
+import jaTranslations from '../i18n/ja.json';
+import koTranslations from '../i18n/ko.json';
 import nlTranslations from '../i18n/nl.json';
 import ruTranslations from '../i18n/ru.json';
 import trTranslations from '../i18n/tr.json';
@@ -20,6 +25,8 @@ const defaultLng = 'en';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/hi';
 import 'dayjs/locale/it';
+import 'dayjs/locale/ja';
+import 'dayjs/locale/ko';
 import 'dayjs/locale/nl';
 import 'dayjs/locale/ru';
 import 'dayjs/locale/tr';
@@ -31,10 +38,7 @@ import 'dayjs/locale/tr';
  */
 import 'dayjs/locale/en';
 
-import type moment from 'moment';
-
-import type { TDateTimeParser } from '../contexts/translationContext/TranslationContext';
-import type { UnknownType } from '../types/types';
+import type { DefaultStreamChatGenerics } from '../types/types';
 
 Dayjs.extend(updateLocale);
 
@@ -348,13 +352,15 @@ export class Streami18n {
 
   translations: {
     [key: string]: {
-      [key: string]: Partial<typeof enTranslations> | UnknownType;
+      [key: string]: Partial<typeof enTranslations> | DefaultStreamChatGenerics;
     };
   } = {
     en: { [defaultNS]: enTranslations },
     fr: { [defaultNS]: frTranslations },
     hi: { [defaultNS]: hiTranslations },
     it: { [defaultNS]: itTranslations },
+    ja: { [defaultNS]: jaTranslations },
+    ko: { [defaultNS]: koTranslations },
     nl: { [defaultNS]: nlTranslations },
     ru: { [defaultNS]: ruTranslations },
     tr: { [defaultNS]: trTranslations },
@@ -579,7 +585,7 @@ export class Streami18n {
    */
   registerTranslation(
     language: string,
-    translation: Partial<typeof enTranslations> | UnknownType,
+    translation: Partial<typeof enTranslations> | DefaultStreamChatGenerics,
     customDayjsLocale?: Partial<ILocale>,
   ) {
     if (!translation) {

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

@@ -2,55 +2,17 @@ import { default as Dayjs } from 'dayjs';
 import 'dayjs/locale/nl';
 import localeData from 'dayjs/plugin/localeData';
 
-import { Streami18n } from '../Streami18n';
-
 import frTranslations from '../../i18n/fr.json';
 import nlTranslations from '../../i18n/nl.json';
+import { Streami18n } from '../Streami18n';
 
 Dayjs.extend(localeData);
 
 const customDayjsLocaleConfig = {
-  calendar: {
-    lastDay: '[Í gjár kl.] LT',
-    lastWeek: '[síðstu] dddd [kl] LT',
-    nextDay: '[Í morgin kl.] LT',
-    nextWeek: 'dddd [kl.] LT',
-    sameDay: '[Í dag kl.] LT',
-    sameElse: 'L',
-  },
-  dayOfMonthOrdinalParse: /\d{1,2}\./,
-  formats: {
-    L: 'DD/MM/YYYY',
-    LL: 'D MMMM YYYY',
-    LLL: 'D MMMM YYYY HH:mm',
-    LLLL: 'dddd D. MMMM, YYYY HH:mm',
-    LT: 'HH:mm',
-    LTS: 'HH:mm:ss',
-  },
   months:
     'januar_februar_mars_apríl_mai_juni_juli_august_september_oktober_november_desember'.split('_'),
   monthsShort: 'jan_feb_mar_apr_mai_jun_jul_aug_sep_okt_nov_des'.split('_'),
   ordinal: '%d.',
-  relativeTime: {
-    d: 'ein dagur',
-    dd: '%d dagar',
-    future: 'um %s',
-    h: 'ein tími',
-    hh: '%d tímar',
-    M: 'ein mánaði',
-    m: 'ein minutt',
-    MM: '%d mánaðir',
-    mm: '%d minuttir',
-    past: '%s síðani',
-    s: 'fá sekund',
-    ss: '%d sekundir',
-    y: 'eitt ár',
-    yy: '%d ár',
-  },
-  week: {
-    dow: 1, // Monday is the first day of the week.
-    doy: 4, // The week that contains Jan 4th is the first week of the year.
-  },
   weekdays: 'sunnudagur_mánadagur_týsdagur_mikudagur_hósdagur_fríggjadagur_leygardagur'.split('_'),
   weekdaysMin: 'su_má_tý_mi_hó_fr_le'.split('_'),
   weekdaysShort: 'sun_mán_týs_mik_hós_frí_ley'.split('_'),
@@ -128,10 +90,10 @@ describe('Streami18n instance - with built-in language', () => {
       expect(tDateTimeParser() instanceof Dayjs).toBe(true);
       const localeConfig = tDateTimeParser().localeData();
       for (const key in streami18nOptions.dayjsLocaleConfigForLanguage) {
-        if (localeConfig[key]) {
-          expect(localeConfig[key]()).toStrictEqual(
-            streami18nOptions.dayjsLocaleConfigForLanguage[key],
-          );
+        if (typeof localeConfig[key] === 'function') {
+          expect(localeConfig[key]()).toStrictEqual(customDayjsLocaleConfig[key]);
+        } else {
+          expect(localeConfig[key]).toStrictEqual(customDayjsLocaleConfig[key]);
         }
       }
     });
@@ -197,8 +159,10 @@ describe('registerTranslation - register new language `mr` (Marathi)', () => {
 
     const localeConfig = tDateTimeParser().localeData();
     for (const key in customDayjsLocaleConfig) {
-      if (localeConfig[key]) {
-        expect(customDayjsLocaleConfig[key]).toStrictEqual(localeConfig[key]());
+      if (typeof localeConfig[key] === 'function') {
+        expect(localeConfig[key]()).toStrictEqual(customDayjsLocaleConfig[key]);
+      } else {
+        expect(localeConfig[key]).toStrictEqual(customDayjsLocaleConfig[key]);
       }
     }
   });

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

@@ -0,0 +1,57 @@
+import { PixelRatio } from 'react-native';
+
+import { getResizedImageUrl } from '../getResizedImageUrl';
+
+describe('getResizedImageUrl', () => {
+  it('should return same url if its not cloudfront cdn', () => {
+    const testUrl = 'http://foo.com/blah_(wikipedia)#cite-1';
+
+    const resizedUrl = getResizedImageUrl({ height: 100, url: testUrl, width: 100 });
+    expect(resizedUrl).toEqual(testUrl);
+  });
+
+  it('should append given height, width and resize mode to url', () => {
+    const testUrl =
+      'http://us-east.stream-io-cdn.com/blah?sig=34k23n4k23nk423&oh=300&ow=200&h=*&w=*&resize=*';
+
+    const testConfigs = [
+      { height: 100, resize: 'scale', width: 100 },
+      { height: 200, resize: 'fill', width: 300 },
+      { height: 1000, resize: 'clip', width: 10 },
+    ];
+
+    testConfigs.forEach(({ height, resize, width }) => {
+      const resizedUrl = getResizedImageUrl({ height, resize, url: testUrl, width });
+      const parsedUrl = new URL(resizedUrl);
+      expect(parsedUrl.searchParams.get('h')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(height)}`,
+      );
+      expect(parsedUrl.searchParams.get('w')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(width)}`,
+      );
+      expect(parsedUrl.searchParams.get('resize')).toEqual(resize);
+    });
+  });
+
+  it('should replace wildcards with given height, width and resize mode within url', () => {
+    const testUrl = 'http://us-east.stream-io-cdn.com/blah?oh=300&ow=200&h=*&w=*&resize=*';
+
+    const testConfigs = [
+      { height: 100, resize: 'scale', width: 100 },
+      { height: 200, resize: 'fill', width: 300 },
+      { height: 1000, resize: 'clip', width: 10 },
+    ];
+
+    testConfigs.forEach(({ height, resize, width }) => {
+      const resizedUrl = getResizedImageUrl({ height, resize, url: testUrl, width });
+      const parsedUrl = new URL(resizedUrl);
+      expect(parsedUrl.searchParams.get('h')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(height)}`,
+      );
+      expect(parsedUrl.searchParams.get('w')).toEqual(
+        `${PixelRatio.getPixelSizeForLayoutSize(width)}`,
+      );
+      expect(parsedUrl.searchParams.get('resize')).toEqual(resize);
+    });
+  });
+});

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/date.ts

@@ -0,0 +1,4 @@
+export const ONE_SECOND_IN_MS = 1000;
+
+export const secondsUntil = (date: Date) =>
+  Math.trunc((date.getTime() - Date.now()) / ONE_SECOND_IN_MS);

package/src/utils/getResizedImageUrl.ts

@@ -0,0 +1,59 @@
+import { PixelRatio } from 'react-native';
+
+type GetResizedImageUrlParams = {
+  url: string;
+  height?: string | number;
+  resize?: 'clip' | 'crop' | 'fill' | 'scale';
+  width?: string | number;
+};
+
+/**
+ * Any file or image upload done through stream's chat SDK or components get uploaded
+ * to CloudFront CDN. Following function returns a url of resized image (to given width and height).
+ * It can be used to avoid rendering heavy images on UI, for the sake of performance.
+ *
+ * This function accepts an object with following properties:
+ * - height: height of the resized image.
+ * - url: url of the image.
+ * - width: width of the resized image.
+ *
+ * @returns {string} Url of the image with given height and width.
+ */
+export function getResizedImageUrl({
+  height,
+  resize = 'clip',
+  url,
+  width,
+}: GetResizedImageUrlParams) {
+  try {
+    const parsedUrl = new URL(url);
+
+    const originalHeight = parsedUrl.searchParams.get('oh');
+    const originalWidth = parsedUrl.searchParams.get('ow');
+
+    // If url is not from new cloudfront CDN (which offers fast image resizing), then return the url as it is.
+    // Check for oh and ow parameters in the url, is just to differentiate between old and new CDN.
+    // In case of old CDN we don't want to do any kind of resizing.
+    const isResizableUrl = url.includes('.stream-io-cdn.com') && originalHeight && originalWidth;
+
+    if (!isResizableUrl || (!height && !width)) return url;
+
+    if (height) {
+      parsedUrl.searchParams.set('h', `${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`);
+    }
+
+    if (width) {
+      parsedUrl.searchParams.set('w', `${PixelRatio.getPixelSizeForLayoutSize(Number(width))}`);
+    }
+
+    parsedUrl.searchParams.set('resize', `${resize}`);
+
+    return parsedUrl.toString();
+  } catch (error) {
+    // There is some issue with the url.
+    // Simply return the original url, there is no need to break the app for this.
+    console.warn(error);
+
+    return url;
+  }
+}

package/src/utils/getUrlOfImageAttachment.ts

@@ -0,0 +1,10 @@
+import type { Attachment } from 'stream-chat';
+
+/**
+ * Extract url of image from image attachment.
+ * @param image Image attachment
+ * @returns {string}
+ */
+export function getUrlOfImageAttachment(image: Attachment) {
+  return image.image_url || image.thumb_url;
+}