From c510ba308738fc88edb11772fe9db6ec4537427f Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Tue, 19 Jan 2021 11:36:56 -0800 Subject: Done --- src/routes/Routes.tsx | 7 +++++++ src/routes/tabs/NavigationBar.tsx | 43 ++++++++++++++++++++++++++++++++------- 2 files changed, 43 insertions(+), 7 deletions(-) (limited to 'src/routes') diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 38a987f7..a14f1576 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -5,6 +5,8 @@ import {useSelector, useDispatch} from 'react-redux'; import {RootState} from '../store/rootReducer'; import {userLogin} from '../utils'; import SplashScreen from 'react-native-splash-screen'; +import messaging from '@react-native-firebase/messaging'; +import {updateNewNotificationReceived} from '../store/actions'; const Routes: React.FC = () => { const { @@ -24,7 +26,12 @@ const Routes: React.FC = () => { * SplashScreen is the actual react-native's splash screen. * We can hide / show it depending on our application needs. */ + useEffect(() => { + messaging().onMessage(() => { + dispatch(updateNewNotificationReceived(true)); + }); + if (!userId) { userLogin(dispatch, {userId: '', username: ''}); } else { 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 ( { case 'Upload': return ; case 'Notifications': - return ; + return ( + + ); case 'Profile': return ; default: @@ -44,14 +73,14 @@ const NavigationBar: React.FC = () => { }, }}>