Merge pull request #2652 from GetStream/develop

Next Release

.github/workflows/sample-distribution.yml

@@ -9,7 +9,7 @@ on:
     paths:
       - '.github/workflows/sample-distribution.yml'
       - 'package/**'
-      - 'packages/examples/SampleApp/**'
+      - 'examples/SampleApp/**'
 
 jobs:
   build_and_deploy_ios_testflight_qa:

docusaurus/docs/reactnative/common-content/ui-components/channel/props/handle_ban.mdx

@@ -0,0 +1,11 @@
+Function called when the _Ban User_ action is invoked from message actions list.
+This function does not override the default behavior of the _Ban User_ action.
+Please refer to [the guide on customizing message actions](../../../../guides/custom-message-actions.mdx) for details.
+
+| Type     |
+| -------- |
+| function |
+
+| Parameter | Description                     |
+| --------- | ------------------------------- |
+| message   | message the action is called on |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/handle_block.mdx

@@ -1,11 +1,14 @@
+:::note
+This is deprecated. Please use `handleBan` instead.
+:::
+
 Function called when the _Block User_ action is invoked from message actions list.
 This function does not override the default behavior of the _Block User_ action.
 Please refer to [the guide on customizing message actions](../../../../guides/custom-message-actions.mdx) for details.
 
-| Type     |
-| -------- |
-| function |
-
+| Type      |
+| --------- | ------------------------------- |
+| function  |
 | Parameter | Description                     |
 | --------- | ------------------------------- |
 | message   | message the action is called on |

docusaurus/docs/reactnative/contexts/messages-context.mdx

@@ -25,6 +25,7 @@ import FormatDate from '../common-content/ui-components/channel/props/format_dat
 import Gallery from '../common-content/ui-components/channel/props/gallery.mdx';
 import Giphy from '../common-content/ui-components/channel/props/giphy.mdx';
 import GiphyVersion from '../common-content/ui-components/channel/props/giphy_version.mdx';
+import HandleBan from '../common-content/ui-components/channel/props/handle_ban.mdx';
 import HandleBlock from '../common-content/ui-components/channel/props/handle_block.mdx';
 import HandleCopy from '../common-content/ui-components/channel/props/handle_copy.mdx';
 import HandleDelete from '../common-content/ui-components/channel/props/handle_delete.mdx';
@@ -110,6 +111,10 @@ Id of current channel.
 
 <FormatDate />
 
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#handleban)_ props</div> `handleBan` {#handleban}
+
+<HandleBan />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#handleblock)_ props</div> `handleBlock` {#handleblock}
 
 <HandleBlock />

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -64,6 +64,7 @@ import Giphy from '../common-content/ui-components/channel/props/giphy.mdx';
 import GiphyEnabled from '../common-content/ui-components/channel/props/giphy_enabled.mdx';
 import GiphyVersion from '../common-content/ui-components/channel/props/giphy_version.mdx';
 import HandleAttachButtonPress from '../common-content/ui-components/channel/props/handle_attach_button_press.mdx';
+import HandleBan from '../common-content/ui-components/channel/props/handle_ban.mdx';
 import HandleBlock from '../common-content/ui-components/channel/props/handle_block.mdx';
 import HandleCopy from '../common-content/ui-components/channel/props/handle_copy.mdx';
 import HandleDelete from '../common-content/ui-components/channel/props/handle_delete.mdx';
@@ -486,6 +487,10 @@ The max allowable is 255, which when reached displays as `255+`.
 
 <HandleAttachButtonPress />
 
+### `handleBan`
+
+<HandleBan />
+
 ### `handleBlock`
 
 <HandleBlock />

docusaurus/docs/reactnative/guides/blocking-users.mdx

@@ -0,0 +1,201 @@
+---
+id: blocking-users
+title: Blocking Users
+---
+
+## Introduction
+
+Blocking users is an essential feature in a chat app because it enhances user safety and experience. It allows individuals to protect themselves from harassment, spam, and unwanted interactions. By giving users control over their interactions, it helps maintain privacy, reduces the risk of cyberbullying, and promotes a respectful community atmosphere.
+
+As a result, some app stores require this functionality as part of their review process.
+
+## Stream Chat
+
+The Stream Chat SDK provides a way for blocking and unblocking users, as well as listing all of the blocked users.
+
+When you block a user, you won’t receive any direct messages from that user anymore. However, if you share a group with other participants, you will still receive messages from the blocked user.
+
+In this cookbook, we will see how to implement this feature in your chat apps, using the Stream Chat SDK.
+
+## Low Level Client support
+
+The low-level client provides the following methods related to user blocking.
+
+### Blocking a user
+
+In order to block a user, you need to use the `blockUser` method of the client instance. This method takes the user id of the user you wish to block.
+
+```tsx
+import { StreamChat } from 'stream-chat';
+const chatClient = StreamChat.getInstance('your api key');
+
+// Note this has to be done after the client connection(`client.connectUser`) is established.
+const blockUser = async (userId: string) => {
+  try {
+    await chatClient.blockUser(userId);
+  } catch (err) {
+    console.log('Error blocking user:', err);
+  }
+};
+```
+
+### Unblocking a user
+
+Similarly, to unblock a blocked user, you need to use the `unBlockUser` method of the client instance. This method takes the user id of the user you wish to unblock.
+
+```tsx
+import { StreamChat } from 'stream-chat';
+const chatClient = StreamChat.getInstance('your api key');
+
+// Note this has to be done after the client connection(`client.connectUser`) is established.
+const unBlockUser = async (userId: string) => {
+  try {
+    await chatClient.unBlockUser(userId);
+  } catch (err) {
+    console.log('Error UnBlocking user:', err);
+  }
+};
+```
+
+### Listing Blocked Users
+
+To list all the blocked users, you can use the `getBlockedUsers` method of the client instance.
+
+```tsx
+const chatClient = StreamChat.getInstance('your api key');
+
+// Note this has to be done after the client connection(`client.connectUser`) is established.
+const getBlockedUsers = async () => {
+  try {
+    const users = await chatClient.getBlockedUsers();
+    setBlockedUsers(users.blocks);
+  } catch (error) {
+    console.log('Error getting blocked users:', error);
+  }
+};
+```
+
+## Message Actions
+
+You can use the logic above to create your own custom message actions that will involve user blocking.
+
+This can be done by using the `messageActions` prop of the `Channel` component. You can follow the guide [here](../guides/custom-message-actions.mdx).
+
+```tsx
+import { Channel, messageActions } from 'stream-chat-react-native';
+
+const App = () => {
+  return (
+    <Channel
+      channel={channel}
+      messageActions={params => {
+        const { dismissOverlay, message } = params;
+        const actions = messageActions({ ...params });
+        if (actions) {
+          actions.push({
+            action: async () => {
+              try {
+                await chatClient.blockUser(message.user?.id || '');
+                dismissOverlay();
+              } catch (error) {
+                console.log('Error blocking user:', error);
+              }
+            },
+            actionType: 'block-user',
+            title: 'Block User',
+          });
+          return actions;
+        } else {
+          return [];
+        }
+      }}
+    >
+      {/* Other components here  */}
+    </Channel>
+  );
+};
+```
+
+## Displaying Blocked users
+
+Next, let’s see how we can build a custom UI that will show the list of blocked users. This will allow easier overview for the users about who they blocked, as well as provide an easy way to unblock them if needed.
+
+![Blocked Users](../assets/guides/blocking-users/blocked-users-list.png)
+
+```tsx
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { BlockedUserDetails, StreamChat } from 'stream-chat';
+
+const chatClient = StreamChat.getInstance('your api key');
+
+const BlockedUsers = () => {
+  const [blockedUsers, setBlockedUsers] = useState<BlockedUserDetails[]>([]);
+
+  useEffect(() => {
+    const getBlockedUsers = async () => {
+      try {
+        const users = await chatClient.getBlockedUsers();
+        setBlockedUsers(users.blocks);
+      } catch (error) {
+        console.log('Error getting blocked users:', error);
+      }
+    };
+
+    getBlockedUsers();
+  }, []);
+
+  const unBlockUser = async (userId: string) => {
+    try {
+      await chatClient.unBlockUser(userId);
+      const filteredUsers = blockedUsers.filter(user => user.blocked_user_id !== userId);
+      setBlockedUsers(filteredUsers);
+    } catch (err) {
+      console.log('Error UnBlocking user:', err);
+    }
+  };
+
+  return (
+    <View>
+      {blockedUsers.map((blockedUser: BlockedUserDetails) => (
+        <Pressable
+          key={blockedUser.blocked_user_id}
+          onPress={() => {
+            unBlockUser(blockedUser.blocked_user_id);
+          }}
+          style={styles.container}
+        >
+          <Image source={{ uri: blockedUser.blocked_user.image as string }} style={styles.image} />
+          <Text style={styles.name}>{blockedUser.blocked_user.name}</Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    padding: 16,
+    alignItems: 'center',
+  },
+  image: {
+    height: 80,
+    width: 80,
+    borderRadius: 40,
+  },
+  name: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginLeft: 16,
+  },
+});
+```
+
+There’s nothing special in this view, it just shows the blocked users in a list, and exposes a delete action, which will remove the blocked user from the list.
+
+## Summary
+
+In this cookbook we have seen the capabilities of the Stream Chat SDK for blocking users. We have also seen how to add message actions to block and unblock users, as well as a custom UI for displaying the blocked users.
+
+It is recommended to use these actions, in order to avoid issues during app store reviews, especially on the Apple platforms.

docusaurus/docs/reactnative/guides/custom-message-actions.mdx

@@ -390,7 +390,8 @@ These functions will be called right before the underlying default handlers.
 Please note that these intercepts will neither change the standard functions nor block them.
 :::
 
-- `handleBlock`
+- `handleBan`
+- `handleBlock`(deprecated)
 - `handleCopy`
 - `handleDelete`
 - `handleEdit`