Integrasi API: Event Qr Code

Fix:
- app/(application)/(user)/event/[id]/confirmation.tsx
- app/(application)/(user)/event/[id]/list-of-participants.tsx
- app/(application)/admin/event/[id]/[status]/index.tsx
- app/(application)/admin/event/[id]/list-of-participants.tsx
- components/DateInput/DataTimeAndroid.tsx
- components/DateInput/DateTimeIOS.tsx
- service/api-admin/api-admin-event.ts

### No Issue

app/(application)/admin/event/[id]/[status]/index.tsx

@@ -5,6 +5,7 @@ import {
   BadgeCustom,
   BaseBox,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
   Spacing,
   StackCustom,
@@ -28,18 +29,15 @@ import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
 import React, { useCallback } from "react";
 import QRCode from "react-native-qrcode-svg";
+import Toast from "react-native-toast-message";
 
 export default function AdminEventDetail() {
   const { user } = useAuth();
   const { id, status } = useLocalSearchParams();
-
-  console.log("[ID QRCODE]", id);
-  console.log("[STATUS Detail]", status);
   const [openDrawer, setOpenDrawer] = React.useState(false);
-  const newURL = DEEP_LINK_URL
-  console.log("[DEEP LINK URL]", newURL);
 
   const [data, setData] = React.useState<any | null>(null);
+  const [loadData, setLoadData] = React.useState(false);
   const deepLinkURL = `${DEEP_LINK_URL}/--/event/${id}/confirmation?userId=${user?.id}`;
   useFocusEffect(
     useCallback(() => {
@@ -48,17 +46,18 @@ export default function AdminEventDetail() {
   );
   const onLoadData = async () => {
     try {
+      setLoadData(true);
       const response = await apiAdminEventById({
         id: id as string,
       });
 
-      // console.log(`[RES DATA BY ID: ${id}]`, JSON.stringify(response, null, 2));
-
       if (response.success) {
         setData(response.data);
       }
     } catch (error) {
       console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
     }
   };
 
@@ -124,11 +123,19 @@ export default function AdminEventDetail() {
         changeStatus: "publish",
       });
 
-      console.log("[RES PUBLISH]", JSON.stringify(response, null, 2));
-
-      if (response.success) {
-        router.back();
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mempublikasikan event",
+        });
+        return;
       }
+
+      Toast.show({
+        type: "success",
+        text1: "Event berhasil dipublikasikan",
+      });
+      router.back();
     } catch (error) {
       console.log("[ERROR]", error);
     }
@@ -170,15 +177,19 @@ export default function AdminEventDetail() {
           <BaseBox>
             <StackCustom style={{ alignItems: "center" }}>
               <TextCustom bold>QR Code Event</TextCustom>
-              <QRCode
-                value={deepLinkURL}
-                size={200}
-                // logo={require("@/assets/images/logo-hipmi.png")}
-                // logoSize={70}
-                // logoBackgroundColor="transparent"
-                // logoBorderRadius={50}
-                // color="black"
-              />
+              {loadData ? (
+                <LoaderCustom />
+              ) : (
+                <QRCode
+                  value={deepLinkURL}
+                  size={200}
+                  // logo={require("@/assets/images/logo-hipmi.png")}
+                  // logoSize={70}
+                  // logoBackgroundColor="transparent"
+                  // logoBorderRadius={50}
+                  // color="black"
+                />
+              )}
             </StackCustom>
           </BaseBox>
         )}

app/(application)/admin/event/[id]/list-of-participants.tsx

@@ -1,41 +1,81 @@
-import { BadgeCustom, BaseBox, Grid, TextCustom, ViewWrapper } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  BadgeCustom,
+  BaseBox,
+  Grid,
+  LoaderCustom,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import { MainColor } from "@/constants/color-palet";
+import { apiAdminEventListOfParticipants } from "@/service/api-admin/api-admin-event";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function AdminEventListOfParticipants() {
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadData, setLoadData] = useState(false);
 
-    const isPresent = ({id}: {id: number}) => {
-        const check = id % 3 * 3;
-        if (check === 0) {
-            return true;
-        } else {
-            return false;
-        }
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadData(true);
+      const response = await apiAdminEventListOfParticipants({
+        id: id as string,
+      });
+
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
     }
+  };
+
 
   return (
     <>
       <ViewWrapper
         headerComponent={<AdminBackButtonAntTitle title="Daftar Peserta" />}
       >
-        {Array.from({ length: 10 }).map((item, index) => (
-          <BaseBox key={index}>
-            <Grid>
-              <Grid.Col span={6}>
-                <TextCustom bold>Username {index + 1}</TextCustom>
-                <TextCustom>+6282123456789</TextCustom>
-              </Grid.Col>
-              <Grid.Col span={6} style={{ justifyContent: "center" }}>
-                <BadgeCustom
-                  style={{ alignSelf: "flex-end" }}
-                  color={isPresent({id: index}) ? MainColor.green : MainColor.red}
-                >
-                  {isPresent({id: index}) ? "Hadir" : "Tidak Hadir"}
-                </BadgeCustom>
-              </Grid.Col>
-            </Grid>
-          </BaseBox>
-        ))}
+        {loadData ? (
+          <LoaderCustom />
+        ) : _.isEmpty(listData) ? (
+          <TextCustom align="center" color="gray">
+            Belum ada peserta
+          </TextCustom>
+        ) : (
+          listData?.map((item: any, index: number) => (
+            <BaseBox key={index}>
+              <Grid>
+                <Grid.Col span={6}>
+                  <StackCustom gap={"sm"}>
+                    <TextCustom bold truncate>{item?.User?.username}</TextCustom>
+                    <TextCustom>+{item?.User?.nomor}</TextCustom>
+                  </StackCustom>
+                </Grid.Col>
+                <Grid.Col span={6} style={{ justifyContent: "center" }}>
+                  <BadgeCustom
+                    style={{ alignSelf: "flex-end" }}
+                    color={item?.isPresent ? "green" : "red"}
+                  >
+                    {item?.isPresent ? "Hadir" : "Tidak Hadir"}
+                  </BadgeCustom>
+                </Grid.Col>
+              </Grid>
+            </BaseBox>
+          ))
+        )}
       </ViewWrapper>
     </>
   );