fix

Deskripsi:
- Upload foto profil ke storage
- Upload background profile ke storge
## No Issue

src/app_modules/katalog/profile/_component/button/comp_button_update_background_profile.tsx

@@ -0,0 +1,73 @@
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { Box, Button } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { profile_funUpdateBackground } from "../../fun/update/fun_update_background";
+import { DIRECTORY_ID } from "@/app/lib";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+
+export function Profile_ComponentButtonUpdateBackgroundProfile({
+  profileId,
+  file,
+}: {
+  profileId: string;
+  file: File;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  async function onUpdate() {
+    const uploadFile = await funGlobal_UploadToStorage({
+      file: file,
+      dirId: DIRECTORY_ID.profile_background,
+    });
+    if (!uploadFile.success)
+      return ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
+
+    const res = await profile_funUpdateBackground({
+      profileId: profileId,
+      fileId: uploadFile.data.id,
+    });
+    if (res.status === 200) {
+      setLoading(true);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+      router.back();
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  }
+
+  return (
+    <>
+      <Box
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <Button
+          style={{
+            transition: "all 0.3s ease",
+            position: "absolute",
+            bottom: 20,
+            width: 300,
+          }}
+          disabled={file ? false : true}
+          loading={loading ? true : false}
+          loaderPosition="center"
+          radius={"xl"}
+          onClick={() => onUpdate()}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+        >
+          Update
+        </Button>
+      </Box>
+    </>
+  );
+}

src/app_modules/katalog/profile/_component/button/comp_button_update_photo_profile.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { MainColor } from "@/app_modules/_global/color";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
+} from "@/app_modules/_global/notif_global";
+import { Box, Button, Center } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { profile_funUpdatePhoto } from "../../fun";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { DIRECTORY_ID } from "@/app/lib";
+
+export function Profile_ComponentButtonUpdatePhotoProfile({
+  file,
+  profileId,
+}: {
+  file: File;
+  profileId: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+  async function onUpdate() {
+    const uploadPhoto = await funGlobal_UploadToStorage({
+      file: file,
+      dirId: DIRECTORY_ID.profile_foto,
+    });
+    if (!uploadPhoto.success)
+      return ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
+
+    const res = await profile_funUpdatePhoto({
+      fileId: uploadPhoto.data.id,
+      profileId: profileId,
+    });
+    if (res.status === 200) {
+      setLoading(true);
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+      router.back();
+    } else {
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  }
+  return (
+    <>
+      <Box
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <Button
+          style={{
+            transition: "all 0.3s ease",
+            position: "absolute",
+            bottom: 20,
+            width: 300,
+          }}
+          disabled={file ? false : true}
+          loading={isLoading ? true : false}
+          loaderPosition="center"
+          radius={"xl"}
+          onClick={() => {
+            onUpdate();
+          }}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+        >
+          Update
+        </Button>
+      </Box>
+    </>
+  );
+}

src/app_modules/katalog/profile/_component/button/comp_create_new_profile.tsx

@@ -1,69 +1,81 @@
 "use client";
 
+import { DIRECTORY_ID } from "@/app/lib";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import { MainColor, AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
 import {
-  ComponentGlobal_NotifikasiPeringatan,
   ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
+  ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
-import { validRegex } from "@/app_modules/katalog/component/regular_expressions";
 import { Button } from "@mantine/core";
 import _ from "lodash";
-
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import funCreateNewProfile from "../../fun/fun_create_profile";
 import { MODEL_PROFILE } from "../../model/interface";
-import { useRouter } from "next/navigation";
+import { validRegex } from "@/app_modules/katalog/component";
 
 export function Profile_ComponentCreateNewProfile({
   value,
-  userLoginId,
   filePP,
-  fileBg,
+  fileBG,
 }: {
   value: MODEL_PROFILE;
-  userLoginId: string;
-  filePP: FormData;
-  fileBg: FormData;
+  filePP: File;
+  fileBG: File;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
   async function onSubmit() {
-    const body = {
-      userId: userLoginId,
+    const newData = {
       name: value.name,
       email: value.email,
       alamat: value.alamat,
       jenisKelamin: value.jenisKelamin,
     };
-    if (_.values(body).includes(""))
+    if (_.values(newData).includes(""))
       return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
-    if (!body.email.match(validRegex)) return null;
+    if (!newData.email.match(validRegex)) return null;
 
-    const gambarPP = new FormData();
-    gambarPP.append("filePP", filePP as any);
-
-    const gambarBG = new FormData();
-    gambarBG.append("fileBG", fileBg as any);
-
-    if (!gambarPP)
+    if (filePP == null)
       return ComponentGlobal_NotifikasiPeringatan("Lengkapi foto profile");
-    if (!gambarBG)
+    if (fileBG == null)
       return ComponentGlobal_NotifikasiPeringatan(
         "Lengkapi background profile"
       );
 
-    await funCreateNewProfile(body as any, gambarPP, gambarBG).then((res) => {
-      if (res.status === 201) {
-        setLoading(true);
-        ComponentGlobal_NotifikasiBerhasil("Berhasil Membuat Profile", 3000);
-        router.push(RouterHome.main_home, { scroll: false });
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
+    const uploadPhoto = await funGlobal_UploadToStorage({
+      file: filePP,
+      dirId: DIRECTORY_ID.profile_foto,
     });
+    if (!uploadPhoto.success)
+      return ComponentGlobal_NotifikasiPeringatan("Gagal upload foto profile");
+
+    const uploadBackground = await funGlobal_UploadToStorage({
+      file: fileBG,
+      dirId: DIRECTORY_ID.profile_background,
+    });
+    if (!uploadBackground.success)
+      return ComponentGlobal_NotifikasiPeringatan(
+        "Gagal upload background profile"
+      );
+
+    const create = await funCreateNewProfile({
+      data: newData as any,
+      imageId: uploadPhoto.data.id,
+      imageBackgroundId: uploadBackground.data.id,
+    });
+
+    if (create.status === 201) {
+      setLoading(true);
+      ComponentGlobal_NotifikasiBerhasil("Berhasil membuat profile", 3000);
+      router.push(RouterHome.main_home, { scroll: false });
+    } else {
+      ComponentGlobal_NotifikasiGagal(create.message);
+    }
   }
 
   return (

src/app_modules/katalog/profile/_component/comp_load_avatar.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { AccentColor } from "@/app_modules/_global/color";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Avatar, Box, Center, Image, Paper, Skeleton } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { CSSProperties, useState } from "react";
+
+export function Profile_ComponentAvatarProfile({
+  url,
+  style,
+}: {
+  url: string;
+  style?: CSSProperties;
+}) {
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  async function onLoadImage() {
+    try {
+      const res = await fetch(url);
+      if (res.ok) {
+        return setIsImage(true);
+      }
+      setIsImage(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  if (isImage === null) {
+    return (
+      <Skeleton
+        style={{ borderStyle: "solid", borderColor: AccentColor.darkblue }}
+        radius={"50%"}
+        h={100}
+        w={100}
+      />
+    );
+  }
+
+  if (!isImage) {
+    return (
+      <>
+        <Avatar
+          variant="outline"
+          size={100}
+          bg={"gray"}
+          radius={"50%"}
+          style={style}
+        >
+          <Image
+            alt="Avatar"
+            height={100}
+            width={100}
+            src={"/aset/global/avatar.png"}
+          />
+        </Avatar>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Avatar
+        bg={"white"}
+        style={style}
+        radius={"50%"}
+        size={100}
+        sx={{
+          borderStyle: "solid",
+          borderWidth: "0.5px",
+          borderColor: "white",
+        }}
+        src={url}
+      />
+    </>
+  );
+}

src/app_modules/katalog/profile/_component/comp_load_background.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { AspectRatio, Box, Center, Image, Skeleton } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+
+type IRadius = "xs" | "sm" | "md" | "lg" | "xl";
+export function Profile_ComponentLoadBackgroundImage({
+  url,
+  radius,
+}: {
+  url: string;
+  radius?: IRadius;
+}) {
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  async function onLoadImage() {
+    try {
+      const res = await fetch(url);
+      if (res.ok) {
+        return setIsImage(true);
+      }
+      setIsImage(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  if (isImage === null) return <Skeleton h={200} w={"100%"} />;
+
+  if (!isImage)
+    return (
+      <>
+        <Center h={200} bg={"white"} style={{borderRadius: "10px"}} >
+          <Image
+            alt="No Image"
+            maw={150}
+            m={"auto"}
+            p={"xs"}
+            src={"/aset/global/no-image.svg"}
+          />
+        </Center>
+      </>
+    );
+
+  return (
+    <>
+      <Image height={200} radius={radius ? radius : 0} alt="Image" src={url} />
+    </>
+  );
+}

src/app_modules/katalog/profile/_component/index.ts

@@ -1,3 +1,11 @@
+import { Profile_ComponentButtonUpdateBackgroundProfile } from "./button/comp_button_update_background_profile";
+import { Profile_ComponentButtonUpdatePhotoProfile } from "./button/comp_button_update_photo_profile";
 import { Profile_ComponentCreateNewProfile } from "./button/comp_create_new_profile";
+import { Profile_ComponentAvatarProfile } from "./comp_load_avatar";
+import { Profile_ComponentLoadBackgroundImage } from "./comp_load_background";
 
-export {Profile_ComponentCreateNewProfile}
+export { Profile_ComponentCreateNewProfile };
+export { Profile_ComponentAvatarProfile };
+export { Profile_ComponentLoadBackgroundImage };
+export { Profile_ComponentButtonUpdateBackgroundProfile };
+export { Profile_ComponentButtonUpdatePhotoProfile };

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

@@ -1,10 +1,10 @@
 "use client";
 
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import {
+  ComponentGlobal_BoxInformation,
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ErrorInput,
+} from "@/app_modules/_global/component";
 import {
   AspectRatio,
   Avatar,
@@ -21,14 +21,12 @@ import {
 } from "@mantine/core";
 import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
 import { useState } from "react";
-import { validRegex } from "../../component/regular_expressions";
 import { Profile_ComponentCreateNewProfile } from "../_component";
+import { validRegex } from "../../component";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { MainColor } from "@/app_modules/_global/color";
 
-export default function CreateProfile({
-  userLoginId,
-}: {
-  userLoginId: string;
-}) {
+export default function CreateProfile() {
   const [filePP, setFilePP] = useState<File | null>(null);
   const [imgPP, setImgPP] = useState<any | null>();
   const [fileBG, setFileBG] = useState<File | null>(null);
@@ -45,7 +43,7 @@ export default function CreateProfile({
     <>
       <Stack px={"sm"} spacing={40}>
         <Box>
-          <Stack spacing={"xs"}>
+          <Stack spacing={"lg"}>
             <ComponentGlobal_BoxInformation informasi="Upload foto profile anda." />
             <Center>
               {imgPP ? (
@@ -78,6 +76,7 @@ export default function CreateProfile({
                 </Paper>
               )}
             </Center>
+
             <Center>
               <FileButton
                 onChange={async (files: any | null) => {
@@ -118,7 +117,7 @@ export default function CreateProfile({
         </Box>
 
         <Box>
-          <Stack spacing={"xs"}>
+          <Stack spacing={"lg"}>
             <ComponentGlobal_BoxInformation informasi="Upload foto latar belakang profile anda." />
             <ComponentGlobal_BoxUploadImage>
               {imgBG ? (
@@ -257,9 +256,8 @@ export default function CreateProfile({
 
           <Profile_ComponentCreateNewProfile
             value={value as any}
-            userLoginId={userLoginId}
             filePP={filePP as any}
-            fileBg={fileBG as any}
+            fileBG={fileBG as any}
           />
         </Stack>
       </Stack>

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

@@ -7,82 +7,37 @@ import { v4 } from "uuid";
 import fs from "fs";
 import { revalidatePath } from "next/cache";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
+import { Prisma } from "@prisma/client";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 
-export default async function funCreateNewProfile(
-  req: MODEL_PROFILE,
-  gambarPP: FormData,
-  gambarBG: FormData
-) {
-  const body = req;
+export default async function funCreateNewProfile({
+  data,
+  imageId,
+  imageBackgroundId,
+}: {
+  data: Prisma.ProfileCreateInput;
+  imageId: string;
+  imageBackgroundId: string;
+}) {
+  const userLoginId = await funGetUserIdByToken();
 
   const findEmail = await prisma.profile.findUnique({
     where: {
-      email: body.email,
+      email: data.email,
     },
   });
 
   if (findEmail) return { status: 400, message: "Email telah digunakan" };
 
-  const gambarProfile: any = gambarPP.get("filePP");
-
-  if (gambarProfile === "null")
-    return { status: 400, message: "Lengkapi Foto Profile" };
-
-  const fileName = gambarProfile.name;
-  const fileExtension = _.lowerCase(gambarProfile.name.split(".").pop());
-  const fRandomName = v4(fileName) + "." + fileExtension;
-
-  const uploadPP = await prisma.images.create({
-    data: {
-      url: fRandomName,
-      label: "PROFILE_FOTO",
-    },
-    select: {
-      id: true,
-      url: true,
-    },
-  });
-
-  if (!uploadPP) return { status: 400, message: "Gagal upload foto profile" };
-  const uploadPP_Folder = Buffer.from(await gambarProfile.arrayBuffer());
-  fs.writeFileSync(`./public/profile/foto/${uploadPP.url}`, uploadPP_Folder);
-
-  const gambarBackground: any = gambarBG.get("fileBG");
-  if (gambarBackground === "null")
-    return { status: 400, message: "Lengkapi Foto Background" };
-
-  const fileNameBG = gambarBackground.name;
-  const fileExtensionBG = _.lowerCase(gambarBackground.name.split(".").pop());
-  const fRandomNameBG = v4(fileNameBG) + "." + fileExtensionBG;
-
-  const uploadBG = await prisma.imagesBackground.create({
-    data: {
-      url: fRandomNameBG,
-      label: "PROFILE_BACKGROUND",
-    },
-    select: {
-      id: true,
-      url: true,
-    },
-  });
-
-  if (!uploadBG)
-    return { status: 400, message: "Gagal upload background profile" };
-  const uploadBG_Folder = Buffer.from(await gambarBackground.arrayBuffer());
-  fs.writeFileSync(
-    `./public/profile/background/${uploadBG.url}`,
-    uploadBG_Folder
-  );
-
   const createProfile = await prisma.profile.create({
     data: {
-      userId: body.userId,
-      name: body.name,
-      email: body.email,
-      alamat: body.alamat,
-      jenisKelamin: body.jenisKelamin,
-      imagesId: uploadPP.id,
-      imagesBackgroundId: uploadBG.id,
+      userId: userLoginId,
+      name: data.name,
+      email: data.email,
+      alamat: data.alamat,
+      jenisKelamin: data.jenisKelamin,
+      imageId: imageId,
+      imageBackgroundId: imageBackgroundId,
     },
   });
 

src/app_modules/katalog/profile/fun/get/get_one_user_profile.ts

@@ -7,18 +7,8 @@ export async function Profile_getOneProfileAndUserById(profileId: string) {
     where: {
       id: profileId,
     },
-    select: {
-      userId: true,
+    include: {
       User: true,
-      id: true,
-      name: true,
-      email: true,
-      alamat: true,
-      jenisKelamin: true,
-      imagesId: true,
-      imagesBackgroundId: true,
-      ImageProfile: true,
-      ImagesBackground: true,
     },
   });
   // console.log(data)

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

@@ -0,0 +1,3 @@
+import { profile_funUpdatePhoto } from "./update/fun_update_foto_profile";
+
+export { profile_funUpdatePhoto };

src/app_modules/katalog/profile/fun/update/fun_update_background.ts

@@ -1,47 +1,21 @@
 "use server";
 
-import fs from "fs";
 import prisma from "@/app/lib/prisma";
-import _ from "lodash";
-import { v4 } from "uuid";
 import { revalidatePath } from "next/cache";
 
-export async function Profile_funUpdateBackground(
-  profileId: string,
-  file: FormData
-) {
-  const gambarBackground: any = file.get("file");
-  const fileName = gambarBackground.name;
-  const fileExtension = _.lowerCase(gambarBackground.name.split(".").pop());
-  const fRandomName = v4(fileName) + "." + fileExtension;
-
-  const uploadBG = await prisma.imagesBackground.create({
-    data: {
-      url: fRandomName,
-      label: "PROFILE_BACKGROUND",
-    },
-    select: {
-      id: true,
-      url: true,
-    },
-  });
-
-  if (!uploadBG)
-    return { status: 400, message: "Gagal upload gambar background" };
-  const uploadBG_Folder = Buffer.from(await gambarBackground.arrayBuffer());
-  fs.writeFileSync(
-    `./public/profile/background/${uploadBG.url}`,
-    uploadBG_Folder
-  );
-
-  revalidatePath("/dev/katalog");
-
+export async function profile_funUpdateBackground({
+  profileId,
+  fileId,
+}: {
+  profileId: string;
+  fileId: string;
+}) {
   const updateBackground = await prisma.profile.update({
     where: {
       id: profileId,
     },
     data: {
-      imagesBackgroundId: uploadBG.id,
+      imageBackgroundId: fileId,
     },
   });
 
@@ -53,50 +27,4 @@ export async function Profile_funUpdateBackground(
     status: 200,
     message: "Update berhasil",
   };
-
-  // const findProfile = await prisma.profile.findFirst({
-  //   where: {
-  //     id: profileId,
-  //   },
-  // });
-
-  // const findBackground = await prisma.imagesBackground.findFirst({
-  //   where: {
-  //     id: findProfile?.imagesBackgroundId as string,
-  //   },
-  //   select: {
-  //     url: true,
-  //   },
-  // });
-  // if (!findBackground) return { status: 400, message: "Foto tidak ditemukan" };
-  // if (findBackground) fs.unlinkSync(`./public/profile/background/${findBackground.url}`);
-
-  // const gambarBackground: any = file.get("file");
-  // const fileName = gambarBackground.name;
-  // const fileExtension = _.lowerCase(gambarBackground.name.split(".").pop());
-  // const randomName = v4(fileName) + "." + fileExtension;
-
-  // const uploadBG = await prisma.imagesBackground.update({
-  //   where: {
-  //     id: findProfile?.imagesBackgroundId as string,
-  //   },
-  //   data: {
-  //     url: randomName,
-  //     label: "PROFILE_BACKGROUND",
-  //   },
-  //   select: {
-  //     id: true,
-  //     url: true,
-  //   },
-  // });
-
-  // if (!uploadBG) return { status: 400, message: "Gagal upload foto background" };
-  // const uploadBG_Folder = Buffer.from(await gambarBackground.arrayBuffer());
-  // fs.writeFileSync(`./public/profile/background/${uploadBG.url}`, uploadBG_Folder);
-  // revalidatePath("/dev/katalog");
-
-  // return {
-  //   status: 200,
-  //   message: "Update berhasil",
-  // };
 }

src/app_modules/katalog/profile/fun/update/fun_update_foto_profile.ts

@@ -1,38 +1,21 @@
 "use server";
 
-import fs from "fs";
 import prisma from "@/app/lib/prisma";
-import _ from "lodash";
-import { v4 } from "uuid";
 import { revalidatePath } from "next/cache";
 
-export async function Profile_funUpdateFoto(profileId: string, file: FormData) {
-  const gambarProfile: any = file.get("file");
-  const fileName = gambarProfile.name;
-  const fileExtension = _.lowerCase(gambarProfile.name.split(".").pop());
-  const fRandomName = v4(fileName) + "." + fileExtension;
-
-  const uploadPP = await prisma.images.create({
-    data: {
-      url: fRandomName,
-      label: "PROFILE_FOTO",
-    },
-    select: {
-      id: true,
-      url: true,
-    },
-  });
-
-  if (!uploadPP) return { status: 400, message: "Gagal upload foto profile" };
-  const uploadPP_Folder = Buffer.from(await gambarProfile.arrayBuffer());
-  fs.writeFileSync(`./public/profile/foto/${uploadPP.url}`, uploadPP_Folder);
-
+export async function profile_funUpdatePhoto({
+  profileId,
+  fileId,
+}: {
+  profileId: string;
+  fileId: string;
+}) {
   const updateProfile = await prisma.profile.update({
     where: {
       id: profileId,
     },
     data: {
-      imagesId: uploadPP.id,
+      imageId: fileId,
     },
   });
 
@@ -43,52 +26,4 @@ export async function Profile_funUpdateFoto(profileId: string, file: FormData) {
     status: 200,
     message: "Update berhasil",
   };
-
-
-
-  // const findProfile = await prisma.profile.findFirst({
-  //   where: {
-  //     id: profileId,
-  //   },
-  // });
-
-  // const findFoto = await prisma.images.findFirst({
-  //   where: {
-  //     id: findProfile?.imagesId as string,
-  //   },
-  //   select: {
-  //     url: true,
-  //   },
-  // });
-  // if (!findFoto) return { status: 400, message: "Foto tidak ditemukan" };
-  // if (findFoto) fs.unlinkSync(`./public/profile/foto/${findFoto.url}`);
-
-  // const gambarProfile: any = file.get("file");
-  // const fileName = gambarProfile.name;
-  // const fileExtension = _.lowerCase(gambarProfile.name.split(".").pop());
-  // const randomName = v4(fileName) + "." + fileExtension;
-
-  // const uploadPP = await prisma.images.update({
-  //   where: {
-  //     id: findProfile?.imagesId as string,
-  //   },
-  //   data: {
-  //     url: randomName,
-  //     label: "PROFILE_FOTO",
-  //   },
-  //   select: {
-  //     id: true,
-  //     url: true,
-  //   },
-  // });
-
-  // if (!uploadPP) return { status: 400, message: "Gagal upload foto profile" };
-  // const uploadPP_Folder = Buffer.from(await gambarProfile.arrayBuffer());
-  // fs.writeFileSync(`./public/profile/foto/${uploadPP.url}`, uploadPP_Folder);
-  // revalidatePath("/dev/katalog");
-
-  // return {
-  //   status: 200,
-  //   message: "Update berhasil",
-  // };
 }

src/app_modules/katalog/profile/index.ts

@@ -2,12 +2,14 @@ import ProfileLayout from "./create/layout";
 import CreateProfile from "./create/view";
 import EditProfileLayout from "./edit/layout";
 import EditProfileView from "./edit/view";
-import ProfileView from "./main/view_profile";
 import UploadFotoProfile from "./upload/foto_profile";
 import UploadFotoProfileLayout from "./upload/foto_profile/layout";
 
 export {
-  CreateProfile, EditProfileLayout, EditProfileView, ProfileLayout, ProfileView, UploadFotoProfile,
-  UploadFotoProfileLayout
+  CreateProfile,
+  EditProfileLayout,
+  EditProfileView,
+  ProfileLayout,
+  UploadFotoProfile,
+  UploadFotoProfileLayout,
 };
-

src/app_modules/katalog/profile/main/view_profile.tsx

@@ -1,276 +0,0 @@
-"use client";
-
-import { Warna } from "@/app/lib/warna";
-import {
-  ActionIcon,
-  AspectRatio,
-  Avatar,
-  BackgroundImage,
-  Box,
-  Center,
-  Flex,
-  Grid,
-  Group,
-  Image,
-  Paper,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import {
-  IconAddressBook,
-  IconCamera,
-  IconEditCircle,
-  IconGenderFemale,
-  IconGenderMale,
-  IconHome,
-  IconMail,
-} from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { MODEL_PROFILE } from "../model/interface";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
-
-export default function ProfileView({
-  profile,
-  userLoginId,
-}: {
-  profile: MODEL_PROFILE;
-  userLoginId: string;
-}) {
-  const router = useRouter();
-  const [loadingPP, setLoadingPP] = useState(false);
-  const [loadingBG, setLoadingBG] = useState(false);
-  const [loadingEdit, setLoadingEdit] = useState(false);
-
-
-  return (
-    <>
-      {/* <pre>{JSON.stringify(profile, null,2)}</pre> */}
-      <Paper px={"md"} py={"sm"} shadow="lg" style={{
-        backgroundColor: MainColor.darkblue,
-        border: `2px solid ${AccentColor.blue}`,
-      }}>
-        {/* Background dan foto */}
-
-        {/* Upload Background Profile */}
-        <Box>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"sm"} shadow="md">
-              <Image
-                mah={"100%"}
-                maw={"100%"}
-                alt="Background"
-                src={
-                  profile?.ImagesBackground.url
-                    ? RouterProfile.api_url_background +
-                      `${profile?.ImagesBackground.url}`
-                    : "/aset/no-image.png"
-                }
-              />
-            </Paper>
-          </AspectRatio>
-
-          {/* Upload Background Profile */}
-          {profile?.User.id === userLoginId ? (
-            <Center>
-              <ActionIcon
-                loading={loadingBG ? true : false}
-                ml={{ base: 300, sm: 500, md: 900, lg: 1000 }}
-                mt={-10}
-                bg={"gray.5"}
-                variant="transparent"
-                radius={50}
-                onClick={() => {
-                  setLoadingBG(true);
-                  router.push(
-                    RouterProfile.update_foto_background + `${profile.id}`
-                  );
-                }}
-                sx={{
-                  position: "relative",
-                  color: "gray",
-                  border: "1px",
-                  borderStyle: "solid",
-                }}
-              >
-                <IconCamera color="black" size={20} />
-              </ActionIcon>
-            </Center>
-          ) : (
-            ""
-          )}
-
-          {/* Foto Profile */}
-          <Center>
-            <Box
-              sx={{
-                marginBottom: 10,
-                paddingBottom: 10,
-                position: "absolute",
-                zIndex: 0,
-              }}
-            >
-              <Avatar
-                bg={"gray.2"}
-                sx={{
-                  borderStyle: "solid",
-                  borderColor: "gray",
-                  borderWidth: "0.5px",
-                }}
-                src={
-                  profile?.ImageProfile?.url
-                    ? RouterProfile.api_url_foto +
-                      `${profile?.ImageProfile.url}`
-                    : "/aset/global/avatar.png"
-                }
-                size={100}
-                radius={"100%"}
-              />
-            </Box>
-          </Center>
-
-          {/* Upload Foto Profile */}
-          {profile?.User.id === userLoginId ? (
-            <Center>
-              <ActionIcon
-                loading={loadingPP ? true : false}
-                mr={-70}
-                mt={15}
-                variant="transparent"
-                bg={"gray.5"}
-                radius={50}
-                onClick={() => {
-                  setLoadingPP(true);
-                  router.push(
-                    RouterProfile.update_foto_profile + `${profile.id}`
-                  );
-                }}
-                sx={{
-                  position: "relative",
-                  border: "1px",
-                  borderStyle: "solid",
-                }}
-              >
-                <IconCamera color="black" size={20} />
-              </ActionIcon>
-            </Center>
-          ) : (
-            ""
-          )}
-        </Box>
-
-        {/* Username dan Nama */}
-
-        <Grid>
-          <Grid.Col
-            span={"auto"}
-            pt={profile?.User.id === userLoginId ? 10 : 50}
-          >
-            <Stack spacing={0}>
-              <Text fz={"lg"} fw={"bold"} lineClamp={1}>
-                {profile?.name}
-              </Text>
-              <Text fz={"xs"} c={"dark.3"}>
-                @{profile?.User?.username}
-              </Text>
-            </Stack>
-          </Grid.Col>
-          <Grid.Col span={"content"}>
-            {profile?.User.id === userLoginId ? (
-              <ActionIcon
-                loading={loadingEdit ? true : false}
-                variant="transparent"
-                onClick={() => {
-                  setLoadingEdit(true);
-                  router.push(RouterProfile.edit + `${profile.id}`);
-                }}
-              >
-                <IconEditCircle color={Warna.hijau_muda} />
-              </ActionIcon>
-            ) : (
-              ""
-            )}
-          </Grid.Col>
-        </Grid>
-
-        {/* <Group
-          position="apart"
-          pt={profile?.User.id === userLoginId ? 0 : "xl"}
-        >
-          <Flex direction={"column"} mt={"lg"}></Flex>
-        </Group> */}
-
-        {/* Info user: nomor, email dll */}
-        <Stack spacing={"xs"} pt={"lg"}>
-          <Grid>
-            <Grid.Col span={"content"}>
-              <IconAddressBook />
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text>
-                {" "}
-                <Text>+{profile?.User.nomor}</Text>
-              </Text>
-            </Grid.Col>
-          </Grid>
-
-          <Grid>
-            <Grid.Col span={"content"}>
-              <IconMail />
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text>
-                {" "}
-                <Text> {profile?.email}</Text>
-              </Text>
-            </Grid.Col>
-          </Grid>
-
-          <Grid>
-            <Grid.Col span={"content"}>
-              <IconHome />
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text> {profile?.alamat}</Text>
-            </Grid.Col>
-          </Grid>
-
-          {(() => {
-            if (profile?.jenisKelamin === "Laki - laki") {
-              return (
-                <>
-                  <Grid>
-                    <Grid.Col span={"content"}>
-                      <IconGenderMale />
-                    </Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Text> {profile?.jenisKelamin}</Text>
-                    </Grid.Col>
-                  </Grid>
-                </>
-              );
-            } else {
-              return (
-                <>
-                  <Grid>
-                    <Grid.Col span={"content"}>
-                      <IconGenderFemale />
-                    </Grid.Col>
-                    <Grid.Col span={"auto"}>
-                      <Text> {profile?.jenisKelamin}</Text>
-                    </Grid.Col>
-                  </Grid>
-                </>
-              );
-            }
-          })()}
-        </Stack>
-      </Paper>
-
-      {/* <pre>{JSON.stringify(profile, null, 2)}</pre> */}
-    </>
-  );
-}

src/app_modules/katalog/profile/model/interface.ts

@@ -16,4 +16,6 @@ export interface MODEL_PROFILE {
   imagesId: string;
   ImagesBackground: MODEL_IMAGES;
   imagesBackgroundId: string;
+  imageId?: string;
+  imageBackgroundId?: string;
 }

src/app_modules/katalog/profile/upload/foto_background/index.tsx

@@ -1,138 +1,52 @@
 "use client";
 
+import { APIs } from "@/app/lib";
 import {
-  AspectRatio,
-  Button,
-  Center,
-  FileButton,
-  Image,
-  Paper,
-  Stack,
-} from "@mantine/core";
-
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
+} from "@/app_modules/_global/component";
+import { AspectRatio, Center, Image, Stack } from "@mantine/core";
 import { useState } from "react";
-
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { IconCamera } from "@tabler/icons-react";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
-import { Profile_funUpdateBackground } from "../../fun/update/fun_update_background";
+import { Profile_ComponentButtonUpdateBackgroundProfile } from "../../_component";
 import { MODEL_PROFILE } from "../../model/interface";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
 
 export default function Profile_UpdateFotoBackground({
   dataProfile,
 }: {
   dataProfile: MODEL_PROFILE;
 }) {
-  const router = useRouter();
   const [profile, setProfile] = useState(dataProfile);
   const [file, setFile] = useState<File | null>(null);
   const [image, setImage] = useState<any | null>(null);
-  const [loading, setLoading] = useState(false);
 
   return (
     <>
-      <Stack spacing={"xl"}>
-        <Paper
-          p={"sm"}
-          radius={"sm"}
-          style={{
-            backgroundColor: AccentColor.darkblue,
-            border: `2px solid ${AccentColor.blue}`,
-          }}
-        >
-          <Stack>
-            <AspectRatio ratio={16 / 9}>
-              <Image
-                alt="Foto"
-                src={
-                  image
-                    ? image
-                    : RouterProfile.api_background_profile +
-                      profile.imagesBackgroundId
-                }
-              />
-            </AspectRatio>
-            <Center>
-              <FileButton
-                onChange={async (files: any | null) => {
-                  try {
-                    const buffer = URL.createObjectURL(
-                      new Blob([new Uint8Array(await files.arrayBuffer())])
-                    );
-                    if (files.size > 2000000) {
-                      ComponentGlobal_NotifikasiPeringatan(
-                        "Maaf, Ukuran file terlalu besar, maximum 2mb",
-                        3000
-                      );
-                    } else {
-                      setImage(buffer);
-                      setFile(files);
-                    }
-                  } 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>
-        </Paper>
+      <Stack px={"xs"}>
+        <ComponentGlobal_BoxUploadImage>
+          <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
+            <Image
+              style={{ maxHeight: 250 }}
+              alt="Background"
+              src={
+                image
+                  ? image
+                  : APIs.GET({ fileId: profile.imageBackgroundId as any })
+              }
+            />
+          </AspectRatio>
+        </ComponentGlobal_BoxUploadImage>
+        <Center>
+          <ComponentGlobal_ButtonUploadFileImage
+            onSetFile={setFile}
+            onSetImage={setImage}
+          />
+        </Center>
 
-        <Button
-          disabled={file ? false : true}
-          loading={loading ? true : false}
-          loaderPosition="center"
-          radius={"xl"}
-          onClick={() => onUpdate(router, profile.id, file as any, setLoading)}
-          bg={MainColor.yellow}
-          color="yellow"
-          c={"black"}
-         
-        >
-          Update
-        </Button>
+        <Profile_ComponentButtonUpdateBackgroundProfile
+          file={file as any}
+          profileId={profile.id}
+        />
       </Stack>
     </>
   );
 }
-
-async function onUpdate(
-  router: AppRouterInstance,
-  profileId: string,
-  file: FormData,
-  setLoading: any
-) {
-  const gambar = new FormData();
-  gambar.append("file", file as any);
-
-  await Profile_funUpdateBackground(profileId, gambar).then((res) => {
-    if (res.status === 200) {
-      setLoading(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.back();
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}

src/app_modules/katalog/profile/upload/foto_profile/index.tsx

@@ -1,137 +1,47 @@
 "use client";
 
+import { APIs } from "@/app/lib";
 import {
-  AspectRatio,
-  Button,
-  Center,
-  FileButton,
-  Image,
-  Paper,
-  Stack,
-  Title,
-} from "@mantine/core";
+  ComponentGlobal_BoxUploadImage,
+  ComponentGlobal_ButtonUploadFileImage,
+} from "@/app_modules/_global/component";
+import { AspectRatio, Center, Image, Stack } from "@mantine/core";
 import { useState } from "react";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import { Profile_ComponentButtonUpdatePhotoProfile } from "../../_component";
 import { MODEL_PROFILE } from "../../model/interface";
-import { IconCamera } from "@tabler/icons-react";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { useRouter } from "next/navigation";
-import { Profile_funUpdateFoto } from "../../fun/update/fun_update_foto_profile";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
 
 export default function UploadFotoProfile({
   dataProfile,
 }: {
   dataProfile: MODEL_PROFILE;
 }) {
-  const router = useRouter();
   const [profile, setProfile] = useState(dataProfile);
   const [file, setFile] = useState<File | null>(null);
   const [image, setImage] = useState<any | null>(null);
-  const [loading, setLoading] = useState(false);
 
   return (
     <>
-      <Stack spacing={"xl"}>
-        <Paper
-          p={"sm"}
-          radius={"sm"}
-          style={{
-            backgroundColor: AccentColor.darkblue,
-            border: `2px solid ${AccentColor.blue}`,
-          }}
-        >
-          <Stack>
-            <AspectRatio ratio={1 / 1}>
-              <Image
-                alt="Foto"
-                src={
-                  image
-                    ? image
-                    : RouterProfile.api_foto_profile + profile.imagesId
-                }
-              />
-            </AspectRatio>
-            <Center>
-              <FileButton
-                onChange={async (files: any | null) => {
-                  try {
-                    const buffer = URL.createObjectURL(
-                      new Blob([new Uint8Array(await files.arrayBuffer())])
-                    );
-                    if (files.size > 2000000) {
-                      ComponentGlobal_NotifikasiPeringatan(
-                        "Maaf, Ukuran file terlalu besar, maximum 2mb",
-                        3000
-                      );
-                    } else {
-                      setImage(buffer);
-                      setFile(files);
-                    }
-                  } 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>
-        </Paper>
-
-        <Button
-          disabled={file ? false : true}
-          loading={loading ? true : false}
-          loaderPosition="center"
-          radius={"xl"}
-          onClick={() => {
-            onUpdate(router, profile.id, file as any, setLoading);
-          }}
-          bg={MainColor.yellow}
-          color="yellow"
-          c={"black"}
-        >
-          Update
-        </Button>
+      <Stack px={"xs"}>
+        <ComponentGlobal_BoxUploadImage>
+          <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
+            <Image
+              style={{ maxHeight: 250 }}
+              alt="Avatar"
+              src={image ? image : APIs.GET({ fileId: profile.imageId as any })}
+            />
+          </AspectRatio>
+        </ComponentGlobal_BoxUploadImage>
+        <Center>
+          <ComponentGlobal_ButtonUploadFileImage
+            onSetFile={setFile}
+            onSetImage={setImage}
+          />
+        </Center>
+        <Profile_ComponentButtonUpdatePhotoProfile
+          file={file as any}
+          profileId={profile.id}
+        />
       </Stack>
     </>
   );
 }
-
-async function onUpdate(
-  router: AppRouterInstance,
-  profileId: string,
-  file: FormData,
-  setLoading: any
-) {
-  const gambar = new FormData();
-  gambar.append("file", file as any);
-
-  await Profile_funUpdateFoto(profileId, gambar).then((res) => {
-    if (res.status === 200) {
-      setLoading(true);
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.back();
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}