Axios HOC for React/React Native Apps – Code Enhancements

import { DoRequest, REQUEST_TYPE } from "../../helpers/doRequest";

let response = await DoRequest({
  method: REQUEST_TYPE.POST,
  url: '/login'
});

import axios from "axios";
import qs from "qs";
import { useDispatch } from "react-redux";
import { logout } from "../../store/authReducer";

export const REQUEST_TYPE = {
  POST: "post",
  GET: "get",
  PUT: "put",
  DELETE: "delete",
};

export const DoRequest = async (requestData) => {
  const dispatch = useDispatch();
  const token = localStorage.getItem("token"); //Authorization token to use for API's
  const defaultHeader = {
    Authorization: token ? `Token ${token}` : null,
    Accept: "*/*", //NOTE: Default Accept value sometimes gives error 406 on some clients
  };

  const {
    headers = {},
    method = "get", //Default initialization method type
    url = "", //Default URL to hit
    baseURL = process.env.REACT_APP_API_HOST, //Base url ex - in .env file
    params = {}, //Default extra params
    data = {}, //Default data to send
  } = requestData;
  //create request config according to data
  const requestConfig = {
    headers: Object.assign(defaultHeader, headers),
    method,
    url,
    baseURL,
    params,
    paramsSerializer: (params) => {
      return qs.stringify(params, { arrayFormat: "comma" });
    },
    data, //POST request data to send
  };

  try {
    const response = await axios(requestConfig);

    const limit = response.headers["x-collection-range"]; //For pagination
    if (limit) {
      const total = limit?.split("/")[1]; //For pagination purposes
      return { data: response.data, total };
    }

    return { data: response.data }; //Success API response based on API endpoints

  } catch (error) {

    const { response: { status, data } = {} } = error || {}; //Based on ur API endpoints

    if (status === 401) { //Handle API codes as necessary
      dispatch(logout()); // Use hooks to handle Logout or redirection or anything
    } else if (status === 404) {
      window.location.replace("/not-found"); //Redirect to any page via hooks or window object.
    } else {
      alert(`${data.message}`); //Show notifications or alerts from 1 place instead of repetitive code
    }
    return data;
  }
};