fix: donasi

deskrispi:
perubahan use server ke API
src/app/api/donasi/[id]/invoice/route.ts
src/app/dev/(user)/donasi/proses_donasi/metode_pembayaran/[id]/layout.tsx
src/app/dev/(user)/donasi/proses_donasi/metode_pembayaran/[id]/page.tsx
src/app/dev/(user)/donasi/proses_donasi/proses_transaksi/[id]/layout.tsx
src/app/dev/(user)/donasi/proses_donasi/proses_transaksi/[id]/page.tsx
src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx
src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx

No Issue

src/app/api/donasi/[id]/invoice/route.ts

@@ -13,6 +13,7 @@ export async function GET(
       },
       select: {
         id: true,
+        authorId: true,
         nominal: true,
         donasiId: true,
         createdAt: true,

src/app/dev/(user)/donasi/proses_donasi/metode_pembayaran/[id]/layout.tsx

@@ -1,8 +1,14 @@
 import { LayoutDonasi_MetodePembayaran } from "@/app_modules/donasi";
 import React from "react";
 
-export default async function Layout({children}: {children: React.ReactNode}) {
-    return<>
-    <LayoutDonasi_MetodePembayaran>{children}</LayoutDonasi_MetodePembayaran>
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDonasi_MetodePembayaran>{children}</LayoutDonasi_MetodePembayaran>
     </>
-}
+  );
+}

src/app/dev/(user)/donasi/proses_donasi/metode_pembayaran/[id]/page.tsx

@@ -1,19 +1,9 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Donasi_MetodePembayaran } from "@/app_modules/donasi";
-import { Donasi_getMasterBank } from "@/app_modules/donasi/fun/master/get_bank";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let donasiId = params.id;
-  const listBank = await Donasi_getMasterBank();
-  const userLoginId = await funGetUserIdByToken();
 
+export default async function Page() {
   return (
     <>
-      <Donasi_MetodePembayaran
-        listBank={listBank}
-        donasiId={donasiId}
-        authorId={userLoginId as string}
-      />
+      <Donasi_MetodePembayaran />
     </>
   );
 }

src/app/dev/(user)/donasi/proses_donasi/proses_transaksi/[id]/layout.tsx

@@ -1,8 +1,14 @@
 import { LayoutDonasi_ProsesTransaksi } from "@/app_modules/donasi";
 import React from "react";
 
-export default async function Layout({children}:{children: React.ReactNode}) {
-    return<>
-    <LayoutDonasi_ProsesTransaksi>{children}</LayoutDonasi_ProsesTransaksi>
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <LayoutDonasi_ProsesTransaksi>{children}</LayoutDonasi_ProsesTransaksi>
     </>
-}
+  );
+}

src/app/dev/(user)/donasi/proses_donasi/proses_transaksi/[id]/page.tsx

@@ -1,20 +1,9 @@
 import { Donasi_ProsesTransaksi } from "@/app_modules/donasi";
-import { Donasi_getOneInvoiceById } from "@/app_modules/donasi/fun/get/get_one_invoice_by_id";
-import { donasi_getOneStatusInvoiceById } from "@/app_modules/donasi/fun/get/get_one_status_invoice_by_id";
-import donasi_getMasterNomorAdmin from "@/app_modules/donasi/fun/master/get_nomor_admin";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let invoiceId = params.id;
-  const nomorAdmin = await donasi_getMasterNomorAdmin();
-  const statusInvoice = await donasi_getOneStatusInvoiceById({invoiceId: invoiceId})
-  // console.log(statusInvoice)
 
+export default async function Page() {
   return (
     <>
-      <Donasi_ProsesTransaksi
-        statusInvoice={statusInvoice as any}
-        nomorAdmin={nomorAdmin}
-      />
+      <Donasi_ProsesTransaksi />
     </>
   );
 }

src/app_modules/donasi/proses_donasi/metode_pembayaran/index.tsx

@@ -1,48 +1,73 @@
 "use client";
 
-import { IRealtimeData } from "@/lib/global_state";
-import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import { apiNewGetUserIdByToken } from "@/app_modules/_global/lib/api_fetch_global";
+import { apiGetMasterBank } from "@/app_modules/_global/lib/api_fetch_master";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { MODEL_MASTER_BANK } from "@/app_modules/investasi/_lib/interface";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
+import { IRealtimeData } from "@/lib/global_state";
+import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
+import { clientLogger } from "@/util/clientLogger";
 import { Button, Paper, Radio, Stack, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
+import { WibuRealtime } from "wibu-pkg";
 import { Donasi_funCreateInvoice } from "../../fun/create/fun_create_invoice";
 import { gs_donasi_hot_menu, gs_proses_donasi } from "../../global_state";
-import { WibuRealtime } from "wibu-pkg";
-import { clientLogger } from "@/util/clientLogger";
 
-export default function Donasi_MetodePembayaran({
-  listBank,
-  donasiId,
-  authorId,
-}: {
-  listBank: MODEL_MASTER_BANK[];
-  donasiId: string;
-  authorId: string;
-}) {
+export default function Donasi_MetodePembayaran() {
+  const param = useParams<{ id: string }>();
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
   const [prosesDonasi, setProsesDonasi] = useAtom(gs_proses_donasi);
   const [pilihBank, setPilihBank] = useState("");
-  const [bank, setBank] = useState(listBank);
+  const [bank, setBank] = useState<MODEL_MASTER_BANK[] | null>(null);
   const [activeHotMenu, setActiveHotMenu] = useAtom(gs_donasi_hot_menu);
+  const [userLoginId, setUserLoginId] = useState<string | null>(null);
+
+  useShallowEffect(() => {
+    handleListData();
+    handleGetUserId();
+  }, []);
+
+  async function handleListData() {
+    try {
+      const response = await apiGetMasterBank();
+      if (response.success) {
+        setBank(response.data);
+      }
+    } catch (error) {
+      console.error("Error fetching bank data:", error);
+    }
+  }
+
+  async function handleGetUserId() {
+    try {
+      const response = await apiNewGetUserIdByToken();
+      if (response.success) {
+        setUserLoginId(response.userId);
+      }
+    } catch (error) {
+      console.error("Error fetching user ID:", error);
+    }
+  }
 
   async function onProses() {
     try {
       setLoading(true);
       const body = {
-        donasiId: donasiId,
+        donasiId: param.id,
         donasiMaster_BankId: pilihBank,
         nominal: prosesDonasi.nominal,
-        authorId: authorId,
+        authorId: userLoginId,
       };
 
       const res = await Donasi_funCreateInvoice(body);
@@ -84,11 +109,13 @@ export default function Donasi_MetodePembayaran({
     }
   }
 
+  if (!bank || !userLoginId) {
+    return <CustomSkeleton height={400} />;
+  }
+
   return (
     <>
       <Stack>
-        {/* <pre>{JSON.stringify(prosesDonasi, null, 2)}</pre> */}
-
         <Radio.Group
           value={pilihBank}
           onChange={setPilihBank}

src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx

@@ -20,23 +20,51 @@ import { useShallowEffect } from "@mantine/hooks";
 import { IconBrandWhatsapp } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { donasi_getOneStatusInvoiceById } from "../../fun/get/get_one_status_invoice_by_id";
 import { gs_donasi_hot_menu } from "../../global_state";
 import { MODEL_DONASI_INVOICE } from "../../model/interface";
+import { apiGetDonasiInvoiceById } from "../../lib/api_donasi";
+import { apiGetAdminContact } from "@/app_modules/_global/lib/api_fetch_master";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function Donasi_ProsesTransaksi({
-  statusInvoice,
-  nomorAdmin,
-}: {
-  statusInvoice: MODEL_DONASI_INVOICE;
-  nomorAdmin: any;
-}) {
+export default function Donasi_ProsesTransaksi() {
+  const param = useParams<{ id: string }>();
   const router = useRouter();
-  const [data, setData] = useState(statusInvoice);
+  const [dataInvoice, setDataInvoice] = useState<MODEL_DONASI_INVOICE | null>(
+    null
+  );
+  const [dataNomorAdmin, setDataNomorAdmin] = useState<any | null>(null);
   const [hotMenu, setHotMenu] = useAtom(gs_donasi_hot_menu);
 
+  useShallowEffect(() => {
+    onLoadDataInvoice();
+    onLoadDataNomorAdmin();
+  }, []);
+
+  async function onLoadDataInvoice() {
+    try {
+      const response = await apiGetDonasiInvoiceById({ id: param.id });
+      if (response.success) {
+        setDataInvoice(response.data);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async function onLoadDataNomorAdmin() {
+    try {
+      const response = await apiGetAdminContact();
+      if (response.success) {
+        setDataNomorAdmin(response.data);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   interface MODAL_DONASI_INVOICE {
     invoiceId: string;
     statusInvoiceId: string;
@@ -47,33 +75,35 @@ export default function Donasi_ProsesTransaksi({
 
     mqtt_client.on("message", (topic, message) => {
       const dataClient: MODAL_DONASI_INVOICE = JSON.parse(message.toString());
-      if (topic === "donasi_invoice" && dataClient.invoiceId === data.id) {
-        // setData({
-        //   ...data,
-        //   donasiMaster_StatusInvoiceId: dataClient.statusInvoiceId,
-        // });
+      if (topic === "donasi_invoice" && dataClient.invoiceId === param.id) {
         onLoad();
       }
     });
   }, []);
 
   async function onLoad() {
-    const loadData = await donasi_getOneStatusInvoiceById({
-      invoiceId: data.id,
-    });
-    setData(loadData as any);
+   try {
+     const response = await apiGetDonasiInvoiceById({ id: param.id });
+     if (response.success) {
+       setDataInvoice(response.data);
+     }
+   } catch (error) {
+     console.log(error);
+   }
   }
 
-  if (data.DonasiMaster_StatusInvoice.id === "1") {
+  if (dataInvoice?.DonasiMaster_StatusInvoice.id === "1") {
     setHotMenu(2);
-    router.replace(RouterDonasi.detail_donasi_saya + `${data.id}`, {
+    router.replace(RouterDonasi.detail_donasi_saya + `${dataInvoice?.id}`, {
       scroll: false,
     });
   }
 
+  if(!dataInvoice || !dataNomorAdmin) return <CustomSkeleton height={400}/>
+
   return (
     <>
-      {data.DonasiMaster_StatusInvoice.id === "1" ? (
+      {dataInvoice.DonasiMaster_StatusInvoice.id === "1" ? (
         <>
           <Center h={"50vh"}>
             <Loader color="yellow" />
@@ -150,7 +180,7 @@ export default function Donasi_ProsesTransaksi({
                     textDecoration: "none",
                   }}
                   target="_blank"
-                  href={`https://wa.me/+${nomorAdmin.nomor}?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!`}
+                  href={`https://wa.me/+${dataNomorAdmin}?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!`}
                 >
                   <IconBrandWhatsapp size={40} color={MainColor.green} />
                 </Link>