fix:update api implementation

Signed-off-by: Amitkanswal <[email protected]>

Author: Amitkanswal

__test__/init.test.ts

@@ -3,6 +3,7 @@ import UiLocation from "../src/uiLocation";
 import { version } from "../package.json";
 
 jest.mock("../src/uiLocation");
+jest.mock("axios");
 
 describe("ContentstackAppSDK", () => {
     describe("init", () => {

__test__/uiLocation.test.ts

@@ -13,7 +13,7 @@ import {
     Region,
 } from "../src/types";
 import { RequestOption } from '../src/types/common.types';
-import { ApiRequestParams } from '../src/types/api.type';
+import { ProxyConfig } from '../src/types/api.type';
 
 jest.mock("post-robot");
 jest.mock("wolfy87-eventemitter");
@@ -189,7 +189,7 @@ describe("UI Location", () => {
 
     describe("createSDKAdapter", () => {
         let mockPostRobot: typeof postRobot;
-        let opts: ApiRequestParams;
+        let opts: ProxyConfig;
         let uiLocationInstance: UiLocation;
         let onError: jest.Mock;
         beforeEach(() => {

jest.config.js

@@ -6,6 +6,10 @@ module.exports = {
     testEnvironment: "jsdom",
     transform: {
         "^.+\\.(ts|tsx)$": "ts-jest",
+        "^.+\\.(js|jsx)$": "babel-jest",
+    },
+    moduleNameMapper: {
+      "^axios$": "axios/dist/node/axios.cjs"
     },
     collectCoverageFrom: ["./src/**"],
     coveragePathIgnorePatterns: ["<rootDir>.*types.ts"],

package-lock.json

@@ -58,6 +58,7 @@
         "webpack-dev-server": "^4.7.3"
     },
     "dependencies": {
+        "axios": "^1.7.9",
         "jsonfile": "^6.1.0",
         "loader-utils": "^3.2.1",
         "post-robot": "^8.0.31",

package.json

@@ -1,18 +1,2 @@
-import { HTTPMethods } from './common.types';
-
-export interface ApiRequestParams {
-  url: string;
-  method: HTTPMethods;
-  baseURL?: string;
-  headers?: Record<string, string>;
-  data?: unknown;
-  [key: string]: any;
-}
-
-export interface ApiResponse<T = any> {
-  data: T;
-  status: number;
-  statusText: string;
-  headers: Record<string, string>;
-  request?: any;
-}
+import { AxiosRequestConfig } from 'axios'
+export type ProxyConfig = AxiosRequestConfig

src/types/api.type.ts

@@ -33,8 +33,8 @@ import { GenericObjectType, RequestOption } from "./types/common.types";
 import { User } from "./types/user.types";
 import { formatAppRegion, onData, onError } from "./utils/utils";
 import Window from "./window";
-import { createSDKAdapter, dispatchPostRobotRequest } from './utils/adapter';
-import {ApiRequestParams, ApiResponse } from './types/api.type';
+import { dispatchApiRequest, dispatchPostRobotRequest } from './utils/adapter';
+import {ProxyConfig } from './types/api.type';
 
 const emitter = new EventEmitter();
 
@@ -476,13 +476,13 @@ class UiLocation {
      * Method used to make an API request to the Contentstack's CMA APIs.
      */
 
-    api = (url: string, option?: RequestOption) => dispatchPostRobotRequest(this.postRobot)(url, option );
+    api = (url: string, option?: RequestInit): Promise<Response> => dispatchApiRequest(url, option) as Promise<Response>;
 
     /**
      * Method used to create an adapter for management sdk.
     */
 
-    createAdapter = <T>(config: unknown) => createSDKAdapter(this.postRobot)(config as unknown as ApiRequestParams) as Promise<ApiResponse<T>>;
+    createAdapter = (config: ProxyConfig) => dispatchPostRobotRequest(this.postRobot)(config) as Promise<Response>;
 
     /**
      * Method used to initialize the App SDK.

src/uiLocation.ts

@@ -1,37 +1,54 @@
 import PostRobot from 'post-robot';
-import { onData, onError } from './utils';
-import { ApiRequestParams } from '../types/api.type';
-import { RequestOption, GenericObjectType } from '../types/common.types';
+import axios, { AxiosRequestConfig, AxiosResponse} from 'axios';
 
-export const dispatchPostRobotRequest = (postRobot: typeof PostRobot) => (url:string ,opts?: RequestOption): Promise<GenericObjectType> => {
+import { onData, onError, convertHeaders,convertAxiosHeadersToHeadersInit } from './utils';
+
+/**
+ * Dispatches a request using PostRobot.
+ * @param postRobot - The PostRobot instance.
+ * @returns A function that takes AxiosRequestConfig and returns a promise.
+ */
+export const dispatchPostRobotRequest = (postRobot: typeof PostRobot) => (config: AxiosRequestConfig)=> {
   return postRobot
-    .sendToParent("apiAdapter", {url, option:opts})
+    .sendToParent("apiAdapter",  config )
     .then(onData)
     .catch(onError);
 };
 
-export const createSDKAdapter = (postRobot: typeof PostRobot) => async (config: ApiRequestParams) => {
+/**
+ * Dispatches an API request using axios and PostRobot.
+ * @param url - The URL of the API endpoint.
+ * @param options - Optional request options.
+ * @returns A promise that resolves to a partial Response object.
+ */
+export const dispatchApiRequest = async (url: string, options?: RequestInit):Promise<Partial<Response>> => {
   try {
-    const data = await dispatchPostRobotRequest(postRobot)(config.url, {
-      baseURL: config.baseURL,
-      url: config.url,
-      method: config.method,
-      headers: config.headers,
-      body: config.data as BodyInit,
-    });
-    return {
-      data,
-      status: data?.status || 200,
-      statusText: 'OK',
-      headers: config.headers || {},
+    const config: AxiosRequestConfig = {
+      url,
+      method: options?.method || "GET",
+      ...(options?.headers && { headers: convertHeaders(options.headers) }),
+      ...(options?.body && { data: options?.body })
     };
-  } catch (error) {
-    const typedError = error as GenericObjectType & { status?: number; statusText?: string; headers?: Record<string, string>; body?: any; message?: string };
-    return {
-      data: typedError.body || typedError.message || typedError.data,
-      status: typedError.status || 500,
-      statusText: typedError.statusText || 'Internal Server Error',
-      headers: typedError.headers || {},
+
+    const responseData = await dispatchPostRobotRequest(PostRobot)(config) as AxiosResponse;
+
+    const fetchResponse: Partial<Response> = {
+      ok: responseData.status >= 200 && responseData.status < 300,
+      status: responseData.status,
+      statusText: responseData.statusText,
+      headers: new Headers(convertAxiosHeadersToHeadersInit(responseData.headers || {})),
+      json: async () => responseData.data,
+      text: async () => JSON.stringify(responseData.data),
     };
+
+    return fetchResponse;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.error("API request failed:", error.message);
+      throw new Error(`API request failed: ${error.message}`);
+    } else {
+      console.error("An error occurred:", error);
+      throw new Error("An error occurred");
+    }
   }
-};
+};

src/utils/adapter.ts

@@ -1,4 +1,5 @@
 import { Region } from "../types";
+import { AxiosHeaders } from "axios";
 
 export function onData<Data extends Record<string, any>>(data: { data: Data }) {
     if (typeof data.data === "string") {
@@ -48,3 +49,30 @@ export function getPreferredBodyElement(nodeCollection: HTMLCollection) {
     }
     return rootElement || nodeCollection[0];
 }
+
+
+export const convertHeaders = (headers: HeadersInit): AxiosHeaders => {
+    const axiosHeaders = new AxiosHeaders();
+    if (headers instanceof Headers) {
+      headers.forEach((value, key) => {
+        axiosHeaders.set(key, value);
+      });
+    } else if (Array.isArray(headers)) {
+      headers.forEach(([key, value]) => {
+        axiosHeaders.set(key, value);
+      });
+    } else {
+      Object.entries(headers).forEach(([key, value]) => {
+        axiosHeaders.set(key, value);
+      });
+    }
+    return axiosHeaders;
+  };
+
+  export const convertAxiosHeadersToHeadersInit = (axiosHeaders: any): HeadersInit => {
+    const headers: HeadersInit = {};
+    Object.keys(axiosHeaders).forEach(key => {
+      headers[key] = axiosHeaders[key];
+    });
+    return headers;
+  };