From 83a24d2da204d426e57a9e334fad644bb3932dab Mon Sep 17 00:00:00 2001
From: Anton Arnautov <43254280+arnautov-anton@users.noreply.github.com>
Date: Wed, 23 Oct 2024 12:14:15 +0200
Subject: [PATCH] docs: add Blocking Users guide (#2542)

This guide is a copy of a [RN
guide](https://github.com/GetStream/stream-chat-react-native/blob/develop/docusaurus/docs/reactnative/guides/blocking-users.mdx)
with some adjustments to the code examples.
---
 .../docs/React/guides/blocking-users.mdx      | 105 ++++++++++++++++++
 .../theming/actions/message-actions.mdx       |   2 +-
 docusaurus/sidebars-react.json                |   3 +-
 3 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 docusaurus/docs/React/guides/blocking-users.mdx

diff --git a/docusaurus/docs/React/guides/blocking-users.mdx b/docusaurus/docs/React/guides/blocking-users.mdx
new file mode 100644
index 000000000..aaaeb7eb9
--- /dev/null
+++ b/docusaurus/docs/React/guides/blocking-users.mdx
@@ -0,0 +1,105 @@
+---
+id: blocking-users
+title: Blocking Users
+---
+
+## Introduction
+
+Blocking users is an essential feature in a chat application 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 cyber-bullying, and promotes a respectful community atmosphere.
+
+## 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 application, 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('<API_KEY>');
+
+const blockUser = async (userId: string) => {
+  try {
+    await chatClient.blockUser(userId);
+  } catch (error) {
+    console.log('Error blocking user:', error);
+  }
+};
+```
+
+### 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('<API_KEY>');
+
+const unBlockUser = async (userId: string) => {
+  try {
+    await chatClient.unBlockUser(userId);
+  } catch (error) {
+    console.log('Error UnBlocking user:', error);
+  }
+};
+```
+
+### Listing Blocked Users
+
+To list all the blocked users, you can use the `getBlockedUsers` method of the client instance.
+
+```tsx
+const chatClient = StreamChat.getInstance('<API_KEY>');
+
+const getBlockedUsers = async () => {
+  try {
+    const users = await chatClient.getBlockedUsers();
+    setBlockedUsers(users.blocks);
+  } catch (error) {
+    console.log('Error getting blocked users:', error);
+  }
+};
+```
+
+:::note
+All of these actions can be triggered _after_ the client connection (`client.connectUser`) is established.
+:::
+
+## 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 `CustomMessageActionsList` prop of the `Channel` component. You can follow the guide [here](../guides/theming/actions/message-actions.mdx#using-custommessageactionlist-component).
+
+```tsx
+import { Channel, messageActions } from 'stream-chat-react-native';
+
+const CustomMessageActionList = () => {
+  const { client } = useChatContext();
+  const { message } = useMessageContext();
+
+  return (
+    <>
+      <button
+        className='str-chat__message-actions-list-item-button'
+        onClick={() => client.blockUser(message.user_id!)}
+      >
+        Block <strong>{message.user?.name ?? message.user?.id}</strong>
+      </button>
+
+      {/** ...other action buttons... */}
+    </>
+  );
+};
+
+<Channel CustomMessageActionList={CustomMessageActionList}>...</Channel>;
+```
diff --git a/docusaurus/docs/React/guides/theming/actions/message-actions.mdx b/docusaurus/docs/React/guides/theming/actions/message-actions.mdx
index cae181d9a..a77d2476c 100644
--- a/docusaurus/docs/React/guides/theming/actions/message-actions.mdx
+++ b/docusaurus/docs/React/guides/theming/actions/message-actions.mdx
@@ -57,7 +57,7 @@ const CustomMessageActionList = () => {
   return (
     <>
       <button
-        className='str-chat__message-actions-list-item str-chat__message-actions-list-item-button'
+        className='str-chat__message-actions-list-item-button'
         onClick={(event) => {
           window.alert(`Yell action clicked on message: ${message.id}!`);
         }}
diff --git a/docusaurus/sidebars-react.json b/docusaurus/sidebars-react.json
index 75e7f2f47..87c847d2f 100644
--- a/docusaurus/sidebars-react.json
+++ b/docusaurus/sidebars-react.json
@@ -150,7 +150,8 @@
         "guides/sdk-state-management",
         "guides/date-time-formatting",
         "guides/custom-threads-view",
-        "guides/dialog-management"
+        "guides/dialog-management",
+        "guides/blocking-users"
       ]
     },
     {