feat: initial unread count example (#1868)

* feat: set unread count on initial app mount

* fix: unnecessary if check to set unread state

* fix: linting error

Author: santhoshvai

examples/SampleApp/App.tsx

@@ -65,7 +65,7 @@ const Drawer = createDrawerNavigator();
 const Stack = createStackNavigator<StackNavigatorParamList>();
 const UserSelectorStack = createStackNavigator<UserSelectorParamList>();
 const App = () => {
-  const { chatClient, isConnecting, loginUser, logout, switchUser } = useChatClient();
+  const { chatClient, isConnecting, loginUser, logout, switchUser, unreadCount } = useChatClient();
   const colorScheme = useColorScheme();
   const streamChatTheme = useStreamChatTheme();
 
@@ -131,7 +131,7 @@ const App = () => {
             dark: colorScheme === 'dark',
           }}
         >
-          <AppContext.Provider value={{ chatClient, loginUser, logout, switchUser }}>
+          <AppContext.Provider value={{ chatClient, loginUser, logout, switchUser, unreadCount }}>
             {isConnecting && !chatClient ? (
               <LoadingScreen />
             ) : chatClient ? (

examples/SampleApp/src/components/UnreadCountBadge.tsx

@@ -26,26 +26,13 @@ export const UnreadCountBadge: React.FC = () => {
     },
   } = useTheme();
 
-  const { chatClient } = useAppContext();
-  const [count, setCount] = useState<number>();
-
-  useEffect(() => {
-    const listener = chatClient?.on((e) => {
-      if (e.total_unread_count !== undefined) {
-        setCount(e.total_unread_count);
-      }
-    });
-
-    return () => {
-      if (listener) {
-        listener.unsubscribe();
-      }
-    };
-  }, [chatClient]);
+  const { unreadCount } = useAppContext();
 
   return (
     <View style={[styles.unreadContainer, { backgroundColor: accent_red }]}>
-      {!!count && <Text style={styles.unreadText}>{count > 99 ? '99+' : count}</Text>}
+      {!!unreadCount && (
+        <Text style={styles.unreadText}>{unreadCount > 99 ? '99+' : unreadCount}</Text>
+      )}
     </View>
   );
 };

examples/SampleApp/src/context/AppContext.ts

@@ -9,6 +9,7 @@ type AppContextType = {
   loginUser: (config: LoginConfig) => void;
   logout: () => void;
   switchUser: (userId?: string) => void;
+  unreadCount: number | undefined;
 };
 
 export const AppContext = React.createContext({} as AppContextType);

examples/SampleApp/src/hooks/useChatClient.ts

@@ -67,6 +67,7 @@ messaging().setBackgroundMessageHandler(async (remoteMessage) => {
 export const useChatClient = () => {
   const [chatClient, setChatClient] = useState<StreamChat<StreamChatGenerics> | null>(null);
   const [isConnecting, setIsConnecting] = useState(true);
+  const [unreadCount, setUnreadCount] = useState<number>();
 
   const unsubscribePushListenersRef = useRef<() => void>();
 
@@ -81,15 +82,16 @@ export const useChatClient = () => {
       timeout: 6000,
       // logger: (type, msg) => console.log(type, msg)
     });
+    setChatClient(client);
 
     const user = {
       id: config.userId,
       image: config.userImage,
       name: config.userName,
     };
-    const promise = client.connectUser(user, config.userToken);
-    setChatClient(client);
-    await promise;
+    const connectedUser = await client.connectUser(user, config.userToken);
+    const initialUnreadCount = connectedUser?.me?.total_unread_count;
+    setUnreadCount(initialUnreadCount);
     await AsyncStore.setItem('@stream-rn-sampleapp-login-config', config);
 
     const permissionAuthStatus = await messaging().hasPermission();
@@ -189,11 +191,29 @@ export const useChatClient = () => {
     return unsubscribePushListenersRef.current;
   }, []);
 
+  /**
+   * Listen to changes in unread counts and update the badge count
+   */
+  useEffect(() => {
+    const listener = chatClient?.on((e) => {
+      if (e.total_unread_count !== undefined) {
+        setUnreadCount(e.total_unread_count);
+      }
+    });
+
+    return () => {
+      if (listener) {
+        listener.unsubscribe();
+      }
+    };
+  }, [chatClient]);
+
   return {
     chatClient,
     isConnecting,
     loginUser,
     logout,
     switchUser,
+    unreadCount,
   };
 };

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -62,10 +62,7 @@ const ChannelPreviewWithContext = <
     }
 
     const newUnreadCount = channel.countUnread();
-
-    if (newUnreadCount !== unread) {
-      setUnread(newUnreadCount);
-    }
+    setUnread(newUnreadCount);
   }, [channelLastMessageString]);
 
   useEffect(() => {