Exploring the useAddCallDetails Custom Hook in React Native

Introduction:

In this blog post, we will explore the useAddCallDetails hook in a React Native application. This hook allows us to conveniently add call details within our application. We'll break down the code and explain its purpose and functionality. The code provided is written in TypeScript and utilizes various libraries and helper functions to manage call details in a mobile application.

src

Code Explanation:

Let's dive into the code and understand how the useAddCallDetails hook works:

// Import statements...

// Interfaces...

const useAddCallDetails = () => {
  // Token validation...

  const addCallDetails = (type, name, mobileNumbers, dateTime, callDurations) => {
    const fetchAPI = (savedLocalStorageData) => {
      // Data manipulation...

      AsyncStorage.getItem(`${localStorageKeyName}jwtTokenGTCRM`).then(
        (token) => {
          // Token management...

          if (tokenResult) {
            // First API request...

            // Data manipulation...

            if (copyLocalStorage.mobile_numbers.length > 0) {
              // Second API request...

              // Data storage...
            }
          } else {
            AsyncStorage.removeItem(`${localStorageKeyName}jwtTokenGTCRM`);
          }
        },
      );
    };

    AsyncStorage.getItem(`${localStorageKeyName}savedLocalStorageData`).then(
      (value) => {
        // Data manipulation...

        if (savedLocalStorageData.mobile_numbers.length > 0) {
          // Data storage and API request...

          fetchAPI(savedLocalStorageData);
        }
      },
    );
  };

  return addCallDetails;
};

export default useAddCallDetails;

In the code above, we have a custom hook called useAddCallDetails. It allows us to add call details in our React Native application. Let's break down the key parts of the code:

src

Import Statements:

The necessary dependencies and constants are imported at the beginning of the code. These include AsyncStorage, which is used for local data storage, and other helper functions and constants.

Interfaces:

Two interfaces, leadTypes and payloadType, are defined to represent the structure of the data used in the code. leadTypes interface defines the structure of individual lead objects, while payloadType interface represents the payload data used in API requests.

useAddCallDetails Hook:

The useAddCallDetails hook is defined as a function. Inside the hook, we initialize the tokenValidation variable by calling the useCheckToken hook. This hook is responsible for validating the access token used for API authentication.

addCallDetails Function:

The addCallDetails function is the main function exposed by the useAddCallDetails hook. It takes several parameters representing the call details: type, name, mobileNumbers, dateTime, and callDurations.

fetchAPI Function:

The fetchAPI function is an inner function defined within addCallDetails. It is responsible for fetching data from the API and performing necessary operations.

AsyncStorage and Token Management:

The code utilizes AsyncStorage to retrieve and store data locally. It retrieves the JWT token from AsyncStorage and validates it using the tokenValidation function. If the token is valid, it is used for authorization in API requests. If the token is invalid or expired, it is refreshed using the refresh token. The updated token is then stored back in AsyncStorage.

API Requests:

The code makes two API requests. The first request fetches counselor leads details from the API. It includes the collegeId as a query parameter and the authorization token in the headers. The response is converted to JSON format, and the data is extracted.

Data Manipulation:

After retrieving the leads data, the code performs some data manipulation operations. It converts the student_mobile_no field of each lead object to a string type. Then, it filters the leads based on the mobile numbers present in the savedLocalStorageData. If a lead's mobile number is not present in savedLocalStorageData, it is removed from the data.

Second API Request:

If there are remaining mobile numbers in savedLocalStorageData after the filtering process, a second API request is made. This request adds the call details to the API. The endpoint used is constructed with the BASE_URL and collegeId, and the authorization token is included in the headers. The savedLocalStorageData is converted to JSON and sent as the request body.

Data Storage and Error Handling:

If the API request is successful, the response is checked for a message field. If a message is present, the data is stored locally using AsyncStorage. Otherwise, if a detail field is present in the response, it is logged to the console. Any errors that occur during the API requests are caught and logged as well.

src

Conclusion:

The useAddCallDetails hook provides a convenient way to add call details in a React Native application. By understanding the code explained in this blog post, developers can enhance their understanding of React Native hooks and API integration in their applications.