stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -1,21 +1,22 @@
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { Message } from '../../Message';
-import { MessageContent } from '../../MessageSimple/MessageContent';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { Chat } from '../../../Chat/Chat';
-import { Channel } from '../../../Channel/Channel';
+import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateReaction } from '../../../../mock-builders/generator/reaction';
 import { generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { Channel } from '../../../Channel/Channel';
+import { Chat } from '../../../Chat/Chat';
+import { Message } from '../../Message';
+import { MessageContent } from '../../MessageSimple/MessageContent';
 
 describe('MessageContent', () => {
   let channel;
@@ -27,7 +28,7 @@ describe('MessageContent', () => {
 
   beforeEach(async () => {
     const members = [generateMember({ user })];
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members,
       messages,
     });
@@ -38,11 +39,13 @@ describe('MessageContent', () => {
 
     renderMessage = (options) =>
       render(
-        <Chat client={chatClient}>
-          <Channel channel={channel}>
-            <Message groupStyles={['bottom']} {...options} />
-          </Channel>
-        </Chat>,
+        <ChannelsStateProvider>
+          <Chat client={chatClient}>
+            <Channel channel={channel}>
+              <Message groupStyles={['bottom']} {...options} />
+            </Channel>
+          </Chat>
+        </ChannelsStateProvider>,
       );
   });
 
@@ -90,12 +93,12 @@ describe('MessageContent', () => {
     });
   });
 
-  it('renders a message deleted message when `message.deleted_at` exists', async () => {
+  it('renders a message deleted message when `message.type` is `deleted`', async () => {
     const user = generateUser();
     const message = generateMessage({ user });
 
     const { getByTestId } = renderMessage({
-      message: { ...message, deleted_at: true },
+      message: { ...message, type: 'deleted' },
     });
 
     await waitFor(() => {
@@ -111,11 +114,13 @@ describe('MessageContent', () => {
     const ContextMessageHeader = (props) => <View {...props} testID='message-header' />;
 
     const { getByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel} MessageHeader={ContextMessageHeader}>
-          <Message groupStyles={['bottom']} message={message} />
-        </Channel>
-      </Chat>,
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} MessageHeader={ContextMessageHeader}>
+            <Message groupStyles={['bottom']} message={message} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
     );
 
     await waitFor(() => {
@@ -131,11 +136,13 @@ describe('MessageContent', () => {
     const ContextMessageFooter = (props) => <View {...props} testID='message-footer' />;
 
     const { getByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel} MessageFooter={ContextMessageFooter}>
-          <Message groupStyles={['bottom']} message={message} />
-        </Channel>
-      </Chat>,
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} MessageFooter={ContextMessageFooter}>
+            <Message groupStyles={['bottom']} message={message} />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
     );
 
     await waitFor(() => {
@@ -160,21 +167,6 @@ describe('MessageContent', () => {
     });
   });
 
-  it('renders the Gallery when image attachments exist', async () => {
-    const user = generateUser();
-    const message = generateMessage({
-      attachments: [{ image_url: 'https://i.imgur.com/SLx06PP.png', type: 'image' }],
-      user,
-    });
-
-    const { getByTestId } = renderMessage({ message });
-
-    await waitFor(() => {
-      expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('image-attachment-single')).toBeTruthy();
-    });
-  });
-
   it('renders the GalleryContainer when multiple image attachments exist', async () => {
     const user = generateUser();
     const message = generateMessage({
@@ -185,12 +177,11 @@ describe('MessageContent', () => {
       user,
     });
 
-    const { getByTestId, queryAllByTestId } = renderMessage({ message });
+    const { getByTestId } = renderMessage({ message });
 
     await waitFor(() => {
       expect(getByTestId('message-content-wrapper')).toBeTruthy();
-      expect(getByTestId('image-multiple-container')).toBeTruthy();
-      expect(queryAllByTestId('image-multiple')).toHaveLength(2);
+      expect(getByTestId('gallery-container')).toBeTruthy();
     });
   });
 
@@ -227,11 +218,13 @@ describe('MessageContent', () => {
     };
 
     const { getByTestId } = render(
-      <Chat client={chatClient}>
-        <Channel channel={channel} MessageContent={MessageContentWithMockedMessageContentWidth}>
-          <Message groupStyles={['bottom']} message={message} reactionsEnabled />
-        </Channel>
-      </Chat>,
+      <ChannelsStateProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} MessageContent={MessageContentWithMockedMessageContentWidth}>
+            <Message groupStyles={['bottom']} message={message} reactionsEnabled />
+          </Channel>
+        </Chat>
+      </ChannelsStateProvider>,
     );
 
     await waitFor(() => {

package/src/components/Message/MessageSimple/__tests__/MessagePinnedHeader.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { cleanup, render, waitFor } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import {
+  generateMessage,
+  generateStaticMessage,
+} from '../../../../mock-builders/generator/message';
+import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { MessagePinnedHeader } from '../MessagePinnedHeader';
+
+afterEach(cleanup);
+
+describe('MessagePinnedHeader', () => {
+  it('should render message pinned', async () => {
+    const staticUser = generateStaticUser(0);
+    const message = generateMessage({
+      user: { ...staticUser, image: undefined },
+    });
+    const { getByTestId, rerender, toJSON } = render(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='right' message={message} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-pinned')).toBeTruthy();
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='right' message={message} />
+      </ThemeProvider>,
+    );
+
+    const staticMessage = generateStaticMessage('hi', {
+      user: staticUser,
+    });
+
+    rerender(
+      <ThemeProvider style={defaultTheme}>
+        <MessagePinnedHeader alignment='left' message={staticMessage} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('message-pinned')).toBeTruthy();
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/src/components/Message/MessageSimple/__tests__/MessageReplies.test.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { MessageReplies } from '../MessageReplies';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user';
+import { MessageReplies } from '../MessageReplies';
 import { MessageRepliesAvatars } from '../MessageRepliesAvatars';
 
 afterEach(cleanup);

package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { MessageStatus } from '../MessageStatus';
 
-import { Chat } from '../../../Chat/Chat';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { Streami18n } from '../../../../utils/Streami18n';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
+import { Streami18n } from '../../../../utils/Streami18n';
+import { Chat } from '../../../Chat/Chat';
+import { MessageStatus } from '../MessageStatus';
 
 let chatClient;
 let id;

package/src/components/Message/MessageSimple/__tests__/MessageTextContainer.test.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { MessageTextContainer } from '../MessageTextContainer';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
@@ -11,6 +10,7 @@ import {
   generateStaticMessage,
 } from '../../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../../mock-builders/generator/user';
+import { MessageTextContainer } from '../MessageTextContainer';
 
 afterEach(cleanup);
 

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -36,7 +36,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
         onError={[Function]}
         source={
           Object {
-            "uri": "https://images-na.ssl-images-amazon.com/images/I/51t29lLkg8L._AC_SL1000_.jpg",
+            "uri": "https://i.imgur.com/ytIyojl.png",
           }
         }
         style={

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessagePinnedHeader.test.js.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessagePinnedHeader should render message pinned 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "display": "flex",
+        "flexDirection": "row",
+        "marginBottom": 8,
+        "marginLeft": 30,
+        "marginTop": 5,
+      },
+      Object {
+        "justifyContent": "flex-start",
+      },
+      Object {},
+    ]
+  }
+  testID="message-pinned"
+>
+  <RNSVGSvgView
+    align="xMidYMid"
+    bbHeight={24}
+    bbWidth={24}
+    focusable={false}
+    height={24}
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    pathFill="#7A7A7A"
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        Object {
+          "flex": 0,
+          "height": 24,
+          "width": 24,
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+    width={24}
+  >
+    <RNSVGGroup>
+      <RNSVGPath
+        clipRule={0}
+        d="M10.694 1.52908C10.5304 1.36544 10.2937 1.2982 10.0685 1.35137C9.84327 1.40454 9.6616 1.57053 9.5884 1.79006L9.16613 3.05694L6.72027 5.50284C5.12809 5.14216 3.59999 5.79028 2.19557 7.1947C1.93481 7.45543 1.93481 7.87823 2.19557 8.13896L4.55625 10.4997L3.1399 11.916C2.87915 12.1768 2.87915 12.5995 3.1399 12.8603C3.40065 13.1211 3.82342 13.1211 4.08417 12.8603L5.50051 11.4439L7.8612 13.8046C8.12193 14.0654 8.54473 14.0654 8.80547 13.8046C10.2099 12.4002 10.858 10.8721 10.4973 9.2799L12.9432 6.83403L14.2101 6.41173C14.4296 6.33855 14.5956 6.15692 14.6488 5.9317C14.7019 5.70648 14.6347 5.46979 14.4711 5.30616L10.694 1.52908ZM10.3832 3.62876L10.5137 3.23728L12.7629 5.4865L12.3714 5.617C12.2731 5.64977 12.1837 5.705 12.1104 5.7783L9.2776 8.6111C9.09873 8.78996 9.03633 9.05443 9.11627 9.29436C9.43453 10.249 9.2382 11.2566 8.31287 12.3678L3.6324 7.6873C4.74353 6.76196 5.7511 6.56564 6.7058 6.8839C6.94573 6.96383 7.2102 6.90143 7.38906 6.72256L10.2219 3.88975C10.2951 3.81646 10.3504 3.7271 10.3832 3.62876Z"
+        fill={4286216826}
+        fillRule={0}
+        propList={
+          Array [
+            "fill",
+            "fillRule",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#7A7A7A",
+        },
+        Object {},
+        Object {},
+      ]
+    }
+  >
+    Pinned by
+     
+    You
+  </Text>
+</View>
+`;

package/src/components/Message/MessageSimple/utils/parseLinks.test.ts

@@ -0,0 +1,100 @@
+import { parseLinksFromText } from './parseLinks';
+
+describe('parseLinksFromText', () => {
+  it.each([
+    ['www.getstream.io', 'www.getstream.io'],
+    ['getstream.io', 'getstream.io'],
+    ['scrn://team-chat', 'team-chat'],
+    ['https://localhost', 'localhost'],
+    [
+      'https://localhost/with/path?and=query&multiple=params',
+      'localhost/with/path?and=query&multiple=params',
+    ],
+    ['https://localhost/with/path?and=query#fragment', 'localhost/with/path?and=query#fragment'],
+    ['reactnative.stream', 'reactnative.stream'],
+    [
+      'https://zh.wikipedia.org/wiki/挪威牛油危機',
+      'zh.wikipedia.org/wiki/%E6%8C%AA%E5%A8%81%E7%89%9B%E6%B2%B9%E5%8D%B1%E6%A9%9F',
+    ],
+    [
+      'https://getstream.io/chat/docs/react-native/?language=javascript',
+      'getstream.io/chat/docs/react-native/?language=javascript',
+    ],
+    ['127.0.0.1/local_(development)_server', '127.0.0.1/local_(development)_server'],
+    ['https://a.co:8999/ab.php?p=12', 'a.co:8999/ab.php?p=12'],
+  ])('Returns the encoded value of %p as %p', (link, expected) => {
+    const result = parseLinksFromText(link);
+
+    expect(result[0].encoded).toBe(expected);
+  });
+
+  it('parses fqdn', () => {
+    const input = `We have put the apim bol,
+temporarily so :sj: we can later put the monitors on my grasp
+on reality right now is
+https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier
+:)`;
+
+    const result = parseLinksFromText(input);
+
+    expect(result).toEqual([
+      {
+        encoded:
+          'www.contrived-example.com:8080/sub/page.php?p1=1%F0%9F%87%B3%F0%9F%87%B4&p2=2#fragment-identifier',
+        raw: 'https://www.contrived-example.com:8080/sub/page.php?p1=1🇳🇴&p2=2#fragment-identifier',
+        scheme: 'https://',
+      },
+    ]);
+  });
+
+  it.each([
+    ['support+rn@getstream.io'],
+    ['support.rn@getstream.io'],
+    ['support-rn@getstream.io'],
+    ['support_rn@getstream.io'],
+  ])('Can parse the email address %p', (email) => {
+    const result = parseLinksFromText(email);
+
+    expect(result[0].encoded).toBe(email);
+    expect(result[0].scheme).toBe('mailto:');
+  });
+
+  it("doesn't double the mailto prefix", () => {
+    const input = 'mailto:support@getstream.io';
+
+    const result = parseLinksFromText(input);
+
+    expect(result[0]).toEqual({
+      encoded: 'support@getstream.io',
+      raw: input,
+      scheme: 'mailto:',
+    });
+  });
+
+  it('Does not falsely parse LINKs from text content', () => {
+    const input = `#This string exists to test that we don't produce false positives
+
+Existing links:
+[already a parsed link](https://getstream.io/blog/react-native-how-to-build-bidirectional-infinite-scroll/)
+[even a bogus one]( should not match )
+
+## These should, however, be parsed:
+www.getstream.io
+getstream.io
+`;
+    const result = parseLinksFromText(input);
+
+    expect(result).toHaveLength(2);
+  });
+
+  it('Encodes incomplete emoji unicode', () => {
+    const input = 'https://getstream.io/�';
+    const result = parseLinksFromText(input);
+
+    expect(result[0]).toEqual({
+      encoded: 'getstream.io/%EF%BF%BD',
+      raw: 'https://getstream.io/�',
+      scheme: 'https://',
+    });
+  });
+});

package/src/components/Message/MessageSimple/utils/parseLinks.ts

@@ -0,0 +1,95 @@
+/**
+ * 📣 Note: Do not use named capture groups, as
+ *          it is not yet available in Hermes.
+ *
+ * These helpers indend to make it easier to skim read
+ * the patterns below, but note that some are optional,
+ * specified in the patterns these are added to.
+ * */
+const emailUserName = '[\\w+\\.~$_-]+';
+const schema = `(\\w{2,15}:\\/\\/)`;
+const domain = `((?:\\w+\\.\\w+)+(?:[^:\\/\\s]+))`;
+const port = `(:[0-9]{1,5})`;
+const path = `((?:\\/)?[^?#\\s]+)`;
+const queryString = `(\\?[^#\\s]+)`;
+const fragment = `(#[\\w_-]+)`;
+
+/**
+ * Match any email address, with and without `mailto:`
+ */
+const emailPattern = `(mailto:)?((?:${emailUserName})@(?:${domain}))`;
+
+/**
+ * Match any string starting with something that seems like it's a schema.
+ * */
+const schemePrefixedLinkPattern = `${schema}(\\S+)`;
+
+/**
+ * Match as much as possible of a fqdn, at least with a domain name formed as
+ * something.tld
+ */
+const fqdnLinkPattern = `${schema}?${domain}${port}?${path}?${queryString}?${fragment}?`;
+
+interface Link {
+  encoded: string;
+  raw: string;
+  scheme: string;
+}
+
+/**
+ * This is done separately because of the version of javascript run
+ * for expo
+ * */
+const removeMarkdownLinksFromText = (input: string) => input.replace(/\[[\w\s]+\]\(.*\)/g, '');
+
+export const parseLinksFromText = (input: string): Link[] => {
+  let matches;
+
+  const inputWithoutMarkdownLinks = removeMarkdownLinksFromText(input);
+
+  const results: Link[] = [];
+
+  const emailRegExp = new RegExp(emailPattern, 'gi');
+  while ((matches = emailRegExp.exec(input)) !== null) {
+    const [raw, scheme = 'mailto:', displayValue] = matches;
+    results.push({ encoded: encodeURI(displayValue), raw, scheme });
+  }
+
+  /**
+   * The two link patterns are checked with an "or" (`|`)
+   * to avoid overlapping matches being duplicated in the output.
+   * */
+  const linkRegex = new RegExp(`${fqdnLinkPattern}|${schemePrefixedLinkPattern}`, 'gi');
+  while ((matches = linkRegex.exec(inputWithoutMarkdownLinks)) !== null) {
+    const [
+      raw,
+      fqdnScheme = '',
+      fqdnDomainName = '',
+      fqdnPort = '',
+      fqdnPath = '',
+      fqdnQueryStraing = '',
+      fqdnFragment = '',
+      schemePrefixedScheme = '',
+      schemePrefixedPath = '',
+    ] = matches;
+
+    if (schemePrefixedScheme !== '') {
+      results.push({
+        encoded: encodeURI(schemePrefixedPath),
+        raw,
+        scheme: schemePrefixedScheme,
+      });
+      continue;
+    }
+
+    results.push({
+      encoded: encodeURI(
+        [fqdnDomainName, fqdnPort, fqdnPath, fqdnQueryStraing, fqdnFragment].join(''),
+      ),
+      raw,
+      scheme: fqdnScheme,
+    });
+  }
+
+  return results;
+};

package/src/components/Message/MessageSimple/utils/renderText.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+// @ts-ignore
+import { ASTNode, SingleASTNode } from 'simple-markdown';
+
+import { ListOutput, ListOutputProps } from './renderText';
+
+describe('list', () => {
+  const createNode = ({
+    amount,
+    ordered = false,
+    start = 1,
+  }: {
+    amount: number;
+    ordered?: boolean;
+    start?: number;
+  }): SingleASTNode => ({
+    items: Array.from(Array(amount).keys()),
+    ordered,
+    start,
+    type: 'text',
+  });
+
+  const mockOutput = (node: ASTNode) => <Text>{node}</Text>;
+  const MockText = ({ node, output, state }: ListOutputProps) => (
+    <>
+      <ListOutput node={node} output={output} state={state} styles={{}} />
+    </>
+  );
+
+  it('renders numbered items', async () => {
+    const node = createNode({ amount: 3, ordered: true, start: 1 });
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+  });
+
+  it('renders numbered items from a start index', async () => {
+    const node = createNode({ amount: 3, ordered: true, start: 3 });
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('4. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('5. ')).toBeTruthy());
+  });
+
+  it('does not throw an error if an item is empty', async () => {
+    const node = {
+      ...createNode({ amount: 3, ordered: true }),
+      items: ['Not empty', null, 'Not empty'],
+    };
+    const { getByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getByText('1. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('2. ')).toBeTruthy());
+    await waitFor(() => expect(getByText('3. ')).toBeTruthy());
+  });
+
+  it('renders an unordered list', async () => {
+    const node = createNode({ amount: 3 });
+    const { getAllByText } = render(<MockText node={node} output={mockOutput} state={{}} />);
+
+    await waitFor(() => expect(getAllByText('\u2022 ')).toHaveLength(3));
+  });
+});