using logger all around

src/hooks/useOrangeMoney.tsx

@@ -3,11 +3,14 @@ import {
 	getTransactionStatus,
 	getTransactionsData,
 } from "@/utils/requests/orangePayment";
+import { LOG } from "@logger";
 
 import { useMutation } from "@tanstack/react-query";
 import * as WebBrowser from "expo-web-browser";
 import { useState } from "react";
 
+const log = LOG.extend("useOrangeMoney");
+
 const paymentObjectDefault: IorangePaymentStarter = {
 	// biome-ignore lint/style/useNamingConvention: <api expect type_paiement>
 	type_paiement: 1,
@@ -24,7 +27,7 @@ const useOrangeMoney = () => {
 		setIsBrowserOpen(true);
 		const result = await WebBrowser.openBrowserAsync(url);
 		// setResult(result);
-		console.log("result", result);
+		log.debug("Result after browser closed :: ", result);
 		setIsBrowserOpen(false);
 	};
 
@@ -36,13 +39,13 @@ const useOrangeMoney = () => {
 			}),
 		onSuccess: async (data) => {
 			// return data.payment_url
-			console.log("om start success ", data);
+			log.debug("orangeTransactionInitializerMutation request success, opening browser...");
 			await handlePaymentUsingBrowser(data.payment_url);
 			// await transactionsStatusMutation.mutate(data.order_id);
 			// setResult(result);
 		},
 		onError: (err) => {
-			console.log("om start error ", err);
+			log.error("orangeTransactionInitializerMutation |", err);
 		},
 	});
 
@@ -52,17 +55,17 @@ const useOrangeMoney = () => {
 	const transactionsStatusMutation = useMutation({
 		mutationFn: (orderId: string) => getTransactionStatus(orderId),
 		onSuccess: (data) => {
-			console.log("useOrangeMoney Check status :: ", data);
+			log.debug("transactionsStatusMutation request success");
 			return data.status;
 		},
 		onError: (err) => {
-			console.log("useOrangeMoney Error ::", err);
+			log.error("transactionsStatusMutation |", err);
 		},
 		retry: (failureCount, error) => {
+			log.warn("transactionsStatusMutation | retrying", failureCount, error);
 			return failureCount < maxRetry;
 		},
-		retryDelay(failureCount, error) {
-			console.log("failureCount", failureCount, "error", error);
+		retryDelay(_failureCount, _error) {
 			return retryDelay;
 		},
 	});

src/screens/HomePageWithPaymentOptions.tsx

@@ -7,13 +7,17 @@ import PaymentOption from "@components/PaymentOption";
 import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
+import { LOG } from "@logger";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { Dimensions } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
+const log = LOG.extend("HomePageWithPaymentOptions");
+
 const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> =
 	({ navigation }) => {
+		log.debug("HomePageWithPaymentOptions");
 		const { data, isLoading, error } = useQuery({
 			queryKey: ["paymentTypes"],
 			queryFn: getPaymentTypes,
@@ -22,12 +26,15 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
 
 		// getting valid payments supported
 		const paymentTypesWithActiveStatus = useMemo(() => {
-			console.log("Filtering payment types");
+			log.info("Filtering payment types");
 			const paymentTypes = data?.results || [];
 			return paymentTypes.filter((paymentType) => paymentType.etat === true);
 		}, [data]);
 
-		console.log("paymentTypesToRender", paymentTypesWithActiveStatus);
+		log.info(
+			"payment types to render",
+			paymentTypesWithActiveStatus.map((paymentType) => paymentType.code),
+		);
 
 		return (
 			<BackgroundGreenWhiteContentArea>

src/screens/NumberAndOtpForPaymentScreen.tsx

@@ -7,11 +7,15 @@ import PaymentOption from "@components/PaymentOption";
 import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
+import { LOG } from "@logger";
 import { SafeAreaView } from "react-native-safe-area-context";
 
+const log = LOG.extend("NumberAndOtpForPaymentScreen");
+
 const NumberAndOtpForPaymentScreen: PaymentStackScreenComponentProps<
 	"numberAndOtpForPaymentScreen"
 > = ({ navigation }) => {
+	console.debug("NumberAndOtpForPaymentScreen");
 	return (
 		<BackgroundGreenWhiteContentArea>
 			<SafeAreaView>

src/screens/PaymentAmountInputScreen.tsx

@@ -8,14 +8,17 @@ import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import useOrangeMoney from "@hooks/useOrangeMoney";
+import { LOG } from "@logger";
 import { useCallback, useState } from "react";
 import { Keyboard, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+const log = LOG.extend("PaymentAmountInputScreen");
 const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountInputScreen"> = ({
 	route,
 	navigation,
 }) => {
+	log.debug("PaymentAmountInputScreen");
 	const { paymentType } = route.params;
 	const [amountToPay, setAmountToPay] = useState(0);
 
@@ -30,8 +33,11 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 
 	const insets = useSafeAreaInsets();
 
-	console.log("isWaitingForPaymentUrl", isWaitingForOmPaymentUrl);
-	console.log("isBrowserOpen", isBrowserOpen);
+	log.debug({
+		isWaitingForOmPaymentUrl,
+		isCheckingForTransactionStatus,
+		isBrowserOpen,
+	});
 
 	const updateAmountToPay = (amount: string) => {
 		const amountParsed = Number.parseInt(amount);
@@ -46,26 +52,29 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 		switch (paymentType) {
 			case "OM": {
 				Keyboard.dismiss();
-				console.log("OM so we stays on screen !!");
-				console.log("Calling api with amount :: ", amountToPay);
+				log.info("OM so we stays on screen !!");
+				log.info("Calling api with amount :: ", amountToPay);
 
 				await orangeTransactionInitializerMutation.mutateAsync(amountToPay);
-				console.log(
-					"Browser got closed !! ",
-					orangeTransactionInitializerMutation.isSuccess,
+				log.info(
+					`Was the transaction initialization a success ? ${orangeTransactionInitializerMutation.isSuccess}`,
 				);
 				if (orangeTransactionInitializerMutation.isSuccess) {
-					console.log("initilization was a success");
+					log.info("initilization was a success, checking for status");
 					await transactionsStatusMutation.mutateAsync(
 						orangeTransactionInitializerMutation.data.order_id,
 					);
-					console.log("result of transactions", transactionsStatusMutation.data);
+					log.info(
+						"result of transactions",
+						JSON.stringify(transactionsStatusMutation.data, null, 2),
+					);
 				}
 
 				// console.log("Response transaction", response);
 				break;
 			}
 			default:
+				log.info("Navigating to numberAndOtpForPaymentScreen");
 				navigation.navigate("numberAndOtpForPaymentScreen");
 				break;
 		}

src/screens/UserLoginScreen.tsx

@@ -16,9 +16,13 @@ import { useCallback, useState } from "react";
 import { KeyboardAvoidingView, Platform, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import { LOG } from "@logger";
+
+const log = LOG.extend("UserLoginScreen");
 const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen"> = ({
 	navigation,
 }) => {
+	log.debug("UserLoginScreen");
 	const insets = useSafeAreaInsets();
 	const { setAuthenticationData } = useUserAuthenticationContext();
 
@@ -33,14 +37,15 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen">
 			// navigation.popToTop();
 			// navigation.replace("bottomTabs");
 			// navigation.navigate("bottomTabs");
-			console.log("Receive data from authenticateUser, running getUserInformations...");
+			log.info("Receive data from authenticateUser, running getUserInformations...");
 			userInformationsMutation.mutate(data.access);
 			// console.log("user informations", userInformations);
 		},
 		// biome-ignore lint/suspicious/noExplicitAny: <Axios error>
 		onError: (error: AxiosError<any>) => {
+			log.error("authenticationMutation", error);
 			if (error.response) {
-				console.error("error :: ", error.response.data);
+				log.error("error :: ", error.response.data);
 				if (error.response.status === 400) {
 					return setError("Bad request");
 				}
@@ -53,14 +58,13 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen">
 
 	const userInformationsMutation = useMutation({
 		mutationFn: (userAccessToken: string) => getUserInformations(userAccessToken),
-		onSuccess: (data) => {
-			console.log("Data userInformationsMutation", data);
-
+		onSuccess: (_data) => {
+			log.info("getUserInformations request was a success, navigating to homepage");
 			// TODO : Navigate to bottomTabs
 			navigation.navigate("bottomTabs");
 		},
 		onError: (error) => {
-			console.log("Error userInformationsMutation", error);
+			log.error("userInformationsMutation", error);
 		},
 	});
 

src/utils/axios-request.ts

+import { LOG } from '@logger';
 import axios, { AxiosError, AxiosResponse } from 'axios';
 
+
+const log = LOG.extend("AxiosRequest");
+
 const baseUrl = process.env.EXPO_PUBLIC_API_URL;
 
 const client = axios.create({baseURL : baseUrl});
@@ -11,12 +15,14 @@ const axiosRequest = async<T> ({...options}) : Promise<T> => {
     // client.defaults.headers.common['Content-Type'] = 'application/json';
     // console.log("client default", client.defaults);
     // console.log("client datas", client.defaults.data);
-    console.log("options", options);
+    log.debug("RequestOptions :: ", options);
 
 
-    const onSuccess = (response : T) => response;
+    const onSuccess = (response : T) => {
+        return response
+    };
     const onError = (error : AxiosError) => {
-        console.log('request error', error);
+        log.error(error);
         throw error;
     };
 
@@ -24,8 +30,8 @@ const axiosRequest = async<T> ({...options}) : Promise<T> => {
         const response : AxiosResponse<T> = await client({ ...options });
         return onSuccess(response.data);
     } catch (error : any) {
-        console.error("Axios Request Error :: ", error.response.data);
-        console.log("Axios Request Error :: ", error.response.data);
+        log.error("RequestError :: ", error);
+        log.error("RequestError Reponse :: ", error.response);
         return onError(error);
     }
 }

src/utils/requests/authenticateUser.ts

 import { IauthenticationData } from "@/contexts/Types";
+import { LOG } from "@logger";
 import axiosRequest from "../axios-request";
 
+const log = LOG.extend("authenticateUser");
+
 const authenticateUser = async ({ username, password }: { username: string; password: string }) => {
-	return await axiosRequest<IauthenticationData>({
+	log.http({username, password});
+	const response = await axiosRequest<IauthenticationData>({
 		url: "/api/token/",
 		method: "POST",
 		data: {
@@ -10,6 +14,8 @@ const authenticateUser = async ({ username, password }: { username: string; pass
 			password: password,
 		},
 	});
+	log.http(JSON.stringify(response, null, 2));
+	return response
 };
 
 

src/utils/requests/getPaymentTypes.ts

-import { IauthenticationData } from "@/contexts/Types";
+import { LOG } from "@logger";
 import axiosRequest from "../axios-request";
 import { IpaginatedResponse, IpaymentType } from "./Types";
 
+const log = LOG.extend("getPaymentTypes");
 const getPaymentTypes = async () => {
-	return await axiosRequest<IpaginatedResponse<IpaymentType[]>>({
+	log.http("getPaymentTypes");
+	const response =  await axiosRequest<IpaginatedResponse<IpaymentType[]>>({
 		url: "/operateur/",
 		method: "GET",
 
 	});
+	log.http(JSON.stringify(response, null, 2));
+	return response
 };
 
 

src/utils/requests/orangePayment.ts

+import { LOG } from "@logger";
 import axiosRequest from "../axios-request";
 
 export interface IorangePaymentStarter {
@@ -31,26 +32,37 @@ export interface IorangePaymentStatus {
     }
 }
 
+const log = LOG.extend("orangePayment");
 
 export const getTransactionsData = async (payload : IorangePaymentStarter) => {
+    log.http("getTransactionsData", payload);
     // const basictoken = base64.encode("admin:admin");
-	return await axiosRequest<IOrangeResponse>({
+	const response =  await axiosRequest<IOrangeResponse>({
 		url: "/transactions/",
 		method: "POST",
         data: payload
 
 	});
+
+    log.http("getTransactionsData |", JSON.stringify(response, null, 2));
+
+    return response
 };
 
 
 export const getTransactionStatus = async(orderId : string) => {
+    log.http("getTransactionStatus |", {orderId});
     let response =  await axiosRequest<IorangePaymentStatus>({
         url: `/api/TransactionCheckStatus/${orderId}/`,
         method: "GET",
     })
+
+    log.http("getTransactionStatus |", JSON.stringify(response, null, 2));
     if (response.status === "INITIATED"){
+        log.http("Payment is still in progress, throwing error for mutation to catch");
         throw new Error("Payment is still in progress");
     } else {
+        log.http("getTransactionStatus |", JSON.stringify(response, null, 2));
         return response
     }
 }
\ No newline at end of file

src/utils/requests/userInformations.ts

+import { LOG } from "@logger";
+import base64 from 'react-native-base64';
 import axiosRequest from "../axios-request";
 import { IuserInformations } from "./Types";
-import base64 from 'react-native-base64';
 
+const log = LOG.extend("getUserInformations");
 
 const getUserInformations = async (userAccessToken : string) => {
+    log.http("getUserInformations", userAccessToken);
     const basictoken = base64.encode("admin:admin");
-	return await axiosRequest<IuserInformations>({
+    log.http("basictoken", basictoken);
+
+	const response = await axiosRequest<IuserInformations>({
 		url: "/user-info/",
 		method: "GET",
         headers: {
@@ -13,6 +18,8 @@ const getUserInformations = async (userAccessToken : string) => {
         }
 
 	});
+    log.http(JSON.stringify(response, null, 2));
+    return response;
 };