refactor: rename Api to API and update imports across the codebase

Author: AbhishekA1509

.eslintignore

@@ -3,7 +3,6 @@ scripts/*.cjs
 
 # Files with ESLint errors/warnings
 src/Common/AddCDButton/AddCDButton.tsx
-src/Common/Api.ts
 src/Common/AppStatus/AppStatus.tsx
 src/Common/AppStatus/utils.ts
 src/Common/BreadCrumb/BreadCrumb.tsx

src/Common/API/CoreAPI.ts

@@ -0,0 +1,189 @@
+import { API_STATUS_CODES, APIOptions, FALLBACK_REQUEST_TIMEOUT, Host, ResponseType, ServerErrors } from '..'
+import { CoreAPIConstructorParamsType, FetchAPIParamsType, FetchInTimeParamsType } from './types'
+import { handleServerError } from './utils'
+
+class CoreAPI {
+    handleLogout: () => void
+
+    host: string
+
+    timeout: number
+
+    constructor({ handleLogout, host, timeout }: CoreAPIConstructorParamsType) {
+        this.handleLogout = handleLogout
+        this.host = host || Host
+        this.timeout = timeout || FALLBACK_REQUEST_TIMEOUT
+    }
+
+    private fetchAPI = async <K = object>({
+        url,
+        type,
+        data,
+        signal,
+        preventAutoLogout = false,
+        isMultipartRequest,
+    }: FetchAPIParamsType<K>): Promise<ResponseType> => {
+        const options: RequestInit = {
+            method: type,
+            signal,
+            body: data ? JSON.stringify(data) : undefined,
+        }
+        // eslint-disable-next-line dot-notation
+        options['credentials'] = 'include' as RequestCredentials
+        return fetch(
+            `${this.host}/${url}`,
+            !isMultipartRequest
+                ? options
+                : ({
+                      method: type,
+                      body: data,
+                  } as RequestInit),
+        ).then(
+            // eslint-disable-next-line consistent-return
+            async (response) => {
+                const contentType = response.headers.get('Content-Type')
+                if (response.status === API_STATUS_CODES.UNAUTHORIZED) {
+                    if (preventAutoLogout) {
+                        throw new ServerErrors({
+                            code: API_STATUS_CODES.UNAUTHORIZED,
+                            errors: [
+                                {
+                                    code: API_STATUS_CODES.UNAUTHORIZED,
+                                    internalMessage: 'Please login again',
+                                    userMessage: 'Please login again',
+                                },
+                            ],
+                        })
+                    } else {
+                        this.handleLogout()
+                        // Using this way to ensure that the user is redirected to the login page
+                        // and the component has enough time to get unmounted otherwise the component re-renders
+                        // and try to access some property of a variable and log exception to sentry
+                        // FIXME: Fix this later after analyzing impact
+                        // eslint-disable-next-line no-return-await
+                        return await new Promise((resolve) => {
+                            setTimeout(() => {
+                                resolve({ code: API_STATUS_CODES.UNAUTHORIZED, status: 'Unauthorized', result: [] })
+                            }, 1000)
+                        })
+                    }
+                } else if (response.status >= 300 && response.status <= 599) {
+                    // FIXME: Fix this later after analyzing impact
+                    // eslint-disable-next-line no-return-await
+                    return await handleServerError(contentType, response)
+                } else {
+                    if (contentType === 'application/json') {
+                        return response.json().then((responseBody) => {
+                            if (responseBody.code >= 300 && responseBody.code <= 599) {
+                                // Test Code in Response Body, despite successful HTTP Response Code
+                                throw new ServerErrors({ code: responseBody.code, errors: responseBody.errors })
+                            } else {
+                                // Successful Response. Expected Response Type {code, result, status}
+                                return responseBody
+                            }
+                        })
+                    }
+                    if (contentType === 'octet-stream' || contentType === 'application/octet-stream') {
+                        // used in getArtifact() API only
+                        return response
+                    }
+                }
+            },
+            (error) => {
+                // Network call fails. Handle Failed to Fetch
+                const err = {
+                    code: 0,
+                    userMessage: error.message,
+                    internalMessage: error.message,
+                    moreInfo: error.message,
+                }
+                throw new ServerErrors({ code: 0, errors: [err] })
+            },
+        )
+    }
+
+    private fetchInTime = <T = object>({
+        url,
+        type,
+        data,
+        options,
+        isMultipartRequest,
+    }: FetchInTimeParamsType<T>): Promise<ResponseType> => {
+        const controller = options?.abortControllerRef?.current ?? new AbortController()
+        const signal = options?.abortControllerRef?.current?.signal || options?.signal || controller.signal
+        const timeoutPromise: Promise<ResponseType> = new Promise((resolve, reject) => {
+            const timeout = options?.timeout || this.timeout
+
+            setTimeout(() => {
+                controller.abort()
+                if (options?.abortControllerRef?.current) {
+                    // eslint-disable-next-line no-param-reassign
+                    options.abortControllerRef.current = new AbortController()
+                }
+
+                // Note: This is not catered in case abortControllerRef is passed since
+                // the API is rejected with abort signal from line 202
+                // FIXME: Remove once signal is removed
+                // eslint-disable-next-line prefer-promise-reject-errors
+                reject({
+                    code: API_STATUS_CODES.REQUEST_TIMEOUT,
+                    errors: [
+                        {
+                            code: API_STATUS_CODES.REQUEST_TIMEOUT,
+                            internalMessage: 'Request cancelled',
+                            userMessage: 'Request Cancelled',
+                        },
+                    ],
+                })
+            }, timeout)
+        })
+        return Promise.race([
+            this.fetchAPI({
+                url,
+                type,
+                data,
+                signal,
+                preventAutoLogout: options?.preventAutoLogout || false,
+                isMultipartRequest,
+            }),
+            timeoutPromise,
+        ]).catch((err) => {
+            if (err instanceof ServerErrors) {
+                throw err
+            } else {
+                // FIXME: Can be removed once signal is removed
+                throw new ServerErrors({
+                    code: API_STATUS_CODES.REQUEST_TIMEOUT,
+                    errors: [
+                        {
+                            code: API_STATUS_CODES.REQUEST_TIMEOUT,
+                            internalMessage: 'That took longer than expected.',
+                            userMessage: 'That took longer than expected.',
+                        },
+                    ],
+                })
+            }
+        })
+    }
+
+    post = <T = any, K = object>(
+        url: string,
+        data: K,
+        options?: APIOptions,
+        isMultipartRequest?: boolean,
+    ): Promise<ResponseType<T>> => this.fetchInTime<K>({ url, type: 'POST', data, options, isMultipartRequest })
+
+    put = <T = any, K = object>(url: string, data: K, options?: APIOptions): Promise<ResponseType<T>> =>
+        this.fetchInTime<K>({ url, type: 'PUT', data, options })
+
+    patch = <T = any, K = object>(url: string, data: K, options?: APIOptions): Promise<ResponseType<T>> =>
+        this.fetchInTime<K>({ url, type: 'PATCH', data, options })
+
+    get = <T = any>(url: string, options?: APIOptions): Promise<ResponseType<T>> =>
+        this.fetchInTime({ url, type: 'GET', data: null, options })
+
+    trash = <T = any, K = object>(url: string, data?: K, options?: APIOptions): Promise<ResponseType<T>> =>
+        this.fetchInTime<K>({ url, type: 'DELETE', data, options })
+}
+
+export default CoreAPI

src/Common/API/constants.ts

@@ -0,0 +1,70 @@
+export const RESPONSE_MESSAGES = {
+    100: 'Continue',
+    101: 'Switching Protocols',
+    102: 'Processing(WebDAV)',
+    200: 'OK',
+    201: 'Created',
+    202: 'Accepted',
+    203: 'Non - Authoritative Information',
+    204: 'No Content',
+    205: 'Reset Content',
+    206: 'Partial Content',
+    207: 'Multi - Status(WebDAV)',
+    208: 'Already Reported(WebDAV)',
+    226: 'IM Used',
+    300: 'Multiple Choices',
+    301: 'Moved Permanently',
+    302: 'Found',
+    303: 'See Other',
+    304: 'Not Modified',
+    305: 'Use Proxy',
+    307: 'Temporary Redirect',
+    308: 'Permanent Redirect(experimental)',
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    402: 'Payment Required',
+    403: 'Forbidden',
+    404: 'Not Found',
+    405: 'Method Not Allowed',
+    406: 'Not Acceptable',
+    407: 'Proxy Authentication Required',
+    408: 'Request Timeout',
+    409: 'Conflict',
+    410: 'Gone',
+    411: 'Length Required',
+    412: 'Precondition Failed',
+    413: 'Request Entity Too Large',
+    414: 'Request - URI Too Long',
+    415: 'Unsupported Media Type',
+    416: 'Requested Range Not Satisfiable',
+    417: 'Expectation Failed',
+    418: "I'm a teapot",
+    420: 'Enhance Your Calm(Twitter)',
+    422: 'Unprocessable Entity(WebDAV)',
+    423: 'Locked(WebDAV)',
+    424: 'Failed Dependency(WebDAV)',
+    425: 'Reserved for WebDAV',
+    426: 'Upgrade Required',
+    428: 'Precondition Required',
+    429: 'Too Many Requests',
+    431: 'Request Header Fields Too Large',
+    444: 'No Response(Nginx)',
+    449: 'Retry With(Microsoft)',
+    450: 'Blocked by Windows Parental Controls(Microsoft)',
+    451: 'Unavailable For Legal Reasons',
+    499: 'Client Closed Request(Nginx)',
+    500: 'Internal Server Error',
+    501: 'Not Implemented',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    504: 'Gateway Timeout',
+    505: 'HTTP Version Not Supported',
+    506: 'Variant Also Negotiates(Experimental)',
+    507: 'Insufficient Storage(WebDAV)',
+    508: 'Loop Detected(WebDAV)',
+    509: 'Bandwidth Limit Exceeded(Apache)',
+    510: 'Not Extended',
+    511: 'Network Authentication Required',
+    598: 'Network read timeout error',
+    599: 'Network connect timeout error',
+}

src/Common/API/index.ts

@@ -0,0 +1,11 @@
+import CoreAPI from './CoreAPI'
+import { handleDashboardLogout } from './utils'
+
+const dashboardAPI = new CoreAPI({
+    handleLogout: handleDashboardLogout,
+    timeout: (window as any)?._env_?.GLOBAL_API_TIMEOUT,
+})
+
+export const { post, put, patch, get, trash } = dashboardAPI
+export { getIsRequestAborted, abortPreviousRequests } from './utils'
+export { default as CoreAPI } from './CoreAPI'

src/Common/API/types.ts

@@ -0,0 +1,29 @@
+import { APIOptions } from '..'
+
+export interface CoreAPIConstructorParamsType {
+    handleLogout: () => void
+    /**
+     * @default Host
+     */
+    host?: string
+    /**
+     * @default FALLBACK_REQUEST_TIMEOUT
+     */
+    timeout?: number
+}
+
+export interface FetchInTimeParamsType<Data = object> {
+    url: string
+    type: 'POST' | 'PUT' | 'PATCH' | 'GET' | 'DELETE'
+    data: Data
+    options?: APIOptions
+    isMultipartRequest?: boolean
+}
+
+export interface FetchAPIParamsType<Data = object> extends Omit<FetchInTimeParamsType<Data>, 'options'> {
+    signal: AbortSignal
+    /**
+     * @default false
+     */
+    preventAutoLogout?: boolean
+}

src/Common/API/utils.ts

@@ -0,0 +1,48 @@
+import { ServerErrors } from '@Common/ServerError'
+import { MutableRefObject } from 'react'
+import { URLS } from '@Common/Constants'
+import { RESPONSE_MESSAGES } from './constants'
+
+export const handleServerError = async (contentType: string, response: Response) => {
+    // Test for HTTP Status Code
+    const code = response.status
+    let status: string = response.statusText || RESPONSE_MESSAGES[code]
+    const serverError = new ServerErrors({ code, errors: [] })
+    if (contentType !== 'application/json') {
+        // used for better debugging,
+        status = `${RESPONSE_MESSAGES[code]}. Please try again.`
+    } else {
+        const responseBody = await response.json()
+        if (responseBody.errors) {
+            serverError.errors = responseBody.errors
+        }
+    }
+    serverError.errors =
+        serverError.errors.length > 0 ? serverError.errors : [{ code, internalMessage: status, userMessage: status }]
+    throw serverError
+}
+
+/**
+ * Aborts the previous request before triggering next request
+ */
+export const abortPreviousRequests = <T>(
+    callback: () => Promise<T>,
+    abortControllerRef: MutableRefObject<AbortController>,
+): Promise<T> => {
+    abortControllerRef.current.abort()
+    // eslint-disable-next-line no-param-reassign
+    abortControllerRef.current = new AbortController()
+    return callback()
+}
+
+/**
+ * Returns true if the error is due to a aborted request
+ */
+export const getIsRequestAborted = (error) =>
+    // The 0 code is common for aborted and blocked requests
+    error && error.code === 0 && error.message.search('abort|aborted') > -1
+
+export const handleDashboardLogout = () => {
+    const continueParam = `${window.location.pathname.replace(window.__BASE_URL__, '')}${window.location.search}`
+    window.location.href = `${window.location.origin}${window.__BASE_URL__}${URLS.LOGIN_SSO}?continue=${continueParam}`
+}