aboutsummaryrefslogtreecommitdiff
path: root/src/routes/tabs/NavigationBar.tsx
blob: 000ac6144c9045651a6db7151fc27731b57586a7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
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, 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
      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>
  );
};

export default NavigationBar;