Merge pull request #192 from ashmgarv/tma515-new-no-icon

[TMA - 515] New notifications icon and reordering of bottom navigation stack

1 files changed, 36 insertions, 7 deletions

diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 3757c56b..7d29ab67 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -1,15 +1,36 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import React, {Fragment} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {useSelector} from 'react-redux';
 import {NavigationIcon} from '../../components';
+import {NO_NOTIFICATIONS} from '../../store/initialStates';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
+import {haveUnreadNotifications} from '../../utils';
 import MainStackScreen from '../main/MainStackScreen';
 
 const Tabs = createBottomTabNavigator();
 
 const NavigationBar: React.FC = () => {
-  const {isOnboardedUser} = useSelector((state: RootState) => state.user);
+  const {isOnboardedUser, newNotificationReceived} = useSelector(
+    (state: RootState) => state.user,
+  );
+
+  const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector(
+    (state: RootState) => state,
+  );
+
+  const [unreadNotificationsPresent, setUnreadNotificationsPresent] = useState<
+    boolean
+  >(false);
+
+  useEffect(() => {
+    const determine = async () => {
+      setUnreadNotificationsPresent(
+        await haveUnreadNotifications(notifications),
+      );
+    };
+    determine();
+  }, [notifications]);
 
   return (
     <Tabs.Navigator
@@ -23,7 +44,15 @@ const NavigationBar: React.FC = () => {
             case 'Upload':
               return <NavigationIcon tab="Upload" disabled={!focused} />;
             case 'Notifications':
-              return <NavigationIcon tab="Notifications" disabled={!focused} />;
+              return (
+                <NavigationIcon
+                  newIcon={
+                    newNotificationReceived || unreadNotificationsPresent
+                  }
+                  tab="Notifications"
+                  disabled={!focused}
+                />
+              );
             case 'Profile':
               return <NavigationIcon tab="Profile" disabled={!focused} />;
             default:
@@ -44,14 +73,14 @@ const NavigationBar: React.FC = () => {
         },
       }}>
       <Tabs.Screen
-        name="Notifications"
+        name="Search"
         component={MainStackScreen}
-        initialParams={{screenType: ScreenType.Notifications}}
+        initialParams={{screenType: ScreenType.Search}}
       />
       <Tabs.Screen
-        name="Search"
+        name="Notifications"
         component={MainStackScreen}
-        initialParams={{screenType: ScreenType.Search}}
+        initialParams={{screenType: ScreenType.Notifications}}
       />
       <Tabs.Screen
         name="Profile"