From 6bc2d3f6284207c4fad51f6e3f3f150e002d1a75 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Tue, 21 Jan 2025 11:00:17 +0800
Subject: [PATCH]  fix ( event ) deskripsi: - fix list peserta

---
 src/app/api/event/peserta/[id]/route.ts       |  4 -
 .../detail/comp_avatar_and_username_event.tsx | 85 +++++++++++++++++++
 .../event/detail/main_detail/index.tsx        |  1 -
 .../event/detail/peserta/index.tsx            | 57 ++++++++++++-
 4 files changed, 139 insertions(+), 8 deletions(-)
 create mode 100644 src/app_modules/event/component/detail/comp_avatar_and_username_event.tsx

diff --git a/src/app/api/event/peserta/[id]/route.ts b/src/app/api/event/peserta/[id]/route.ts
index 7e269e30..dcc565d8 100644
--- a/src/app/api/event/peserta/[id]/route.ts
+++ b/src/app/api/event/peserta/[id]/route.ts
@@ -48,16 +48,12 @@ export async function GET(
       },
     });
 
-    
-
-    console.log("server", fixData)
     return NextResponse.json({
       success: true,
       message: "Success get data",
       data: fixData,
     });
   } catch (error) {
-
     backendLogger.error("Error get list data:", error);
     return NextResponse.json(
       {
diff --git a/src/app_modules/event/component/detail/comp_avatar_and_username_event.tsx b/src/app_modules/event/component/detail/comp_avatar_and_username_event.tsx
new file mode 100644
index 00000000..6feaa7e8
--- /dev/null
+++ b/src/app_modules/event/component/detail/comp_avatar_and_username_event.tsx
@@ -0,0 +1,85 @@
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  ComponentGlobal_AvatarAndUsername,
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoaderAvatar,
+} from "@/app_modules/_global/component";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { funGlobal_CheckProfile } from "@/app_modules/_global/fun/get";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import {
+  Grid,
+  ActionIcon,
+  Avatar,
+  Stack,
+  Group,
+  Badge,
+  Text,
+} from "@mantine/core";
+import { Prisma } from "@prisma/client";
+import moment from "moment";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+type IFontSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+function ComponentEvent_AvatarAndUsername({
+  profile,
+  component,
+  sizeAvatar,
+  fontSize,
+  tanggalMulai,
+  tanggalSelesai,
+  isPresent,
+}: {
+  profile: Prisma.ProfileSelect;
+  component?: React.ReactNode;
+  sizeAvatar?: number;
+  fontSize?: IFontSize | {};
+  tanggalMulai?: Date;
+  tanggalSelesai?: Date;
+  isPresent?: boolean;
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+
+  async function onCheckProfile() {
+    const res = await funGlobal_CheckProfile({ profileId: profile.id as any });
+
+    if (res !== null) {
+      setVisible(true);
+      router.push(RouterProfile.katalog({ id: profile.id as any }));
+    } else {
+      ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+    }
+  }
+
+  const tglMulai = moment(tanggalMulai).diff(moment(), "minutes") < 0;
+
+  return (
+    <>
+      <ComponentGlobal_CardStyles marginBottom={"15px"}>
+        <ComponentGlobal_AvatarAndUsername
+          profile={profile}
+          component={
+            tglMulai && (
+              <Group position="right">
+                <Stack justify="center" h={30}>
+                  <Text fw={"bold"} fz={fontSize ? fontSize : "md"}>
+                    {isPresent ? (
+                      <Badge color="green">Hadir</Badge>
+                    ) : (
+                      <Badge>-</Badge>
+                    )}
+                  </Text>
+                </Stack>
+              </Group>
+            )
+          }
+        />
+      </ComponentGlobal_CardStyles>
+    </>
+  );
+}
+
+export default ComponentEvent_AvatarAndUsername;
diff --git a/src/app_modules/event/detail/main_detail/index.tsx b/src/app_modules/event/detail/main_detail/index.tsx
index d0146c6a..9bef481e 100644
--- a/src/app_modules/event/detail/main_detail/index.tsx
+++ b/src/app_modules/event/detail/main_detail/index.tsx
@@ -39,7 +39,6 @@ export default function Event_DetailMain({
       });
 
       if (respone) {
-        console.log(respone.data)
         setIsJoinSuccess(respone.data);
       }
     } catch (error) {
diff --git a/src/app_modules/event/detail/peserta/index.tsx b/src/app_modules/event/detail/peserta/index.tsx
index 928f4f18..a14fc534 100644
--- a/src/app_modules/event/detail/peserta/index.tsx
+++ b/src/app_modules/event/detail/peserta/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Stack } from "@mantine/core";
+import { Stack, Loader, Center } from "@mantine/core";
 import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
 import { MODEL_EVENT_PESERTA } from "../../model/interface";
 import { useParams } from "next/navigation";
@@ -9,6 +9,10 @@ import { useShallowEffect } from "@mantine/hooks";
 import { apiGetEventPesertaById } from "../../_lib/api_event";
 import { useState } from "react";
 import { clientLogger } from "@/util/clientLogger";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { ScrollOnly } from "next-scroll-loader";
+import ComponentEvent_AvatarAndUsername from "../../component/detail/comp_avatar_and_username_event";
+import { ComponentGlobal_AvatarAndUsername } from "@/app_modules/_global/component";
 
 // function Event_DaftarPeserta({ totalPeserta, eventId, isNewPeserta }: {
 //   totalPeserta?: number;
@@ -33,7 +37,6 @@ function Event_DaftarPeserta() {
       });
 
       if (respone) {
-        console.log(respone.data);
         setData(respone.data);
       }
     } catch (error) {
@@ -41,10 +44,58 @@ function Event_DaftarPeserta() {
     }
   }
 
+  if (!data) {
+    return (
+      <>
+        <Stack>
+          <CustomSkeleton height={70} width={"100%"} />
+          <CustomSkeleton height={70} width={"100%"} />
+        </Stack>
+      </>
+    );
+  }
+
   return (
     <>
       <Stack>
-        <ComponentEvent_ListPesertaNew />
+        <ScrollOnly
+          height="90vh"
+          renderLoading={() => (
+            <Center mt={"lg"}>
+              <Loader color={"yellow"} />
+            </Center>
+          )}
+          data={data}
+          setData={setData as any}
+          moreData={async () => {
+            try {
+              const respone = await apiGetEventPesertaById({
+                id: params.id,
+                page: `${activePage + 1}`,
+              });
+
+              if (respone) {
+                setActivePage((val) => val + 1);
+
+                return respone.data;
+              }
+            } catch (error) {
+              clientLogger.error("Error get data peserta:", error);
+            }
+          }}
+        >
+          {(item) => (
+            <ComponentEvent_AvatarAndUsername
+              profile={item?.User?.Profile as any}
+              sizeAvatar={30}
+              fontSize={"sm"}
+              tanggalMulai={item?.Event?.tanggal}
+              tanggalSelesai={item?.Event?.tanggalSelesai}
+              isPresent={item?.isPresent}
+            />
+          )}
+        </ScrollOnly>
+
         {/* <ComponentEvent_ListPeserta eventId={params.id} total={totalPeserta as any} isNewPeserta={isNewPeserta} /> */}
       </Stack>
     </>