From 45193e6d6e1ef0a472062f84a41527ac9edad040 Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Thu, 23 May 2024 22:42:42 +0000
Subject: [PATCH] renaming, refactoring a good bit the navigation system

---
 src/navigations/AppBottomTabsNavigator.tsx      | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/navigations/AppMainStackNavigator.tsx       | 22 ++++++++++++++++++++++
 src/navigations/BottomTabs.tsx                  | 95 -----------------------------------------------------------------------------------------------
 src/navigations/InitialNavigationHandler.tsx    |  4 ++--
 src/navigations/PaymentStackNavigation.tsx      |  4 ++--
 src/navigations/Types.ts                        | 28 +++++++++++++---------------
 src/navigations/UnloggedUserStackNavigation.tsx | 22 ----------------------
 src/screens/HomeUserNotLoggedIn.tsx             |  2 +-
 8 files changed, 133 insertions(+), 137 deletions(-)
 create mode 100644 src/navigations/AppBottomTabsNavigator.tsx
 create mode 100644 src/navigations/AppMainStackNavigator.tsx
 delete mode 100644 src/navigations/BottomTabs.tsx
 delete mode 100644 src/navigations/UnloggedUserStackNavigation.tsx

diff --git a/src/navigations/AppBottomTabsNavigator.tsx b/src/navigations/AppBottomTabsNavigator.tsx
new file mode 100644
index 0000000..b5ec146
--- /dev/null
+++ b/src/navigations/AppBottomTabsNavigator.tsx
@@ -0,0 +1,93 @@
+import { Entypo, FontAwesome, Ionicons } from "@expo/vector-icons";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { useTheme } from "@shopify/restyle";
+// import palette
+import type { Theme } from "@themes/Theme";
+import { View } from "react-native";
+import Text from "../components/bases/Text";
+import PaymentStackNavigator from "./PaymentStackNavigation";
+const Tab = createBottomTabNavigator();
+
+export const AppBottomTabsNavigator = () => {
+	const theme = useTheme<Theme>();
+
+	return (
+		<Tab.Navigator
+			initialRouteName="Acceuil"
+			screenOptions={{ headerShown: false, animation: "shift", tabBarHideOnKeyboard: true }}
+		>
+			<Tab.Screen
+				name="Acceuil"
+				component={PaymentStackNavigator}
+				options={{
+					tabBarIcon: ({ color, size }) => (
+						<Entypo name="home" size={size} color={color} />
+					),
+					tabBarActiveTintColor: theme.colors.secondary,
+				}}
+			/>
+			<Tab.Screen
+				name="Transactions"
+				component={Transactions}
+				options={{
+					tabBarIcon: ({ color, size }) => (
+						<FontAwesome name="exchange" size={size} color={color} />
+					),
+					tabBarActiveTintColor: theme.colors.secondary,
+				}}
+			/>
+			<Tab.Screen
+				name="Paramètres"
+				component={SettingsScreen}
+				options={{
+					tabBarIcon: ({ color, size }) => (
+						<Ionicons name="settings-outline" size={size} color={color} />
+					),
+					tabBarActiveTintColor: theme.colors.secondary,
+				}}
+			/>
+			<Tab.Screen
+				name="Profile"
+				component={ProfileScreen}
+				options={{
+					tabBarIcon: ({ color, size }) => (
+						<Ionicons name="person" size={size} color={color} />
+					),
+					tabBarActiveTintColor: theme.colors.secondary,
+				}}
+			/>
+		</Tab.Navigator>
+	);
+};
+
+const HomeScreen = () => {
+	return (
+		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+			<Text>Home!</Text>
+		</View>
+	);
+};
+
+const Transactions = () => {
+	return (
+		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+			<Text>Transactions!</Text>
+		</View>
+	);
+};
+
+const SettingsScreen = () => {
+	return (
+		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+			<Text>Settings!</Text>
+		</View>
+	);
+};
+
+const ProfileScreen = () => {
+	return (
+		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+			<Text>Profile!</Text>
+		</View>
+	);
+};
diff --git a/src/navigations/AppMainStackNavigator.tsx b/src/navigations/AppMainStackNavigator.tsx
new file mode 100644
index 0000000..22086b3
--- /dev/null
+++ b/src/navigations/AppMainStackNavigator.tsx
@@ -0,0 +1,22 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import HomeUserNotLoggedIn from "@screens/HomeUserNotLoggedIn";
+import UserLoginScreen from "@screens/UserLoginScreen";
+import { AppBottomTabsNavigator } from "./AppBottomTabsNavigator";
+import type { ImainStackNavigator } from "./Types";
+
+const Stack = createNativeStackNavigator<ImainStackNavigator>();
+
+const AppMainStackNavigator = () => {
+	return (
+		<Stack.Navigator
+			initialRouteName="homeUserNotLoggedIn"
+			screenOptions={{ headerShown: false }}
+		>
+			<Stack.Screen name="homeUserNotLoggedIn" component={HomeUserNotLoggedIn} />
+			<Stack.Screen name="userLoginScreen" component={UserLoginScreen} />
+			<Stack.Screen name="appBottomTabsNavigator" component={AppBottomTabsNavigator} />
+		</Stack.Navigator>
+	);
+};
+
+export default AppMainStackNavigator;
diff --git a/src/navigations/BottomTabs.tsx b/src/navigations/BottomTabs.tsx
deleted file mode 100644
index b651222..0000000
--- a/src/navigations/BottomTabs.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Entypo } from "@expo/vector-icons";
-import { FontAwesome } from "@expo/vector-icons";
-import { Ionicons } from "@expo/vector-icons";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { useTheme } from "@shopify/restyle";
-// import palette
-import type { Theme } from "@themes/Theme";
-import { View } from "react-native";
-import Text from "../components/bases/Text";
-import PaymentStackNavigator from "./PaymentStackNavigation";
-const Tab = createBottomTabNavigator();
-
-export const BottomTabs = () => {
-	const theme = useTheme<Theme>();
-
-	return (
-		<Tab.Navigator
-			initialRouteName="Acceuil"
-			screenOptions={{ headerShown: false, animation: "shift", tabBarHideOnKeyboard: true }}
-		>
-			<Tab.Screen
-				name="Acceuil"
-				component={PaymentStackNavigator}
-				options={{
-					tabBarIcon: ({ color, size }) => (
-						<Entypo name="home" size={size} color={color} />
-					),
-					tabBarActiveTintColor: theme.colors.secondary,
-				}}
-			/>
-			<Tab.Screen
-				name="Transactions"
-				component={Transactions}
-				options={{
-					tabBarIcon: ({ color, size }) => (
-						<FontAwesome name="exchange" size={size} color={color} />
-					),
-					tabBarActiveTintColor: theme.colors.secondary,
-				}}
-			/>
-			<Tab.Screen
-				name="Paramètres"
-				component={SettingsScreen}
-				options={{
-					tabBarIcon: ({ color, size }) => (
-						<Ionicons name="settings-outline" size={size} color={color} />
-					),
-					tabBarActiveTintColor: theme.colors.secondary,
-				}}
-			/>
-			<Tab.Screen
-				name="Profile"
-				component={ProfileScreen}
-				options={{
-					tabBarIcon: ({ color, size }) => (
-						<Ionicons name="person" size={size} color={color} />
-					),
-					tabBarActiveTintColor: theme.colors.secondary,
-				}}
-			/>
-		</Tab.Navigator>
-	);
-};
-
-const HomeScreen = () => {
-	return (
-		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-			<Text>Home!</Text>
-		</View>
-	);
-};
-
-const Transactions = () => {
-	return (
-		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-			<Text>Transactions!</Text>
-		</View>
-	);
-};
-
-const SettingsScreen = () => {
-	return (
-		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-			<Text>Settings!</Text>
-		</View>
-	);
-};
-
-const ProfileScreen = () => {
-	return (
-		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-			<Text>Profile!</Text>
-		</View>
-	);
-};
diff --git a/src/navigations/InitialNavigationHandler.tsx b/src/navigations/InitialNavigationHandler.tsx
index 5562e4d..186f7e0 100644
--- a/src/navigations/InitialNavigationHandler.tsx
+++ b/src/navigations/InitialNavigationHandler.tsx
@@ -1,11 +1,11 @@
 import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
-import UnloggedUserStackNavigation from "./UnloggedUserStackNavigation";
+import AppMainStackNavigator from "./AppMainStackNavigator";
 
 const InitialNavigationHandler = () => {
 	const { isAuthenticated } = useUserAuthenticationContext();
 	console.log("isAuthenticated", isAuthenticated);
 
-	return <UnloggedUserStackNavigation />;
+	return <AppMainStackNavigator />;
 };
 
 export default InitialNavigationHandler;
diff --git a/src/navigations/PaymentStackNavigation.tsx b/src/navigations/PaymentStackNavigation.tsx
index 5cea561..a5aee6a 100644
--- a/src/navigations/PaymentStackNavigation.tsx
+++ b/src/navigations/PaymentStackNavigation.tsx
@@ -3,9 +3,9 @@ import HomePageWithPaymentOptions from "@screens/HomePageWithPaymentOptions";
 import NumberAndOtpForPaymentScreen from "@screens/NumberAndOtpForPaymentScreen";
 import PaymentAmountInputScreen from "@screens/PaymentAmountInputScreen";
 import PaymentResultScreen from "@screens/PaymentResultScreen";
-import type { PaymentStackParamList } from "./Types";
+import type { IpaymentStackNavigator } from "./Types";
 
-const Stack = createNativeStackNavigator<PaymentStackParamList>();
+const Stack = createNativeStackNavigator<IpaymentStackNavigator>();
 
 const PaymentStackNavigator = () => {
 	return (
diff --git a/src/navigations/Types.ts b/src/navigations/Types.ts
index 6cd3f30..604c7e1 100644
--- a/src/navigations/Types.ts
+++ b/src/navigations/Types.ts
@@ -1,35 +1,33 @@
 import type { PaymentCode } from "@/utils/requests/Types";
 import type { NativeStackScreenProps } from "@react-navigation/native-stack";
 
-export type PaymentStackParamList = {
+export type IpaymentStackNavigator = {
 	homePageWithPaymentOptions: undefined;
 	numberAndOtpForPaymentScreen: undefined;
 	paymentAmountInputScreen: {
 		paymentType: PaymentCode;
 	};
-	homeUserNotLoggedIn: undefined;
-	userLoginScreen: undefined;
+	// homeUserNotLoggedIn: undefined;
+	// userLoginScreen: undefined;
 	paymentResultScreen: undefined;
 };
 
-export type PaymentStackScreenProps<T extends keyof PaymentStackParamList> = NativeStackScreenProps<
-	PaymentStackParamList,
-	T,
-	"PaymentStackParamList"
->;
+export type PaymentStackScreenProps<T extends keyof IpaymentStackNavigator> =
+	NativeStackScreenProps<IpaymentStackNavigator, T, "IpaymentStackNavigator">;
 
-export type PaymentStackScreenComponentProps<T extends keyof PaymentStackParamList> = React.FC<
+export type PaymentStackScreenComponentProps<T extends keyof IpaymentStackNavigator> = React.FC<
 	PaymentStackScreenProps<T>
 >;
 
-export type UnloggedUserStackParamList = {
+export type ImainStackNavigator = {
 	homeUserNotLoggedIn: undefined;
 	userLoginScreen: undefined;
-	bottomTabs: undefined;
+	appBottomTabsNavigator: undefined;
 };
 
-export type UnloggedUserStackScreenProps<T extends keyof UnloggedUserStackParamList> =
-	NativeStackScreenProps<UnloggedUserStackParamList, T, "UnloggedUserStackParamList">;
+export type UnloggedUserStackScreenProps<T extends keyof ImainStackNavigator> =
+	NativeStackScreenProps<ImainStackNavigator, T, "ImainStackNavigator">;
 
-export type UnloggedUserStackScreenComponentProps<T extends keyof UnloggedUserStackParamList> =
-	React.FC<UnloggedUserStackScreenProps<T>>;
+export type UnloggedUserStackScreenComponentProps<T extends keyof ImainStackNavigator> = React.FC<
+	UnloggedUserStackScreenProps<T>
+>;
diff --git a/src/navigations/UnloggedUserStackNavigation.tsx b/src/navigations/UnloggedUserStackNavigation.tsx
deleted file mode 100644
index 88fdb5a..0000000
--- a/src/navigations/UnloggedUserStackNavigation.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import HomeUserNotLoggedIn from "@screens/HomeUserNotLoggedIn";
-import UserLoginScreen from "@screens/UserLoginScreen";
-import { BottomTabs } from "./BottomTabs";
-import type { UnloggedUserStackParamList } from "./Types";
-
-const Stack = createNativeStackNavigator<UnloggedUserStackParamList>();
-
-const UnloggedUserStackNavigation = () => {
-	return (
-		<Stack.Navigator
-			initialRouteName="homeUserNotLoggedIn"
-			screenOptions={{ headerShown: false }}
-		>
-			<Stack.Screen name="homeUserNotLoggedIn" component={HomeUserNotLoggedIn} />
-			<Stack.Screen name="userLoginScreen" component={UserLoginScreen} />
-			<Stack.Screen name="bottomTabs" component={BottomTabs} />
-		</Stack.Navigator>
-	);
-};
-
-export default UnloggedUserStackNavigation;
diff --git a/src/screens/HomeUserNotLoggedIn.tsx b/src/screens/HomeUserNotLoggedIn.tsx
index cb67422..2415fc8 100644
--- a/src/screens/HomeUserNotLoggedIn.tsx
+++ b/src/screens/HomeUserNotLoggedIn.tsx
@@ -10,7 +10,7 @@ const HomeUserNotLoggedIn: UnloggedUserStackScreenComponentProps<"homeUserNotLog
 	const { isAuthenticated } = useUserAuthenticationContext();
 
 	if (isAuthenticated) {
-		navigation.replace("bottomTabs");
+		navigation.replace("appBottomTabsNavigator");
 	}
 
 	return (
--
libgit2 0.27.1