From 5acb144f97fd50f3636d530edee2c37233dfbb34 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Wed, 26 Jul 2023 18:01:39 +0530
Subject: [PATCH] refactor: useChannelWatch.tsx code

---
 .../06-advanced/02-chat-with-video.mdx           | 16 +++++++++++-----
 .../dogfood/src/hooks/useChannelWatch.tsx        | 12 +++++++++---
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/02-chat-with-video.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/02-chat-with-video.mdx
index 4771e5f960..742801634f 100644
--- a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/02-chat-with-video.mdx
+++ b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/02-chat-with-video.mdx
@@ -278,7 +278,7 @@ export const ChatScreen = () => {
       setChannel(newChannel);
     };
     createChannel();
-  }, [client, callId]);
+  }, [client]);
 
   if (!channel) {
     return (
@@ -359,7 +359,8 @@ To get the unread count of the Channel we need to focus primarily on watching th
 import { useCall } from '@stream-io/video-react-native-sdk';
 import { useEffect, useState } from 'react';
 import { useChatContext } from 'stream-chat-react-native';
-import type { Event } from 'stream-chat';
+import type { Event, Channel as ChannelType } from 'stream-chat';
+import { StreamChatGenerics } from '../types';
 
 /**
  * This hook is responsible for creating the channel and watching it.
@@ -375,8 +376,13 @@ export const useChannelWatch = () => {
   const cid = `${CHANNEL_TYPE}:${call?.id}`;
 
   useEffect(() => {
-    const channel = client.channel(CHANNEL_TYPE, call?.id);
-    channel.watch();
+   let channel: ChannelType<StreamChatGenerics>;
+    const watchChannel = async () => {
+      channel = client.channel(CHANNEL_TYPE, call?.id);
+      await channel.watch();
+    };
+
+    watchChannel();
 
     return () => {
       channel.stopWatching();
@@ -468,7 +474,7 @@ export const useUnreadCount = ({ channelWatched }: UseUnreadCountProps) => {
 };
 ```
 
-Here, To get the unread count, we listen to three main events, that is, `message.new` and update our state variable `unreadCount`. The `channelWatched` value is passed from the `useChannelWatch` took that we created.
+Here, To get the unread count, we listen mainly to the `message.new` event and update our state variable `unreadCount`. The `channelWatched` value is passed from the `useChannelWatch` took that we created.
 
 We set the unread count to 0 when the `notification.mark_read` event is triggered.
 
diff --git a/sample-apps/react-native/dogfood/src/hooks/useChannelWatch.tsx b/sample-apps/react-native/dogfood/src/hooks/useChannelWatch.tsx
index 15d5ef269b..3e322c7a79 100644
--- a/sample-apps/react-native/dogfood/src/hooks/useChannelWatch.tsx
+++ b/sample-apps/react-native/dogfood/src/hooks/useChannelWatch.tsx
@@ -1,7 +1,8 @@
 import { useCall } from '@stream-io/video-react-native-sdk';
 import { useEffect, useState } from 'react';
 import { useChatContext } from 'stream-chat-react-native';
-import type { Event } from 'stream-chat';
+import type { Event, Channel as ChannelType } from 'stream-chat';
+import { StreamChatGenerics } from '../../types';
 
 /**
  * This hook is responsible for creating the channel and watching it.
@@ -16,8 +17,13 @@ export const useChannelWatch = () => {
   const cid = `${CHANNEL_TYPE}:${call?.id}`;
 
   useEffect(() => {
-    const channel = client.channel(CHANNEL_TYPE, call?.id);
-    channel.watch();
+    let channel: ChannelType<StreamChatGenerics>;
+    const watchChannel = async () => {
+      channel = client.channel(CHANNEL_TYPE, call?.id);
+      await channel.watch();
+    };
+
+    watchChannel();
 
     return () => {
       channel.stopWatching();