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
2025-10-24 11:57:05 +08:00
parent 36dbfa3296
commit 1e0b72de22
7 changed files with 202 additions and 77 deletions
--- a/app/(application)/(user)/event/[id]/confirmation.tsx
+++ b/app/(application)/(user)/event/[id]/confirmation.tsx
@@ -74,8 +74,6 @@ export default function UserEventConfirmation() {
        userId: user?.id as string,
      });

-      console.log("[RES CONFIRMATION]", JSON.stringify(response, null, 2));
-
      if (response.success) {
        setData(response.data?.dataEvent);
        setPeserta(response.data?.peserta);
@@ -142,11 +140,11 @@ export default function UserEventConfirmation() {
      return (
        <TamplateBox data={data}>
          <TamplateText
-            text={`Event telah selesai, anda terdaftar sebagai peserta dan${
+            text={`Event telah selesai, anda terdaftar sebagai peserta dan ${
              konfirmasi
                ? "Anda telah mengonfirmasi kehadiran."
                : "Anda tidak mengonfirmasi kehadiran."
-            }. Terima kasih atas perhatian dan minat Anda. Kami berharap dapat bertemu di acara kami berikutnya.`}
+            } Terima kasih atas perhatian dan minat Anda. Kami berharap dapat bertemu di acara kami berikutnya.`}
          />
          <BackToOtherPath
            path="event"
@@ -173,14 +171,16 @@ export default function UserEventConfirmation() {
      if (isWithinConfirmationWindow && peserta === true) {
        if (konfirmasi === false) {
          return (
-            <TamplateBox data={data}>
-              <TamplateText text="Konfirmasi Kehadiran" />
-            </TamplateBox>
+            <UserParticipan_And_DuringEvent
+              id={data.id}
+              userId={user?.id as string}
+              data={data}
+            />
          );
        }
        return (
          <TamplateBox data={data}>
-            <TamplateText text="Anda telah mengonfirmasi kehadiran." />
+            <TamplateText text="Terimakasih telah mengonfirmasi kehadiran. Silahkan lihat peserta lain pada halaman event atau kembali ke halaman home. Selamat menikmati acara dan selamat berpartisipasi." />
            <BackToOtherPath
              path="event"
              id={data.id}
@@ -192,7 +192,7 @@ export default function UserEventConfirmation() {

      return (
        <TamplateBox data={data}>
-          <TamplateText text="Anda terdaftar sebagai peserta. Konfirmasi kehadiran dibuka 1 jam sebelum acara dimulai." />
+          <TamplateText text="Anda telah terdaftar sebagai peserta pada Event ini. Konfirmasi kehadiran dibuka 1 jam sebelum acara dimulai." />
          <BackToOtherPath
            path="event"
            id={data.id}
@@ -326,7 +326,7 @@ const TamplateBox = ({
  );
 };

-const TamplateText = ({ text }: { text: string }) => {
+const TamplateText = ({ text }: { text: React.ReactNode }) => {
  return (
    <>
      <TextCustom align="center">{text}</TextCustom>
@@ -442,7 +442,7 @@ const NotStarted_And_UserNotParticipan = ({
 };

 // 🟡 ZONA ACARA BERLANGSUNG
-// Acara sedang berlangsung & belum terdaftar
+// Acara sedang berlangsung & belum terdaftar & user harus join dan konfirmasi
 const UserNotParticipan_And_DuringEvent = ({
  id,
  userId,
@@ -464,8 +464,6 @@ const UserNotParticipan_And_DuringEvent = ({
        category: "join_and_confirm",
      });

-      //   console.log("[RES JOIN & CONFIRMATION EVENT]", response);
-
      if (!response.success) {
        Toast.show({
          type: "error",
@@ -498,3 +496,59 @@ const UserNotParticipan_And_DuringEvent = ({
    </>
  );
 };
+
+
+// 🟡 ZONA ACARA BERLANGSUN
+// User sudah terdaftar & Event sedang berlangsung & user harus konfirmasi
+const UserParticipan_And_DuringEvent = ({
+  id,
+  userId,
+  data,
+}: {
+  id: string;
+  userId: string;
+  data: DataEvent;
+}) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handlerSubmit = async () => {
+    try {
+      setIsLoading(true);
+
+      const response = await apiEventConfirmationAction({
+        id: id as string,
+        userId: userId as string,
+        category: "confirmation",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Anda gagal konfirmasi",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Anda berhasil konfirmasi",
+      });
+      router.navigate(`/(application)/(user)/event/${id}/publish`);
+    } catch (error) {
+      console.log("[ERROR JOIN & CONFIRMATION EVENT]", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return (
+    <>
+      <TamplateBox data={data}>
+        <TamplateText text="Anda sudah terdaftar sebagai peserta & Event sedang berlangsung. Silahkan konfirmasi kehadiran" />
+
+        <ButtonCustom onPress={() => handlerSubmit()} isLoading={isLoading}>
+          Konfirmasi
+        </ButtonCustom>
+      </TamplateBox>
+    </>
+  );
+};
--- a/app/(application)/(user)/event/[id]/list-of-participants.tsx
+++ b/app/(application)/(user)/event/[id]/list-of-participants.tsx
@@ -11,29 +11,30 @@ import {
  apiEventGetOne,
  apiEventListOfParticipants,
 } from "@/service/api-client/api-event";
-import { useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
+import dayjs, { Dayjs } from "dayjs";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 import { View } from "react-native";

 export default function EventListOfParticipants() {
  const { id } = useLocalSearchParams();
-  const [startDate, setStartDate] = useState();
-  const [listData, setListData] = useState([]);
-  const [isLoadData, setIsLoadData] = useState(false);
+  const [startDate, setStartDate] = useState<Dayjs | undefined>();
+  const [listData, setListData] = useState<any[] | null>(null);
+  const [loadtData, setLoadData] = useState(false);

-  useEffect(() => {
-    handlerLoadData();
-  }, [id]);
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadData();
+    }, [id])
+  );

  const handlerLoadData = () => {
    try {
-      setIsLoadData(true);
      onLoadData();
      onLoadList();
    } catch (error) {
      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
    }
  };

@@ -41,7 +42,8 @@ export default function EventListOfParticipants() {
    try {
      const response = await apiEventGetOne({ id: id as string });
      if (response.success) {
-        setStartDate(response.data.tanggal);
+        const date = dayjs(response.data.tanggal);
+        setStartDate(date);
      }
    } catch (error) {
      console.log("[ERROR]", error);
@@ -50,30 +52,36 @@ export default function EventListOfParticipants() {

  const onLoadList = async () => {
    try {
+      setLoadData(true);
      const response = await apiEventListOfParticipants({ id: id as string });
+     
      if (response.success) {
        setListData(response.data);
      }
    } catch (error) {
      console.log("[ERROR]", error);
+    } finally {
+      setLoadData(false);
    }
  };

  return (
    <ViewWrapper>
-      {isLoadData ? (
+      {loadtData && !listData ? (
        <LoaderCustom />
-      ) : listData.length === 0 ? (
-        <TextCustom align="center">Belum ada peserta</TextCustom>
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center" color="gray">
+          Belum ada peserta
+        </TextCustom>
      ) : (
-        listData.map((item: any, index: number) => (
+        listData?.map((item: any, index: number) => (
          <BaseBox key={index}>
            <AvatarUsernameAndOtherComponent
              avatar={item?.User?.Profile?.imageId}
              name={item?.User?.username}
              avatarHref={`/profile/${item?.User?.Profile?.id}`}
              rightComponent={
-                new Date().getTime() > new Date(startDate as any).getTime() ? (
+                startDate && startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
                  <View
                    style={{
                      justifyContent: "flex-end",
--- a/app/(application)/admin/event/[id]/[status]/index.tsx
+++ b/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>
        )}
--- a/app/(application)/admin/event/[id]/list-of-participants.tsx
+++ b/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>
    </>
  );
--- a/components/DateInput/DataTimeAndroid.tsx
+++ b/components/DateInput/DataTimeAndroid.tsx
@@ -196,6 +196,7 @@ const DateTimeInput_Android: React.FC<DateTimeInputProps> = ({
          onChange={handleConfirmTime}
          minimumDate={minimumDate}
          maximumDate={maximumDate}
+          themeVariant="light"
        />
      )}
    </>
--- a/components/DateInput/DateTimeIOS.tsx
+++ b/components/DateInput/DateTimeIOS.tsx
@@ -145,6 +145,7 @@ const DateTimeInput_IOS: React.FC<DateTimeInputProps> = ({
              onChange={handleConfirm}
              minimumDate={minimumDate}
              maximumDate={maximumDate}
+              themeVariant="light"
            />
          </View>
        </>
--- a/service/api-admin/api-admin-event.ts
+++ b/service/api-admin/api-admin-event.ts
@@ -48,3 +48,13 @@ export async function apiAdminEventUpdateStatus({
  }
 }

+export async function apiAdminEventListOfParticipants({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.get(
+      `/mobile/admin/event/${id}/participants`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}