Updates

components/lib/utils/ejson.ts

@@ -0,0 +1,38 @@
+/**
+ * # EJSON parse string
+ */
+function parse(
+    string: string | null | number,
+    reviver?: (this: any, key: string, value: any) => any,
+): { [s: string]: any } | { [s: string]: any }[] | undefined {
+    if (!string) return undefined;
+    if (typeof string == "object") return string;
+    if (typeof string !== "string") return undefined;
+    try {
+        return JSON.parse(string, reviver);
+    } catch (error) {
+        return undefined;
+    }
+}
+
+/**
+ * # EJSON stringify object
+ */
+function stringify(
+    value: any,
+    replacer?: ((this: any, key: string, value: any) => any) | null,
+    space?: string | number,
+): string | undefined {
+    try {
+        return JSON.stringify(value, replacer || undefined, space);
+    } catch (error) {
+        return undefined;
+    }
+}
+
+const TWUIEJSON = {
+    parse,
+    stringify,
+};
+
+export default TWUIEJSON;

components/lib/utils/fetch/fetchApi.ts

@@ -1,4 +1,5 @@
 import _ from "lodash";
+import twuiSerializeQuery from "../serialize-query";
 
 export const FetchAPIMethods = [
     "POST",
@@ -17,6 +18,10 @@ type FetchApiOptions<T extends { [k: string]: any } = { [k: string]: any }> = {
     method: (typeof FetchAPIMethods)[number];
     body?: T | string;
     headers?: FetchHeader;
+    query?: T;
+    csrfValue?: string;
+    csrfKey?: string;
+    fetchOptions?: RequestInit;
 };
 
 type FetchHeader = HeadersInit & {
@@ -35,32 +40,22 @@ export type FetchApiReturn = {
  */
 export default async function fetchApi<
     T extends { [k: string]: any } = { [k: string]: any },
-    R extends any = any
->(
-    url: string,
-    options?: FetchApiOptions<T>,
-    csrf?: boolean,
-    /**
-     * Key to use to grab local Storage csrf value.
-     */
-    localStorageCSRFKey?: string,
-    /**
-     * Key with which to set the request header csrf
-     * value
-     */
-    csrfHeaderKey?: string
-): Promise<R> {
+    R extends any = any,
+>(url: string, options?: FetchApiOptions<T>): Promise<R> {
     let data;
 
-    const csrfKey = "x-dsql-csrf-key";
-    const csrfValue = localStorage.getItem(localStorageCSRFKey || csrfKey);
-
     let finalHeaders = {
         "Content-Type": "application/json",
     } as FetchHeader;
 
-    if (csrf && csrfValue) {
-        finalHeaders[localStorageCSRFKey || csrfKey] = csrfValue;
+    if (options?.csrfKey && options.csrfValue) {
+        finalHeaders[options.csrfKey] = options.csrfValue;
+    }
+
+    let finalURL = url;
+
+    if (options?.query) {
+        finalURL += twuiSerializeQuery(options.query);
     }
 
     if (typeof options === "string") {
@@ -69,7 +64,7 @@ export default async function fetchApi<
 
             switch (options) {
                 case "post":
-                    fetchData = await fetch(url, {
+                    fetchData = await fetch(finalURL, {
                         method: options,
                         headers: finalHeaders,
                     } as RequestInit);
@@ -77,7 +72,7 @@ export default async function fetchApi<
                     break;
 
                 default:
-                    fetchData = await fetch(url);
+                    fetchData = await fetch(finalURL);
                     data = fetchData.json();
                     break;
             }
@@ -98,14 +93,14 @@ export default async function fetchApi<
                 options.headers = _.merge(options.headers, finalHeaders);
 
                 const finalOptions: any = { ...options };
-                fetchData = await fetch(url, finalOptions);
+                fetchData = await fetch(finalURL, finalOptions);
             } else {
                 const finalOptions = {
                     ...options,
                     headers: finalHeaders,
                 } as RequestInit;
 
-                fetchData = await fetch(url, finalOptions);
+                fetchData = await fetch(finalURL, finalOptions);
             }
 
             data = fetchData.json();
@@ -115,7 +110,7 @@ export default async function fetchApi<
         }
     } else {
         try {
-            let fetchData = await fetch(url);
+            let fetchData = await fetch(finalURL);
             data = await fetchData.json();
         } catch (error: any) {
             console.log("FetchAPI error #3:", error.message);

components/lib/utils/numberfy.ts

@@ -25,7 +25,6 @@ export default function twuiNumberfy(num: any, decimals?: number): number {
             return Number(numberfiedNum.toFixed(existingDecimals));
         return Math.round(numberfiedNum);
     } catch (error: any) {
-        console.log(`Numberfy ERROR: ${error.message}`);
         return 0;
     }
 }

components/lib/utils/serialize-query.ts

@@ -0,0 +1,42 @@
+import TWUIEJSON from "./ejson";
+
+/**
+ * # Serialize Query
+ */
+export default function twuiSerializeQuery(query: any): string {
+    let str = "?";
+
+    if (typeof query !== "object") {
+        console.log("Invalid Query type");
+        return str;
+    }
+    if (Array.isArray(query)) {
+        console.log("Query is an Array. This is invalid.");
+        return str;
+    }
+    if (!query) {
+        console.log("No Query provided.");
+        return str;
+    }
+
+    const keys = Object.keys(query);
+
+    const queryArr: string[] = [];
+
+    keys.forEach((key) => {
+        if (!key || !query[key]) return;
+        const value = query[key];
+
+        if (typeof value === "object") {
+            const jsonStr = TWUIEJSON.stringify(value);
+            queryArr.push(`${key}=${encodeURIComponent(String(jsonStr))}`);
+        } else if (typeof value === "string" || typeof value === "number") {
+            queryArr.push(`${key}=${encodeURIComponent(value)}`);
+        } else {
+            queryArr.push(`${key}=${String(value)}`);
+        }
+    });
+
+    str += queryArr.join("&");
+    return str;
+}

components/lib/utils/slugify.ts

@@ -31,7 +31,6 @@ export default function twuiSlugify(
 
         return finalStr.replace(/-$/, "");
     } catch (error: any) {
-        console.log(`Slugify ERROR: ${error.message}`);
         return "";
     }
 }