stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.3

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

@@ -1,74 +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,
-      own_capabilities: [
-        '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',
-      ],
-      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/native.ts

@@ -1,4 +1,5 @@
 import { FlatList as DefaultFlatList } from 'react-native';
+
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
 
 const fail = () => {

package/src/styleguideComponents/ArgumentsRenderer.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
-import Styled, { JssInjectedProps } from 'react-styleguidist/lib/client/rsg-components/Styled';
 import Argument, { ArgumentProps } from 'react-styleguidist/lib/client/rsg-components/Argument';
 import Heading from 'react-styleguidist/lib/client/rsg-components/Heading';
+import Styled, { JssInjectedProps } from 'react-styleguidist/lib/client/rsg-components/Styled';
 import * as Rsg from 'react-styleguidist/lib/typings';
 
 export const styles = ({ space }: Rsg.Theme) => ({

package/src/styleguideComponents/JsDoc.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { TagObject, TagProps } from 'react-docgen';
+
 import map from 'lodash/map';
+import PropTypes from 'prop-types';
 import Markdown from 'react-styleguidist/lib/client/rsg-components/Markdown';
 
 const plural = (array: TagObject[], caption: string) =>

package/src/styleguideComponents/PathlineRenderer.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import copy from 'clipboard-copy';
 import { MdContentCopy } from 'react-icons/md';
 import Link from 'react-styleguidist/lib/client/rsg-components/Link';
-import ToolbarButton from 'react-styleguidist/lib/client/rsg-components/ToolbarButton';
 import Styled, { JssInjectedProps } from 'react-styleguidist/lib/client/rsg-components/Styled';
+import ToolbarButton from 'react-styleguidist/lib/client/rsg-components/ToolbarButton';
 import * as Rsg from 'react-styleguidist/lib/typings';
 
 export const styles = ({ color, fontFamily, fontSize, space }: Rsg.Theme) => ({

package/src/styleguideComponents/PropsRenderer.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
-import Arguments from './ArgumentsRenderer';
+
 import Argument from 'react-styleguidist/lib/client/rsg-components/Argument';
-import JsDoc from './JsDoc';
+
 import Markdown from 'react-styleguidist/lib/client/rsg-components/Markdown';
 import Name from 'react-styleguidist/lib/client/rsg-components/Name';
 import Para from 'react-styleguidist/lib/client/rsg-components/Para';
-import renderTypeColumn from 'react-styleguidist/lib/client/rsg-components/Props/renderType';
-import renderExtra from 'react-styleguidist/lib/client/rsg-components/Props/renderExtra';
 import renderDefault from 'react-styleguidist/lib/client/rsg-components/Props/renderDefault';
+import renderExtra from 'react-styleguidist/lib/client/rsg-components/Props/renderExtra';
+import renderTypeColumn from 'react-styleguidist/lib/client/rsg-components/Props/renderType';
 import { PropDescriptor } from 'react-styleguidist/lib/client/rsg-components/Props/util';
 
+import Arguments from './ArgumentsRenderer';
+import JsDoc from './JsDoc';
+
 function renderDescription(prop: PropDescriptor) {
   const { description, tags = {} } = prop;
   const extra = renderExtra(prop);

package/src/styleguideComponents/Wrapper.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { ThemeProvider } from '../contexts/themeContext/ThemeContext';
 
 const Wrapper: React.FC = ({ children }) => <ThemeProvider>{children}</ThemeProvider>;

package/src/utils/Streami18n.ts

@@ -6,6 +6,9 @@ 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';
@@ -35,9 +38,6 @@ 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';
 
 Dayjs.extend(updateLocale);

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

@@ -2,10 +2,9 @@ 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);
 

package/src/utils/getResizedImageUrl.ts

@@ -0,0 +1,43 @@
+import { PixelRatio } from 'react-native';
+
+type GetResizedImageUrlParams = {
+  url: string;
+  height?: string | number;
+  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, url, width }: GetResizedImageUrlParams) {
+  const isResizableUrl = url.includes('&h=*') && url.includes('&w=*') && url.includes('&resize=*');
+
+  if (!isResizableUrl || (!height && !width)) return url;
+
+  let resizedUrl = url;
+
+  if (height) {
+    resizedUrl = resizedUrl.replace(
+      'h=*',
+      `h=${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`,
+    );
+  }
+
+  if (width) {
+    resizedUrl = resizedUrl.replace(
+      'w=*',
+      `w=${PixelRatio.getPixelSizeForLayoutSize(Number(width))}`,
+    );
+  }
+
+  return resizedUrl.replace('resize=*', `resize=clip`);
+}

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;
+}

package/src/utils/utils.ts

@@ -1,10 +1,8 @@
-import debounce from 'lodash/debounce';
+import type React from 'react';
 import { Dimensions } from 'react-native';
 
-import { compiledEmojis, Emoji } from '../emoji-data/compiled';
-
-import type React from 'react';
 import type { DebouncedFunc } from 'lodash';
+import debounce from 'lodash/debounce';
 import type {
   Channel,
   ChannelMemberAPIResponse,
@@ -20,6 +18,7 @@ import type {
   SuggestionComponentType,
   SuggestionUser,
 } from '../contexts/suggestionsContext/SuggestionsContext';
+import { compiledEmojis, Emoji } from '../emoji-data/compiled';
 import type { IconProps } from '../icons/utils/base';
 import type {
   DefaultAttachmentType,
@@ -56,6 +55,12 @@ export const ProgressIndicatorTypes: {
   RETRY: 'retry',
 });
 
+export const MessageStatusTypes = {
+  FAILED: 'failed',
+  RECEIVED: 'received',
+  SENDING: 'sending',
+};
+
 const defaultAutoCompleteSuggestionsLimit = 10;
 const defaultMentionAllAppUsersQuery = {
   filters: {},

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.0.0-beta.2"
+  "version": "4.0.0-beta.3"
 }