Fix Loaddata pada event dan perbaikan tampilan pada NewWrapper

Event – User
- app/(application)/(user)/event/(tabs)/contribution.tsx
- app/(application)/(user)/event/(tabs)/index.tsx
- app/(application)/(user)/event/[id]/list-of-participants.tsx

Voting – User
- app/(application)/(user)/voting/(tabs)/history.tsx

Components
- components/Notification/NotificationInitializer.tsx
- components/_ShareComponent/NewWrapper.tsx

Screens – Event
- screens/Event/BoxPublishSection.tsx
- screens/Event/ButtonStatusSection.tsx
- screens/Event/ScreenHistory.tsx
- screens/Event/ScreenStatus.tsx

Screens – Forum
- screens/Forum/ViewBeranda3.tsx

API Client
- service/api-client/api-event.ts

Styles
- styles/global-styles.ts

Docs
- docs/prompt-for-qwen-code.md

Untracked (New Files)
- screens/Event/ScreenBeranda.tsx
- screens/Event/ScreenContribution.tsx
- screens/Event/ScreenListOfParticipants.tsx

#### No Issue

app/(application)/(user)/event/(tabs)/contribution.tsx

@@ -1,115 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
+import Event_ScreenContribution from "@/screens/Event/ScreenContribution";
-  AvatarUsernameAndOtherComponent,
-  BoxWithHeaderSection,
-  LoaderCustom,
-  Spacing,
-  StackCustom,
-  TextCustom,
-  ViewWrapper
-} from "@/components";
-import { useAuth } from "@/hooks/use-auth";
-import {
-  apiEventGetAll
-} from "@/service/api-client/api-event";
-import { dateTimeView } from "@/utils/dateTimeView";
-import { useFocusEffect } from "expo-router";
-import _ from "lodash";
-import React, { useCallback, useState } from "react";
 
 export default function EventContribution() {
-  const { user } = useAuth();
-  const [listData, setListData] = useState<any>([]);
-  const [isLoadList, setIsLoadList] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [user?.id])
-  );
-
-  async function onLoadData() {
-    try {
-      setIsLoadList(true);
-      const response = await apiEventGetAll({
-        category: "contribution",
-        userId: user?.id,
-      });
-      console.log("[DATA] ", JSON.stringify(response.data, null, 2));
-      if (response.success) {
-        setListData(response.data);
-
-        // const responseListParticipants = await apiEventListOfParticipants({
-        //   id: response?.data?.Event?.id,
-        // });
-        // console.log(
-        //   "[LIST PARTICIPANTS]",
-        //   JSON.stringify(responseListParticipants.data, null, 2)
-        // );
-        // if (responseListParticipants.success) {
-        //   setListParticipants(responseListParticipants.data);
-        // }
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadList(false);
-    }
-  }
-
   return (
-    <ViewWrapper hideFooter>
+    <>
-      {isLoadList ? (
+      <Event_ScreenContribution />
-        <LoaderCustom />
+    </>
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Belum ada kontribusi</TextCustom>
-      ) : (
-        listData.map((item: any, index: number) => (
-          <BoxWithHeaderSection
-            key={index}
-            href={`/event/${item?.Event?.id}/contribution`}
-          >
-            <StackCustom>
-              <AvatarUsernameAndOtherComponent
-                avatar={item?.Event?.Author?.Profile?.imageId}
-                avatarHref={`/profile/${item?.Event?.Author?.Profile?.id}`}
-                name={item?.Event?.Author?.username}
-                rightComponent={
-                  <TextCustom truncate>
-                    {dateTimeView({
-                      date: item?.Event?.tanggal,
-                      withoutTime: true,
-                    })}
-                  </TextCustom>
-                }
-              />
-
-              <TextCustom bold align="center" size="xlarge" truncate={2}>
-                {item?.Event?.title}
-              </TextCustom>
-              <Spacing height={0} />
-
-              {/* <Grid>
-                {item?.Event?.Event_Peserta?.map(
-                  (item2: any, index2: number) => (
-                    <Grid.Col
-                      style={{ alignItems: "center" }}
-                      span={12 / item?.Event?.Event_Peserta?.length}
-                      key={index2}
-                    >
-                      <AvatarComp
-                        size="base"
-                        href={`/profile/${item2?.User?.Profile?.id}`}
-                        fileId={item2?.User?.Profile?.imageId}
-                      />
-                    </Grid.Col>
-                  )
-                )}
-              </Grid> */}
-            </StackCustom>
-          </BoxWithHeaderSection>
-        ))
-      )}
-    </ViewWrapper>
   );
 }

app/(application)/(user)/event/(tabs)/index.tsx

@@ -1,63 +1,9 @@
-import { LoaderCustom, TextCustom } from "@/components";
+import Event_ScreenBeranda from "@/screens/Event/ScreenBeranda";
-import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import FloatingButton from "@/components/Button/FloatingButton";
-import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
-import { apiEventGetAll } from "@/service/api-client/api-event";
-import { dateTimeView } from "@/utils/dateTimeView";
-import { router, useFocusEffect } from "expo-router";
-import _ from "lodash";
-import { useCallback, useState } from "react";
 
 export default function EventBeranda() {
-  const [listData, setListData] = useState([]);
-  const [isLoadData, setIsLoadData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      onLoadData();
-    }, [])
-  );
-
-  const onLoadData = async () => {
-    try {
-      setIsLoadData(true);
-      const response = await apiEventGetAll({category: "beranda"});
-      // console.log("Response", JSON.stringify(response.data, null, 2));
-      setListData(response.data);
-    } catch (error) {
-      console.log("[ERROR]", error);
-    } finally {
-      setIsLoadData(false);
-    }
-  };
-
   return (
-    <ViewWrapper
+    <>
-      hideFooter
+      <Event_ScreenBeranda />
-      floatingButton={
+    </>
-        <FloatingButton onPress={() => router.push("/event/create")} />
-      }
-    >
-      {isLoadData ? (
-        <LoaderCustom />
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center">Belum ada event</TextCustom>
-      ) : (
-        listData.map((item: any, index) => (
-
-          
-          <Event_BoxPublishSection
-            key={index}
-            href={`/event/${item.id}/publish`}
-            data={item}
-            rightComponentAvatar={
-              <TextCustom>
-                {dateTimeView({ date: item?.tanggal, withoutTime: true })}
-              </TextCustom>
-            }
-          />
-        ))
-      )}
-    </ViewWrapper>
   );
 }

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

@@ -1,110 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
+import Event_ScreenListOfParticipants from "@/screens/Event/ScreenListOfParticipants";
-  AvatarUsernameAndOtherComponent,
-  BadgeCustom,
-  BaseBox,
-  LoaderCustom,
-  TextCustom,
-  ViewWrapper,
-} from "@/components";
-import {
-  apiEventGetOne,
-  apiEventListOfParticipants,
-} from "@/service/api-client/api-event";
-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<Dayjs | undefined>();
-  const [listData, setListData] = useState<any[] | null>(null);
-  const [loadtData, setLoadData] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      handlerLoadData();
-    }, [id])
-  );
-
-  const handlerLoadData = () => {
-    try {
-      onLoadData();
-      onLoadList();
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  const onLoadData = async () => {
-    try {
-      const response = await apiEventGetOne({ id: id as string });
-      if (response.success) {
-        const date = dayjs(response.data.tanggal);
-        setStartDate(date);
-      }
-    } catch (error) {
-      console.log("[ERROR]", error);
-    }
-  };
-
-  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>
+    <>
-      {loadtData && !listData ? (
+      <Event_ScreenListOfParticipants />
-        <LoaderCustom />
+    </>
-      ) : _.isEmpty(listData) ? (
-        <TextCustom align="center" color="gray">
-          Belum ada peserta
-        </TextCustom>
-      ) : (
-        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={
-                startDate && startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
-                  <View
-                    style={{
-                      justifyContent: "flex-end",
-                    }}
-                  >
-                    <BadgeCustom color={item?.isPresent ? "green" : "red"}>
-                      {item?.isPresent ? "Hadir" : "Tidak Hadir"}
-                    </BadgeCustom>
-                  </View>
-                ) : (
-                  <View
-                    style={{
-                      justifyContent: "flex-end",
-                    }}
-                  >
-                    <BadgeCustom color="gray">-</BadgeCustom>
-                  </View>
-                )
-              }
-            />
-          </BaseBox>
-        ))
-      )}
-    </ViewWrapper>
   );
 }

components/Notification/NotificationInitializer.tsx

@@ -49,7 +49,7 @@ export default function NotificationInitializer() {
 
         const fcmToken = await getToken(messagingInstance);
         if (!fcmToken) {
-           console.warn("Tidak bisa mendapatkan FCM token");
+           console.log("Tidak bisa mendapatkan FCM token");
           // logout();
         }
 

components/_ShareComponent/NewWrapper.tsx

@@ -101,12 +101,14 @@ const NewWrapper = (props: NewWrapperProps) => {
             renderItem={listProps.renderItem}
             keyExtractor={
               listProps.keyExtractor ||
-              ((item) => {
+              ((item, index) => {
                 if (item.id == null) {
                   console.warn("Item tanpa 'id':", item);
-                  return `fallback-${JSON.stringify(item)}`;
+                  return `fallback-${index}-${JSON.stringify(item)}`;
                 }
-                return String(item.id);
+
+                // Gabungkan ID dengan indeks untuk mencegah duplikasi
+                return `${String(item.id)}-${index}`;
               })
             }
           

docs/prompt-for-qwen-code.md

@@ -1,24 +1,24 @@
-<!-- Start Penerapan Pagination -->
+<!-- ===================== Start Penerapan Pagination ===================== -->
 
-File utama: screens/Event/ScreenHistory.tsx
+File utama: screens/Event/ScreenListOfParticipants.tsx
-Fun fecth: apiEventGetAll
+Function fecth: apiEventListOfParticipants
-File fetch: service/api-client/api-event.ts
+File function fetch: service/api-client/api-event.ts
 File komponen wrapper: components/_ShareComponent/NewWrapper.tsx
-File refrensi: screens/Job/MainViewStatus2.tsx
 
 Terapkan pagination pada file "File utama"
 Analisa juga file "File utama" , jika belum menggunakan NewWrapper pada file "File komponen wrapper" , maka terapkan juga dan ganti wrapper lama yaitu komponen ViewWrapper
 
 Komponen pagination yang digunaka berada pada file hooks/use-pagination.tsx dan helpers/paginationHelpers.tsx
 
-Perbaiki fetch "Fun fecth" , pada file "File fetch"
+Perbaiki fetch "Function fecth" , pada file "File function fetch"
 Jika tidak ada props page maka tambahkan props page dan default page: "1"
 
-Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang sama
-
 Gunakan bahasa indonesia pada cli agar saya mudah membacanya.
 
-<!-- End Penerapan Pagination -->
+<!-- File refrensi: screens/Job/MainViewStatus2.tsx
+Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang sama -->
+
+<!-- ===================== End Penerapan Pagination ===================== -->
 
 <!-- Start Penerapan NewWrapper -->
 Terapkan NewWrapper pada file: screens/Forum/DetailForum.tsx

screens/Event/BoxPublishSection.tsx

@@ -1,6 +1,7 @@
 import {
   AvatarUsernameAndOtherComponent,
   BoxWithHeaderSection,
+  Spacing,
   StackCustom,
   TextCustom,
 } from "@/components";

screens/Event/ButtonStatusSection.tsx

@@ -31,7 +31,7 @@ export default function Event_ButtonStatusSection({
               type: "success",
               text1: response.message,
             });
-            router.back();
+            router.replace(`/event/(tabs)/status?status=draft`);
           } else {
             Toast.show({
               type: "info",
@@ -65,7 +65,7 @@ export default function Event_ButtonStatusSection({
               type: "success",
               text1: response.message,
             });
-            router.back();
+            router.replace(`/event/(tabs)/status?status=review`);
           } else {
             Toast.show({
               type: "info",
@@ -99,7 +99,7 @@ export default function Event_ButtonStatusSection({
               type: "success",
               text1: response.message,
             });
-            router.back();
+            router.replace(`/event/(tabs)/status?status=draft`);
           } else {
             Toast.show({
               type: "info",

screens/Event/ScreenBeranda.tsx

@@ -0,0 +1,75 @@
+import { TextCustom } from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import FloatingButton from "@/components/Button/FloatingButton";
+import { MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { usePagination } from "@/hooks/use-pagination";
+import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
+import { apiEventGetAll } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { router } from "expo-router";
+import { RefreshControl } from "react-native";
+
+
+export default function Event_ScreenBeranda() {
+  // Setup pagination
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiEventGetAll({
+        category: "beranda",
+        page: String(page),
+      });
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [],
+    onError: (error) => console.error("[ERROR] Fetch event beranda:", error),
+  });
+
+  // Generate komponen
+  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+    loading: pagination.loading,
+    refreshing: pagination.refreshing,
+    listData: pagination.listData,
+    emptyMessage: "Belum ada event",
+    skeletonCount: PAGINATION_DEFAULT_TAKE,
+    skeletonHeight: 100,
+  });
+
+  // Render item event
+  const renderEventItem = ({ item }: { item: any }) => (
+    <Event_BoxPublishSection
+      key={item.id}
+      href={`/event/${item.id}/publish`}
+      data={item}
+      rightComponentAvatar={
+        <TextCustom>
+          {dateTimeView({ date: item?.tanggal, withoutTime: true })}
+        </TextCustom>
+      }
+    />
+  );
+
+
+  return (
+    <NewWrapper
+      listData={pagination.listData}
+      renderItem={renderEventItem}
+      refreshControl={
+        <RefreshControl
+          tintColor={MainColor.yellow}
+          colors={[MainColor.yellow]}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+      hideFooter
+      floatingButton={
+        <FloatingButton onPress={() => router.push("/event/create")} />
+      }
+    />
+  );
+}

screens/Event/ScreenContribution.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+    AvatarUsernameAndOtherComponent,
+    BoxWithHeaderSection,
+    Spacing,
+    StackCustom,
+    TextCustom
+} from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import { apiEventGetAll } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import { RefreshControl } from "react-native";
+
+
+export default function Event_ScreenContribution() {
+  const { user } = useAuth();
+
+  // Setup pagination
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      if (!user?.id) return { data: [] };
+
+      return await apiEventGetAll({
+        category: "contribution",
+        userId: user?.id,
+        page: String(page),
+      });
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [user?.id],
+    onError: (error) =>
+      console.error("[ERROR] Fetch event contribution:", error),
+  });
+
+  // Generate komponen
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      emptyMessage: "Belum ada kontribusi",
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 100,
+    });
+
+  // Render item event
+  const renderEventItem = ({ item }: { item: any }) => (
+    <BoxWithHeaderSection
+      key={item?.id}
+      href={`/event/${item?.Event?.id}/contribution`}
+    >
+      <StackCustom>
+        <AvatarUsernameAndOtherComponent
+          avatar={item?.Event?.Author?.Profile?.imageId}
+          avatarHref={`/profile/${item?.Event?.Author?.Profile?.id}`}
+          name={item?.Event?.Author?.username}
+          rightComponent={
+            <TextCustom truncate>
+              {dateTimeView({
+                date: item?.Event?.tanggal,
+                withoutTime: true,
+              })}
+            </TextCustom>
+          }
+        />
+
+        <TextCustom bold align="center" size="xlarge" truncate={2}>
+          {item?.Event?.title}
+        </TextCustom>
+        <Spacing height={0} />
+      </StackCustom>
+    </BoxWithHeaderSection>
+  );
+
+  //   useEffect(() => {
+  //     pagination.onRefresh();
+  //   }, []);
+
+  return (
+    <NewWrapper
+      listData={pagination.listData}
+      renderItem={renderEventItem}
+      refreshControl={
+        <RefreshControl
+          tintColor={MainColor.yellow}
+          colors={[MainColor.yellow]}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+      hideFooter
+    />
+  );
+}

screens/Event/ScreenHistory.tsx

@@ -2,6 +2,7 @@
 import { ButtonCustom, Spacing, TextCustom } from "@/components";
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
@@ -12,8 +13,6 @@ import _ from "lodash";
 import { useState } from "react";
 import { RefreshControl, View } from "react-native";
 
-const PAGE_SIZE = 5;
-
 export default function Event_ScreenHistory() {
   const [activeCategory, setActiveCategory] = useState<string | null>("all");
   const { user } = useAuth();
@@ -27,25 +26,26 @@ export default function Event_ScreenHistory() {
         page: String(page),
       });
     },
-    pageSize: PAGE_SIZE,
+    pageSize: PAGINATION_DEFAULT_TAKE,
     dependencies: [user?.id, activeCategory],
     onError: (error) => console.error("[ERROR] Fetch event history:", error),
   });
 
   // Generate komponen
-  const { ListEmptyComponent, ListFooterComponent } = createPaginationComponents({
+  const { ListEmptyComponent, ListFooterComponent } =
-    loading: pagination.loading,
+    createPaginationComponents({
-    refreshing: pagination.refreshing,
+      loading: pagination.loading,
-    listData: pagination.listData,
+      refreshing: pagination.refreshing,
-    emptyMessage: "Belum ada riwayat",
+      listData: pagination.listData,
-    skeletonCount: 5,
+      emptyMessage: "Belum ada riwayat",
-    skeletonHeight: 100,
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
-  });
+      skeletonHeight: 100,
+    });
 
   // Render item event
   const renderEventItem = ({ item }: { item: any }) => (
     <Event_BoxPublishSection
-      key={item.id}
+      key={item && item?.id}
       data={item}
       rightComponentAvatar={
         <TextCustom>

screens/Event/ScreenListOfParticipants.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+    AvatarUsernameAndOtherComponent,
+    BadgeCustom,
+    BaseBox
+} from "@/components";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { usePagination } from "@/hooks/use-pagination";
+import {
+    apiEventGetOne,
+    apiEventListOfParticipants,
+} from "@/service/api-client/api-event";
+import dayjs, { Dayjs } from "dayjs";
+import { useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { RefreshControl, View } from "react-native";
+
+export default function Event_ScreenListOfParticipants() {
+  const { id } = useLocalSearchParams();
+  const [startDate, setStartDate] = useState<Dayjs | undefined>();
+
+  // Setup pagination
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      return await apiEventListOfParticipants({
+        id: id as string,
+        page: String(page),
+      });
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [id],
+    onError: (error) =>
+      console.error("[ERROR] Fetch event participants:", error),
+  });
+
+  useEffect(() => {
+    onLoadData();
+  }, []);
+
+  // Fetch event data separately (not part of pagination)
+  //   useFocusEffect(() => {
+  //     onLoadData();
+  //     pagination.onRefresh();
+  //   });
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        const date = dayjs(response.data.tanggal);
+        setStartDate(date);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Generate komponen
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      emptyMessage: "Belum ada peserta",
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 100,
+    });
+
+  // Render item participant
+  const renderParticipantItem = ({ item }: { item: any }) => (
+    <BaseBox key={item.id}>
+      <AvatarUsernameAndOtherComponent
+        avatar={item?.User?.Profile?.imageId}
+        name={item?.User?.username}
+        avatarHref={`/profile/${item?.User?.Profile?.id}`}
+        rightComponent={
+          startDate && startDate.subtract(1, "hour").diff(dayjs()) < 0 ? (
+            <View
+              style={{
+                justifyContent: "flex-end",
+              }}
+            >
+              <BadgeCustom color={item?.isPresent ? "green" : "red"}>
+                {item?.isPresent ? "Hadir" : "Tidak Hadir"}
+              </BadgeCustom>
+            </View>
+          ) : (
+            <View
+              style={{
+                justifyContent: "flex-end",
+              }}
+            >
+              <BadgeCustom color="gray">-</BadgeCustom>
+            </View>
+          )
+        }
+      />
+    </BaseBox>
+  );
+
+  return (
+    <NewWrapper
+      listData={pagination.listData}
+      renderItem={renderParticipantItem}
+      refreshControl={
+        <RefreshControl
+          tintColor={MainColor.yellow}
+          colors={[MainColor.yellow]}
+          refreshing={pagination.refreshing}
+          onRefresh={pagination.onRefresh}
+        />
+      }
+      onEndReached={pagination.loadMore}
+      ListEmptyComponent={ListEmptyComponent}
+      ListFooterComponent={ListFooterComponent}
+    />
+  );
+}

screens/Event/ScreenStatus.tsx

@@ -7,19 +7,16 @@ import {
   TextCustom,
 } from "@/components";
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
-import { MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { useAuth } from "@/hooks/use-auth";
 import { usePagination } from "@/hooks/use-pagination";
 import { dummyMasterStatus } from "@/lib/dummy-data/_master/status";
 import { apiEventGetByStatus } from "@/service/api-client/api-event";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
-import _ from "lodash";
 import { useState } from "react";
 import { RefreshControl, View } from "react-native";
 
-const PAGE_SIZE = 10;
-
 export default function Event_ScreenStatus() {
   const { user } = useAuth();
   const { status } = useLocalSearchParams<{ status?: string }>();
@@ -40,7 +37,7 @@ export default function Event_ScreenStatus() {
         page: String(page),
       });
     },
-    pageSize: PAGE_SIZE,
+    pageSize: PAGINATION_DEFAULT_TAKE,
     dependencies: [id, activeCategory],
     onError: (error) => console.error("[ERROR] Fetch event by status:", error),
   });
@@ -52,7 +49,7 @@ export default function Event_ScreenStatus() {
       refreshing: pagination.refreshing,
       listData: pagination.listData,
       emptyMessage: `Tidak ada data ${activeCategory}`,
-      skeletonCount: 5,
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
       skeletonHeight: 100,
     });
 

screens/Forum/ViewBeranda3.tsx

@@ -2,7 +2,7 @@ import {
   AvatarComp,
   BackButton,
   FloatingButton,
-  SearchInput
+  SearchInput,
 } from "@/components";
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
@@ -101,8 +101,9 @@ export default function Forum_ViewBeranda3() {
       />
 
       <NewWrapper
+        hideFooter
         headerComponent={
-          <View style={{  paddingTop: 8 }}>
+          <View style={{ paddingTop: 8 }}>
             <SearchInput
               placeholder="Cari topik diskusi"
               onChangeText={_.debounce((text) => setSearch(text), 500)}

service/api-client/api-event.ts

@@ -117,9 +117,16 @@ export async function apiEventJoin({
   }
 }
 
-export async function apiEventListOfParticipants({ id }: { id?: string }) {
+export async function apiEventListOfParticipants({
+  id,
+  page = "1"
+}: {
+  id?: string;
+  page?: string;
+}) {
   try {
-    const response = await apiConfig.get(`/mobile/event/${id}/participants`);
+    const pageParam = page ? `?page=${page}` : "";
+    const response = await apiConfig.get(`/mobile/event/${id}/participants${pageParam}`);
     return response.data;
   } catch (error) {
     throw error;

styles/global-styles.ts

@@ -17,7 +17,8 @@ export const GStyles = StyleSheet.create({
   container: {
     flex: 1,
     paddingInline: PADDING_MEDIUM,
-    paddingBlock: PADDING_EXTRA_SMALL,
+    paddingTop: PADDING_EXTRA_SMALL,
+    // paddingBlock: PADDING_EXTRA_SMALL,
     backgroundColor: MainColor.darkblue,
   },
   containerWithBackground: {