fix: donasi

deskripsi:
- fix perubahan use server menjadi API
src/app/api/donasi/kabar/[id]/list/route.ts
src/app/dev/(user)/donasi/kabar/daftar/[id]/page.tsx
src/app/dev/(user)/donasi/kabar/rekap/[id]/page.tsx
src/app_modules/donasi/_ui/kabar/ui_daftar_kabar.tsx
src/app_modules/donasi/_ui/kabar/ui_rekap_kabar.tsx
src/app_modules/donasi/_view/kabar/view_daftar_kabar.tsx
src/app_modules/donasi/_view/kabar/view_rekap_kabar.tsx
src/app_modules/donasi/component/card_view/ui_card_kabar.tsx
src/app_modules/donasi/lib/api_donasi.ts

No issue

src/app/api/donasi/kabar/[id]/list/route.ts

@@ -0,0 +1,58 @@
+import { prisma } from "@/lib";
+import { NextResponse } from "next/server";
+
+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_Kabar.findMany({
+        where: {
+          donasiId: id,
+          active: true,
+        },
+        select: {
+          id: true,
+          title: true,
+          deskripsi: true,
+          createdAt: true,
+        },
+      });
+    } else {
+      fixData = await prisma.donasi_Kabar.findMany({
+        take: takeData,
+        skip: skipData,
+        where: {
+          donasiId: id,
+          active: true,
+        },
+        select: {
+          id: true,
+          title: true,
+          deskripsi: true,
+          createdAt: true,
+        },
+      });
+    }
+
+    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/dev/(user)/donasi/kabar/daftar/[id]/page.tsx

@@ -1,16 +1,15 @@
 import { Donasi_UiDaftarKabar } from "@/app_modules/donasi/_ui";
-import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
 
 async function Page({ params }: { params: { id: string } }) {
-  const donasiId = params.id;
+  // const donasiId = params.id;
-  const listKabar = await donasi_funGetListKabarById({
+  // const listKabar = await donasi_funGetListKabarById({
-    page: 1,
+  //   page: 1,
-    donasiId: donasiId,
+  //   donasiId: donasiId,
-  });
+  // });
 
   return (
     <>
-      <Donasi_UiDaftarKabar dataDonasi={listKabar as any} donasiId={donasiId}/>
+      <Donasi_UiDaftarKabar />
     </>
   );
 }

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

@@ -1,16 +1,9 @@
 import { Donasi_UiRekapKabar } from "@/app_modules/donasi/_ui";
-import { donasi_funGetListKabarById } from "@/app_modules/donasi/fun/get/get_list_kabar";
-
-async function Page({ params }: { params: { id: string } }) {
-  const donasiId = params.id;
-  const listKabar = await donasi_funGetListKabarById({
-    page: 1,
-    donasiId: donasiId,
-  });
 
+async function Page() {
   return (
     <>
-      <Donasi_UiRekapKabar donasiId={donasiId} listKabar={listKabar as any} />
+      <Donasi_UiRekapKabar />
     </>
   );
 }

src/app_modules/donasi/_ui/kabar/ui_daftar_kabar.tsx

@@ -4,25 +4,15 @@ import {
   UIGlobal_LayoutHeaderTamplate,
   UIGlobal_LayoutTamplate,
 } from "@/app_modules/_global/ui";
-import React from "react";
 import { Donasi_ViewDaftarKabar } from "../../_view";
 
-export function Donasi_UiDaftarKabar({
+export function Donasi_UiDaftarKabar() {
-  dataDonasi,
-  donasiId,
-}: {
-  dataDonasi: string;
-  donasiId: string;
-}) {
   return (
     <>
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Daftar Kabar" />}
       >
-        <Donasi_ViewDaftarKabar
+        <Donasi_ViewDaftarKabar />
-          dataDonasi={dataDonasi as any}
-          donasiId={donasiId}
-        />
       </UIGlobal_LayoutTamplate>
     </>
   );

src/app_modules/donasi/_ui/kabar/ui_rekap_kabar.tsx

@@ -11,46 +11,22 @@ import { ActionIcon } from "@mantine/core";
 import { IconCirclePlus, IconDotsVertical } from "@tabler/icons-react";
 import { useState } from "react";
 import { Donasi_ViewRekapKabar } from "../../_view";
+import { useParams } from "next/navigation";
 
-export function Donasi_UiRekapKabar({
+export function Donasi_UiRekapKabar() {
-  listKabar,
+  const { id } = useParams();
-  donasiId,
-}: {
-  listKabar: any[];
-  donasiId: string;
-}) {
   const [openDrawer, setOpenDrawer] = useState(false);
   const listPage = [
     {
       id: "1",
       name: "Tambah Kabar",
       icon: <IconCirclePlus />,
-      path: RouterDonasi.create_kabar + donasiId,
+      path: RouterDonasi.create_kabar + id,
     },
   ];
 
   return (
     <>
-      {/* <UIGlobal_LayoutTamplate
-        header={
-          <UIGlobal_LayoutHeaderTamplate
-            title="Daftar Kabar"
-            customButtonRight={
-              <ActionIcon
-                variant="transparent"
-                onClick={() => {
-                  setOpenDrawer(true);
-                }}
-              >
-                <IconDotsVertical color="white" />
-              </ActionIcon>
-            }
-          />
-        }
-      >
-        <Donasi_ViewRekapKabar donasiId={donasiId} listKabar={listKabar} />
-      </UIGlobal_LayoutTamplate> */}
-
       <UI_NewLayoutTamplate>
         <UI_NewHeader>
           <Component_Header
@@ -68,7 +44,7 @@ export function Donasi_UiRekapKabar({
           />
         </UI_NewHeader>
         <UI_NewChildren>
-          <Donasi_ViewRekapKabar donasiId={donasiId} listKabar={listKabar} />
+          <Donasi_ViewRekapKabar />
         </UI_NewChildren>
       </UI_NewLayoutTamplate>
 

src/app_modules/donasi/_view/kabar/view_daftar_kabar.tsx

@@ -1,17 +1,59 @@
-import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
 import { Box, Center } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
+import { useParams } from "next/navigation";
 import { useState } from "react";
 import ComponentDonasi_ListKabar from "../../component/card_view/ui_card_kabar";
-import { donasi_funGetListKabarById } from "../../fun/get/get_list_kabar";
+import { apiGetDonasiListKabarById } from "../../lib/api_donasi";
 
-export function Donasi_ViewDaftarKabar({ dataDonasi ,donasiId}: { dataDonasi: any[], donasiId: string }) {
+export function Donasi_ViewDaftarKabar() {
-  const [data, setData] = useState(dataDonasi);
+  const { id } = useParams();
+  const [data, setData] = useState<any[] | null>(null);
   const [activePage, setActivePage] = useState(1);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetDonasiListKabarById({
+        id: id as string,
+        page: activePage,
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function onMoreData() {
+    try {
+      const nextPage = activePage + 1;
+      setActivePage(nextPage);
+      const response = await apiGetDonasiListKabarById({
+        id: id as string,
+        page: nextPage,
+      });
+
+      if (response.success) {
+        return response.data;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  if (!data) return <CustomSkeleton height={100} />;
+
   return (
     <>
       {_.isEmpty(data) ? (
@@ -19,24 +61,15 @@ export function Donasi_ViewDaftarKabar({ dataDonasi ,donasiId}: { dataDonasi: an
       ) : (
         <Box>
           <ScrollOnly
-            height="92vh"
+            height="22vh"
             renderLoading={() => (
               <Center>
                 <ComponentGlobal_Loader size={25} />
               </Center>
             )}
             data={data}
-            setData={setData}
+            setData={setData as any}
-            moreData={async () => {
+            moreData={onMoreData}
-              const loadData = await donasi_funGetListKabarById({
-                page: activePage + 1,
-                donasiId: donasiId,
-              });
-
-              setActivePage((val) => val + 1);
-
-              return loadData;
-            }}
           >
             {(item) => (
               <ComponentDonasi_ListKabar

src/app_modules/donasi/_view/kabar/view_rekap_kabar.tsx

@@ -1,28 +1,61 @@
 "use client";
 
-import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
 import { Box, Center, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { ScrollOnly } from "next-scroll-loader";
-import { useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useState } from "react";
 import ComponentDonasi_ListKabar from "../../component/card_view/ui_card_kabar";
-import { donasi_funGetListKabarById } from "../../fun/get/get_list_kabar";
+import { apiGetDonasiListKabarById } from "../../lib/api_donasi";
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 
-export function Donasi_ViewRekapKabar({
+export function Donasi_ViewRekapKabar() {
-  donasiId,
+  const { id } = useParams();
-  listKabar,
+  const [data, setData] = useState<MODEL_DONASI_KABAR[] | null>(null);
-}: {
-  donasiId: string;
-  listKabar: MODEL_DONASI_KABAR[];
-}) {
-  const router = useRouter();
-  const [data, setData] = useState(listKabar);
   const [activePage, setActivePage] = useState(1);
-  const [isLoading, setIsLoading] = useState(false);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const response = await apiGetDonasiListKabarById({
+        id: id as string,
+        page: activePage,
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function onMoreData() {
+    try {
+      const nextPage = activePage + 1;
+      setActivePage(nextPage);
+      const response = await apiGetDonasiListKabarById({
+        id: id as string,
+        page: nextPage,
+      });
+
+      if (response.success) {
+        return response.data;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  if (!data) return <CustomSkeleton height={100} />;
 
   return (
     <>
@@ -32,24 +65,15 @@ export function Donasi_ViewRekapKabar({
         ) : (
           <Box>
             <ScrollOnly
-              height="85vh"
+              height="25vh"
               renderLoading={() => (
                 <Center>
                   <ComponentGlobal_Loader size={25} />
                 </Center>
               )}
               data={data}
-              setData={setData}
+              setData={setData as any}
-              moreData={async () => {
+              moreData={onMoreData}
-                const loadData = await donasi_funGetListKabarById({
-                  page: activePage + 1,
-                  donasiId: donasiId,
-                });
-
-                setActivePage((val) => val + 1);
-
-                return loadData;
-              }}
             >
               {(item) => (
                 <ComponentDonasi_ListKabar

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

@@ -1,15 +1,15 @@
 "use client";
 
 import { Stack, Text, Title } from "@mantine/core";
-
 import {
   ComponentGlobal_CardLoadingOverlay,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
+import moment from "moment";
+import "moment/locale/id";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_DONASI_KABAR } from "../../model/interface";
-
 export default function ComponentDonasi_ListKabar({
   kabar,
   route,
@@ -28,11 +28,7 @@ export default function ComponentDonasi_ListKabar({
         }}
       >
         <Stack>
-          <Text fz={"xs"}>
+          <Text fz={"xs"}>{moment(kabar.createdAt).format("DD-MM-YYYY")}</Text>
-            {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format(
-              kabar.createdAt
-            )}
-          </Text>
           <Title order={5}>{kabar.title}</Title>
         </Stack>
         {visible && <ComponentGlobal_CardLoadingOverlay />}

src/app_modules/donasi/lib/api_donasi.ts

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