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_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({
-  donasiId,
-  listPD,
-}: {
-  donasiId: string;
-  listPD: MODEL_DONASI_PENCAIRAN_DANA[];
-}) {
-  const router = useRouter();
-  const [data, setData] = useState(listPD);
+export function ComponentDonasi_InformasiPencairanDana() {
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_DONASI_PENCAIRAN_DANA[] | null>(null);
   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}
-            moreData={async () => {
-              const loadData = await donasi_funGetListPencairanDanaById({
-                page: activePage + 1,
-                donasiId: donasiId,
-              });
-
-              setActivePage((val) => val + 1);
-
-              return loadData;
-            }}
+            setData={setData as any}
+            moreData={onLoadMoreData}
           >
             {(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({ akumulasi }: { akumulasi: MODEL_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} />;
+  }
+  
   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 {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import {
-  Button,
-  Center,
-  Paper,
-  Spoiler,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { Button, Center, 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
-        style={{
-          padding: "15px",
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          color: "white",
-        }}
-      >
+      <ComponentGlobal_CardStyles>
         <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 {
-  Stack
-} from "@mantine/core";
+import { Stack } from "@mantine/core";
 import { useState } from "react";
 
-export default function PencairanDanaDonasi({
-  donasiId,
-  totalAkumulasi,
-  listPencairan,
-}: {
-  donasiId: string;
-  totalAkumulasi: MODEL_DONASI;
-  listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
-}) {
-  const [akumulasi, setAkumulasi] = useState(totalAkumulasi);
-  const [listPD, setListPD] = useState(listPencairan);
+export default function PencairanDanaDonasi(
+  {
+    // donasiId,
+    // totalAkumulasi,
+    // listPencairan,
+  }: {
+    // donasiId: string;
+    // totalAkumulasi: MODEL_DONASI;
+    // listPencairan: MODEL_DONASI_PENCAIRAN_DANA[];
+  }
+) {
+  // const [akumulasi, setAkumulasi] = useState(totalAkumulasi);
+  // const [listPD, setListPD] = useState(listPencairan);
   return (
     <>
       <Stack>
-        <ComponentDonasi_BoxPencariranDana akumulasi={akumulasi} />
-        <ComponentDonasi_InformasiPencairanDana
-          donasiId={donasiId}
-          listPD={listPD}
-        />
+        <ComponentDonasi_BoxPencariranDana />
+        <ComponentDonasi_InformasiPencairanDana />
       </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 {
-  MODEL_DONASI_INFO_PENGGALANG
-} from "@/app_modules/donasi/model/interface";
+import { apiGetDonasiPenggalangDanaByUserId } from "@/app_modules/donasi/lib/api_donasi";
+import { MODEL_DONASI_INFO_PENGGALANG } 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({
-  dataPenggalang,
-}: {
-  dataPenggalang: MODEL_DONASI_INFO_PENGGALANG;
-}) {
-  const [data, setData] = useState(dataPenggalang);
+export default function PenggalangDanaDonasi() {
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_DONASI_INFO_PENGGALANG | null>(null);
+
+  useShallowEffect(() => {
+    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

@@ -214,38 +214,117 @@ export const apiGetCountDonatur = async ({ id }: { id: string }) => {
 };
 
 export const apiGetDonasiKabarById = 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/kabar/${id}`, {
-        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 kabar",
-          response.statusText,
-          errorData
-        );
-        throw new Error(errorData?.message || "Failed to get donasi kabar");
-      }
-
-      // Return the JSON response
-      const data = await response.json();
-      return data;
-    } catch (error) {
-      console.error("Error get donasi kabar", error);
-      throw error; // Re-throw the error to handle it in the calling function
+  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/kabar/${id}`, {
+      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 kabar",
+        response.statusText,
+        errorData
+      );
+      throw new Error(errorData?.message || "Failed to get donasi kabar");
+    }
+
+    // Return the JSON response
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    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
+  }
+}
+