Feature logs

Deskripsi:
- Fitur baru log untuk melihat error pada server upload
- Baru di terapkan di create profile

src/app_modules/katalog/profile/create/view.tsx

@@ -1,42 +1,16 @@
 "use client";
 
-import { DIRECTORY_ID } from "@/app/lib";
-import { MainColor } from "@/app_modules/_global/color";
-import {
-  ComponentGlobal_BoxInformation,
-  ComponentGlobal_BoxUploadImage,
-  ComponentGlobal_ErrorInput,
-} from "@/app_modules/_global/component";
-import {
-  funGlobal_DeleteFileById,
-  funGlobal_UploadToStorage,
-} from "@/app_modules/_global/fun";
-import { MAX_SIZE } from "@/app_modules/_global/lib";
-import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
-import {
-  AspectRatio,
-  Avatar,
-  Box,
-  Button,
-  Center,
-  FileButton,
-  Image,
-  Paper,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-} from "@mantine/core";
-import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
+import { ComponentGlobal_ErrorInput } from "@/app_modules/_global/component";
+import { Select, Stack, TextInput } from "@mantine/core";
+import { IconAt } from "@tabler/icons-react";
 import { useState } from "react";
 import { gmailRegex } from "../../component/regular_expressions";
 import { Profile_ComponentCreateNewProfile } from "../_component";
+import Profile_ViewUploadBackground from "./view_upload_background";
+import Profile_ViewUploadFoto from "./view_upload_foto";
 
 export default function CreateProfile() {
-  const [filePP, setFilePP] = useState<File | null>(null);
   const [imgPP, setImgPP] = useState<any | null>();
-  const [fileBG, setFileBG] = useState<File | null>(null);
   const [imgBG, setImgBG] = useState<any | null>();
   const [fotoProfileId, setFotoProfileId] = useState("");
   const [backgroundProfileId, setBackgroundProfileId] = useState("");
@@ -51,223 +25,19 @@ export default function CreateProfile() {
   return (
     <>
       <Stack px={"sm"} spacing={40}>
-        <Box>
-          <Stack spacing={"lg"}>
-            <ComponentGlobal_BoxInformation informasi="Upload foto profile anda." />
-            <Center>
-              {imgPP ? (
-                <Paper shadow="lg" radius={"100%"}>
-                  <Avatar
-                    color={"cyan"}
-                    sx={{
-                      borderStyle: "solid",
-                      borderColor: "gray",
-                      borderWidth: "0.5px",
-                    }}
-                    src={imgPP ? imgPP : "/aset/global/avatar.png"}
-                    size={150}
-                    radius={"100%"}
-                  />
-                </Paper>
-              ) : (
-                <Paper shadow="lg" radius={"100%"}>
-                  <Avatar
-                    variant="light"
-                    color="blue"
-                    size={150}
-                    radius={"100%"}
-                    sx={{
-                      borderStyle: "solid",
-                      borderColor: MainColor.darkblue,
-                      borderWidth: "0.5px",
-                    }}
-                  />
-                </Paper>
-              )}
-            </Center>
+        <Profile_ViewUploadFoto
+          imgPP={imgPP}
+          onSetImgPP={setImgPP}
+          fotoProfileId={fotoProfileId}
+          onSetFotoProfileId={setFotoProfileId}
+        />
 
-            <Center>
-              <FileButton
-                onChange={async (files: any | null) => {
-                  try {
-                    const buffer = URL.createObjectURL(
-                      new Blob([new Uint8Array(await files.arrayBuffer())])
-                    );
-
-                    if (files.size > MAX_SIZE) {
-                      ComponentGlobal_NotifikasiPeringatan(
-                        PemberitahuanMaksimalFile
-                      );
-                      setImgPP(null);
-                      setFilePP(null);
-
-                      return;
-                    }
-
-                    if (fotoProfileId != "") {
-                      const deleteFotoProfile = await funGlobal_DeleteFileById({
-                        fileId: fotoProfileId,
-                      });
-
-                      if (deleteFotoProfile.success) {
-                        setFotoProfileId("");
-
-                        const uploadPhoto = await funGlobal_UploadToStorage({
-                          file: files,
-                          dirId: DIRECTORY_ID.profile_foto,
-                        });
-
-                        if (uploadPhoto.success) {
-                          setFotoProfileId(uploadPhoto.data.id);
-                          setImgPP(buffer);
-                          setFilePP(files);
-                        } else {
-                          ComponentGlobal_NotifikasiPeringatan(
-                            "Gagal upload foto profile"
-                          );
-                        }
-                      }
-                    } else {
-                      const uploadPhoto = await funGlobal_UploadToStorage({
-                        file: files,
-                        dirId: DIRECTORY_ID.profile_foto,
-                      });
-
-                      if (uploadPhoto.success) {
-                        setFotoProfileId(uploadPhoto.data.id);
-                        setImgPP(buffer);
-                        setFilePP(files);
-                      } else {
-                        ComponentGlobal_NotifikasiPeringatan(
-                          "Gagal upload foto profile"
-                        );
-                      }
-                    }
-                  } catch (error) {
-                    console.log(error);
-                  }
-                }}
-                accept="image/png,image/jpeg"
-              >
-                {(props) => (
-                  <Button
-                    {...props}
-                    radius={"xl"}
-                    leftIcon={<IconCamera />}
-                    bg={MainColor.yellow}
-                    color="yellow"
-                    c={"black"}
-                  >
-                    Upload
-                  </Button>
-                )}
-              </FileButton>
-            </Center>
-          </Stack>
-        </Box>
-
-        <Box>
-          <Stack spacing={"lg"}>
-            <ComponentGlobal_BoxInformation informasi="Upload foto latar belakang profile anda." />
-            <ComponentGlobal_BoxUploadImage>
-              {imgBG ? (
-                <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
-                  <Image
-                    style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
-                    alt="Foto"
-                    height={250}
-                    src={imgBG ? imgBG : "/aset/no-img.png"}
-                  />
-                </AspectRatio>
-              ) : (
-                <Stack justify="center" align="center" h={"100%"}>
-                  <IconUpload color="white" />
-                  <Text fz={"xs"} c={"white"}>
-                    Upload Background
-                  </Text>
-                </Stack>
-              )}
-            </ComponentGlobal_BoxUploadImage>
-
-            <Center>
-              <FileButton
-                onChange={async (files: any | null) => {
-                  try {
-                    const buffer = URL.createObjectURL(
-                      new Blob([new Uint8Array(await files.arrayBuffer())])
-                    );
-
-                    if (files.size > MAX_SIZE) {
-                      ComponentGlobal_NotifikasiPeringatan(
-                        PemberitahuanMaksimalFile
-                      );
-                      setImgBG(null);
-                      setFileBG(null);
-                      return;
-                    }
-
-                    if (backgroundProfileId != "") {
-                      const deleteFotoBg = await funGlobal_DeleteFileById({
-                        fileId: backgroundProfileId,
-                      });
-
-                      if (deleteFotoBg.success) {
-                        setBackgroundProfileId("");
-
-                        const uploadBackground =
-                          await funGlobal_UploadToStorage({
-                            file: files,
-                            dirId: DIRECTORY_ID.profile_background,
-                          });
-
-                        if (uploadBackground.success) {
-                          setBackgroundProfileId(uploadBackground.data.id);
-                          setImgBG(buffer);
-                          setFileBG(files);
-                        } else {
-                          ComponentGlobal_NotifikasiPeringatan(
-                            "Gagal upload background profile"
-                          );
-                        }
-                      }
-                    } else {
-                      const uploadBackground = await funGlobal_UploadToStorage({
-                        file: files,
-                        dirId: DIRECTORY_ID.profile_background,
-                      });
-
-                      if (uploadBackground.success) {
-                        setBackgroundProfileId(uploadBackground.data.id);
-                        setImgBG(buffer);
-                        setFileBG(files);
-                      } else {
-                        ComponentGlobal_NotifikasiPeringatan(
-                          "Gagal upload background profile"
-                        );
-                      }
-                    }
-                  } catch (error) {
-                    console.log(error);
-                  }
-                }}
-                accept="image/png,image/jpeg"
-              >
-                {(props) => (
-                  <Button
-                    {...props}
-                    radius={"xl"}
-                    leftIcon={<IconCamera />}
-                    bg={MainColor.yellow}
-                    color="yellow"
-                    c={"black"}
-                  >
-                    Upload
-                  </Button>
-                )}
-              </FileButton>
-            </Center>
-          </Stack>
-        </Box>
+        <Profile_ViewUploadBackground
+          imgBG={imgBG}
+          backgroundProfileId={backgroundProfileId}
+          onSetImgBG={setImgBG}
+          onSetBackgroundProfileId={setBackgroundProfileId}
+        />
 
         <Stack mb={"lg"}>
           <TextInput

src/app_modules/katalog/profile/create/view_upload_background.tsx

@@ -0,0 +1,170 @@
+import { DIRECTORY_ID } from "@/app/lib";
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_BoxUploadImage,
+} from "@/app_modules/_global/component";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { clientLogger } from "@/util/clientLogger";
+import {
+  AspectRatio,
+  Box,
+  Button,
+  Center,
+  FileButton,
+  Image,
+  Stack,
+  Text,
+  Loader,
+} from "@mantine/core";
+import { IconCamera, IconUpload } from "@tabler/icons-react";
+import { useState } from "react";
+
+export default function Profile_ViewUploadBackground({
+  imgBG,
+  onSetImgBG,
+  backgroundProfileId,
+  onSetBackgroundProfileId,
+}: {
+  imgBG: string;
+  onSetImgBG: (img: string | null) => void;
+  backgroundProfileId: string;
+  onSetBackgroundProfileId: (id: string) => void;
+}) {
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Box>
+        <Stack spacing={"lg"}>
+          <ComponentGlobal_BoxInformation informasi="Upload foto latar belakang profile anda." />
+          <ComponentGlobal_BoxUploadImage>
+            {isLoading ? (
+              <Center h={"100%"}>
+                <Loader variant="oval" size={50} color="cyan" />
+              </Center>
+            ) : imgBG ? (
+              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
+                <Image
+                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
+                  alt="Foto"
+                  height={250}
+                  src={imgBG}
+                />
+              </AspectRatio>
+            ) : (
+              <Stack justify="center" align="center" h={"100%"}>
+                <IconUpload color="white" />
+                <Text fz={"xs"} c={"white"}>
+                  Upload Background
+                </Text>
+              </Stack>
+            )}
+          </ComponentGlobal_BoxUploadImage>
+
+          <Center>
+            <FileButton
+              onChange={async (files: any | null) => {
+                try {
+                  setLoading(true);
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+
+                  if (files.size > MAX_SIZE) {
+                    ComponentGlobal_NotifikasiPeringatan(
+                      PemberitahuanMaksimalFile
+                    );
+                    onSetImgBG(null);
+
+                    return;
+                  }
+
+                  if (backgroundProfileId != "") {
+                    const deleteFotoBg = await funGlobal_DeleteFileById({
+                      fileId: backgroundProfileId,
+                      dirId: DIRECTORY_ID.profile_background,
+                    });
+
+                    if (!deleteFotoBg.success) {
+                      clientLogger.error(
+                        "Client failed delete background:" +
+                          deleteFotoBg.message
+                      );
+                      return;
+                    }
+
+                    if (deleteFotoBg.success) {
+                      onSetBackgroundProfileId("");
+                      onSetImgBG(null);
+
+                      const uploadBackground = await funGlobal_UploadToStorage({
+                        file: files,
+                        dirId: DIRECTORY_ID.profile_background,
+                      });
+
+                      if (!uploadBackground.success) {
+                        clientLogger.error(
+                          "Client failed upload background:" +
+                            uploadBackground.message
+                        );
+                        return;
+                      }
+
+                      if (uploadBackground.success) {
+                        onSetBackgroundProfileId(uploadBackground.data.id);
+                        onSetImgBG(buffer);
+                      } else {
+                        ComponentGlobal_NotifikasiPeringatan(
+                          "Gagal upload background profile"
+                        );
+                      }
+                    }
+                  } else {
+                    const uploadBackground = await funGlobal_UploadToStorage({
+                      file: files,
+                      dirId: DIRECTORY_ID.profile_background,
+                    });
+
+                    if (uploadBackground.success) {
+                      onSetBackgroundProfileId(uploadBackground.data.id);
+                      onSetImgBG(buffer);
+                    } else {
+                      ComponentGlobal_NotifikasiPeringatan(
+                        "Gagal upload background profile"
+                      );
+                    }
+                  }
+                } catch (error) {
+                  clientLogger.error("Client error upload background:", error);
+                } finally {
+                  setLoading(false);
+                }
+              }}
+              accept="image/png,image/jpeg"
+            >
+              {(props) => (
+                <Button
+                  {...props}
+                  radius={"xl"}
+                  leftIcon={<IconCamera />}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
+                >
+                  Upload
+                </Button>
+              )}
+            </FileButton>
+          </Center>
+        </Stack>
+      </Box>
+    </>
+  );
+}

src/app_modules/katalog/profile/create/view_upload_foto.tsx

@@ -0,0 +1,216 @@
+import { DIRECTORY_ID } from "@/app/lib";
+import { MainColor } from "@/app_modules/_global/color";
+import { ComponentGlobal_BoxInformation } from "@/app_modules/_global/component";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { clientLogger } from "@/util/clientLogger";
+import {
+  Avatar,
+  Box,
+  Button,
+  Center,
+  FileButton,
+  Loader,
+  Paper,
+  Stack,
+} from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
+import { useState } from "react";
+
+export default function Profile_ViewUploadFoto({
+  imgPP,
+  onSetImgPP,
+  fotoProfileId,
+  onSetFotoProfileId,
+}: {
+  imgPP: string | null | undefined;
+  onSetImgPP: (img: string | null) => void;
+  fotoProfileId: string;
+  onSetFotoProfileId: (id: string) => void;
+}) {
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Box>
+        <Stack spacing={"lg"}>
+          <ComponentGlobal_BoxInformation informasi="Upload foto profile anda dengan ukuran maksimal file 3 MB." />
+          <Center>
+            {isLoading ? (
+              <Paper shadow="lg" radius={"100%"}>
+                <Avatar
+                  variant="light"
+                  color="blue"
+                  size={150}
+                  radius={"100%"}
+                  sx={{
+                    borderStyle: "solid",
+                    borderColor: MainColor.darkblue,
+                    borderWidth: "0.5px",
+                  }}
+                >
+                  <Center>
+                    <Loader color="cyan" size="xl" />
+                  </Center>
+                </Avatar>
+              </Paper>
+            ) : imgPP != undefined || imgPP != null ? (
+              <Paper shadow="lg" radius={"100%"}>
+                <Avatar
+                  color={"cyan"}
+                  sx={{
+                    borderStyle: "solid",
+                    borderColor: "gray",
+                    borderWidth: "0.5px",
+                  }}
+                  src={imgPP}
+                  size={150}
+                  radius={"100%"}
+                />
+              </Paper>
+            ) : (
+              <Paper shadow="lg" radius={"100%"}>
+                <Avatar
+                  variant="light"
+                  color="blue"
+                  size={150}
+                  radius={"100%"}
+                  sx={{
+                    borderStyle: "solid",
+                    borderColor: MainColor.darkblue,
+                    borderWidth: "0.5px",
+                  }}
+                />
+              </Paper>
+            )}
+          </Center>
+
+          <Center>
+            <FileButton
+              onChange={async (files: any | null) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+
+                  if (files.size > MAX_SIZE) {
+                    ComponentGlobal_NotifikasiPeringatan(
+                      PemberitahuanMaksimalFile
+                    );
+                    onSetImgPP(null);
+
+                    return;
+                  }
+
+                  if (fotoProfileId != "") {
+                    try {
+                      setLoading(true);
+                      const deleteFotoProfile = await funGlobal_DeleteFileById({
+                        fileId: fotoProfileId,
+                        dirId: DIRECTORY_ID.profile_foto,
+                      });
+
+                      if (!deleteFotoProfile.success) {
+                        clientLogger.error(
+                          "Client failed delete photo profile:" +
+                            deleteFotoProfile.message
+                        );
+
+                        return;
+                      }
+
+                      if (deleteFotoProfile.success) {
+                        onSetFotoProfileId("");
+                        onSetImgPP(null);
+
+                        const uploadPhoto = await funGlobal_UploadToStorage({
+                          file: files,
+                          dirId: DIRECTORY_ID.profile_foto,
+                        });
+
+                        if (!uploadPhoto.success) {
+                          clientLogger.error(
+                            "Client failed upload photo profile::" +
+                              uploadPhoto.message
+                          );
+                          return;
+                        }
+
+                        if (uploadPhoto.success) {
+                          clientLogger.info(
+                            "Client success upload foto profile"
+                          );
+                          onSetFotoProfileId(uploadPhoto.data.id);
+                          onSetImgPP(buffer);
+                        } else {
+                          clientLogger.error(
+                            "Client failed upload foto:",
+                            uploadPhoto.message
+                          );
+                          ComponentGlobal_NotifikasiPeringatan(
+                            "Gagal upload foto profile"
+                          );
+                        }
+                      }
+                    } catch (error) {
+                      clientLogger.error("Client error upload foto:", error);
+                    } finally {
+                      setLoading(false);
+                    }
+                  } else {
+                    try {
+                      setLoading(true);
+                      const uploadPhoto = await funGlobal_UploadToStorage({
+                        file: files,
+                        dirId: DIRECTORY_ID.profile_foto,
+                      });
+
+                      if (uploadPhoto.success) {
+                        clientLogger.info("Client success upload foto profile");
+                        onSetFotoProfileId(uploadPhoto.data.id);
+                        onSetImgPP(buffer);
+                      } else {
+                        clientLogger.error(
+                          "Client failed upload foto:",
+                          uploadPhoto.message
+                        );
+                        ComponentGlobal_NotifikasiPeringatan(
+                          "Gagal upload foto profile"
+                        );
+                      }
+                    } catch (error) {
+                      clientLogger.error("Client error upload foto:", error);
+                    } finally {
+                      setLoading(false);
+                    }
+                  }
+                } catch (error) {
+                  clientLogger.error("Client error upload foto:", error);
+                }
+              }}
+              accept="image/png,image/jpeg"
+            >
+              {(props) => (
+                <Button
+                  {...props}
+                  radius={"xl"}
+                  leftIcon={<IconCamera />}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
+                >
+                  Upload
+                </Button>
+              )}
+            </FileButton>
+          </Center>
+        </Stack>
+      </Box>
+    </>
+  );
+}

src/app_modules/katalog/profile/fun/fun_create_profile.ts

@@ -3,6 +3,7 @@
 import prisma from "@/app/lib/prisma";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import backendLogger from "@/util/backendLogger";
 import { Prisma } from "@prisma/client";
 import { revalidatePath } from "next/cache";
 
@@ -19,6 +20,7 @@ export default async function funCreateNewProfile({
     const userLoginId = await funGetUserIdByToken();
 
     if (!userLoginId) {
+      backendLogger.error("User tidak terautentikasi");
       return { status: 400, message: "User tidak terautentikasi" }; // Validasi user login
     }
 
@@ -45,6 +47,7 @@ export default async function funCreateNewProfile({
     });
 
     if (!createProfile) {
+      backendLogger.error("Gagal membuat profile");
       return { status: 400, message: "Gagal membuat profile" };
     }
 
@@ -61,7 +64,7 @@ export default async function funCreateNewProfile({
       message: "Berhasil",
     };
   } catch (error) {
-    console.error("Error creating profile:", error);
+    backendLogger.error("Terjadi kesalahan pada server", error);
     return { status: 500, message: "Terjadi kesalahan pada server" };
   }
 }