Fix event

Deskripsi:
- Fix user server menjadi API di beranda

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 hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });
+  const [data, setData] = useState<MODEL_EVENT | null>(null);
 
-  const jam = tgl.toLocaleTimeString([], {
-    timeStyle: "short",
-    hourCycle: "h24",
-  });
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  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>
-        <Stack px={"xs"} spacing={"xl"}>
-          <ComponentGlobal_AvatarAndUsername
-            profile={data?.Author?.Profile as any}
-          />
+      {data == null ? (
+        <Event_ComponentSkeletonDetail />
+      ) : (
+        <ComponentGlobal_CardStyles>
+          <Stack px={"xs"} spacing={"xl"}>
+            <ComponentGlobal_AvatarAndUsername
+              profile={data?.Author?.Profile as any}
+            />
 
-          <Stack spacing={"xl"}>
-            <Title align="center" order={4}>
-              {data ? data.title : null}
-            </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>
+            <Stack spacing={"xl"}>
+              <Title align="center" order={4}>
+                {data ? data.title : null}
+              </Title>
               <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>
-                    {" "}
-                    {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>
+                  <Text>{data ? data.lokasi : null}</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>
-                    {" "}
-                    {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>
+                  <Text>{data ? data.EventMaster_TipeAcara.name : null}</Text>
                 </Grid.Col>
               </Grid>
-            </Stack>
 
-            <Stack spacing={2}>
-              <Text fw={"bold"}>Deskripsi</Text>
-              <Text>{data ? data?.deskripsi : null}</Text>
+              <Stack spacing={"xs"}>
+                <Text fw={"bold"}>Tanggal & Waktu</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>
-        <Stack spacing={"md"} px={"sm"}>
-          <Center>
-            <Title order={5}>Daftar Peserta ({total})</Title>
-          </Center>
-
-          {_.isEmpty(listPeserta) ? (
+      {data === null ? (
+        <Event_ComponentSkeletonListPeserta />
+      ) : (
+        <ComponentGlobal_CardStyles>
+          <Stack spacing={"md"} px={"sm"}>
             <Center>
-              <Text fz={"xs"} fw={"bold"}>
-                - Tidak ada peserta -
-              </Text>
+              <Title order={5}>Daftar Peserta ({total})</Title>
             </Center>
-          ) : (
-            <Stack>
-              {listPeserta.map((e, i) => (
-                <Stack key={i} spacing={"sm"}>
-                  {/* <ComponentGlobal_AvatarAndUsername
-                    profile={e?.User?.Profile as any}
-                    sizeAvatar={30}
-                    fontSize={"sm"}
 
-                  /> */}
-                  <ComponentEvent_AvatarAndUsername
-                    profile={e?.User?.Profile as any}
-                    sizeAvatar={30}
-                    fontSize={"sm"}
-                    tanggalMulai={e?.Event?.tanggal}
-                    tanggalSelesai={e?.Event?.tanggalSelesai}
-                    isPresent={e?.isPresent}
-                  />
+            {_.isEmpty(data) ? (
+              <Center>
+                <Text fz={"xs"} fw={"bold"}>
+                  - Tidak ada peserta -
+                </Text>
+              </Center>
+            ) : (
+              <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 /> */}
-                </Stack>
-              ))}
-            </Stack>
-          )}
-        </Stack>
-      </ComponentGlobal_CardStyles>
+                    {/* <Divider /> */}
+                  </Stack>
+                ))}
+              </Stack>
+            )}
+          </Stack>
+        </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>
+    </>
+  );
+}