From 880f2aef6b5602902287d97fdf48554921897b26 Mon Sep 17 00:00:00 2001 From: amel Date: Thu, 12 Dec 2024 11:01:08 +0800 Subject: [PATCH 1/2] upd: loading button Deskripsi: - loading button pada all portofolio - loading button pada halaman pencarian user No Issues --- .../katalog/portofolio/component/card_view_daftar.tsx | 9 +++++++-- src/app_modules/user_search/component/ui_user_search.tsx | 8 ++++++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/app_modules/katalog/portofolio/component/card_view_daftar.tsx b/src/app_modules/katalog/portofolio/component/card_view_daftar.tsx index 671b0ee6..4335c846 100644 --- a/src/app_modules/katalog/portofolio/component/card_view_daftar.tsx +++ b/src/app_modules/katalog/portofolio/component/card_view_daftar.tsx @@ -43,11 +43,16 @@ export function ComponentPortofolio_DaftarBoxView({ - {isLoading ? ( + {/* PAKE LOADING */} + {/* {isLoading ? ( ) : ( - )} + )} */} + + + {/* GA PAKE LOADING */} + diff --git a/src/app_modules/user_search/component/ui_user_search.tsx b/src/app_modules/user_search/component/ui_user_search.tsx index cdefcc7c..56b3c28c 100644 --- a/src/app_modules/user_search/component/ui_user_search.tsx +++ b/src/app_modules/user_search/component/ui_user_search.tsx @@ -115,11 +115,15 @@ function CardView({ data }: { data: MODEL_USER }) {
- {loading ? ( + {/* PAKE LOADING */} + {/* {loading ? ( ) : ( - )} + )} */} + + {/* GA PAKE LOADING */} +
From 0d4cc57c8ba797e05b868720e0d9e016ecf76474 Mon Sep 17 00:00:00 2001 From: amel Date: Thu, 12 Dec 2024 14:28:35 +0800 Subject: [PATCH 2/2] upd: donasi Deskripsi: - update api donasi - api galang dana nanti dlu aja, soalnya kejar tayang No Issues --- src/app/api/new/donasi/route.ts | 75 ++++++++++ src/app/dev/donasi/main/beranda/page.tsx | 10 +- .../dev/donasi/main/galang_dana/[id]/page.tsx | 6 +- .../component/card_view/card_publish_new.tsx | 57 ++++++++ .../donasi/component/skeleton_donasi.tsx | 31 ++++ src/app_modules/donasi/index.ts | 4 + src/app_modules/donasi/lib/api_donasi.ts | 4 + src/app_modules/donasi/lib/type_donasi.ts | 9 ++ src/app_modules/donasi/main/beranda_new.tsx | 135 ++++++++++++++++++ .../main/galang_dana/ui_galang_dana_new.tsx | 69 +++++++++ 10 files changed, 394 insertions(+), 6 deletions(-) create mode 100644 src/app/api/new/donasi/route.ts create mode 100644 src/app_modules/donasi/component/card_view/card_publish_new.tsx create mode 100644 src/app_modules/donasi/component/skeleton_donasi.tsx create mode 100644 src/app_modules/donasi/lib/api_donasi.ts create mode 100644 src/app_modules/donasi/lib/type_donasi.ts create mode 100644 src/app_modules/donasi/main/beranda_new.tsx create mode 100644 src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx diff --git a/src/app/api/new/donasi/route.ts b/src/app/api/new/donasi/route.ts new file mode 100644 index 00000000..2782e7de --- /dev/null +++ b/src/app/api/new/donasi/route.ts @@ -0,0 +1,75 @@ +import { prisma } from "@/app/lib"; +import { funGetUserIdByToken } from "@/app_modules/_global/fun/get"; +import _ from "lodash"; +import { NextResponse } from "next/server"; +export const dynamic = "force-dynamic"; + + +// GET ALL DATA DONASI +export async function GET(request: Request) { + try { + let dataFix + const { searchParams } = new URL(request.url) + const kategori = searchParams.get("cat") + const status = searchParams.get("status") + const page = searchParams.get("page") + const dataSkip = Number(page) * 5 - 5; + + if (kategori == "beranda") { + const data = await prisma.donasi.findMany({ + take: 5, + skip: dataSkip, + orderBy: { + publishTime: "desc", + }, + where: { + donasiMaster_StatusDonasiId: "1", + active: true, + }, + select: { + id: true, + imageId: true, + title: true, + publishTime: true, + progres: true, + terkumpul: true, + DonasiMaster_Durasi: { + select: { + name: true + } + }, + + } + }); + + dataFix = data.map((v: any) => ({ + ..._.omit(v, ["DonasiMaster_Durasi"]), + nameDonasiDurasi: v.DonasiMaster_Durasi.name + })) + } else { + const userLoginId = await funGetUserIdByToken() + if (userLoginId == null) { + return NextResponse.json({ success: false, message: "Gagal mendapatkan data, user id tidak ada" }, { status: 500 }); + } + + dataFix = await prisma.donasi.findMany({ + take: 5, + skip: dataSkip, + where: { + authorId: userLoginId, + donasiMaster_StatusDonasiId: status, + }, + orderBy: { + updatedAt: "desc", + }, + }); + } + + return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix }, { status: 200 }); + + } + catch (error) { + console.error(error); + return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 }); + } +} \ No newline at end of file diff --git a/src/app/dev/donasi/main/beranda/page.tsx b/src/app/dev/donasi/main/beranda/page.tsx index 21e01bd7..08d64509 100644 --- a/src/app/dev/donasi/main/beranda/page.tsx +++ b/src/app/dev/donasi/main/beranda/page.tsx @@ -1,8 +1,8 @@ -import { MainDonasi } from "@/app_modules/donasi"; -import { donasi_funGetAllPublish } from "@/app_modules/donasi/fun/get/get_list_beranda"; +import { MainDonasiNew } from "@/app_modules/donasi"; export default async function Page() { - const listDonasi = await donasi_funGetAllPublish({ page: 1 }); - // console.log(listDonasi) - return ; + // const listDonasi = await donasi_funGetAllPublish({ page: 1 }); + + // return ; + return } diff --git a/src/app/dev/donasi/main/galang_dana/[id]/page.tsx b/src/app/dev/donasi/main/galang_dana/[id]/page.tsx index e663633a..b4ff467c 100644 --- a/src/app/dev/donasi/main/galang_dana/[id]/page.tsx +++ b/src/app/dev/donasi/main/galang_dana/[id]/page.tsx @@ -1,4 +1,4 @@ -import { PostingDonasi } from "@/app_modules/donasi"; +import { GalangDanaDonasiNew, PostingDonasi } from "@/app_modules/donasi"; import { donasi_funGetAllStatusById } from "@/app_modules/donasi/fun"; import { donasi_funMasterStatusDonasi } from "@/app_modules/donasi/fun/master/get_status_donasi"; @@ -18,6 +18,10 @@ export default async function Page({ params }: { params: { id: string } }) { dataStatus={dataDonasi} listStatus={listStatus} /> + + + {/* NANTI AJA LANJUT -- KEJAR TAYANG :) */} + {/* */} ); } diff --git a/src/app_modules/donasi/component/card_view/card_publish_new.tsx b/src/app_modules/donasi/component/card_view/card_publish_new.tsx new file mode 100644 index 00000000..ae9f6cb6 --- /dev/null +++ b/src/app_modules/donasi/component/card_view/card_publish_new.tsx @@ -0,0 +1,57 @@ +"use client"; +import { ComponentGlobal_CardLoadingOverlay, ComponentGlobal_CardStyles, ComponentGlobal_LoadImageCustom, } from "@/app_modules/_global/component"; +import { Grid, Progress, Stack, Text } from "@mantine/core"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur"; +import TampilanRupiahDonasi from "../tampilan_rupiah"; + +export default function ComponentDonasi_CardPublishNew({ data, path, }: { data: any; path: string; }) { + const router = useRouter(); + const [visible, setVisible] = useState(false); + const [donasiId, setDonasiId] = useState(""); + + return ( + <> + { + setVisible(true); + setDonasiId(data.id); + router.push(path + `${data.id}`); + }} + > + + + + + + + + + + {data.title} + + + + + + Terkumpul + + + + + + + + + + + ); +} diff --git a/src/app_modules/donasi/component/skeleton_donasi.tsx b/src/app_modules/donasi/component/skeleton_donasi.tsx new file mode 100644 index 00000000..7c27f924 --- /dev/null +++ b/src/app_modules/donasi/component/skeleton_donasi.tsx @@ -0,0 +1,31 @@ +import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component"; +import { Box, Grid, Group, Skeleton, Stack } from "@mantine/core"; + +export default function SkeletonDonasi() { + return <> + + {[...Array(3)].map((_, index) => ( + + + + + + + + {[...Array(4)].map((_, index) => ( + + + + + + + + ))} + + + + + ))} + + ; +} \ No newline at end of file diff --git a/src/app_modules/donasi/index.ts b/src/app_modules/donasi/index.ts index e0c0ec64..62da8ec0 100644 --- a/src/app_modules/donasi/index.ts +++ b/src/app_modules/donasi/index.ts @@ -1,6 +1,8 @@ import MainDonasi from "./main/beranda"; +import MainDonasiNew from "./main/beranda_new"; import LayoutDonasi from "./main/layout"; import GalangDanaDonasi from "./main/galang_dana/ui_galang_dana"; +import GalangDanaDonasiNew from "./main/galang_dana/ui_galang_dana_new"; import DonasiSayaDonasi from "./main/donasi_saya"; import CreateDonasi from "./create/create_donasi"; import LayoutCreateDonasi from "./create/layout"; @@ -99,4 +101,6 @@ export { LayoutDonasi_CreateKabar, Donasi_EditRekening, LayoutDonasi_EditRekening, + MainDonasiNew, + GalangDanaDonasiNew, }; diff --git a/src/app_modules/donasi/lib/api_donasi.ts b/src/app_modules/donasi/lib/api_donasi.ts new file mode 100644 index 00000000..36e2f5f6 --- /dev/null +++ b/src/app_modules/donasi/lib/api_donasi.ts @@ -0,0 +1,4 @@ +export const apiGetAllDonasi = async (path?: string) => { + const response = await fetch(`/api/new/donasi${(path) ? path : ''}`) + return await response.json().catch(() => null) +} \ No newline at end of file diff --git a/src/app_modules/donasi/lib/type_donasi.ts b/src/app_modules/donasi/lib/type_donasi.ts new file mode 100644 index 00000000..fabb23d5 --- /dev/null +++ b/src/app_modules/donasi/lib/type_donasi.ts @@ -0,0 +1,9 @@ +export interface IDataAllDonasi { + id: string + imageId: string + title: string + publishTime: Date + progres: string + terkumpul: string + nameDonasiDurasi: string +} \ No newline at end of file diff --git a/src/app_modules/donasi/main/beranda_new.tsx b/src/app_modules/donasi/main/beranda_new.tsx new file mode 100644 index 00000000..87f9a696 --- /dev/null +++ b/src/app_modules/donasi/main/beranda_new.tsx @@ -0,0 +1,135 @@ +"use client"; +import { gs_donasiTriggerBeranda } from "@/app/lib/global_state"; +import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi"; +import { AccentColor } from "@/app_modules/_global/color"; +import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create"; +import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data"; +import ComponentGlobal_Loader from "@/app_modules/_global/component/loader"; +import { Affix, Box, Button, Center, rem } from "@mantine/core"; +import { useShallowEffect } from "@mantine/hooks"; +import { useAtom } from "jotai"; +import _ from "lodash"; +import { ScrollOnly } from "next-scroll-loader"; +import { useState } from "react"; +import ComponentDonasi_CardPublishNew from "../component/card_view/card_publish_new"; +import SkeletonDonasi from "../component/skeleton_donasi"; +import { apiGetAllDonasi } from "../lib/api_donasi"; +import { IDataAllDonasi } from "../lib/type_donasi"; + +export default function MainDonasiNew() { + const [data, setData] = useState([]); + const [activePage, setActivePage] = useState(1); + const [loading, setLoading] = useState(true) + + // Realtime + const [isTriggerDonasiBeranda, setIsTriggerDonasiBeranda] = useAtom( + gs_donasiTriggerBeranda + ); + const [isShowUpdate, setIsShowUpdate] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + useShallowEffect(() => { + if (isTriggerDonasiBeranda) { + setIsShowUpdate(true); + } + }, [isTriggerDonasiBeranda, setIsShowUpdate]); + + async function onLoadData({ onPublish }: { onPublish: (val: any) => void }) { + setIsLoading(true); + const loadData = await apiGetAllDonasi(`?cat=beranda&page=1`) + onPublish(loadData); + + setIsShowUpdate(false); + setIsTriggerDonasiBeranda(false); + setIsLoading(false); + } + + + async function getDataDonasi() { + try { + setLoading(true) + const response = await apiGetAllDonasi(`?cat=beranda&page=1`) + if (response.success) { + setData(response.data); + } + } catch (error) { + console.error(error); + } finally { + setLoading(false) + } + } + + + useShallowEffect(() => { + getDataDonasi() + }, []); + + return ( + <> + + {isShowUpdate && ( + +
+ +
+ + )} + + + { + loading + ? + : + _.isEmpty(data) ? ( + + ) : ( + ( +
+ +
+ )} + data={data} + setData={setData} + moreData={async () => { + const pageNew = activePage + 1 + const loadData = await apiGetAllDonasi(`?cat=beranda&page=${pageNew}`) + + setActivePage((val) => val + 1); + + return loadData; + }} + > + {(item) => ( + + )} + + ) + } + + + ); +} diff --git a/src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx b/src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx new file mode 100644 index 00000000..dea0613a --- /dev/null +++ b/src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx @@ -0,0 +1,69 @@ +"use client"; +import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi"; +import { AccentColor, MainColor, } from "@/app_modules/_global/color/color_pallet"; +import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface"; +import { Stack, Tabs } from "@mantine/core"; +import { useParams, useRouter } from "next/navigation"; + +export default function GalangDanaDonasiNew({listStatus,}: {listStatus: MODEL_NEW_DEFAULT_MASTER[]; }) { + const router = useRouter(); + const param = useParams<{ id: string }>(); + + async function onChangeStatus({ statusId }: { statusId: string }) { + router.replace(RouterDonasi.status_galang_dana({ id: statusId })); + } + + return ( + <> + { + onChangeStatus({ statusId: val }); + }} + styles={{ + tabsList: { + backgroundColor: MainColor.darkblue, + position: "sticky", + top: 0, + zIndex: 99, + }, + }} + > + + + {listStatus.map((e, i) => ( + + {e.name} + + ))} + + + {/* {param.id == "1" && } + + {param.id == "2" && } + + {param.id == "3" && } + + {param.id == "4" && } */} + + + + ); +}