use custom hook react native expo

89 views Asked by At

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",
0

There are 0 answers