diff --git a/src/contexts/UserAuthenticationContext.tsx b/src/contexts/UserAuthenticationContext.tsx index 2533bd4..3d474e8 100644 --- a/src/contexts/UserAuthenticationContext.tsx +++ b/src/contexts/UserAuthenticationContext.tsx @@ -1,15 +1,24 @@ 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 { useMutation } from "@tanstack/react-query"; +import type { AxiosError } from "axios"; import { createContext, useCallback, useContext, useState } from "react"; import type { IauthenticationData } from "./Types"; +const log = LOG.extend("UserAuthenticationContext"); + export interface UserAuthenticationContextProps { isAuthenticated: boolean; setIsAuthenticated: React.Dispatch>; setAuthenticationData: React.Dispatch>; userInformations: IuserInformations; setUserInformations: React.Dispatch>; + login: (email: string, password: string) => void; + isAuthenticating: boolean; logout: () => void; } @@ -39,15 +48,21 @@ export const UserAuthenticationContext = createContext {}, + login: () => {}, + isAuthenticating: false, logout: () => {}, }); export const UserAuthenticationContextProvider = ({ children }: { children: React.ReactNode }) => { + // States + const [isAuthenticated, setIsAuthenticated] = useState(false); + const [isAuthenticating, setIsAuthenticating] = useState(false); const [authenticationData, setAuthenticationData] = useState({ access: "", refresh: "", }); + const [error, setError] = useState(""); const [userInformations, setUserInformations] = useState({ username: "JohnDoe", email: "JohnDoe@example.com", @@ -71,8 +86,72 @@ export const UserAuthenticationContextProvider = ({ children }: { children: Reac }); // Hoooks + const navigation = useNavigation>(); + // Mutations + + const authenticationMutation = useMutation({ + mutationFn: authenticateUser, + onMutate: () => { + setIsAuthenticating(true); + setError(""); + }, + onSuccess: (data) => { + setAuthenticationData(data); + // navigation.popToTop(); + // navigation.replace("bottomTabs"); + // navigation.navigate("bottomTabs"); + log.info("Receive data from authenticateUser, running getUserInformations..."); + userInformationsMutation.mutate(data.access); + // console.log("user informations", userInformations); + }, + // biome-ignore lint/suspicious/noExplicitAny: + onError: (error: AxiosError) => { + log.error("authenticationMutation", error); + if (error.response) { + log.error("error :: ", error.response.data); + if (error.response.status === 400) { + return setError("Bad request"); + } + const message: string = error.response.data.detail; + return setError(message); + } + setError("Unknown error"); + }, + }); + + const userInformationsMutation = useMutation({ + mutationFn: (userAccessToken: string) => getUserInformations(userAccessToken), + onMutate: () => { + setIsAuthenticating(true); + setError(""); + }, + onSettled: () => { + setIsAuthenticating(false); + }, + onSuccess: (userInformations) => { + log.info("getUserInformations request was a success, navigating to homepage"); + setUserInformations(userInformations); + navigation.navigate("appBottomTabsNavigator"); + }, + onError: (error) => { + log.error("userInformationsMutation", error); + }, + }); + + // Methods + + const login = useCallback( + (email: string, password: string) => { + authenticationMutation.mutate({ + username: email, + password: password, + }); + }, + [authenticationMutation], + ); + const logout = useCallback(() => { setIsAuthenticated(false); setAuthenticationData({ @@ -110,10 +189,12 @@ export const UserAuthenticationContextProvider = ({ children }: { children: Reac diff --git a/src/screens/UserLoginScreen.tsx b/src/screens/UserLoginScreen.tsx index 4fd9b70..6651c45 100644 --- a/src/screens/UserLoginScreen.tsx +++ b/src/screens/UserLoginScreen.tsx @@ -1,7 +1,5 @@ import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext"; import type { MainStackScreenComponentProps } from "@/navigations/Types"; -import authenticateUser from "@/utils/requests/authenticateUser"; -import getUserInformations from "@/utils/requests/userInformations"; import Button from "@components/Button"; import ContainerBorderTopCurved from "@components/ContainerBorderTopCurved"; import InputWithTopLabel from "@components/InputWithTopLabel"; @@ -10,8 +8,6 @@ import Box from "@components/bases/Box"; import Text from "@components/bases/Text"; import { Fontisto } from "@expo/vector-icons"; import { containers } from "@styles/Commons"; -import { useMutation } from "@tanstack/react-query"; -import type { AxiosError } from "axios"; import { useCallback, useState } from "react"; import { TouchableOpacity, View } from "react-native"; import { useSafeAreaInsets } from "react-native-safe-area-context"; @@ -23,57 +19,17 @@ const log = LOG.extend("UserLoginScreen"); const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ navigation }) => { log.debug("UserLoginScreen"); const insets = useSafeAreaInsets(); - const { setAuthenticationData, setUserInformations } = useUserAuthenticationContext(); + const { setAuthenticationData, setUserInformations, login, isAuthenticating } = + useUserAuthenticationContext(); // TODO : Remove default value for email and password const [email, setEmail] = useState("admin"); const [password, setPassword] = useState("admin"); const [error, setError] = useState(""); - const authenticationMutation = useMutation({ - mutationFn: authenticateUser, - onSuccess: (data) => { - setAuthenticationData(data); - // navigation.popToTop(); - // navigation.replace("bottomTabs"); - // navigation.navigate("bottomTabs"); - log.info("Receive data from authenticateUser, running getUserInformations..."); - userInformationsMutation.mutate(data.access); - // console.log("user informations", userInformations); - }, - // biome-ignore lint/suspicious/noExplicitAny: - onError: (error: AxiosError) => { - log.error("authenticationMutation", error); - if (error.response) { - log.error("error :: ", error.response.data); - if (error.response.status === 400) { - return setError("Bad request"); - } - const message: string = error.response.data.detail; - return setError(message); - } - setError("Unknown error"); - }, - }); - - const userInformationsMutation = useMutation({ - mutationFn: (userAccessToken: string) => getUserInformations(userAccessToken), - onSuccess: (userInformations) => { - log.info("getUserInformations request was a success, navigating to homepage"); - setUserInformations(userInformations); - navigation.navigate("appBottomTabsNavigator"); - }, - onError: (error) => { - log.error("userInformationsMutation", error); - }, - }); - const submit = useCallback(() => { - authenticationMutation.mutate({ - username: email, - password: password, - }); - }, [email, password, authenticationMutation]); + login(email, password); + }, [email, password, login]); return ( @@ -140,7 +96,7 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav // navigation.navigate("bottomTabs"); submit(); }} - isLoading={authenticationMutation.isPending} + isLoading={isAuthenticating} />