Fix event

Deskripsi:
- Fix user server menjadi API di beranda

next.config.js

@@ -4,6 +4,7 @@ const nextConfig = {
   experimental: {
     serverActions: true,
   },
+  output: "standalone"
 };
 
 module.exports = nextConfig;

src/app/api/event/check-peserta/route.ts

@@ -0,0 +1,15 @@
+import { event_funCheckPesertaByUserId } from "@/app_modules/event/fun";
+import { NextResponse } from "next/server";
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const userId = searchParams.get("userId");
+  const eventId = searchParams.get("eventId");
+
+  const res = await event_funCheckPesertaByUserId({
+    eventId: eventId as string,
+    userId: userId as string,
+  });
+
+  return NextResponse.json(res, { status: 200 });
+}

src/app/api/event/list-peserta/route.ts

@@ -0,0 +1,16 @@
+import { event_newGetListPesertaById } from "@/app_modules/event/fun";
+import { toNumber } from "lodash";
+import { NextResponse } from "next/server";
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const eventId = searchParams.get("eventId");
+  const page = searchParams.get("page");
+  
+  const res = await event_newGetListPesertaById({
+    eventId: eventId as string,
+    page: toNumber(page),
+  });
+
+  return NextResponse.json(res, { status: 200 });
+}

src/app/dev/event/detail/kontribusi/[id]/page.tsx

@@ -11,8 +11,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   return (
     <>
       <Event_DetailKontribusi
-        dataEvent={dataEvent as any}
+        eventId={eventId}
-        listKontributor={listKontributor as any}
         totalPeserta={totalPeserta}
       />
     </>

src/app/dev/event/detail/main/[id]/page.tsx

@@ -1,27 +1,18 @@
-import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import { newFunGetUserId } from "@/app/lib/new_fun_user_id";
 import { Event_DetailMain } from "@/app_modules/event";
 import { Event_countTotalPesertaById } from "@/app_modules/event/fun/count/count_total_peserta_by_id";
-import { Event_CekUserJoinById } from "@/app_modules/event/fun/get/cek_user_join_by_id";
-import { Event_getListPesertaById } from "@/app_modules/event/fun/get/get_list_peserta_by_id";
-import { event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let eventId = params.id;
-  const userLoginId  : any= await funGetUserIdByToken();
+  const userLoginId = await newFunGetUserId();
-
-  const dataEvent = await event_getOneById(eventId);
-  const listPeserta = await Event_getListPesertaById(eventId);
-  const isJoin = await Event_CekUserJoinById(eventId, userLoginId);
   const totalPeserta = await Event_countTotalPesertaById(eventId);
 
   return (
     <>
       <Event_DetailMain
-        dataEvent={dataEvent as any}
-        listPeserta={listPeserta as any}
         userLoginId={userLoginId as string}
-        isJoin={isJoin}
         totalPeserta={totalPeserta as any}
+        eventId={eventId}
       />
     </>
   );

src/app/dev/event/detail/publish/[id]/page.tsx

@@ -6,15 +6,14 @@ import { event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
 export default async function Page({ params }: { params: { id: string } }) {
   let eventId = params.id;
   const dataEvent = await event_getOneById(eventId);
-  const listPeserta = await Event_getListPesertaById(eventId);
   const totalPeserta = await Event_countTotalPesertaById(eventId);
 
 
   return (
     <Event_DetailPublish
       dataEvent={dataEvent as any}
-      listPeserta={listPeserta}
       totalPeserta={totalPeserta}
+      eventId={eventId}
     />
   );
 }

src/app/dev/event/detail/riwayat/[id]/page.tsx

@@ -1,21 +1,15 @@
-
 import { Event_DetailRiwayat } from "@/app_modules/event";
 import { Event_countTotalPesertaById } from "@/app_modules/event/fun/count/count_total_peserta_by_id";
-import { Event_getListPesertaById } from "@/app_modules/event/fun/get/get_list_peserta_by_id";
-import { event_getOneById } from "@/app_modules/event/fun/get/get_one_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let eventId = params.id;
-  const dataEvent = await event_getOneById(eventId);
-  const listPeserta = await Event_getListPesertaById(eventId);
   const totalPeserta = await Event_countTotalPesertaById(eventId);
 
   return (
     <>
       <Event_DetailRiwayat
-        dataEvent={dataEvent as any}
-        listPeserta={listPeserta as any}
         totalPeserta={totalPeserta as any}
+        eventId={eventId}
       />
     </>
   );

src/app/dev/event/konfirmasi/[id]/page.tsx

@@ -1,3 +1,4 @@
+import { newFunGetUserId } from "@/app/lib/new_fun_user_id";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import Ui_Konfirmasi from "@/app_modules/event/_ui/konfirmasi";
 import { event_funCheckPesertaByUserId } from "@/app_modules/event/fun";
@@ -11,33 +12,11 @@ export default async function Page({
   params: Promise<{ id: string }>;
 }) {
   const eventId = (await params).id;
-
+  const userLoginId = await newFunGetUserId();
-
-  // const userLoginId = await funGetUserIdByToken();
-
-  // const checkPeserta = await event_funCheckPesertaByUserId({
-  //   eventId: eventId,
-  //   userId: userLoginId as string,
-  // });
-
-  // if (dataEvent == null) return redirect("/dev/event/main/beranda");
-
-  // if (moment(dataEvent?.tanggal).diff(moment(), "minutes") > 0)
-  //   return redirect("/dev/event/main/beranda");
-
-  // if (dataEvent?.isArsip)
-  //   return redirect(`/dev/event/detail/riwayat/${dataEvent.id}`);
-
-  // if (checkPeserta == false)
-  //   return redirect(`/dev/event/detail/main/${eventId}`);
-
-  //   if (checkKehadiran) {
-  //     return redirect(`/dev/event/main/beranda`);
-  //   }
 
   return (
     <>
-      <Ui_Konfirmasi userLoginId={"" as string} eventId={eventId} />
+      <Ui_Konfirmasi userLoginId={userLoginId as string} eventId={eventId} />
     </>
   );
 }

src/app/lib/api_user_router/route_api_event.ts

@@ -4,4 +4,7 @@ export const API_RouteEvent = {
     `/api/event/get-one-by-id?eventId=${eventId}`,
   check_kehadiran: ({ eventId, userId }: { eventId: string; userId: string }) =>
     `/api/event/check-kehadiran?eventId=${eventId}&userId=${userId}`,
+  check_peserta: ({ eventId, userId }: { eventId: string; userId: string }) =>
+    `/api/event/check-peserta?eventId=${eventId}&userId=${userId}`,
+  list_peserta: ({ eventId, page }: { eventId: string, page: number }) => `/api/event/list-peserta?eventId=${eventId}&page=${page}`,
 };

src/app_modules/event/_ui/konfirmasi.tsx

@@ -31,6 +31,8 @@ import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import moment from "moment";
 import { gs_event_hotMenu } from "../global_state";
 import { useAtom } from "jotai";
+import { Event_funJoinEvent } from "../fun/create/fun_join_event";
+import { Event_funJoinAndConfirmEvent } from "../fun/create/fun_join_and_confirm";
 
 export default function Ui_Konfirmasi({
   userLoginId,
@@ -43,6 +45,7 @@ export default function Ui_Konfirmasi({
 
   const router = useRouter();
   const [data, setData] = useState<MODEL_EVENT | null>(null);
+  const [isJoin, setIsJoin] = useState<boolean | null>(null);
   const [isPresent, setIsPresent] = useState<boolean | null>(null);
 
   useShallowEffect(() => {
@@ -54,10 +57,24 @@ export default function Ui_Konfirmasi({
       API_RouteEvent.get_one_by_id({ eventId: eventId })
     );
     const res = await data.json();
-    console.log(res.data, "data event");
     setData(res.data);
   }
 
+  //  CEK PESERTA
+  useShallowEffect(() => {
+    onCheckPeserta();
+  }, []);
+
+  async function onCheckPeserta() {
+    const res = await fetch(
+      API_RouteEvent.check_peserta({ eventId: eventId, userId: userLoginId })
+    );
+    const data = await res.json();
+    console.log("cek peserta", data);
+    setIsJoin(data);
+  }
+
+  // CEK KEHADIRAN
   useShallowEffect(() => {
     onLoadKehadiran();
   }, []);
@@ -67,7 +84,6 @@ export default function Ui_Konfirmasi({
       API_RouteEvent.check_kehadiran({ eventId: eventId, userId: userLoginId })
     );
     const data = await res.json();
-
     setIsPresent(data);
   }
 
@@ -94,6 +110,18 @@ export default function Ui_Konfirmasi({
     );
   }
 
+  if (isJoin == false) {
+    return (
+      <>
+        <UserNotJoin
+          title={data?.title}
+          eventId={eventId}
+          userLoginId={userLoginId}
+        />
+      </>
+    );
+  }
+
   if (isPresent && data) {
     return <UserAlreadyConfirm title={data.title} />;
   }
@@ -177,6 +205,77 @@ function SkeletonIsDataNull() {
   );
 }
 
+function UserNotJoin({
+  title,
+  eventId,
+  userLoginId,
+}: {
+  title: string;
+  eventId: string;
+  userLoginId: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+  async function onJoinAndKonfirmasi() {
+    setLoading(true);
+
+    const body = {
+      eventId: eventId,
+      userId: userLoginId,
+    };
+
+    const res = await Event_funJoinAndConfirmEvent(body as any);
+
+    if (res.status === 200) {
+      ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+      router.push(RouterEvent.detail_main + eventId);
+    } else {
+      setLoading(false);
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  }
+  return (
+    <>
+      <UIGlobal_LayoutDefault>
+        <Stack h={"100vh"} justify="center">
+          <ComponentGlobal_CardStyles>
+            <Stack align="center" justify="center">
+              <Text align="center">
+                Halo, Bapak/Ibu. Kami mencatat bahwa Anda belum melakukan
+                registrasi melalui aplikasi untuk mengikuti acara{" "}
+                <Text inherit span fw={"bold"}>
+                  {title}.
+                </Text>{" "}
+                Mohon segera lakukan registrasi melalui Event App agar dapat
+                mengikuti acara ini. Jika membutuhkan bantuan, jangan ragu untuk
+                menghubungi tim kami. Terima kasih Terima kasih atas kehadiran
+                Anda di acara pada hari ini. Mohon untuk mengonfirmasi kehadiran
+                Anda dengan menekan tombol {"Join & Konfirmasi"}
+                atau fitur konfirmasi yang tersedia di bawah. Terima kasih dan
+                selamat menikmati acara.
+              </Text>
+
+              <Button
+                loading={isLoading}
+                loaderPosition="center"
+                radius={"xs"}
+                bg={MainColor.yellow}
+                color="yellow"
+                c={"black"}
+                onClick={() => {
+                  onJoinAndKonfirmasi();
+                }}
+              >
+                Join & Konfirmasi
+              </Button>
+            </Stack>
+          </ComponentGlobal_CardStyles>
+        </Stack>
+      </UIGlobal_LayoutDefault>
+    </>
+  );
+}
+
 function EventAlreadyDone({
   title,
   eventId,

src/app_modules/event/component/detail/detail_main.tsx

@@ -4,104 +4,110 @@ import {
   ComponentGlobal_AvatarAndUsername,
   ComponentGlobal_CardStyles,
 } from "@/app_modules/_global/component";
-import { Grid, Stack, Text, Title } from "@mantine/core";
+import { Center, Grid, Skeleton, Stack, Text, Title } from "@mantine/core";
 import { MODEL_EVENT } from "../../model/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import { API_RouteEvent } from "@/app/lib/api_user_router/route_api_event";
+import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail";
+import moment from "moment";
+import "moment/locale/id";
 
 export default function ComponentEvent_DetailMainData({
-  data,
+  eventId,
 }: {
-  data: MODEL_EVENT;
+  eventId: string;
 }) {
-  const tgl = data.tanggal;
+  const [data, setData] = useState<MODEL_EVENT | null>(null);
-  const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });
 
-  const jam = tgl.toLocaleTimeString([], {
+  useShallowEffect(() => {
-    timeStyle: "short",
+    onLoadData();
-    hourCycle: "h24",
+  }, []);
-  });
+
+  async function onLoadData() {
+    const data = await fetch(
+      API_RouteEvent.get_one_by_id({ eventId: eventId })
+    );
+    const res = await data.json();
+    setData(res.data);
+  }
 
   return (
     <>
-      <ComponentGlobal_CardStyles>
+      {data == null ? (
-        <Stack px={"xs"} spacing={"xl"}>
+        <Event_ComponentSkeletonDetail />
-          <ComponentGlobal_AvatarAndUsername
+      ) : (
-            profile={data?.Author?.Profile as any}
+        <ComponentGlobal_CardStyles>
-          />
+          <Stack px={"xs"} spacing={"xl"}>
+            <ComponentGlobal_AvatarAndUsername
+              profile={data?.Author?.Profile as any}
+            />
 
-          <Stack spacing={"xl"}>
+            <Stack spacing={"xl"}>
-            <Title align="center" order={4}>
+              <Title align="center" order={4}>
-              {data ? data.title : null}
+                {data ? data.title : null}
-            </Title>
+              </Title>
-            <Grid>
-              <Grid.Col span={4}>
-                <Text fw={"bold"}>Lokasi</Text>
-              </Grid.Col>
-              <Grid.Col span={1}>:</Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{data ? data.lokasi : null}</Text>
-              </Grid.Col>
-            </Grid>
-            <Grid>
-              <Grid.Col span={4}>
-                <Text fw={"bold"}>Tipe Acara</Text>
-              </Grid.Col>
-              <Grid.Col span={1}>:</Grid.Col>
-              <Grid.Col span={"auto"}>
-                <Text>{data ? data.EventMaster_TipeAcara.name : null}</Text>
-              </Grid.Col>
-            </Grid>
-
-            <Stack spacing={"xs"}>
-              <Text fw={"bold"}>Tanggal & Waktu</Text>
               <Grid>
                 <Grid.Col span={4}>
-                  <Text fw={"bold"}>Mulai</Text>
+                  <Text fw={"bold"}>Lokasi</Text>
                 </Grid.Col>
                 <Grid.Col span={1}>:</Grid.Col>
                 <Grid.Col span={"auto"}>
-                  <Text>
+                  <Text>{data ? data.lokasi : null}</Text>
-                    {" "}
-                    {new Intl.DateTimeFormat("id-ID", {
-                      dateStyle: "full",
-                    }).format(data?.tanggal)}
-                    ,{" "}
-                    <Text span inherit>
-                      {new Intl.DateTimeFormat("id-ID", {
-                        timeStyle: "short",
-                      }).format(data?.tanggal)}
-                    </Text>
-                  </Text>
                 </Grid.Col>
               </Grid>
               <Grid>
                 <Grid.Col span={4}>
-                  <Text fw={"bold"}>Selesai</Text>
+                  <Text fw={"bold"}>Tipe Acara</Text>
                 </Grid.Col>
                 <Grid.Col span={1}>:</Grid.Col>
                 <Grid.Col span={"auto"}>
-                  <Text>
+                  <Text>{data ? data.EventMaster_TipeAcara.name : null}</Text>
-                    {" "}
-                    {new Intl.DateTimeFormat("id-ID", {
-                      dateStyle: "full",
-                    }).format(data?.tanggalSelesai)}
-                    ,{" "}
-                    <Text span inherit>
-                      {new Intl.DateTimeFormat("id-ID", {
-                        timeStyle: "short",
-                      }).format(data?.tanggalSelesai)}
-                    </Text>
-                  </Text>
                 </Grid.Col>
               </Grid>
-            </Stack>
 
-            <Stack spacing={2}>
+              <Stack spacing={"xs"}>
-              <Text fw={"bold"}>Deskripsi</Text>
+                <Text fw={"bold"}>Tanggal & Waktu</Text>
-              <Text>{data ? data?.deskripsi : null}</Text>
+                <Grid>
+                  <Grid.Col span={4}>
+                    <Text fw={"bold"}>Mulai</Text>
+                  </Grid.Col>
+                  <Grid.Col span={1}>:</Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Text>
+                      {moment(
+                        data.tanggal?.toLocaleString("id-ID", {
+                          dateStyle: "full",
+                        })
+                      ).format("dddd, DD MMMM YYYY, LT")}
+                    </Text>
+                  </Grid.Col>
+                </Grid>
+                <Grid>
+                  <Grid.Col span={4}>
+                    <Text fw={"bold"}>Selesai</Text>
+                  </Grid.Col>
+                  <Grid.Col span={1}>:</Grid.Col>
+                  <Grid.Col span={"auto"}>
+                    <Text>
+                      {moment(
+                        data.tanggalSelesai?.toLocaleString("id-ID", {
+                          dateStyle: "full",
+                        })
+                      ).format("dddd, DD MMMM YYYY, LT")}
+                    </Text>
+                  </Grid.Col>
+                </Grid>
+              </Stack>
+
+              <Stack spacing={2}>
+                <Text fw={"bold"}>Deskripsi</Text>
+                <Text>{data ? data?.deskripsi : null}</Text>
+              </Stack>
             </Stack>
           </Stack>
-        </Stack>
+        </ComponentGlobal_CardStyles>
-      </ComponentGlobal_CardStyles>
+      )}
     </>
   );
 }

src/app_modules/event/component/detail/list_peserta.tsx

@@ -6,6 +6,7 @@ import {
   Center,
   Grid,
   Group,
+  Skeleton,
   Stack,
   Text,
   Title,
@@ -26,55 +27,78 @@ import { funGlobal_CheckProfile } from "@/app_modules/_global/fun/get";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { useState } from "react";
 import moment from "moment";
+import { useShallowEffect } from "@mantine/hooks";
+import { API_RouteEvent } from "@/app/lib/api_user_router/route_api_event";
+import Event_ComponentSkeletonListPeserta from "../skeleton/comp_skeleton_list_peserta";
 
 export default function ComponentEvent_ListPeserta({
-  listPeserta,
   total,
+  eventId,
+  isNewPeserta,
 }: {
-  listPeserta: MODEL_EVENT_PESERTA[];
   total: number;
+  eventId: string;
+  isNewPeserta?: boolean | null;
 }) {
   const router = useRouter();
+  const [data, setData] = useState<MODEL_EVENT_PESERTA[] | null>(null);
+
+  useShallowEffect(() => {
+    onLoadPeserta();
+  }, []);
+
+  useShallowEffect(() => {
+    if (isNewPeserta !== null && isNewPeserta === true) {
+      onLoadPeserta();
+    }
+  }, [isNewPeserta]);
+
+  async function onLoadPeserta() {
+    const res = await fetch(
+      API_RouteEvent.list_peserta({ eventId: eventId, page: 1 })
+    );
+    const data = await res.json();
+    setData(data);
+  }
+
   return (
     <>
-      <ComponentGlobal_CardStyles>
+      {data === null ? (
-        <Stack spacing={"md"} px={"sm"}>
+        <Event_ComponentSkeletonListPeserta />
-          <Center>
+      ) : (
-            <Title order={5}>Daftar Peserta ({total})</Title>
+        <ComponentGlobal_CardStyles>
-          </Center>
+          <Stack spacing={"md"} px={"sm"}>
-
-          {_.isEmpty(listPeserta) ? (
             <Center>
-              <Text fz={"xs"} fw={"bold"}>
+              <Title order={5}>Daftar Peserta ({total})</Title>
-                - Tidak ada peserta -
-              </Text>
             </Center>
-          ) : (
-            <Stack>
-              {listPeserta.map((e, i) => (
-                <Stack key={i} spacing={"sm"}>
-                  {/* <ComponentGlobal_AvatarAndUsername
-                    profile={e?.User?.Profile as any}
-                    sizeAvatar={30}
-                    fontSize={"sm"}
 
-                  /> */}
+            {_.isEmpty(data) ? (
-                  <ComponentEvent_AvatarAndUsername
+              <Center>
-                    profile={e?.User?.Profile as any}
+                <Text fz={"xs"} fw={"bold"}>
-                    sizeAvatar={30}
+                  - Tidak ada peserta -
-                    fontSize={"sm"}
+                </Text>
-                    tanggalMulai={e?.Event?.tanggal}
+              </Center>
-                    tanggalSelesai={e?.Event?.tanggalSelesai}
+            ) : (
-                    isPresent={e?.isPresent}
+              <Stack>
-                  />
+                {data.map((e, i) => (
+                  <Stack key={i} spacing={"sm"}>
+                    <ComponentEvent_AvatarAndUsername
+                      profile={e?.User?.Profile as any}
+                      sizeAvatar={30}
+                      fontSize={"sm"}
+                      tanggalMulai={e?.Event?.tanggal}
+                      tanggalSelesai={e?.Event?.tanggalSelesai}
+                      isPresent={e?.isPresent}
+                    />
 
-                  {/* <Divider /> */}
+                    {/* <Divider /> */}
-                </Stack>
+                  </Stack>
-              ))}
+                ))}
-            </Stack>
+              </Stack>
-          )}
+            )}
-        </Stack>
+          </Stack>
-      </ComponentGlobal_CardStyles>
+        </ComponentGlobal_CardStyles>
+      )}
     </>
   );
 }

src/app_modules/event/component/index.ts

@@ -1,7 +1,11 @@
 import Event_ComponentCreateButton from "./button/button_create_event";
 import Event_ComponentSkeletonBeranda from "./skeleton/comp_skeleton_beranda";
+import { Event_ComponentSkeletonDetail } from "./skeleton/comp_skeleton_detail";
 import { Event_ComponentSkeletonDetailData } from "./skeleton/comp_skeleton_detail_data";
+import Event_ComponentSkeletonListPeserta from "./skeleton/comp_skeleton_list_peserta";
 
 export { Event_ComponentSkeletonDetailData };
 export { Event_ComponentCreateButton };
 export { Event_ComponentSkeletonBeranda };
+export { Event_ComponentSkeletonDetail };
+export { Event_ComponentSkeletonListPeserta };

src/app_modules/event/component/skeleton/comp_skeleton_detail.tsx

@@ -0,0 +1,36 @@
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Stack, Center, Skeleton, Grid } from "@mantine/core";
+
+export function Event_ComponentSkeletonDetail() {
+  return (
+    <>
+      <ComponentGlobal_CardStyles>
+        <Stack>
+          <Grid align="center">
+            <Grid.Col span={"content"}>
+              <Skeleton radius={"100%"} h={50} w={50} />
+            </Grid.Col>
+            <Grid.Col span={"auto"}>
+              <Skeleton h={20} w={"50%"} />
+            </Grid.Col>
+          </Grid>
+        </Stack>
+        <Stack spacing={"xl"}>
+          <Center>
+            <Skeleton h={20} w={"50%"} />
+          </Center>
+          <Skeleton h={20} w={"100%"} />
+          <Skeleton h={20} w={"100%"} />
+          <Skeleton h={20} w={"50%"} />
+          <Skeleton h={20} w={"100%"} />
+          <Skeleton h={20} w={"100%"} />
+          <Stack>
+            <Skeleton h={20} w={"50%"} />
+            <Skeleton h={20} w={"100%"} />
+            <Skeleton h={20} w={"100%"} />
+          </Stack>
+        </Stack>
+      </ComponentGlobal_CardStyles>
+    </>
+  );
+}

src/app_modules/event/component/skeleton/comp_skeleton_list_peserta.tsx

@@ -0,0 +1,32 @@
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Stack, Center, Skeleton, Grid } from "@mantine/core";
+
+export default function Event_ComponentSkeletonListPeserta() {
+  return (
+    <>
+      <ComponentGlobal_CardStyles>
+        <Stack spacing={"lg"}>
+          <Center>
+            <Skeleton height={20} width={"50%"} />
+          </Center>
+
+          <Stack>
+            {Array.from(new Array(3)).map((e, i) => (
+              <Grid key={i} align="center">
+                <Grid.Col span={"content"}>
+                  <Skeleton radius={"100%"} h={30} w={30} />
+                </Grid.Col>
+                <Grid.Col span={"auto"}>
+                  <Skeleton h={20} w={"50%"} />
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Skeleton h={20} w={"50%"} />
+                </Grid.Col>
+              </Grid>
+            ))}
+          </Stack>
+        </Stack>
+      </ComponentGlobal_CardStyles>
+    </>
+  );
+}

src/app_modules/event/detail/kontribusi/index.tsx

@@ -3,25 +3,19 @@
 import { Stack } from "@mantine/core";
 import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
 import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
-import { MODEL_EVENT, MODEL_EVENT_PESERTA } from "../../model/interface";
 
 export default function Event_DetailKontribusi({
-  dataEvent,
+  eventId,
-  listKontributor,
   totalPeserta,
 }: {
-  dataEvent: MODEL_EVENT;
+  eventId: string;
-  listKontributor: MODEL_EVENT_PESERTA[];
   totalPeserta: number;
 }) {
   return (
     <>
       <Stack spacing={"lg"} mb={"md"}>
-        <ComponentEvent_DetailMainData data={dataEvent} />
+        <ComponentEvent_DetailMainData eventId={eventId} />
-        <ComponentEvent_ListPeserta
+        <ComponentEvent_ListPeserta eventId={eventId} total={totalPeserta} />
-          listPeserta={listKontributor}
-          total={totalPeserta}
-        />
       </Stack>
     </>
   );

src/app_modules/event/detail/main_detail/index.tsx

@@ -1,11 +1,12 @@
 "use client";
 
+import { API_RouteEvent } from "@/app/lib/api_user_router/route_api_event";
 import { IRealtimeData } from "@/app/lib/global_state";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
-import { Button, Stack } from "@mantine/core";
+import { Button, Skeleton, Stack } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
 import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
@@ -13,31 +14,43 @@ import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
 import { Event_countTotalPesertaById } from "../../fun/count/count_total_peserta_by_id";
 import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
 import { Event_getListPesertaById } from "../../fun/get/get_list_peserta_by_id";
-import { MODEL_EVENT, MODEL_EVENT_PESERTA } from "../../model/interface";
 
 export default function Event_DetailMain({
-  dataEvent,
-  listPeserta,
   userLoginId,
-  isJoin,
   totalPeserta,
+  eventId,
 }: {
-  dataEvent: MODEL_EVENT;
-  listPeserta: MODEL_EVENT_PESERTA[];
   userLoginId: string;
-  isJoin: boolean;
   totalPeserta: number;
+  eventId: string;
 }) {
-  const router = useRouter();
   const [total, setTotal] = useState(totalPeserta);
-  const [peserta, setPeserta] = useState(listPeserta);
   const [isLoading, setLoading] = useState(false);
+  const [isJoinSuccess, setIsJoinSuccess] = useState<boolean | null>(null);
+  const [isNewPeserta, setIsNewPeserta] = useState<boolean | null>(null);
+
+  useShallowEffect(() => {
+    onCheckPeserta();
+  }, []);
+
+  async function onCheckPeserta() {
+    const res = await fetch(
+      API_RouteEvent.check_peserta({ eventId: eventId, userId: userLoginId })
+    );
+    const data = await res.json();
+    setIsJoinSuccess(data);
+  }
 
   return (
     <>
       <Stack spacing={"lg"} pb={"md"}>
-        <ComponentEvent_DetailMainData data={dataEvent} />
+        <ComponentEvent_DetailMainData
-        {isJoin ? (
+          eventId={eventId}
+        />
+
+        {isJoinSuccess == null ? (
+          <Skeleton radius={"xl"} h={40} />
+        ) : isJoinSuccess ? (
           <Button disabled radius={"xl"} color="green">
             Anda Telah Ikut Serta
           </Button>
@@ -50,10 +63,11 @@ export default function Event_DetailMain({
             onClick={() => {
               onJoin(
                 userLoginId,
-                dataEvent.id,
+                eventId,
-                setPeserta,
                 setTotal,
-                setLoading
+                setLoading,
+                setIsJoinSuccess,
+                setIsNewPeserta
               );
             }}
           >
@@ -61,7 +75,11 @@ export default function Event_DetailMain({
           </Button>
         )}
 
-        <ComponentEvent_ListPeserta listPeserta={listPeserta} total={total} />
+        <ComponentEvent_ListPeserta
+          total={total}
+          eventId={eventId}
+          isNewPeserta={isNewPeserta}
+        />
       </Stack>
     </>
   );
@@ -70,9 +88,11 @@ export default function Event_DetailMain({
 async function onJoin(
   userId: string,
   eventId: string,
-  setPeserta: any,
   setTotal: any,
-  setLoading: any
+  setLoading: any,
+  setIsJoinSuccess: (val: boolean | null) => void,
+  setIsNewPeserta: any
+
 ) {
   const body = {
     userId: userId,
@@ -84,7 +104,7 @@ async function onJoin(
   const res = await Event_funJoinEvent(body as any);
   if (res.status === 200) {
     const resPeserta = await Event_getListPesertaById(eventId);
-    setPeserta(resPeserta);
+    setIsNewPeserta(true);
 
     const resTotal = await Event_countTotalPesertaById(eventId);
     setTotal(resTotal);
@@ -111,7 +131,7 @@ async function onJoin(
         });
       }
     }
-
+    setIsJoinSuccess(true);
     setLoading(true);
     ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
   } else {

src/app_modules/event/detail/publish/index.tsx

@@ -6,20 +6,17 @@ import { MODEL_EVENT } from "../../model/interface";
 
 export default function Event_DetailPublish({
   dataEvent,
-  listPeserta,
   totalPeserta,
+  eventId,
 }: {
   dataEvent: MODEL_EVENT;
-  listPeserta: any[];
   totalPeserta: number;
+  eventId: string;
 }) {
   return (
     <>
       <ComponentEvent_DetailData data={dataEvent} />
-      <ComponentEvent_ListPeserta
+      <ComponentEvent_ListPeserta eventId={eventId} total={totalPeserta} />
-        listPeserta={listPeserta}
-        total={totalPeserta}
-      />
     </>
   );
 }

src/app_modules/event/detail/riwayat/index.tsx

@@ -1,63 +1,27 @@
 "use client";
 
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { Stack } from "@mantine/core";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import {
-  Stack
-} from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
 import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
-import { Event_countTotalPesertaById } from "../../fun/count/count_total_peserta_by_id";
-import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
-import { Event_getListPesertaById } from "../../fun/get/get_list_peserta_by_id";
-import { MODEL_EVENT, MODEL_EVENT_PESERTA } from "../../model/interface";
 
 export default function Event_DetailRiwayat({
-  dataEvent,
-  listPeserta,
   totalPeserta,
+  eventId,
 }: {
-  dataEvent: MODEL_EVENT;
-  listPeserta: MODEL_EVENT_PESERTA[];
   totalPeserta: number;
+  eventId: string;
 }) {
   const router = useRouter();
   const [total, setTotal] = useState(totalPeserta);
-  const [peserta, setPeserta] = useState(listPeserta);
+
   return (
     <>
       <Stack spacing={"lg"} py={"md"}>
-        <ComponentEvent_DetailMainData data={dataEvent} />
+        <ComponentEvent_DetailMainData eventId={eventId} />
-        <ComponentEvent_ListPeserta listPeserta={listPeserta} total={total} />
+        <ComponentEvent_ListPeserta eventId={eventId} total={total} />
       </Stack>
     </>
   );
 }
-
-async function onJoin(
-  userId: string,
-  eventId: string,
-  setPeserta: any,
-  setTotal: any
-) {
-  const body = {
-    userId: userId,
-    eventId: eventId,
-  };
-
-  await Event_funJoinEvent(body as any).then(async (res) => {
-    if (res.status === 200) {
-      await Event_getListPesertaById(eventId).then(async (val) => {
-        await Event_countTotalPesertaById(eventId).then((ttl) => {
-          setPeserta(val);
-          setTotal(ttl);
-          ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
-        });
-      });
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}

src/app_modules/event/fun/create/fun_join_and_confirm.ts

@@ -0,0 +1,23 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { MODEL_EVENT_PESERTA } from "../../model/interface";
+import { revalidatePath } from "next/cache";
+
+export async function Event_funJoinAndConfirmEvent(data: MODEL_EVENT_PESERTA) {
+  const join = await prisma.event_Peserta.create({
+    data: {
+      eventId: data.eventId,
+      userId: data.userId,
+      isPresent: true,
+    },
+  });
+
+  if (!join) return { status: 400, message: "Gagal Join & Konfirmasi" };
+
+  revalidatePath("/dev/event/detail/main");
+  return {
+    status: 200,
+    message: "Berhasil Join & Konfirmasi",
+  };
+}

src/app_modules/event/fun/get/new_get_list_peserta.ts

@@ -0,0 +1,43 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function event_newGetListPesertaById({
+  eventId,
+  page,
+}: {
+  eventId: string;
+  page: number;
+}) {
+  const takeData = 10;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.event_Peserta.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      updatedAt: "desc",
+    },
+    where: {
+      eventId: eventId,
+    },
+    select: {
+      id: true,
+      active: true,
+      createdAt: true,
+      updatedAt: true,
+      userId: true,
+
+      isPresent: true,
+      User: {
+        select: {
+          Profile: true,
+        },
+      },
+      Event: true,
+      eventId: true,
+    },
+  });
+
+  return data;
+}

src/app_modules/event/fun/index.ts

@@ -1,6 +1,7 @@
 import { event_funUpdateKehadiran } from "./edit/fun_update_konfirmasi_by_user_id";
 import { event_funCheckKehadiran } from "./get/fun_check_kehadiran";
 import { event_funCheckPesertaByUserId } from "./get/fun_check_peserta_by_user_id";
+import { event_newGetListPesertaById } from "./get/new_get_list_peserta";
 import { event_getAllByStatusId } from "./get/status/get_all_by_status_id";
 import { event_getMasterStatus } from "./master/get_status_event";
 
@@ -9,3 +10,4 @@ export { event_getMasterStatus };
 export { event_funCheckPesertaByUserId };
 export { event_funUpdateKehadiran };
 export { event_funCheckKehadiran };
+export { event_newGetListPesertaById };