Email-Proyect/App.tsx at main · SamuelCosmo/Email-Proyect · GitHub

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 React, {useContext} from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator, DrawerItemList} from '@react-navigation/drawer';
import LoginPage from './src/login/login';
import DashboardPage from './src/dashboard/dashboard';
import EmailPage from './src/email/email';
import {GlobalContext, GlobalProvider} from './store/StoreContext';

// const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

export default function App(): React.JSX.Element {
  return (
    <GlobalProvider>
      <NavigationContainer>
        <Drawer.Navigator
          initialRouteName="Login"
          screenOptions={{headerShown: false}}>
          <Drawer.Screen
            name="Login"
            component={LoginPage}
            options={{
              title: 'Login',
              headerShown: false,
              drawerStyle: {display: 'none'},
            }}
          />
          <Drawer.Screen
            name="Home"
            component={SecondNavigation}
            options={{
              title: 'Home',
              headerShown: false,
              drawerStyle: {display: 'none'},
            }}
          />
        </Drawer.Navigator>
      </NavigationContainer>
    </GlobalProvider>
  );
}

function SecondNavigation(): React.JSX.Element {
  return (
    <Drawer.Navigator
      initialRouteName="Dashboard"
      drawerContent={props => <CustomDrawerContent {...props} />}
      screenOptions={{
        headerStyle: {
          backgroundColor: '#078FC5',
        },
        headerTitleAlign: 'left',
        headerTintColor: '#fff',
        drawerActiveBackgroundColor: '#078FC5',
        drawerActiveTintColor: 'white',
        drawerStyle: {
          backgroundColor: '#f2f2f2',
          padding: 10,
        },
      }}>
      <Drawer.Screen
        name="Dashboard"
        component={DashboardPage}
        options={{title: 'Dashboard'}}
      />
      <Drawer.Screen
        name="Mail"
        component={EmailPage}
        options={{title: 'Mail'}}
      />
    </Drawer.Navigator>
  );
}

function CustomDrawerContent(propsDrawer: any) {
  const {setUser, setEmailList} = useContext(GlobalContext);

  const handleSignOut = () => {
    propsDrawer.navigation.navigate('Login'); // Navigate to "Login" screen
    propsDrawer.navigation.closeDrawer(); // Close the drawer
    setUser({id: '', token: ''});
    setEmailList([]);
  };

  return (
    <View style={{flex: 1}}>
      <DrawerItemList {...propsDrawer} />
      <TouchableOpacity style={styles.signOutButton} onPress={handleSignOut}>
        <Text style={styles.signOutText}>Sign Out</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  signOutButton: {
    marginTop: 'auto',
    padding: 15,
    backgroundColor: '#FF3B30',
    alignItems: 'center',
    borderRadius: 50,
  },
  signOutText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});