From 1f1cca3520ff22b878e945383a580b32a3054a3d Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Wed, 11 Jun 2025 10:54:45 +0800 Subject: [PATCH] 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 | 58 +++++++++++++++ .../(user)/donasi/kabar/daftar/[id]/page.tsx | 13 ++-- .../(user)/donasi/kabar/rekap/[id]/page.tsx | 11 +-- .../donasi/_ui/kabar/ui_daftar_kabar.tsx | 14 +--- .../donasi/_ui/kabar/ui_rekap_kabar.tsx | 34 ++------- .../donasi/_view/kabar/view_daftar_kabar.tsx | 65 ++++++++++++---- .../donasi/_view/kabar/view_rekap_kabar.tsx | 74 ++++++++++++------- .../component/card_view/ui_card_kabar.tsx | 10 +-- src/app_modules/donasi/lib/api_donasi.ts | 40 +++++++++- 9 files changed, 213 insertions(+), 106 deletions(-) create mode 100644 src/app/api/donasi/kabar/[id]/list/route.ts diff --git a/src/app/api/donasi/kabar/[id]/list/route.ts b/src/app/api/donasi/kabar/[id]/list/route.ts new file mode 100644 index 00000000..2bf1f84d --- /dev/null +++ b/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, + }); + } +} diff --git a/src/app/dev/(user)/donasi/kabar/daftar/[id]/page.tsx b/src/app/dev/(user)/donasi/kabar/daftar/[id]/page.tsx index 3c942ef6..ce86af26 100644 --- a/src/app/dev/(user)/donasi/kabar/daftar/[id]/page.tsx +++ b/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 listKabar = await donasi_funGetListKabarById({ - page: 1, - donasiId: donasiId, - }); + // const donasiId = params.id; + // const listKabar = await donasi_funGetListKabarById({ + // page: 1, + // donasiId: donasiId, + // }); return ( <> - + ); } diff --git a/src/app/dev/(user)/donasi/kabar/rekap/[id]/page.tsx b/src/app/dev/(user)/donasi/kabar/rekap/[id]/page.tsx index ceb97bab..dead1062 100644 --- a/src/app/dev/(user)/donasi/kabar/rekap/[id]/page.tsx +++ b/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 ( <> - + ); } diff --git a/src/app_modules/donasi/_ui/kabar/ui_daftar_kabar.tsx b/src/app_modules/donasi/_ui/kabar/ui_daftar_kabar.tsx index a7f053db..490e8420 100644 --- a/src/app_modules/donasi/_ui/kabar/ui_daftar_kabar.tsx +++ b/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({ - dataDonasi, - donasiId, -}: { - dataDonasi: string; - donasiId: string; -}) { +export function Donasi_UiDaftarKabar() { return ( <> } > - + ); diff --git a/src/app_modules/donasi/_ui/kabar/ui_rekap_kabar.tsx b/src/app_modules/donasi/_ui/kabar/ui_rekap_kabar.tsx index a3320bd6..790f7c32 100644 --- a/src/app_modules/donasi/_ui/kabar/ui_rekap_kabar.tsx +++ b/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({ - listKabar, - donasiId, -}: { - listKabar: any[]; - donasiId: string; -}) { +export function Donasi_UiRekapKabar() { + const { id } = useParams(); const [openDrawer, setOpenDrawer] = useState(false); const listPage = [ { id: "1", name: "Tambah Kabar", icon: , - path: RouterDonasi.create_kabar + donasiId, + path: RouterDonasi.create_kabar + id, }, ]; return ( <> - {/* { - setOpenDrawer(true); - }} - > - - - } - /> - } - > - - */} - - + diff --git a/src/app_modules/donasi/_view/kabar/view_daftar_kabar.tsx b/src/app_modules/donasi/_view/kabar/view_daftar_kabar.tsx index f3e145cd..de956fb3 100644 --- a/src/app_modules/donasi/_view/kabar/view_daftar_kabar.tsx +++ b/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 }) { - const [data, setData] = useState(dataDonasi); +export function Donasi_ViewDaftarKabar() { + const { id } = useParams(); + const [data, setData] = useState(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 ; + return ( <> {_.isEmpty(data) ? ( @@ -19,24 +61,15 @@ export function Donasi_ViewDaftarKabar({ dataDonasi ,donasiId}: { dataDonasi: an ) : ( (
)} data={data} - setData={setData} - moreData={async () => { - const loadData = await donasi_funGetListKabarById({ - page: activePage + 1, - donasiId: donasiId, - }); - - setActivePage((val) => val + 1); - - return loadData; - }} + setData={setData as any} + moreData={onMoreData} > {(item) => ( (null); 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 ; return ( <> @@ -32,24 +65,15 @@ export function Donasi_ViewRekapKabar({ ) : ( (
)} data={data} - setData={setData} - moreData={async () => { - const loadData = await donasi_funGetListKabarById({ - page: activePage + 1, - donasiId: donasiId, - }); - - setActivePage((val) => val + 1); - - return loadData; - }} + setData={setData as any} + moreData={onMoreData} > {(item) => ( - - {new Intl.DateTimeFormat("id-ID", { dateStyle: "medium" }).format( - kabar.createdAt - )} - + {moment(kabar.createdAt).format("DD-MM-YYYY")} {kabar.title} {visible && } diff --git a/src/app_modules/donasi/lib/api_donasi.ts b/src/app_modules/donasi/lib/api_donasi.ts index dd07cd85..ee35a937 100644 --- a/src/app_modules/donasi/lib/api_donasi.ts +++ b/src/app_modules/donasi/lib/api_donasi.ts @@ -366,4 +366,42 @@ export const apiGetDonasiListDonaturById = async ({ id, page }: { id: string, pa throw error; // Re-throw the error to handle it in the calling function } } - \ No newline at end of file + +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 + } +} \ No newline at end of file