Merge pull request #958 from GetStream/develop

Next Release

Author: vishalnarkhede

.github/workflows/release.yml

@@ -29,7 +29,7 @@ jobs:
           git config --global user.name "Vishal Narkhede"
           git config --global user.email "[email protected]"
       - name: Installation && Build SDK
-        run: yarn --frozen-lockfile && yarn bootstrap-ci
+        run: yarn bootstrap-ci
       - name: Lint
         run: yarn lerna-workspaces run lint
       - name: Publish Release

PULL_REQUEST_TEMPLATE.md

@@ -11,20 +11,51 @@
 <!-- Add relevant screenshots -->
 
 <details>
-    <summary>iOS</summary>
+<summary>iOS</summary>
 
-| Before | After |
-| --- | --- |
-| img | img |
+
+<table>
+    <thead>
+        <tr>
+            <td>Before</td>
+            <td>After</td>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>
+                <!--<img src="" /> -->
+            </td>
+            <td>
+                <!--<img src="" /> -->
+            </td>
+        </tr>
+    </tbody>
+</table>
 </details>
 
 
 <details>
-    <summary>Android</summary>
+<summary>Android</summary>
 
-| Before | After |
-| --- | --- |
-| img | img |
+<table>
+    <thead>
+        <tr>
+            <td>Before</td>
+            <td>After</td>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>
+                <!--<img src="" /> -->
+            </td>
+            <td>
+                <!--<img src="" /> -->
+            </td>
+        </tr>
+    </tbody>
+</table>
 </details>
 
 ## 🧪 Testing

examples/SampleApp/.eslintrc.json

@@ -140,7 +140,7 @@
         "no-mixed-spaces-and-tabs": 1,
         "no-self-compare": 2,
         "no-underscore-dangle": [2, { "allowAfterThis": true }],
-        "no-unused-vars": [1, { "ignoreRestSiblings": true }],
+        "no-unused-vars": [1, { "ignoreRestSiblings": true, "args":"none" }],
         "no-useless-concat": 2,
         "no-var": 2,
         "object-shorthand": 1,

examples/SampleApp/src/components/ChatScreenHeader.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, StyleSheet, TouchableOpacity } from 'react-native';
 import { CompositeNavigationProp, useNavigation } from '@react-navigation/native';
 import { useChatContext, useTheme } from 'stream-chat-react-native';
 

examples/SampleApp/src/hooks/useChatClient.ts

@@ -15,8 +15,6 @@ import type {
   LoginConfig,
 } from '../types';
 
-const getRandomInt = (min: number, max: number) => Math.floor(Math.random() * (max - min)) + min;
-
 export const useChatClient = () => {
   const [chatClient, setChatClient] = useState<StreamChat<
     LocalAttachmentType,
@@ -41,7 +39,6 @@ export const useChatClient = () => {
     >(config.apiKey, {
       timeout: 6000,
     });
-    const randomSeed = getRandomInt(1, 50);
     const user = {
       id: config.userId,
       image: config.userImage,

examples/SampleApp/src/icons/Close.tsx

@@ -4,7 +4,7 @@ import { useTheme } from 'stream-chat-react-native';
 
 import { IconProps } from '../utils/base';
 
-export const Close: React.FC<IconProps> = ({ active, height, width }) => {
+export const Close: React.FC<IconProps> = ({ height, width }) => {
   const {
     theme: {
       colors: { black },

examples/SampleApp/src/icons/RightArrow.tsx

@@ -4,7 +4,7 @@ import { useTheme } from 'stream-chat-react-native';
 
 import { IconProps } from '../utils/base';
 
-export const RightArrow: React.FC<IconProps> = ({ active, height, width }) => {
+export const RightArrow: React.FC<IconProps> = ({ height, width }) => {
   const {
     theme: {
       colors: { accent_blue },

examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx

@@ -1,13 +1,11 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { Alert, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   Channel,
   Group,
   MessageInput,
   MessageList,
-  SendButton,
-  SendButtonProps,
   User,
   UserAdd,
   useTheme,
@@ -163,7 +161,8 @@ export const NewDirectMessagingScreen: React.FC<NewDirectMessagingScreenProps> =
 
   const [focusOnMessageInput, setFocusOnMessageInput] = useState(false);
   const [focusOnSearchInput, setFocusOnSearchInput] = useState(true);
-  const [messageInputText, setMessageInputText] = useState('');
+  // As we don't use the state value, we can omit it here and separate it with a comma within the array.
+  const [, setMessageInputText] = useState('');
 
   // When selectedUsers are changed, initiate a channel with those users as members,
   // and set it as a channel on current screen.

package/src/components/Channel/Channel.tsx

@@ -544,7 +544,7 @@ const ChannelWithContext = <
       colors: { black },
     },
   } = useTheme();
-
+  const [deleted, setDeleted] = useState(false);
   const [editing, setEditing] = useState<boolean | MessageType<At, Ch, Co, Ev, Me, Re, Us>>(false);
   const [error, setError] = useState(false);
   const [hasMore, setHasMore] = useState(true);
@@ -670,7 +670,7 @@ const ChannelWithContext = <
   const markRead: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['markRead'] = useRef(
     throttle(
       () => {
-        if (channel?.disconnected || !channel?.getConfig?.()?.read_events) {
+        if (!channel || channel?.disconnected || !clientChannelConfig?.read_events) {
           return;
         }
 
@@ -778,18 +778,33 @@ const ChannelWithContext = <
   };
 
   useEffect(() => {
-    /**
-     * The more complex sync logic around internet connectivity (NetInfo) is part of Chat.tsx
-     * listen to client.connection.recovered and all channel events
-     */
-    client.on('connection.recovered', connectionRecoveredHandler);
-    client.on('connection.changed', connectionChangedHandler);
-    channel?.on(handleEvent);
+    const channelSubscriptions: Array<ReturnType<ChannelType['on']>> = [];
+    const clientSubscriptions: Array<ReturnType<StreamChat['on']>> = [];
+
+    const subscribe = () => {
+      if (!channel) return;
+
+      /**
+       * The more complex sync logic around internet connectivity (NetInfo) is part of Chat.tsx
+       * listen to client.connection.recovered and all channel events
+       */
+      clientSubscriptions.push(client.on('connection.recovered', connectionRecoveredHandler));
+      clientSubscriptions.push(client.on('connection.changed', connectionChangedHandler));
+      clientSubscriptions.push(
+        client.on('channel.deleted', (event) => {
+          if (event.cid === channel.cid) {
+            setDeleted(true);
+          }
+        }),
+      );
+      channelSubscriptions.push(channel.on(handleEvent));
+    };
+
+    subscribe();
 
     return () => {
-      client.off('connection.recovered', connectionRecoveredHandler);
-      client.off('connection.changed', connectionChangedHandler);
-      channel?.off(handleEvent);
+      clientSubscriptions.forEach((s) => s.unsubscribe());
+      channelSubscriptions.forEach((s) => s.unsubscribe());
     };
   }, [channelId, connectionRecoveredHandler, handleEvent]);
 
@@ -1152,13 +1167,23 @@ const ChannelWithContext = <
     }
   };
 
+  // In case the channel is disconnected which may happen when channel is deleted,
+  // underlying js client throws an error. Following function ensures that Channel component
+  // won't result in error in such a case.
+  const getChannelConfigSafely = () => {
+    try {
+      return channel?.getConfig();
+    } catch (_) {
+      return null;
+    }
+  };
+
   /**
    * Channel configs for use in disabling local functionality.
    * Nullish coalescing is used to give first priority to props to override
    * the server settings. Then priority to server settings to override defaults.
    */
-  const clientChannelConfig =
-    typeof channel?.getConfig === 'function' ? channel.getConfig() : undefined;
+  const clientChannelConfig = getChannelConfigSafely();
 
   const messagesConfig: MessagesConfig = {
     /**
@@ -1597,7 +1622,7 @@ const ChannelWithContext = <
     error,
     giphyEnabled:
       giphyEnabled ??
-      !!(channel?.getConfig?.()?.commands || [])?.some((command) => command.name === 'giphy'),
+      !!(clientChannelConfig?.commands || [])?.some((command) => command.name === 'giphy'),
     hideDateSeparators,
     hideStickyDateHeader,
     isAdmin,
@@ -1780,6 +1805,9 @@ const ChannelWithContext = <
     typing,
   });
 
+  // TODO: replace the null view with appropriate message. Currently this is waiting a design decision.
+  if (deleted) return null;
+
   if (!channel || (error && messages.length === 0)) {
     return <LoadingErrorIndicator error={error} listType='message' retry={reloadChannel} />;
   }

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

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import { View } from 'react-native';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
+import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 import { StreamChat } from 'stream-chat';
 
 import { Channel } from '../Channel';
@@ -14,8 +14,10 @@ import {
   MessagesProvider,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { ThreadContext, ThreadProvider } from '../../../contexts/threadContext/ThreadContext';
+
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import dispatchChannelDeletedEvent from '../../../mock-builders/event/channelDeleted';
 import { generateChannel } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
@@ -65,6 +67,7 @@ describe('Channel', () => {
     chatClient = await getTestClientWithUser(user);
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     channel = chatClient.channel('messaging', mockedChannel.id);
+    channel.cid = mockedChannel.channel.cid;
   });
 
   afterEach(() => {
@@ -77,7 +80,9 @@ describe('Channel', () => {
       ...channel,
       cid: null,
       off: () => {},
-      on: () => {},
+      on: () => ({
+        unsubscribe: () => null,
+      }),
       watch: () => {},
     };
     const { getByTestId } = renderComponent({ channel: nullChannel });
@@ -193,6 +198,17 @@ describe('Channel', () => {
     await waitFor(() => expect(channelQuerySpy).toHaveBeenCalled());
   });
 
+  it('should render null if channel gets deleted', async () => {
+    const { getByTestId, queryByTestId } = renderComponent({
+      channel,
+      children: <View testID='children' />,
+    });
+
+    await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+    act(() => dispatchChannelDeletedEvent(chatClient, channel));
+    expect(queryByTestId('children')).toBeNull();
+  });
+
   describe('ChannelContext', () => {
     it('renders children without crashing', async () => {
       const { getByTestId } = render(