Fix: Image donasi

Deksripsi:
- Tampilan image dari server wibu
- Upload image ke server wibu
## No Issue

src/app_modules/donasi/create/create_cerita_penggalang.tsx

@@ -7,8 +7,7 @@ import { ComponentGlobal_BoxUploadImage } from "@/app_modules/_global/component"
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 import {
-  funGlobal_DeleteFileById,
-  funGlobal_UploadToStorage,
+  funGlobal_UploadToStorage
 } from "@/app_modules/_global/fun";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";

src/app_modules/donasi/create/create_donasi.tsx

@@ -55,7 +55,6 @@ export default function CreateDonasi({
   );
 
   async function onCreate() {
-    setLoading(true);
     const body = {
       donasiMaster_KategoriId: data.kategoriId,
       donasiMaster_DurasiId: data.durasiId,
@@ -67,6 +66,8 @@ export default function CreateDonasi({
       return ComponentGlobal_NotifikasiPeringatan("Lengkapin Data");
 
     try {
+      setLoading(true);
+
       const uploadImage = await funGlobal_UploadToStorage({
         file: file as File,
         dirId: DIRECTORY_ID.donasi_image,
@@ -188,9 +189,9 @@ export default function CreateDonasi({
         <Stack>
           <ComponentGlobal_BoxUploadImage>
             {img ? (
-              <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
+              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
                 <Image
-                  style={{ maxHeight: 250, margin: "auto", padding: "5px" }}
+                  style={{ maxHeight: 250 }}
                   alt="Foto"
                   height={250}
                   src={img}

src/app_modules/donasi/create/create_kabar/index.tsx

@@ -1,48 +1,110 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+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_InputCountDown from "@/app_modules/_global/component/input_countdown";
+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 { notifikasiToUser_CreateKabarDonasi } from "@/app_modules/notifikasi/fun/create/create_notif_to_user_kabar_donasi";
 import {
   AspectRatio,
   Button,
-  Center,
   FileButton,
+  Group,
   Image,
-  Paper,
   Stack,
   Text,
   TextInput,
   Textarea,
 } from "@mantine/core";
-import { IconCamera } from "@tabler/icons-react";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { IconCamera, IconUpload } from "@tabler/icons-react";
+import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Donasi_funCreateKabar } from "../../fun/create/fun_create_kabar";
-import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
-import { NotifGagal } from "../../component/notifikasi/notif_gagal";
-import _ from "lodash";
-import { NotifPeringatan } from "../../component/notifikasi/notif_peringatan";
-import ComponentDonasi_NotedBox from "../../component/noted_box";
-import { Donasi_funCreateNotif } from "../../fun/create/fun_create_notif";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { notifikasiToUser_CreateKabarDonasi } from "@/app_modules/notifikasi/fun/create/create_notif_to_user_kabar_donasi";
+import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { DIRECTORY_ID } from "@/app/lib";
 
 export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
   const router = useRouter();
   const [file, setFile] = useState<File | null>(null);
-  const [imageKabar, setImageKabar] = useState<any | null>();
+  const [img, setImg] = useState<any | null>();
   const [kabar, setKabar] = useState({
     judul: "",
     deskripsi: "",
   });
+
+  const [isLoading, setLoading] = useState(false);
+
+  async function onSave() {
+    const body = {
+      donasiId: donasiId,
+      title: kabar.judul,
+      deskripsi: kabar.deskripsi,
+    };
+
+    if (_.values(body).includes(""))
+      return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
+
+    try {
+      setLoading(true);
+      if (file !== null) {
+        const uploadImage = await funGlobal_UploadToStorage({
+          file: file as File,
+          dirId: DIRECTORY_ID.donasi_kabar,
+        });
+
+        if (!uploadImage.success) {
+          setLoading(false);
+          return ComponentGlobal_NotifikasiPeringatan(
+            "Gagal upload file gambar"
+          );
+        }
+
+        const res = await Donasi_funCreateKabar({
+          data: body as any,
+          fileId: uploadImage.data.id,
+        });
+
+        if (res.status === 200) {
+          await notifikasiToUser_CreateKabarDonasi({
+            donasiId: donasiId,
+            kabarId: res.kabarId as any,
+          });
+
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+          setLoading(false);
+        } else {
+          ComponentGlobal_NotifikasiGagal(res.message);
+          setLoading(false);
+        }
+      } else {
+        const res = await Donasi_funCreateKabar({
+          data: body as any,
+        });
+
+        if (res.status === 200) {
+          await notifikasiToUser_CreateKabarDonasi({
+            donasiId: donasiId,
+            kabarId: res.kabarId as any,
+          });
+
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.back();
+          setLoading(false);
+        } else {
+          ComponentGlobal_NotifikasiGagal(res.message);
+          setLoading(false);
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   return (
     <>
       <Stack px={"lg"} pb={"lg"}>
@@ -76,6 +138,8 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
           withAsterisk
           placeholder="Masukan deskripsi kabar"
           autosize
+          maxRows={4}
+          minRows={2}
           onChange={(val) => {
             setKabar({
               ...kabar,
@@ -88,41 +152,36 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
           maxInput={500}
         />
 
-        <Stack>
-          {imageKabar ? (
-            <AspectRatio ratio={1 / 1} mah={300}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.blue}`,
-                  backgroundColor: AccentColor.darkblue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
+        <Stack spacing={5}>
+          <ComponentGlobal_BoxUploadImage>
+            {img ? (
+              <AspectRatio ratio={1 / 1} mt={5} maw={300} mx={"auto"}>
                 <Image
+                  style={{ maxHeight: 250 }}
                   alt="Foto"
-                  src={imageKabar ? imageKabar : "/aset/no-img.png"}
-                  maw={300}
+                  height={250}
+                  src={img}
                 />
-              </Paper>
-            </AspectRatio>
-          ) : (
-            <Center>
-              <Text fs={"italic"} fz={10} c={"white"}>
-                Upload gambar kabar !
-              </Text>
-            </Center>
-          )}
-          <Center>
+              </AspectRatio>
+            ) : (
+              <Stack justify="center" align="center" h={"100%"}>
+                <IconUpload color="white" />
+                <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
+                  Upload Gambar
+                </Text>
+              </Stack>
+            )}
+          </ComponentGlobal_BoxUploadImage>
+
+          {/* Upload Foto */}
+          <Group position="center">
             <FileButton
-              onChange={async (files: any | null) => {
+              onChange={async (files: any) => {
                 try {
                   const buffer = URL.createObjectURL(
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
-                  // console.log(buffer, "ini buffer");
-                  // console.log(files, " ini file");
-                  setImageKabar(buffer);
+                  setImg(buffer);
                   setFile(files);
                 } catch (error) {
                   console.log(error);
@@ -133,18 +192,19 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
               {(props) => (
                 <Button
                   {...props}
-                  radius={"xl"}
-                  leftIcon={<IconCamera />}
+                  leftIcon={<IconCamera color="black" />}
+                  radius={50}
                   bg={MainColor.yellow}
                   color="yellow"
                   c={"black"}
                 >
-                  Upload
+                  Upload Gambar
                 </Button>
               )}
             </FileButton>
-          </Center>
+          </Group>
         </Stack>
+
         <Button
           style={{
             transition: "0.5s",
@@ -155,7 +215,9 @@ export default function Donasi_CreateKabar({ donasiId }: { donasiId: string }) {
           bg={MainColor.yellow}
           color="yellow"
           c={"black"}
-          onClick={() => onSave(router, donasiId, kabar, file as any)}
+          loading={isLoading}
+          loaderPosition="center"
+          onClick={() => onSave()}
         >
           Simpan
         </Button>
@@ -168,36 +230,3 @@ interface Model_Kabar {
   judul: string;
   deskripsi: string;
 }
-
-async function onSave(
-  router: AppRouterInstance,
-  donasiId: string,
-  kabar: Model_Kabar,
-  file: FormData
-) {
-  const body = {
-    donasiId: donasiId,
-    title: kabar.judul,
-    deskripsi: kabar.deskripsi,
-  };
-
-  if (_.values(body).includes(""))
-    return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
-  // if (!file) return NotifPeringatan("Lengkapi Gambar");
-
-  const gambar = new FormData();
-  gambar.append("file", file as any);
-
-  const res = await Donasi_funCreateKabar(body as any, gambar);
-  if (res.status === 200) {
-    await notifikasiToUser_CreateKabarDonasi({
-      donasiId: donasiId,
-      kabarId: res.kabarId as any,
-    });
-
-    ComponentGlobal_NotifikasiBerhasil(res.message);
-    router.back();
-  } else {
-    ComponentGlobal_NotifikasiGagal(res.message);
-  }
-}

src/app_modules/donasi/create/index.ts

@@ -0,0 +1,3 @@
+import LayoutCreateCeritaDonasi from "./layout_cerita_penggalang";
+
+export { LayoutCreateCeritaDonasi };

src/app_modules/donasi/create/layout.tsx

@@ -12,9 +12,7 @@ export default function LayoutCreateDonasi({
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={
-          <UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" hideButtonLeft />
-        }
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Donasi" />}
       >
         {children}
       </UIGlobal_LayoutTamplate>

src/app_modules/donasi/create/layout_cerita_penggalang.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import React from "react";
+
+export default function LayoutCreateCeritaDonasi({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate title="Tambah Cerita" hideButtonLeft />
+        }
+      >
+        {children}
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}