fix: donasi

deskripsi:
- perubahan metode pengambilan data dari use server menjadi API:
src/app/api/donasi/[id]/pencairan-dana/route.ts
src/app/api/donasi/[id]/penggalang-dana/route.ts
src/app/dev/(user)/donasi/pencairan_dana/[id]/page.tsx
src/app/dev/(user)/donasi/penggalang_dana/[id]/page.tsx
src/app_modules/admin/donasi/detail/publish/pencairan_dana.tsx
src/app_modules/donasi/component/card_view/box_informasi_pencarian_dana.tsx
src/app_modules/donasi/component/card_view/box_pencairan_dana.tsx
src/app_modules/donasi/component/card_view/card_pencairan_dana.tsx
src/app_modules/donasi/detail/detail_main/pencairan_dana/index.tsx
src/app_modules/donasi/detail/detail_main/penggalang_dana/index.tsx
src/app_modules/donasi/lib/api_donasi.ts

No Issue

src/app/api/donasi/[id]/pencairan-dana/route.ts

@@ -0,0 +1,52 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    let fixData;
+    const { id } = params;
+    const { searchParams } = new URL(request.url);
+    const page = Number(searchParams.get("page"));
+    const takeData = 3;
+    const skipData = page * takeData - takeData;
+
+    if (!page) {
+      fixData = await prisma.donasi_PencairanDana.findMany({
+        orderBy: {
+          createdAt: "asc",
+        },
+        where: {
+          donasiId: id,
+        },
+      });
+    } else {
+      fixData = await prisma.donasi_PencairanDana.findMany({
+        take: takeData,
+        skip: skipData,
+        orderBy: {
+          createdAt: "asc",
+        },
+        where: {
+          donasiId: id,
+        },
+      });
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: "Data berhasil diambil",
+      data: fixData,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      success: false,
+      message: "Terjadi kesalahan saat mengambil data",
+      reason: error as Error,
+    });
+  }
+}

src/app/api/donasi/[id]/penggalang-dana/route.ts

@@ -0,0 +1,73 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib";
+
+export async function GET(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    const data = await prisma.user.findFirst({
+      where: {
+        id: id,
+      },
+      select: {
+        id: true,
+        username: true,
+        nomor: true,
+        Profile: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            imageId: true,
+          },
+        },
+        Donasi: {
+          orderBy: {
+            createdAt: "desc",
+          },
+          where: {
+            donasiMaster_StatusDonasiId: "1",
+          },
+          select: {
+            id: true,
+            title: true,
+            target: true,
+            active: true,
+            createdAt: true,
+            updatedAt: true,
+            publishTime: true,
+            catatan: true,
+            authorId: true,
+            progres: true,
+            terkumpul: true,
+            imagesId: true,
+            donasiMaster_KategoriId: true,
+            donasiMaster_DurasiId: true,
+            donasiMaster_StatusDonasiId: true,
+            Author: true,
+            imageDonasi: true,
+            CeritaDonasi: true,
+            DonasiMaster_Ketegori: true,
+            DonasiMaster_Durasi: true,
+            DonasiMaster_Status: true,
+            imageId: true,
+          },
+        },
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Data berhasil diambil",
+      data: data,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      success: false,
+      message: "Terjadi kesalahan saat mengambil data",
+      reason: error as Error,
+    });
+  }
+}

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

@@ -3,16 +3,16 @@ import { donasi_funGetListPencairanDanaById } from "@/app_modules/donasi/fun/get
 import { Donasi_getTotalPencairanDanaById } from "@/app_modules/donasi/fun/get/get_pencairan_dana_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  let donasiId = params.id;
+  // let donasiId = params.id;
-  const totalAkumulasi = await Donasi_getTotalPencairanDanaById(donasiId);
+  // const totalAkumulasi = await Donasi_getTotalPencairanDanaById(donasiId);
-  const listPencairan = await donasi_funGetListPencairanDanaById({page: 1, donasiId: donasiId});
+  // const listPencairan = await donasi_funGetListPencairanDanaById({page: 1, donasiId: donasiId});
   
   return (
     <>
       <PencairanDanaDonasi
-        donasiId={donasiId}
+        // donasiId={donasiId}
-        totalAkumulasi={totalAkumulasi as any}
+        // totalAkumulasi={totalAkumulasi as any}
-        listPencairan={listPencairan as any}
+        // listPencairan={listPencairan as any}
       />
     </>
   );

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

@@ -1,13 +1,9 @@
 import { PenggalangDanaDonasi } from "@/app_modules/donasi";
-import { Donasi_getAuthorById } from "@/app_modules/donasi/fun/get/get_author_by_id";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let authorId = params.id;
-  const dataPenggalang = await Donasi_getAuthorById(authorId);
 
+export default async function Page() {
   return (
     <>
-      <PenggalangDanaDonasi dataPenggalang={dataPenggalang as any} />
+      <PenggalangDanaDonasi  />
     </>
   );
 }

src/app_modules/admin/donasi/detail/publish/pencairan_dana.tsx

@@ -49,20 +49,19 @@ export default function AdminDonasi_PencairanDana() {
 
   useShallowEffect(() => {
     loadInitialData();
-  }, [])
+  }, []);
   const loadInitialData = async () => {
     try {
       const response = await apiGetAdminDonasiById({
         id: donasiId,
-      })
+      });
 
       if (response?.success && response?.data) {
-        setData(response.data)
+        setData(response.data);
-        console.log("ini respone data", response.data)
         // setTerkumpul(response.data.terkumpul)
         // setTotal(response.data.totalPencairan)
       } else {
-        setData(null)
+        setData(null);
         // setTerkumpul("")
         // setTotal(0)
       }
@@ -72,18 +71,20 @@ export default function AdminDonasi_PencairanDana() {
       // setTerkumpul("");
       // setTotal(0);
     }
-  }
+  };
 
   return (
     <>
       <Stack>
         <ComponentAdminDonasi_TombolKembali />
-        {!data ?
+        {!data ? (
-          (  
+          <CustomSkeletonAdmin height={500} />
-            <CustomSkeletonAdmin height={500} />)
+        ) : (
-          : (
           <>
-            <TotalDanaView danaTerkumpul={data?.terkumpul as string} totalPencairan={data?.totalPencairan as number} />
+            <TotalDanaView
+              danaTerkumpul={data?.terkumpul as string}
+              totalPencairan={data?.totalPencairan as number}
+            />
             <FormView
               donasiId={donasiId}
               danaTerkumpul={data?.terkumpul as string}
@@ -95,7 +96,7 @@ export default function AdminDonasi_PencairanDana() {
             />
           </>
         )}
-      </Stack >
+      </Stack>
     </>
   );
 }
@@ -109,8 +110,6 @@ function TotalDanaView({
 }) {
   const terkumpul = toNumber(danaTerkumpul);
   const sisaDana = terkumpul - totalPencairan;
-  console.log("Sisa dana", sisaDana);
-  console.log("Terkumpul", terkumpul);
 
   return (
     <>
@@ -121,7 +120,9 @@ function TotalDanaView({
           bg={AdminColor.softBlue}
         >
           <Stack spacing={0} align="center">
-            <Text c={AdminColor.white} fw={"bold"}>Dana Tersisa</Text>
+            <Text c={AdminColor.white} fw={"bold"}>
+              Dana Tersisa
+            </Text>
             <Title>
               {
                 <ComponentAdminGlobal_TampilanRupiahDonasi
@@ -147,9 +148,7 @@ function FormView({
   danaTerkumpul: string;
   totalPencairan: number;
   onSuccess: (val: any) => void;
-  }) {
+}) {
-  
- 
   const router = useRouter();
   const [file, setFile] = useState<File | null>(null);
   const [images, setImages] = useState<any | null>();
@@ -176,6 +175,8 @@ function FormView({
     if (_.values(body).includes(""))
       return ComponentAdminGlobal_NotifikasiPeringatan("Lengkapi Data");
 
+    try {
+      setIsLoading(true);
       const uploadImage = await funGlobal_UploadToStorage({
         file: file as File,
         dirId: DIRECTORY_ID.donasi_bukti_trf_pencairan_dana,
@@ -190,15 +191,13 @@ function FormView({
         fileId: uploadImage.data.id,
       });
       if (res.status === 200) {
-      setIsLoading(true);
         const res2 = await AdminDonasi_AkumulasiPencairanById(
           body.donasiId as any,
           body.nominalCair as any
         );
         if (res2.status === 200) {
-        const loadData = await apiGetAdminDonasiById({id: donasiId});
+          const loadData = await apiGetAdminDonasiById({ id: donasiId });
           onSuccess(loadData);
-        console.log("load Data", loadData);
 
           const dataNotif = {
             appId: loadData?.data?.id,
@@ -209,8 +208,6 @@ function FormView({
             title: "Dana donasi berhasil dicairkan",
           };
 
-        console.log("Data Notif", dataNotif);
-
           const notif = await adminNotifikasi_funCreateToUser({
             data: dataNotif as any,
           });
@@ -233,14 +230,24 @@ function FormView({
         ComponentAdminGlobal_NotifikasiGagal(res.message);
         setIsLoading(false);
       }
+    } catch (error) {
+      ComponentAdminGlobal_NotifikasiGagal("Terjadi kesalahan");
+      setIsLoading(false);
+    }
   }
 
   return (
     <>
       <Center>
-        <Paper p={"md"} w={{ base: 300, sm: 350, md: 400, lg: 500 }} bg={AdminColor.softBlue}>
+        <Paper
+          p={"md"}
+          w={{ base: 300, sm: 350, md: 400, lg: 500 }}
+          bg={AdminColor.softBlue}
+        >
           <Center mb={"lg"}>
-            <Title c={AdminColor.white} order={5}>Form Pencairan Dana</Title>
+            <Title c={AdminColor.white} order={5}>
+              Form Pencairan Dana
+            </Title>
           </Center>
           <Stack>
             <TextInput

src/app_modules/donasi/component/card_view/box_informasi_pencarian_dana.tsx

@@ -4,27 +4,59 @@ import _ from "lodash";
 
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { ScrollOnly } from "next-scroll-loader";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { donasi_funGetListPencairanDanaById } from "../../fun/get/get_list_pencairan_dana_by_id";
 import { MODEL_DONASI_PENCAIRAN_DANA } from "../../model/interface";
-import { ComponentDonasi_CardDonatur } from "./ui_card_donatur";
 import { ComponentDonasi_CardPencairanDana } from "./card_pencairan_dana";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetDonasiPencairanDanaById } from "../../lib/api_donasi";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export function ComponentDonasi_InformasiPencairanDana({
+export function ComponentDonasi_InformasiPencairanDana() {
-  donasiId,
+  const param = useParams<{ id: string }>();
-  listPD,
+  const [data, setData] = useState<MODEL_DONASI_PENCAIRAN_DANA[] | null>(null);
-}: {
-  donasiId: string;
-  listPD: MODEL_DONASI_PENCAIRAN_DANA[];
-}) {
-  const router = useRouter();
-  const [data, setData] = useState(listPD);
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, [param.id]);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetDonasiPencairanDanaById({
+        id: param.id,
+        page: activePage,
+      });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  const onLoadMoreData = async () => {
+    try {
+      const nextPage = activePage + 1;
+      setActivePage(nextPage);
+      const response = await apiGetDonasiPencairanDanaById({
+        id: param.id,
+        page: nextPage,
+      });
+      if (response.success) {
+        return response.data;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  if (!data) return <CustomSkeleton height={300} mt={"lg"} />;
+
   return (
     <>
-      {_.isEmpty(listPD) ? (
+      {_.isEmpty(data) ? (
         <ComponentGlobal_IsEmptyData height={20} />
       ) : (
         <Box>
@@ -36,17 +68,8 @@ export function ComponentDonasi_InformasiPencairanDana({
               </Center>
             )}
             data={data}
-            setData={setData}
+            setData={setData as any}
-            moreData={async () => {
+            moreData={onLoadMoreData}
-              const loadData = await donasi_funGetListPencairanDanaById({
-                page: activePage + 1,
-                donasiId: donasiId,
-              });
-
-              setActivePage((val) => val + 1);
-
-              return loadData;
-            }}
           >
             {(item) => <ComponentDonasi_CardPencairanDana data={item} />}
           </ScrollOnly>

src/app_modules/donasi/component/card_view/box_pencairan_dana.tsx

@@ -3,8 +3,40 @@ import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_
 import { Paper, Stack, Grid, Title, Text } from "@mantine/core";
 import { MODEL_DONASI } from "../../model/interface";
 import TampilanRupiahDonasi from "../tampilan_rupiah";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { apiGetOneDonasiById } from "../../lib/api_donasi";
+
+export function ComponentDonasi_BoxPencariranDana() {
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_DONASI | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useShallowEffect(() => {
+    getData();
+  }, []);
+
+  async function getData() {
+    try {
+      setLoading(true); 
+      const response = await apiGetOneDonasiById(param.id, "semua");
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (loading || !data) {
+    return <CustomSkeleton height={300} />;
+  }
   
-export function ComponentDonasi_BoxPencariranDana({ akumulasi }: { akumulasi: MODEL_DONASI }) {
   return (
     <>
       <Paper
@@ -22,12 +54,12 @@ export function ComponentDonasi_BoxPencariranDana({ akumulasi }: { akumulasi: MO
           <Grid>
             <Grid.Col span={6}>
               <Title order={5}>
-                <TampilanRupiahDonasi nominal={akumulasi.totalPencairan} />
+                <TampilanRupiahDonasi nominal={data.totalPencairan} />
               </Title>
               <Text fz={"xs"}>Dana sudah dicairkan</Text>
             </Grid.Col>
             <Grid.Col span={6}>
-              <Title order={5}>{akumulasi.akumulasiPencairan} kali</Title>
+              <Title order={5}>{data.akumulasiPencairan} kali</Title>
               <Text fz={"xs"}>Pencairan dana</Text>
             </Grid.Col>
           </Grid>

src/app_modules/donasi/component/card_view/card_pencairan_dana.tsx

@@ -1,19 +1,9 @@
-import {
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
-  AccentColor,
+import { Button, Center, Spoiler, Stack, Text, Title } from "@mantine/core";
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import {
-  Button,
-  Center,
-  Paper,
-  Spoiler,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
 import { IconImageInPicture } from "@tabler/icons-react";
 import moment from "moment";
 
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import { RouterImagePreview } from "@/lib";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -29,15 +19,7 @@ export function ComponentDonasi_CardPencairanDana({
 
   return (
     <>
-      <Paper
+      <ComponentGlobal_CardStyles>
-        style={{
-          padding: "15px",
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          color: "white",
-        }}
-      >
         <Text fz={"xs"}>{moment(data.createdAt).format("ll")}</Text>
         <Stack spacing={"lg"}>
           <Title order={5}>{data.title}</Title>
@@ -68,7 +50,7 @@ export function ComponentDonasi_CardPencairanDana({
             </Button>
           </Center>
         </Stack>
-      </Paper>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/pencairan_dana/index.tsx

@@ -6,30 +6,27 @@ import {
   MODEL_DONASI,
   MODEL_DONASI_PENCAIRAN_DANA,
 } from "@/app_modules/donasi/model/interface";
-import {
+import { Stack } from "@mantine/core";
-  Stack
-} from "@mantine/core";
 import { useState } from "react";
 
-export default function PencairanDanaDonasi({
+export default function PencairanDanaDonasi(
-  donasiId,
+  {
-  totalAkumulasi,
+    // donasiId,
-  listPencairan,
+    // totalAkumulasi,
-}: {
+    // listPencairan,
-  donasiId: string;
+  }: {
-  totalAkumulasi: MODEL_DONASI;
+    // donasiId: string;
-  listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
+    // totalAkumulasi: MODEL_DONASI;
-}) {
+    // listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
-  const [akumulasi, setAkumulasi] = useState(totalAkumulasi);
+  }
-  const [listPD, setListPD] = useState(listPencairan);
+) {
+  // const [akumulasi, setAkumulasi] = useState(totalAkumulasi);
+  // const [listPD, setListPD] = useState(listPencairan);
   return (
     <>
       <Stack>
-        <ComponentDonasi_BoxPencariranDana akumulasi={akumulasi} />
+        <ComponentDonasi_BoxPencariranDana />
-        <ComponentDonasi_InformasiPencairanDana
+        <ComponentDonasi_InformasiPencairanDana />
-          donasiId={donasiId}
-          listPD={listPD}
-        />
       </Stack>
     </>
   );

src/app_modules/donasi/detail/detail_main/penggalang_dana/index.tsx

@@ -1,16 +1,16 @@
 "use client";
 
-import { pathAssetImage, RouterImagePreview } from "@/lib";
-import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
 import {
   ComponentGlobal_CardStyles,
   ComponentGlobal_LoaderAvatar,
 } from "@/app_modules/_global/component";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/card_publish";
-import {
+import { apiGetDonasiPenggalangDanaByUserId } from "@/app_modules/donasi/lib/api_donasi";
-  MODEL_DONASI_INFO_PENGGALANG
+import { MODEL_DONASI_INFO_PENGGALANG } from "@/app_modules/donasi/model/interface";
-} from "@/app_modules/donasi/model/interface";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { pathAssetImage, RouterImagePreview } from "@/lib";
+import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
 import {
   ActionIcon,
   Box,
@@ -18,18 +18,36 @@ import {
   Image,
   Stack,
   Text,
-  Title
+  Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconBrandGmail, IconMoodSmile, IconPhone } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 
-export default function PenggalangDanaDonasi({
+export default function PenggalangDanaDonasi() {
-  dataPenggalang,
+  const param = useParams<{ id: string }>();
-}: {
+  const [data, setData] = useState<MODEL_DONASI_INFO_PENGGALANG | null>(null);
-  dataPenggalang: MODEL_DONASI_INFO_PENGGALANG;
+
-}) {
+  useShallowEffect(() => {
-  const [data, setData] = useState(dataPenggalang);
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetDonasiPenggalangDanaByUserId({
+        id: param.id,
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  if (!data) return <CustomSkeleton height={400} />;
 
   return (
     <>

src/app_modules/donasi/lib/api_donasi.ts

@@ -248,4 +248,83 @@ export const apiGetDonasiKabarById = async ({ id }: { id: string }) => {
     console.error("Error get donasi kabar", error);
     throw error; // Re-throw the error to handle it in the calling function
   }
-  };
+};
+
+export const apiGetDonasiPenggalangDanaByUserId = async ({ id }: { id: string }) => {
+  try {
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const response = await fetch(`/api/donasi/${id}/penggalang-dana`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to get donasi penggalang dana",
+        response.statusText,
+        errorData
+      );
+      throw new Error(
+        errorData?.message || "Failed to get donasi penggalang dana"
+      );
+    }
+
+    // Return the JSON response
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error get donasi penggalang dana", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+}
+
+export const apiGetDonasiPencairanDanaById = async ({ id, page }: { id: string, page: number }) => {
+  try {
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    const response = await fetch(`/api/donasi/${id}/pencairan-dana?page=${page}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Failed to get donasi pencairan dana",
+        response.statusText,
+        errorData
+      );
+      throw new Error(
+        errorData?.message || "Failed to get donasi pencairan dana"
+      );
+    }
+
+    // Return the JSON response
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error get donasi pencairan dana", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+}
+