From 5478edc24698bb15474b6c3f2d306bf1c4fee82e Mon Sep 17 00:00:00 2001
From: Loren Posen <loren.posen@iterable.com>
Date: Wed, 23 Oct 2024 12:30:37 -0700
Subject: [PATCH] Add Inbox tab and unread message count: implement Inbox tab
 with badge for unread messages, update navigation routes, and enhance state
 management in useIterableApp

---
 example/src/components/App/Main.tsx  | 51 +++++++++++++++++++++++++++-
 example/src/hooks/useIterableApp.tsx |  2 +-
 src/IterableInboxMessageDisplay.tsx  |  2 +-
 src/IterableInboxMessageList.tsx     |  4 +--
 4 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/example/src/components/App/Main.tsx b/example/src/components/App/Main.tsx
index a02ae5f2..c4b94631 100644
--- a/example/src/components/App/Main.tsx
+++ b/example/src/components/App/Main.tsx
@@ -1,14 +1,42 @@
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useState, useEffect } from 'react';
+
+import { Iterable } from '@iterable/react-native-sdk';
 
 import { colors, Route } from '../../constants';
 import type { MainScreenParamList } from '../../types';
 import { routeIcon } from './App.constants';
 import { getIcon } from './App.utils';
 import { User } from '../User';
+import Inbox from '../Inbox';
+import { useIterableApp } from '../../hooks';
 
 const Tab = createBottomTabNavigator<MainScreenParamList>();
 
 export const Main = () => {
+  const {
+    isInboxTab,
+    isLoggedIn,
+    loginInProgress,
+    returnToInboxTrigger,
+    setIsInboxTab,
+    setReturnToInboxTrigger,
+    userId,
+  } = useIterableApp();
+  const [unreadMessageCount, setUnreadMessageCount] = useState<number>(0);
+
+  useEffect(() => {
+    if (loginInProgress) return;
+    if (isLoggedIn) {
+      Iterable.inAppManager.getMessages().then((messages) => {
+        setUnreadMessageCount(messages.length);
+      });
+    } else {
+      // Reset unread message count when user logs out
+      setUnreadMessageCount(0);
+    }
+  }, [isLoggedIn, loginInProgress, userId]);
+
   return (
     <>
       <Tab.Navigator
@@ -22,7 +50,28 @@ export const Main = () => {
           };
         }}
       >
-        <Tab.Screen name={Route.User} component={User} />
+        <Tab.Screen
+          name={Route.Inbox}
+          component={Inbox}
+          options={
+            unreadMessageCount ? { tabBarBadge: unreadMessageCount } : {}
+          }
+          listeners={() => ({
+            tabPress: () => {
+              if (isInboxTab) {
+                setReturnToInboxTrigger(!returnToInboxTrigger);
+              }
+              setIsInboxTab(true);
+            },
+          })}
+        />
+        <Tab.Screen
+          name={Route.User}
+          component={User}
+          listeners={() => ({
+            tabPress: () => setIsInboxTab(false),
+          })}
+        />
       </Tab.Navigator>
     </>
   );
diff --git a/example/src/hooks/useIterableApp.tsx b/example/src/hooks/useIterableApp.tsx
index 237c8c65..41a400b4 100644
--- a/example/src/hooks/useIterableApp.tsx
+++ b/example/src/hooks/useIterableApp.tsx
@@ -125,7 +125,7 @@ export const IterableAppProvider: FunctionComponent<
       config.inAppDisplayInterval = 1.0; // Min gap between in-apps. No need to set this in production.
 
       config.urlHandler = (url: string) => {
-        const routeNames = [Route.User];
+        const routeNames = [Route.Inbox, Route.User];
         for (const route of routeNames) {
           if (url.includes(route.toLowerCase())) {
             // TODO: Figure out typing for this
diff --git a/src/IterableInboxMessageDisplay.tsx b/src/IterableInboxMessageDisplay.tsx
index 65bd4f50..9e2f9849 100644
--- a/src/IterableInboxMessageDisplay.tsx
+++ b/src/IterableInboxMessageDisplay.tsx
@@ -213,7 +213,7 @@ export const IterableInboxMessageDisplay = ({
             }}
           >
             <View style={returnButton}>
-              <Icon name="ios-chevron-back" style={returnButtonIcon} />
+              <Icon name="chevron-back-outline" style={returnButtonIcon} />
               <Text style={returnButtonText}>Inbox</Text>
             </View>
           </TouchableWithoutFeedback>
diff --git a/src/IterableInboxMessageList.tsx b/src/IterableInboxMessageList.tsx
index 5352be2b..5902b8b9 100644
--- a/src/IterableInboxMessageList.tsx
+++ b/src/IterableInboxMessageList.tsx
@@ -52,9 +52,7 @@ export const IterableInboxMessageList = ({
         swipingCheck={setSwiping}
         messageListItemLayout={messageListItemLayout}
         deleteRow={(messageId: string) => deleteRow(messageId)}
-        handleMessageSelect={(messageId: string, i: number) =>
-          handleMessageSelect(messageId, i)
-        }
+        handleMessageSelect={handleMessageSelect}
         contentWidth={contentWidth}
         isPortrait={isPortrait}
       />