diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/main/MainStackNavigator.tsx | 8 | ||||
| -rw-r--r-- | src/routes/tabs/NavigationBar.tsx | 159 |
2 files changed, 92 insertions, 75 deletions
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index d22c1874..8fce5e2f 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -37,14 +37,14 @@ export type MainStackParams = { screenType: ScreenType; }; CaptionScreen: { - title: string; - image: Image; + title?: string; + image?: Image; screenType: ScreenType; selectedTags?: MomentTagType[]; + moment?: MomentType; }; TagFriendsScreen: { - image: Image; - screenType: ScreenType; + imagePath: string; selectedTags?: MomentTagType[]; }; TagSelectionScreen: { diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index 000ac614..c3a42739 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -4,9 +4,11 @@ import {useSelector} from 'react-redux'; import {NavigationIcon} from '../../components'; import {NO_NOTIFICATIONS} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; +import {setNotificationsReadDate} from '../../services'; import {ScreenType} from '../../types'; import {haveUnreadNotifications} from '../../utils'; import MainStackScreen from '../main/MainStackScreen'; +import {NotificationPill} from '../../components/notifications'; const Tabs = createBottomTabNavigator(); @@ -18,10 +20,14 @@ const NavigationBar: React.FC = () => { const {notifications: {notifications} = NO_NOTIFICATIONS} = useSelector( (state: RootState) => state, ); + // Triggered if user clicks on Notifications page to close the pill + const [showIcon, setShowIcon] = useState<boolean>(true); const [unreadNotificationsPresent, setUnreadNotificationsPresent] = useState<boolean>(false); + // Prior to pill inclusion, determines if notification bell + // should have purple dot useEffect(() => { const determine = async () => { setUnreadNotificationsPresent( @@ -32,77 +38,88 @@ const NavigationBar: React.FC = () => { }, [notifications]); return ( - <Tabs.Navigator - screenOptions={({route}) => ({ - tabBarIcon: ({focused}) => { - switch (route.name) { - case 'Home': - return <NavigationIcon tab="Home" disabled={!focused} />; - case 'Search': - return <NavigationIcon tab="Search" disabled={!focused} />; - case 'Upload': - return <NavigationIcon tab="Upload" disabled={!focused} />; - case 'Notifications': - return ( - <NavigationIcon - newIcon={ - newNotificationReceived || unreadNotificationsPresent - } - tab="Notifications" - disabled={!focused} - /> - ); - case 'Chat': - return <NavigationIcon tab="Chat" disabled={!focused} />; - case 'Profile': - return <NavigationIcon tab="Profile" disabled={!focused} />; - case 'SuggestedPeople': - return ( - <NavigationIcon tab="SuggestedPeople" disabled={!focused} /> - ); - default: - return <Fragment />; - } - }, - })} - initialRouteName={isOnboardedUser ? 'Profile' : 'SuggestedPeople'} - tabBarOptions={{ - showLabel: false, - style: { - backgroundColor: 'transparent', - position: 'absolute', - borderTopWidth: 0, - left: 0, - right: 0, - bottom: '1%', - }, - }}> - <Tabs.Screen - name="SuggestedPeople" - component={MainStackScreen} - initialParams={{screenType: ScreenType.SuggestedPeople}} - /> - <Tabs.Screen - name="Search" - component={MainStackScreen} - initialParams={{screenType: ScreenType.Search}} - /> - <Tabs.Screen - name="Notifications" - component={MainStackScreen} - initialParams={{screenType: ScreenType.Notifications}} - /> - <Tabs.Screen - name="Chat" - component={MainStackScreen} - initialParams={{screenType: ScreenType.Chat}} - /> - <Tabs.Screen - name="Profile" - component={MainStackScreen} - initialParams={{screenType: ScreenType.Profile}} - /> - </Tabs.Navigator> + <> + <NotificationPill showIcon={showIcon} /> + <Tabs.Navigator + screenOptions={({route}) => ({ + tabBarIcon: ({focused}) => { + switch (route.name) { + case 'Home': + return <NavigationIcon tab="Home" disabled={!focused} />; + case 'Search': + return <NavigationIcon tab="Search" disabled={!focused} />; + case 'Upload': + return <NavigationIcon tab="Upload" disabled={!focused} />; + case 'Notifications': + return ( + <NavigationIcon + newIcon={ + newNotificationReceived || unreadNotificationsPresent + } + tab="Notifications" + disabled={!focused} + /> + ); + case 'Chat': + return <NavigationIcon tab="Chat" disabled={!focused} />; + case 'Profile': + return <NavigationIcon tab="Profile" disabled={!focused} />; + case 'SuggestedPeople': + return ( + <NavigationIcon tab="SuggestedPeople" disabled={!focused} /> + ); + default: + return <Fragment />; + } + }, + })} + initialRouteName={isOnboardedUser ? 'Profile' : 'SuggestedPeople'} + tabBarOptions={{ + showLabel: false, + style: { + backgroundColor: 'transparent', + position: 'absolute', + borderTopWidth: 0, + left: 0, + right: 0, + bottom: '1%', + }, + }}> + <Tabs.Screen + name="SuggestedPeople" + component={MainStackScreen} + initialParams={{screenType: ScreenType.SuggestedPeople}} + /> + <Tabs.Screen + name="Search" + component={MainStackScreen} + initialParams={{screenType: ScreenType.Search}} + /> + <Tabs.Screen + name="Notifications" + component={MainStackScreen} + initialParams={{screenType: ScreenType.Notifications}} + listeners={{ + tabPress: (_) => { + // Closes the pill once this screen has been opened + setShowIcon(false); + // Updates backend's date of reading notifications + setNotificationsReadDate(); + }, + }} + /> + <Tabs.Screen + name="Chat" + component={MainStackScreen} + initialParams={{screenType: ScreenType.Chat}} + /> + <Tabs.Screen + name="Profile" + component={MainStackScreen} + initialParams={{screenType: ScreenType.Profile}} + /> + </Tabs.Navigator> + </> ); }; |