From a526018f1fc5ccfd813c883be673b11c52ae562c Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Mon, 9 Sep 2024 11:44:49 +0000
Subject: [PATCH] navigation based on the user authentication state. Handle persistant reload auth state.

---
 App.tsx                                    | 12 ++++++------
 src/contexts/UserAuthenticationContext.tsx | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------
 src/navigations/AppMainStackNavigator.tsx  | 36 +++++++++++++++++++++++++++++++++---
 3 files changed, 107 insertions(+), 19 deletions(-)

diff --git a/App.tsx b/App.tsx
index 533ab9b..a0909e8 100644
--- a/App.tsx
+++ b/App.tsx
@@ -20,9 +20,9 @@ export default function App() {
 		<ThemeProvider theme={theme}>
 			<ModalsManagerProvider>
 				<SafeAreaProvider>
-					<NavigationContainer>
-						<ProvideQueryClient>
-							<UserAuthenticationContextProvider>
+					<ProvideQueryClient>
+						<UserAuthenticationContextProvider>
+							<NavigationContainer>
 								{/* <View style={styles.container}> */}
 								{/* <SafeAreaProvider>
 					<StatusBar style="auto" />
@@ -30,9 +30,9 @@ export default function App() {
 				</SafeAreaProvider> */}
 								<AppMainStackNavigator />
 								{/* </View> */}
-							</UserAuthenticationContextProvider>
-						</ProvideQueryClient>
-					</NavigationContainer>
+							</NavigationContainer>
+						</UserAuthenticationContextProvider>
+					</ProvideQueryClient>
 				</SafeAreaProvider>
 			</ModalsManagerProvider>
 			<ModalContainer />
diff --git a/src/contexts/UserAuthenticationContext.tsx b/src/contexts/UserAuthenticationContext.tsx
index 3d474e8..24debc5 100644
--- a/src/contexts/UserAuthenticationContext.tsx
+++ b/src/contexts/UserAuthenticationContext.tsx
@@ -1,16 +1,19 @@
-import type { ImainStackNavigator } from "@/navigations/Types";
 import type { IuserInformations } from "@/utils/requests/Types";
 import authenticateUser from "@/utils/requests/authenticateUser";
 import getUserInformations from "@/utils/requests/userInformations";
 import { LOG } from "@logger";
-import { type NavigationProp, useNavigation } from "@react-navigation/native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+// import { type NavigationProp, useNavigation } from "@react-navigation/native";
 import { useMutation } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { createContext, useCallback, useContext, useState } from "react";
+import * as SplashScreen from "expo-splash-screen";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
 import type { IauthenticationData } from "./Types";
 
 const log = LOG.extend("UserAuthenticationContext");
 
+SplashScreen.preventAutoHideAsync();
+
 export interface UserAuthenticationContextProps {
 	isAuthenticated: boolean;
 	setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
@@ -87,7 +90,7 @@ export const UserAuthenticationContextProvider = ({ children }: { children: Reac
 
 	// Hoooks
 
-	const navigation = useNavigation<NavigationProp<ImainStackNavigator>>();
+	// const navigation = useNavigation<NavigationProp<ImainStackNavigator>>();
 
 	// Mutations
 
@@ -133,7 +136,10 @@ export const UserAuthenticationContextProvider = ({ children }: { children: Reac
 		onSuccess: (userInformations) => {
 			log.info("getUserInformations request was a success, navigating to homepage");
 			setUserInformations(userInformations);
-			navigation.navigate("appBottomTabsNavigator");
+			setIsAuthenticated(true);
+			storeAuthenticationData(authenticationData);
+			storeUserInformations(userInformations);
+			// navigation.navigate("appBottomTabsNavigator");
 		},
 		onError: (error) => {
 			log.error("userInformationsMutation", error);
@@ -179,11 +185,63 @@ export const UserAuthenticationContextProvider = ({ children }: { children: Reac
 				user: 0,
 			},
 		});
-		navigation.reset({
-			index: 0,
-			routes: [{ name: "userLoginScreen" }],
-		});
-	}, [navigation]);
+		// navigation.reset({
+		// 	index: 0,
+		// 	routes: [{ name: "userLoginScreen" }],
+		// });
+	}, []);
+
+	// Storages
+
+	const storeAuthenticationData = async (authenticationData: IauthenticationData) => {
+		try {
+			await AsyncStorage.setItem("authenticationData", JSON.stringify(authenticationData));
+		} catch (e) {
+			log.error("storeAuthenticationData |", e);
+			// saving error
+		}
+	};
+
+	const storeUserInformations = async (userInformations: IuserInformations) => {
+		try {
+			await AsyncStorage.setItem("userInformations", JSON.stringify(userInformations));
+		} catch (e) {
+			log.error("storeUserInformations |", e);
+			// saving error
+		}
+	};
+
+	const loadAuthenticationData = async () => {
+		log.debug("loadAuthenticationData | Loading authentication data");
+		const jsonRepresentation = await AsyncStorage.getItem("authenticationData");
+		return jsonRepresentation ? JSON.parse(jsonRepresentation) : null;
+	};
+
+	const loadUserInformations = async () => {
+		log.debug("loadUserInformations | Loading user informations");
+		const jsonRepresentation = await AsyncStorage.getItem("userInformations");
+		return jsonRepresentation ? JSON.parse(jsonRepresentation) : null;
+	};
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <This should only be executed once. At startup.>
+	useEffect(() => {
+		log.debug("UserAuthenticationContext | App Startup | loading saved user data.");
+		(async () => {
+			try {
+				const authenticationData = await loadAuthenticationData();
+				const userInformations = await loadUserInformations();
+				if (authenticationData && userInformations) {
+					setAuthenticationData(authenticationData);
+					setUserInformations(userInformations);
+					setIsAuthenticated(true);
+					// navigation.navigate("appBottomTabsNavigator");
+				}
+			} catch (error) {
+			} finally {
+				await SplashScreen.hideAsync();
+			}
+		})();
+	}, []);
 
 	return (
 		<UserAuthenticationContext.Provider
diff --git a/src/navigations/AppMainStackNavigator.tsx b/src/navigations/AppMainStackNavigator.tsx
index cfcfccd..a2ad6f1 100644
--- a/src/navigations/AppMainStackNavigator.tsx
+++ b/src/navigations/AppMainStackNavigator.tsx
@@ -1,21 +1,51 @@
+import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
+import { LOG } from "@logger";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import HomeUserNotLoggedIn from "@screens/HomeUserNotLoggedIn";
 import PaymentResultScreen from "@screens/PaymentResultScreen";
 import UserLoginScreen from "@screens/UserLoginScreen";
 import WaveQrCodePaymentScreen from "@screens/WaveQrCodePaymentScreen";
+import * as SplashScreen from "expo-splash-screen";
 import { AppBottomTabsNavigator } from "./AppBottomTabsNavigator";
 import type { ImainStackNavigator } from "./Types";
 
 const Stack = createNativeStackNavigator<ImainStackNavigator>();
 
+const log = LOG.extend("AppMainStackNavigator");
+
+SplashScreen.preventAutoHideAsync();
+
 const AppMainStackNavigator = () => {
+	const { isAuthenticated, isAuthenticating } = useUserAuthenticationContext();
+
+	if (isAuthenticating) {
+		log.info("isAuthenticating");
+		return null;
+	}
+	async () => {
+		await SplashScreen.hideAsync();
+	};
+	if (!isAuthenticating && !isAuthenticated) {
+		log.info("Navigating to UserLoginScreen");
+		return (
+			<Stack.Navigator
+				initialRouteName="homeUserNotLoggedIn"
+				screenOptions={{ headerShown: false }}
+			>
+				<Stack.Screen name="homeUserNotLoggedIn" component={HomeUserNotLoggedIn} />
+				<Stack.Screen name="userLoginScreen" component={UserLoginScreen} />
+			</Stack.Navigator>
+		);
+	}
+
+	log.info("Navigating to AppBottomTabsNavigator");
 	return (
 		<Stack.Navigator
-			initialRouteName="homeUserNotLoggedIn"
+			initialRouteName="appBottomTabsNavigator"
 			screenOptions={{ headerShown: false }}
 		>
-			<Stack.Screen name="homeUserNotLoggedIn" component={HomeUserNotLoggedIn} />
-			<Stack.Screen name="userLoginScreen" component={UserLoginScreen} />
+			{/* <Stack.Screen name="homeUserNotLoggedIn" component={HomeUserNotLoggedIn} />
+			<Stack.Screen name="userLoginScreen" component={UserLoginScreen} /> */}
 			<Stack.Screen name="appBottomTabsNavigator" component={AppBottomTabsNavigator} />
 			<Stack.Screen name="paymentResultScreen" component={PaymentResultScreen} />
 			<Stack.Screen name="waveQrCodePaymentScreen" component={WaveQrCodePaymentScreen} />
--
libgit2 0.27.1