My question is the following. How can I use my custom hook when it should be executed reacting to an event?. I show my example.
this is my custom hook.
import React, { useContext, useEffect, useState } from 'react'
import { configApi } from '../configApi'
import { ListServiceName, ResponseAll } from '@models/apiResponseModel'
import AsyncStorage from '@react-native-async-storage/async-storage';
import { TypesInContext, UserContext } from '@src/store/userContext';
import { AxiosResponse } from 'axios';
import { notifyMessage } from '@utils/utils';
const usePostApi = (serviceName: ListServiceName | string, parameters?: any) => {
const [data, setData] = useState<any>();
/*Ir seteando los types a medida que vaya haciendo */
const [isFetching, setIsFetching] = useState<boolean>(true);
const [error, setError] = useState<string>();
const { dispatch } = useContext(UserContext);
const fetchData = async () => {
try {
if(serviceName){
const sessionId = await AsyncStorage.getItem('sessionId');
let requestConfig = {
serviceName,
parameters: JSON.stringify({ sessionId })
};
const response: AxiosResponse<ResponseAll> = await configApi.post(null, (requestConfig));
setData(response.data);
setIsFetching(false);
}
} catch (error) {
if (error == "Error: logout") {
/*El interceptor devuelve LOGOUT cuando tiene acceso denegado */
notifyMessage("Acceso denegado", "Error en credenciales");
dispatch({
type: TypesInContext.delete_user
})
} else {
setError(error)
}
}
}
useEffect(() => {
fetchData();
}, [serviceName]);
return { data, isFetching, error }
}
export default usePostApi
this is my modal and it has a button that has a confirm button to confirm the logout.
import React, { useContext, useState } from 'react'
import { View, Text, Modal, StyleSheet, TouchableOpacity } from 'react-native'
import { postLogout } from '@src/api/configApi';
import { ListServiceName } from '@models/apiResponseModel';
import { TypesInContext, UserContext } from '@src/store/userContext';
import { notifyMessage } from '@utils/utils';
type propsCloseApp = {
visible: boolean;
closeModal: () => void;
}
const CloseApp = ({ visible, closeModal}: propsCloseApp) => {
const {state, dispatch} = useContext(UserContext);
const [sessionId] = useState<string>(state?.userData?.sessionId);
const closeSession = async () =>{
try {
const responseLogout = await postLogout(ListServiceName.LOGOUT,sessionId);
if( responseLogout && responseLogout.status == "OK"){
dispatch({
type: TypesInContext.delete_user
});
}
} catch (error) {
if(error == "Error: logout"){
notifyMessage("Acceso denegado", "Error en credenciales");
dispatch({
type: TypesInContext.delete_user
})
}else{
notifyMessage("Error", "Vuelva a intentar");
}
}
}
Now I am doing it with a function that executes the query and I solve it with async/await. But I would like to be able to use my hook, how can I do it?
I tried create a state for set ListServiceName
and hook has listen that change but not work.
something like this.
const [serviceName, setServiceName] = useState<string>(null)
const {data} = usePostApi("")
and when press confirm button
const closeSession = async () =>{
try {
setServiceName(ListServiceName.LOGOUT);
if( data && data.status == "OK"){
dispatch({
type: TypesInContext.delete_user
});
}
} catch (error) {
if(error == "Error: logout"){
notifyMessage("Acceso denegado", "Error en credenciales");
dispatch({
type: TypesInContext.delete_user
})
}else{
notifyMessage("Error", "Vuelva a intentar");
}
}
}
but data is undefined(call api works). i.e., data is not set before entering the IF statement.
Any ideas?
"expo": "~49.0.13",
"react-native": "0.72.6",