src/app/dev/(user)/donasi/edit/edit_cerita/[id]/page.tsx

@@ -1,12 +1,9 @@
 import { EditCeritaPenggalangDonasi } from "@/app_modules/donasi";
-import Donasi_getCeritaByDonasiId from "@/app_modules/donasi/fun/get/get_cerita_penggalang";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  const dataCerita = await Donasi_getCeritaByDonasiId(params.id)
 
+export default async function Page() {
   return (
     <>
-      <EditCeritaPenggalangDonasi dataCerita={dataCerita as any} />
+      <EditCeritaPenggalangDonasi />
     </>
   );
 }

src/app/dev/(user)/donasi/edit/edit_rekening/[id]/page.tsx

@@ -1,17 +1,9 @@
 import { Donasi_EditRekening } from "@/app_modules/donasi";
-import { Donasi_getOneById } from "@/app_modules/donasi/fun/get/get_one_donasi_by_id";
 
-export default async function Page({ params }: { params: { id: string } }) {
-  let donasiId = params.id;
-  const data = await Donasi_getOneById(donasiId);
-  const dataDonasi = {
-    id: data?.id,
-    namaBank: data?.namaBank,
-    rekening: data?.rekening,
-  };
+export default async function Page() {
   return (
     <>
-      <Donasi_EditRekening dataDonasi={dataDonasi as any} />
+      <Donasi_EditRekening />
     </>
   );
 }

src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx

@@ -34,25 +34,44 @@ import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/co
 import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
 import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
 import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetDonasiCeritaPenggalang } from "../../lib/api_donasi";
+import { useParams } from "next/navigation";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function EditCeritaPenggalangDonasi({
-  dataCerita,
-}: {
-  dataCerita: MODEL_CERITA_DONASI;
-}) {
+export default function EditCeritaPenggalangDonasi() {
+  const { id } = useParams();
   const router = useRouter();
   const [isLoading, setLoading] = useState(false);
-  const [data, setData] = useState(dataCerita);
+  const [data, setData] = useState<MODEL_CERITA_DONASI | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [updateImage, setUpdateImage] = useState<any | null>();
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetDonasiCeritaPenggalang({
+        id: id as string,
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error("Error get data donasi cerita penggalang", error);
+    }
+  }
+
   async function onUpdate() {
     setLoading(true);
 
     const body = {
-      id: data.id,
-      pembukaan: data.pembukaan,
-      cerita: data.cerita,
+      id: data?.id,
+      pembukaan: data?.pembukaan,
+      cerita: data?.cerita,
     };
 
     if (_.values(body).includes(""))
@@ -72,7 +91,7 @@ export default function EditCeritaPenggalangDonasi({
         }
 
         const deleteImage = await funGlobal_DeleteFileById({
-          fileId: data.imageId,
+          fileId: data?.imageId as string,
         });
         if (!deleteImage.success) {
           setLoading(false);
@@ -109,6 +128,8 @@ export default function EditCeritaPenggalangDonasi({
     }
   }
 
+  if (!data) return <CustomSkeleton height={300} />;
+
   return (
     <>
       <Stack px={"sm"}>

src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx

@@ -14,14 +14,6 @@ export default function LayoutEditCeritaPenggalangDonasi({
 }) {
   return (
     <>
-      {/* <UIGlobal_LayoutTamplate
-        header={
-          <UIGlobal_LayoutHeaderTamplate title="Update Cerita Penggalang" />
-        }
-      >
-        {children}
-      </UIGlobal_LayoutTamplate> */}
-
       <UI_NewLayoutTamplate>
         <UI_NewHeader>
           <Component_Header title="Update Cerita Penggalang" />

src/app_modules/donasi/edit/edit_rekening/index.tsx

@@ -1,28 +1,46 @@
 "use client";
 
-import { Button, Stack, TextInput } from "@mantine/core";
-import { MODEL_DONASI } from "../../model/interface";
-import { useState } from "react";
-import _ from "lodash";
-import { useRouter } from "next/navigation";
-import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { Donasi_funUpdateRekening } from "../../fun/update/fun_update_rekening";
-import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import {
   ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
 } from "@/app_modules/_global/notif_global";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Button, Stack, TextInput } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { Donasi_funUpdateRekening } from "../../fun/update/fun_update_rekening";
+import { apiGetOneDonasiById } from "../../lib/api_donasi";
+import { MODEL_DONASI } from "../../model/interface";
 
-export default function Donasi_EditRekening({
-  dataDonasi,
-}: {
-  dataDonasi: MODEL_DONASI;
-}) {
+export default function Donasi_EditRekening() {
+  const { id } = useParams();
   const router = useRouter();
-  const [donasi, setDonasi] = useState(dataDonasi);
+  const [data, setData] = useState<MODEL_DONASI | null>(null);
   const [isLoading, setLoading] = useState(false);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetOneDonasiById(id as string, "semua");
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error("Error get data donasi", error);
+    }
+  }
+
+  if (!data) return <CustomSkeleton height={300} />;
+
   return (
     <>
       <Stack spacing={"xl"}>
@@ -36,17 +54,17 @@ export default function Donasi_EditRekening({
             withAsterisk
             label="Nama Bank"
             placeholder="Masukan Nama Bank"
-            value={donasi.namaBank}
+            value={data.namaBank}
             error={
-              donasi.namaBank === "" ? (
+              data.namaBank === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan nama bank" />
               ) : (
                 ""
               )
             }
             onChange={(val) =>
-              setDonasi({
-                ...donasi,
+              setData({
+                ...data,
                 namaBank: _.upperCase(val.target.value),
               })
             }
@@ -61,17 +79,17 @@ export default function Donasi_EditRekening({
             type="number"
             label="Nomor Rekening"
             placeholder="Masukkan Nomor Rekening"
-            value={donasi.rekening}
+            value={data.rekening}
             error={
-              donasi.rekening === "" ? (
+              data.rekening === "" ? (
                 <ComponentGlobal_ErrorInput text="Masukan nomor rekening" />
               ) : (
                 ""
               )
             }
             onChange={(val) =>
-              setDonasi({
-                ...donasi,
+              setData({
+                ...data,
                 rekening: val.currentTarget.value,
               })
             }
@@ -83,11 +101,9 @@ export default function Donasi_EditRekening({
           }}
           loaderPosition="center"
           loading={isLoading ? true : false}
-          disabled={
-            donasi.namaBank === "" || donasi.rekening === "" ? true : false
-          }
+          disabled={data.namaBank === "" || data.rekening === "" ? true : false}
           radius={"xl"}
-          onClick={() => onUpdate(router, donasi, setLoading)}
+          onClick={() => onUpdate(router, data, setLoading)}
           bg={MainColor.yellow}
           color="yellow"
           c={"black"}