Event

Fix: Intergrasi pada UI
- Beranda, Kontibusi & Riwayat
- Detail beranda, detail kontribusi & detail riwayat
- List partisipan

### No issue

app/(application)/(user)/event/[id]/contribution.tsx

@@ -1,20 +1,43 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
-  ViewWrapper,
   Spacing,
+  ViewWrapper,
 } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
 import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
+import { apiEventGetOne } from "@/service/api-client/api-event";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function EventDetailContribution() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState<any>();
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      setIsLoadData(true);
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
 
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH ", item.path);
@@ -32,18 +55,22 @@ export default function EventDetailContribution() {
         }}
       />
       <ViewWrapper>
-        <Event_BoxDetailPublishSection />
+        {isLoadData ? (
+          <LoaderCustom />
+        ) : (
+          <Event_BoxDetailPublishSection data={data} />
+        )}
         <Spacing />
       </ViewWrapper>
       <DrawerCustom
         isVisible={openDrawer}
         closeDrawer={() => setOpenDrawer(false)}
-        height={250}
+        height={"auto"}
       >
         <MenuDrawerDynamicGrid
           data={menuDrawerPublishEvent({ id: id as string })}
           columns={4}
-          onPressItem={handlePress}
+          onPressItem={handlePress as any}
         />
       </DrawerCustom>
     </>

app/(application)/(user)/event/[id]/history.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   DotButton,
   DrawerCustom,
@@ -9,12 +10,29 @@ import { IMenuDrawerItem } from "@/components/_Interface/types";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
 import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
+import { apiEventGetOne } from "@/service/api-client/api-event";
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function EventDetailHistory() {
   const { id } = useLocalSearchParams();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
 
   const handlePress = (item: IMenuDrawerItem) => {
     console.log("PATH ", item.path);
@@ -32,7 +50,7 @@ export default function EventDetailHistory() {
         }}
       />
       <ViewWrapper>
-        <Event_BoxDetailPublishSection />
+        <Event_BoxDetailPublishSection data={data} />
         <Spacing />
       </ViewWrapper>
       <DrawerCustom
@@ -43,7 +61,7 @@ export default function EventDetailHistory() {
         <MenuDrawerDynamicGrid
           data={menuDrawerPublishEvent({ id: id as string })}
           columns={4}
-          onPressItem={handlePress}
+          onPressItem={handlePress as any}
         />
       </DrawerCustom>
     </>

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

@@ -5,29 +5,31 @@ import {
   BaseBox,
   LoaderCustom,
   TextCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
-import { apiEventListOfParticipants } from "@/service/api-client/api-event";
+import {
+  apiEventGetOne,
+  apiEventListOfParticipants,
+} from "@/service/api-client/api-event";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, 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);
 
   useEffect(() => {
-    onLoadData();
+    handlerLoadData();
   }, [id]);
 
-  const onLoadData = async () => {
+  const handlerLoadData = () => {
     try {
       setIsLoadData(true);
-      const response = await apiEventListOfParticipants({ id: id as string });
-      if (response.success) {
-        console.log("Response", JSON.stringify(response.data, null, 2));
-        setListData(response.data);
-      }
+      onLoadData();
+      onLoadList();
     } catch (error) {
       console.log("[ERROR]", error);
     } finally {
@@ -35,6 +37,28 @@ export default function EventListOfParticipants() {
     }
   };
 
+  const onLoadData = async () => {
+    try {
+      const response = await apiEventGetOne({ id: id as string });
+      if (response.success) {
+        setStartDate(response.data.tanggal);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const onLoadList = async () => {
+    try {
+      const response = await apiEventListOfParticipants({ id: id as string });
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   return (
     <ViewWrapper>
       {isLoadData ? (
@@ -48,7 +72,27 @@ export default function EventListOfParticipants() {
               avatar={item?.User?.Profile?.imageId}
               name={item?.User?.username}
               avatarHref={`/profile/${item?.User?.Profile?.id}`}
-              rightComponent={<BadgeCustom color={item?.isPresent ? "green" : "red"}>{item?.isPresent ? "Hadir" : "Tidak Hadir"}</BadgeCustom>}
+              rightComponent={
+                new Date().getTime() > new Date(startDate as any).getTime() ? (
+                  <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>
         ))

app/(application)/(user)/event/[id]/publish.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
+  AlertDefaultSystem,
   ButtonCustom,
   DotButton,
   DrawerCustom,
+  LoaderCustom,
   MenuDrawerDynamicGrid,
-  Spacing,
   ViewWrapper,
 } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
@@ -12,31 +13,59 @@ import LeftButtonCustom from "@/components/Button/BackButton";
 import { useAuth } from "@/hooks/use-auth";
 import Event_BoxDetailPublishSection from "@/screens/Event/BoxDetailPublishSection";
 import { menuDrawerPublishEvent } from "@/screens/Event/menuDrawerPublish";
-import { apiEventGetOne, apiEventJoin } from "@/service/api-client/api-event";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useEffect, useState } from "react";
+import {
+  apiEventCheckParticipants,
+  apiEventGetOne,
+  apiEventJoin,
+} from "@/service/api-client/api-event";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
 import Toast from "react-native-toast-message";
 
 export default function EventDetailPublish() {
   const { id } = useLocalSearchParams();
   const { user } = useAuth();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [isLoadingData, setIsLoadingData] = useState(false);
   const [isLoadingJoin, setIsLoadingJoin] = useState(false);
 
   const [data, setData] = useState();
+  const [isParticipant, setIsParticipant] = useState<boolean | null>(null);
 
-  useEffect(() => {
-    onLoadData();
-  }, [id]);
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
 
   async function onLoadData() {
     try {
+      setIsLoadingData(true);
       const response = await apiEventGetOne({ id: id as string });
       if (response.success) {
         setData(response.data);
+
+        const responseCheckParticipants = await apiEventCheckParticipants({
+          id: id as string,
+          userId: user?.id as string,
+        });
+
+        if (
+          responseCheckParticipants.success &&
+          responseCheckParticipants.data
+        ) {
+          setIsParticipant(true);
+        }
       }
     } catch (error) {
       console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingData(false);
     }
   }
 
@@ -77,16 +106,30 @@ export default function EventDetailPublish() {
     }
   };
 
-  const footerButton = (
-    <ButtonCustom
-      isLoading={isLoadingJoin}
-      backgroundColor="green"
-      textColor="white"
-      onPress={() => handlerJoin()}
-    >
-      Join
-    </ButtonCustom>
-  );
+  const footerButton = () => {
+    return (
+      <>
+        <ButtonCustom
+          disabled={isParticipant as any}
+          isLoading={isLoadingJoin}
+          backgroundColor="green"
+          textColor="white"
+          onPress={() =>
+            AlertDefaultSystem({
+              title: "Join event",
+              message: "Anda yakin ingin join sebagai peserta event ?",
+              textLeft: "Tidak",
+              textRight: "Ya",
+              onPressLeft: () => {},
+              onPressRight: () => handlerJoin(),
+            })
+          }
+        >
+          {isParticipant ? "Anda sudah tergabung" : "Join"}
+        </ButtonCustom>
+      </>
+    );
+  };
 
   return (
     <>
@@ -98,11 +141,14 @@ export default function EventDetailPublish() {
         }}
       />
       <ViewWrapper>
-        <Event_BoxDetailPublishSection
-          data={data}
-          footerButton={footerButton}
-        />
-        <Spacing />
+        {isLoadingData ? (
+          <LoaderCustom />
+        ) : (
+          <Event_BoxDetailPublishSection
+            data={data}
+            footerButton={footerButton()}
+          />
+        )}
       </ViewWrapper>
 
       <DrawerCustom