Managed the authentication flow and worked on the overall UI design.
This commit is contained in:
94
src/Route.tsx
Normal file
94
src/Route.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { View, ActivityIndicator } from 'react-native';
|
||||
|
||||
/* ---------- AUTH SCREENS ---------- */
|
||||
import { Login } from './auth/Login';
|
||||
/* ---------- APP SCREENS ---------- */
|
||||
import Home from './Screen/Home';
|
||||
const AuthStack = createNativeStackNavigator();
|
||||
const MainStack = createNativeStackNavigator();
|
||||
type AuthContextType = {
|
||||
isLoggedIn: boolean;
|
||||
setIsLoggedIn: (value: boolean) => void;
|
||||
};
|
||||
|
||||
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error('useAuth must be used within AuthProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
function AuthStackNavigator() {
|
||||
return (
|
||||
<AuthStack.Navigator id="AuthStack" screenOptions={{ headerShown: false }}>
|
||||
<AuthStack.Screen name="Login" component={Login} />
|
||||
<AuthStack.Screen name="Register" component={Register} />
|
||||
<AuthStack.Screen name="PoliceRegister" component={PoliceRegister} />
|
||||
</AuthStack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
function MainStackNavigator() {
|
||||
return (
|
||||
<MainStack.Navigator id="MainStack" screenOptions={{ headerShown: false }}>
|
||||
<MainStack.Screen name="Home" component={Home} />
|
||||
</MainStack.Navigator>
|
||||
);
|
||||
}
|
||||
|
||||
function RootNavigator() {
|
||||
const { isLoggedIn } = useAuth();
|
||||
return isLoggedIn ? <MainStackNavigator /> : <AuthStackNavigator />;
|
||||
}
|
||||
|
||||
const Route: React.FC = () => {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
bootstrap();
|
||||
}, []);
|
||||
|
||||
const bootstrap = async () => {
|
||||
try {
|
||||
const keys = await AsyncStorage.getAllKeys();
|
||||
const stores = await AsyncStorage.multiGet(keys);
|
||||
|
||||
stores.forEach(([key, value]) => {
|
||||
if (value !== null) {
|
||||
User[key] = value;
|
||||
}
|
||||
});
|
||||
|
||||
if (User.id) {
|
||||
setIsLoggedIn(true);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Bootstrap error', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||||
<ActivityIndicator size="large" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
|
||||
<NavigationContainer>
|
||||
<RootNavigator />
|
||||
</NavigationContainer>
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default Route;
|
||||
10
src/auth/Login.tsx
Normal file
10
src/auth/Login.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import { View } from "react-native";
|
||||
|
||||
export const Login: React.FC = () => {
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
|
||||
{/* Implement your login form here */}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user