Refactor Code to typescript

client/fetch/index.d.ts

@@ -1,5 +0,0 @@
-export = clientFetch;
-declare function clientFetch(url: string, options?: import("../../package-shared/types").FetchApiOptions, csrf?: boolean): Promise<any>;
-declare namespace clientFetch {
-    export { clientFetch as fetchApi };
-}

client/fetch/index.js

@@ -1,95 +0,0 @@
-// @ts-check
-
-const _ = require("lodash");
-
-/** @type {import("../../package-shared/types").FetchApiFn} */
-async function clientFetch(url, options, csrf) {
-    let data;
-    let finalUrl = url;
-
-    if (typeof options === "string") {
-        try {
-            let fetchData;
-
-            switch (options) {
-                case "post":
-                    fetchData = await fetch(finalUrl, {
-                        method: options,
-                        headers: {
-                            "Content-Type": "application/json",
-                        },
-                    });
-                    data = await fetchData.json();
-                    break;
-
-                default:
-                    fetchData = await fetch(finalUrl);
-                    data = await fetchData.json();
-                    break;
-            }
-        } catch (/** @type {any} */ error) {
-            console.log("FetchAPI error #1:", error.message);
-            data = null;
-        }
-    } else if (typeof options === "object") {
-        try {
-            let fetchData;
-
-            if (options.query) {
-                let pathSuffix = "";
-                pathSuffix += "?";
-                const queryString = Object.keys(options.query)
-                    ?.map((queryKey) => {
-                        if (!options.query?.[queryKey]) return undefined;
-                        if (typeof options.query[queryKey] == "object") {
-                            return `${queryKey}=${JSON.stringify(
-                                options.query[queryKey]
-                            )}`;
-                        }
-                        return `${queryKey}=${options.query[queryKey]}`;
-                    })
-                    .filter((prt) => prt)
-                    .join("&");
-                pathSuffix += queryString;
-                finalUrl += pathSuffix;
-                delete options.query;
-            }
-
-            if (options.body && typeof options.body === "object") {
-                let oldOptionsBody = _.cloneDeep(options.body);
-                options.body = JSON.stringify(oldOptionsBody);
-            }
-
-            if (options.headers) {
-                /** @type {any} */
-                const finalOptions = { ...options };
-
-                fetchData = await fetch(finalUrl, finalOptions);
-            } else {
-                fetchData = await fetch(finalUrl, {
-                    ...options,
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                });
-            }
-            data = await fetchData.json();
-        } catch (/** @type {any} */ error) {
-            console.log("FetchAPI error #2:", error.message);
-            data = null;
-        }
-    } else {
-        try {
-            let fetchData = await fetch(finalUrl);
-            data = await fetchData.json();
-        } catch (/** @type {any} */ error) {
-            console.log("FetchAPI error #3:", error.message);
-            data = null;
-        }
-    }
-
-    return data;
-}
-
-module.exports = clientFetch;
-exports.fetchApi = clientFetch;

client/fetch/index.ts

@@ -0,0 +1,113 @@
+import _ from "lodash";
+
+type FetchApiOptions = {
+    method:
+        | "POST"
+        | "GET"
+        | "DELETE"
+        | "PUT"
+        | "PATCH"
+        | "post"
+        | "get"
+        | "delete"
+        | "put"
+        | "patch";
+    body?: object | string;
+    headers?: FetchHeader;
+};
+
+type FetchHeader = HeadersInit & {
+    [key: string]: string | null;
+};
+
+export type FetchApiReturn = {
+    success: boolean;
+    payload: any;
+    msg?: string;
+    [key: string]: any;
+};
+
+/**
+ * # Fetch API
+ */
+export default async function fetchApi(
+    url: string,
+    options?: FetchApiOptions,
+    csrf?: boolean,
+    /** Key to use to grab local Storage csrf value. */
+    localStorageCSRFKey?: string
+): Promise<any> {
+    let data;
+
+    const csrfValue = localStorage.getItem(localStorageCSRFKey || "csrf");
+
+    let finalHeaders = {
+        "Content-Type": "application/json",
+    } as FetchHeader;
+
+    if (csrf && csrfValue) {
+        finalHeaders[`'${csrfValue.replace(/\"/g, "")}'`] = "true";
+    }
+
+    if (typeof options === "string") {
+        try {
+            let fetchData;
+
+            switch (options) {
+                case "post":
+                    fetchData = await fetch(url, {
+                        method: options,
+                        headers: finalHeaders,
+                    } as RequestInit);
+                    data = fetchData.json();
+                    break;
+
+                default:
+                    fetchData = await fetch(url);
+                    data = fetchData.json();
+                    break;
+            }
+        } catch (error: any) {
+            console.log("FetchAPI error #1:", error.message);
+            data = null;
+        }
+    } else if (typeof options === "object") {
+        try {
+            let fetchData;
+
+            if (options.body && typeof options.body === "object") {
+                let oldOptionsBody = _.cloneDeep(options.body);
+                options.body = JSON.stringify(oldOptionsBody);
+            }
+
+            if (options.headers) {
+                options.headers = _.merge(options.headers, finalHeaders);
+
+                const finalOptions: any = { ...options };
+                fetchData = await fetch(url, finalOptions);
+            } else {
+                const finalOptions = {
+                    ...options,
+                    headers: finalHeaders,
+                } as RequestInit;
+
+                fetchData = await fetch(url, finalOptions);
+            }
+
+            data = fetchData.json();
+        } catch (error: any) {
+            console.log("FetchAPI error #2:", error.message);
+            data = null;
+        }
+    } else {
+        try {
+            let fetchData = await fetch(url);
+            data = await fetchData.json();
+        } catch (error: any) {
+            console.log("FetchAPI error #3:", error.message);
+            data = null;
+        }
+    }
+
+    return data;
+}