First Commit

components/lib/utils/fetch/fetchApi.ts

@@ -0,0 +1,106 @@
+import { AuthCsrfHeaderName } from "@/server-client-shared/types/admin/auth";
+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 in AuthCsrfHeaderName]?: string | null;
+};
+
+export type FetchApiReturn = {
+    success: boolean;
+    payload: any;
+    msg?: string;
+    [key: string]: any;
+};
+
+export default async function fetchApi(
+    url: string,
+    options?: FetchApiOptions,
+    csrf?: boolean
+): Promise<any> {
+    let data;
+
+    if (typeof options === "string") {
+        try {
+            let fetchData;
+            const csrfValue = localStorage.getItem("csrf");
+
+            switch (options) {
+                case "post":
+                    fetchData = await fetch(url, {
+                        method: options,
+                        headers: {
+                            "Content-Type": "application/json",
+                            "x-csrf-auth": csrf ? csrfValue : "",
+                        } as FetchHeader,
+                    } 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;
+
+            const csrfValue = localStorage.getItem("csrf");
+
+            if (options.body && typeof options.body === "object") {
+                let oldOptionsBody = _.cloneDeep(options.body);
+                options.body = JSON.stringify(oldOptionsBody);
+            }
+
+            if (options.headers) {
+                options.headers["x-csrf-auth"] = csrf ? csrfValue : "";
+
+                const finalOptions: any = { ...options };
+                fetchData = await fetch(url, finalOptions);
+            } else {
+                fetchData = await fetch(url, {
+                    ...options,
+                    headers: {
+                        "Content-Type": "application/json",
+                        "x-csrf-auth": csrf ? csrfValue : "",
+                    } as FetchHeader,
+                } as RequestInit);
+            }
+
+            data = fetchData.json();
+        } catch (error: any) {
+            console.log("FetchAPI error #2:", error.message);
+            data = null;
+        }
+    } else {
+        try {
+            let fetchData = await fetch(url);
+            data = fetchData.json();
+        } catch (error: any) {
+            console.log("FetchAPI error #3:", error.message);
+            data = null;
+        }
+    }
+
+    return data;
+}

components/lib/utils/form/imageInputToBase64.ts

@@ -0,0 +1,93 @@
+export type ImageInputToBase64FunctionReturn = {
+    imageBase64?: string;
+    imageBase64Full?: string;
+    imageName?: string;
+};
+
+export type ImageInputToBase64FunctioParam = {
+    imageInput: HTMLInputElement;
+    maxWidth?: number;
+    mimeType?: string;
+};
+
+export default async function imageInputToBase64({
+    imageInput,
+    maxWidth,
+    mimeType,
+}: ImageInputToBase64FunctioParam): Promise<ImageInputToBase64FunctionReturn> {
+    try {
+        if (!imageInput.files?.[0]) {
+            throw new Error("No Files found in this image input");
+        }
+        let imagePreviewNode = document.querySelector(
+            `[data-imagepreview='image']`
+        );
+        let imageName = imageInput.files[0].name.replace(/\..*/, "");
+
+        let imageDataBase64: string | undefined;
+
+        const MIME_TYPE = mimeType ? mimeType : "image/jpeg";
+        const QUALITY = 0.95;
+        const MAX_WIDTH = maxWidth ? maxWidth : null;
+
+        const file = imageInput.files[0];
+        const blobURL = URL.createObjectURL(file);
+        const img = new Image();
+
+        img.src = blobURL;
+
+        imageDataBase64 = await new Promise((res, rej) => {
+            img.onerror = function () {
+                URL.revokeObjectURL(this.src);
+                window.alert("Cannot load image!");
+            };
+
+            img.onload = function () {
+                URL.revokeObjectURL(img.src);
+
+                const canvas = document.createElement("canvas");
+
+                if (MAX_WIDTH) {
+                    const scaleSize = MAX_WIDTH / img.naturalWidth;
+
+                    canvas.width =
+                        img.naturalWidth < MAX_WIDTH
+                            ? img.naturalWidth
+                            : MAX_WIDTH;
+                    canvas.height =
+                        img.naturalWidth < MAX_WIDTH
+                            ? img.naturalHeight
+                            : img.naturalHeight * scaleSize;
+                } else {
+                    canvas.width = img.naturalWidth;
+                    canvas.height = img.naturalHeight;
+                }
+
+                const ctx = canvas.getContext("2d");
+                ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+                const srcEncoded = canvas.toDataURL(MIME_TYPE, QUALITY);
+
+                res(srcEncoded);
+            };
+        });
+
+        return {
+            imageBase64: imageDataBase64?.replace(/.*?base64,/, ""),
+            imageBase64Full: imageDataBase64,
+            imageName: imageName,
+        };
+    } catch (error: any) {
+        console.log("Image Processing Error! =>", error.message);
+
+        return {
+            imageBase64: undefined,
+            imageBase64Full: undefined,
+            imageName: undefined,
+        };
+    }
+}
+
+/** ********************************************** */
+/** ********************************************** */
+/** ********************************************** */