-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
138 lines (124 loc) · 3.89 KB
/
App.js
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
// Module imports
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as SplashScreen from 'expo-splash-screen';
import * as SecureStore from 'expo-secure-store';
import { useEffect, useState } from 'react';
import getEnvVars from "./variables";
// Page imports
import { MainScreen } from './pages/main';
import { LoginScreen } from './pages/login';
import { MessagesPage } from "./pages/messages";
import { Notifications } from './pages/notifications';
import { AddFriendPage } from './pages/add_friend';
import { AccountPage } from './pages/account';
// Import websocket provider
import { WebSocketProvider, useWebSocket } from './scripts/websocket_handler';
// Create navigation stack instance
const Stack = createStackNavigator();
// Get values from secure storage
async function getValueFor(key) {
let result = await SecureStore.getItemAsync(key);
if (result) {
return result;
} else {
return null;
}
}
// Prevent splash screen from auto-hiding
SplashScreen.preventAutoHideAsync();
// Default component for app
// Mainly responsible for structuring our routes
export default function App() {
const [isReady, setIsReady] = useState(false);
const [initialRoute, setInitialRoute] = useState('Login');
// Get auth credentials from secure storage
async function get_credentials() {
const username = await getValueFor("username");
const token = await getValueFor("token");
return {username: username, token: token};
}
// Authenticate with auth server
useEffect(() => {
async function authenticate() {
const credentials = await get_credentials();
const formData = new FormData();
formData.append("username", credentials.username);
formData.append("token", credentials.token);
fetch(`${getEnvVars.auth_url}/auth/verify_token`, {
method: "POST",
body: formData
})
.then((response) => {
if (response.ok) {
setInitialRoute('Main');
setIsReady(true);
} else {
throw new Error("Request Failed! Status code: " + response.status);
}
})
.catch((err) => {
console.log(err);
setInitialRoute('Login');
setIsReady(true);
})
}
authenticate();
}, []);
// Hide splash screen once app is ready
useEffect(() => {
if (isReady) {
SplashScreen.hideAsync();
}
}, [isReady]);
// Return 'null' if app is not ready
if (!isReady) {
return null;
}
return (
<WebSocketProvider>
<NavigationContainer>
<Stack.Navigator
initialRouteName={initialRoute}
screenOptions={{
headerMode: 'screen', // Keep the header static during transitions
}}
>
<Stack.Screen
name="Login"
component={LoginScreen}
options={{ title: 'Login Page', animationEnabled: false }}
/>
<Stack.Screen
name="Main"
component={MainScreen}
options={{ title: 'Main Page', animationEnabled: false }}
/>
<Stack.Screen
name="Messages"
component={MessagesPage}
options={{
title: 'Messages Page',
headerLeft: () => null,
}}
/>
<Stack.Screen
name="Notifications"
component={Notifications}
options={{ title: 'Notifications', animationEnabled: false }}
/>
<Stack.Screen
name="Add Friend"
component={AddFriendPage}
options={{ title: 'Add Friend', headerLeft: () => null}}
/>
<Stack.Screen
name="Account"
component={AccountPage}
options={{ title: 'Account', animationEnabled: false}}
/>
</Stack.Navigator>
</NavigationContainer>
</WebSocketProvider>
);
}