Event

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

### No issue

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

@@ -1,43 +1,114 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-  AvatarCustom,
   AvatarUsernameAndOtherComponent,
   BoxWithHeaderSection,
-  Grid,
+  LoaderCustom,
+  Spacing,
   StackCustom,
   TextCustom,
   ViewWrapper
 } from "@/components";
-import React from "react";
+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,
+      });
+      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>
-      {Array.from({ length: 10 }).map((_, index) => (
+      {isLoadList ? (
-        <BoxWithHeaderSection key={index} href={`/event/${index}/contribution`}>
+        <LoaderCustom />
-          <StackCustom>
+      ) : _.isEmpty(listData) ? (
-            <AvatarUsernameAndOtherComponent
+        <TextCustom align="center">Belum ada kontribusi</TextCustom>
-              avatarHref={`/profile/${index}`}
+      ) : (
-              rightComponent={
+        listData.map((item: any, index: number) => (
-                <TextCustom truncate>
+          <BoxWithHeaderSection
-                  {new Date().toLocaleDateString()}
+            key={index}
-                </TextCustom>
+            href={`/event/${item?.Event?.id}/contribution`}
-              }
+          >
-            />
+            <StackCustom>
+              <AvatarUsernameAndOtherComponent
+                avatar={item?.User?.Profile?.imageId}
+                avatarHref={`/profile/${item?.User?.Profile?.id}`}
+                name={item?.User?.username}
+                rightComponent={
+                  <TextCustom truncate>
+                    {dateTimeView({
+                      date: item?.Event?.tanggal,
+                      withoutTime: true,
+                    })}
+                  </TextCustom>
+                }
+              />
 
-            <TextCustom bold align="center" size="xlarge">
+              <TextCustom bold align="center" size="xlarge">
-              Judul Event Disini
+                {item?.Event?.title}
-            </TextCustom>
+              </TextCustom>
+              <Spacing height={10} />
 
-            <Grid>
+              {/* <Grid>
-              {Array.from({ length: 4 }).map((_, index2) => (
+                {item?.Event?.Event_Peserta?.map(
-                <Grid.Col span={3} key={index2}>
+                  (item2: any, index2: number) => (
-                  <AvatarCustom size="sm" href={`/profile/${index2}`} />
+                    <Grid.Col
-                </Grid.Col>
+                      style={{ alignItems: "center" }}
-              ))}
+                      span={12 / item?.Event?.Event_Peserta?.length}
-            </Grid>
+                      key={index2}
-          </StackCustom>
+                    >
-        </BoxWithHeaderSection>
+                      <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)/history.tsx

@@ -1,12 +1,41 @@
-import { ButtonCustom, Spacing, TextCustom } from "@/components";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { ButtonCustom, LoaderCustom, Spacing, TextCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
 import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
-import { useState } from "react";
+import { apiEventGetAll } from "@/service/api-client/api-event";
+import { dateTimeView } from "@/utils/dateTimeView";
+import _ from "lodash";
+import { useEffect, useState } from "react";
 import { View } from "react-native";
 
 export default function EventHistory() {
   const [activeCategory, setActiveCategory] = useState<string | null>("all");
+  const { user } = useAuth();
+  const [listData, setListData] = useState<any>([]);
+  const [isLoadList, setIsLoadList] = useState(false);
+
+  useEffect(() => {
+    onLoadData({ userId: user?.id });
+  }, [user?.id, activeCategory]);
+
+  async function onLoadData({ userId }: { userId?: string }) {
+    try {
+      setIsLoadList(true);
+      const response = await apiEventGetAll({
+        category: activeCategory === "all" ? "all-history" : "my-history",
+        userId: userId,
+      });
+      if (response.success) {
+        setListData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadList(false);
+    }
+  }
 
   const handlePress = (item: any) => {
     setActiveCategory(item);
@@ -52,17 +81,24 @@ export default function EventHistory() {
 
   return (
     <ViewWrapper headerComponent={headerComponent} hideFooter>
-      {Array.from({ length: 10 }).map((_, index) => (
+      {isLoadList ? (
-        <Event_BoxPublishSection
+        <LoaderCustom />
-          key={index.toString()}
+      ) : _.isEmpty(listData) ? (
-          id={index.toString()}
+        <TextCustom align="center">Belum ada riwayat</TextCustom>
-          username={`Riwayat ${activeCategory === "main" ? "Saya" : "Semua"}`}
+      ) : (
-          rightComponentAvatar={
+        listData.map((item: any, index: number) => (
-            <TextCustom>{new Date().toLocaleDateString()}</TextCustom>
+          <Event_BoxPublishSection
-          }
+            key={index.toString()}
-          href={`/event/${index}/history`}
+            data={item}
-        />
+            rightComponentAvatar={
-      ))}
+              <TextCustom>
+                {dateTimeView({ date: item?.tanggal, withoutTime: true })}
+              </TextCustom>
+            }
+            href={`/event/${item.id}/history`}
+          />
+        ))
+      )}
     </ViewWrapper>
   );
 }

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

@@ -21,7 +21,7 @@ export default function EventBeranda() {
   const onLoadData = async () => {
     try {
       setIsLoadData(true);
-      const response = await apiEventGetAll();
+      const response = await apiEventGetAll({category: "beranda"});
       // console.log("Response", JSON.stringify(response.data, null, 2));
       setListData(response.data);
     } catch (error) {

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 });
+      onLoadData();
-      if (response.success) {
+      onLoadList();
-        console.log("Response", JSON.stringify(response.data, null, 2));
-        setListData(response.data);
-      }
     } 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 {
-import { router, Stack, useLocalSearchParams } from "expo-router";
+  apiEventCheckParticipants,
-import { useEffect, useState } from "react";
+  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(() => {
+  useFocusEffect(
-    onLoadData();
+    useCallback(() => {
-  }, [id]);
+      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 = (
+  const footerButton = () => {
-    <ButtonCustom
+    return (
-      isLoading={isLoadingJoin}
+      <>
-      backgroundColor="green"
+        <ButtonCustom
-      textColor="white"
+          disabled={isParticipant as any}
-      onPress={() => handlerJoin()}
+          isLoading={isLoadingJoin}
-    >
+          backgroundColor="green"
-      Join
+          textColor="white"
-    </ButtonCustom>
+          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
+        {isLoadingData ? (
-          data={data}
+          <LoaderCustom />
-          footerButton={footerButton}
+        ) : (
-        />
+          <Event_BoxDetailPublishSection
-        <Spacing />
+            data={data}
+            footerButton={footerButton()}
+          />
+        )}
       </ViewWrapper>
 
       <DrawerCustom

app/(application)/(user)/user-search/index.tsx

@@ -2,6 +2,7 @@ import {
   AvatarComp,
   ClickableCustom,
   Grid,
+  LoaderCustom,
   Spacing,
   StackCustom,
   TextCustom,
@@ -19,6 +20,7 @@ import { useEffect, useState } from "react";
 export default function UserSearch() {
   const [data, setData] = useState<any[]>([]);
   const [search, setSearch] = useState<string>("");
+  const [isLoadList, setIsLoadList] = useState(false);
 
   useEffect(() => {
     onLoadData(search);
@@ -26,11 +28,14 @@ export default function UserSearch() {
 
   const onLoadData = async (search: string) => {
     try {
+      setIsLoadList(true);
       const response = await apiAllUser({ search: search });
       console.log("[DATA USER] >", JSON.stringify(response.data, null, 2));
       setData(response.data);
     } catch (error) {
       console.log("Error fetching data", error);
+    } finally {
+      setIsLoadList(false);
     }
   };
 
@@ -60,7 +65,9 @@ export default function UserSearch() {
         }
       >
         <StackCustom>
-          {!_.isEmpty(data) ? (
+          {isLoadList ? (
+            <LoaderCustom />
+          ) : !_.isEmpty(data) ? (
             data?.map((e, index) => {
               return (
                 <ClickableCustom

screens/Authentication/LoginView.tsx

@@ -98,7 +98,7 @@ export default function LoginView() {
   }
 
   if (token && !isAdmin) {
-    return <Redirect href={"/(application)/(user)/event/(tabs)"} />;
+    return <Redirect href={"/(application)/(user)/home"} />;
   }
 
   if (token && isAdmin) {

screens/Event/BoxDetailPublishSection.tsx

@@ -5,7 +5,7 @@ export default function Event_BoxDetailPublishSection({
   data,
   footerButton,
 }: {
-  data?: any;
+  data: any;
   footerButton?: React.ReactNode;
 }) {
   const listData = [

screens/Event/BoxPublishSection.tsx

@@ -15,7 +15,7 @@ export default function Event_BoxPublishSection({
   rightComponentAvatar,
 }: {
   href: Href;
-  data?: any;
+  data: any;
 
   // Avatar
   sourceAvatar?: string;

service/api-client/api-event.ts

@@ -44,10 +44,8 @@ export async function apiEventUpdateStatus({
 }) {
   try {
     const response = await apiConfig.put(`/mobile/event/${id}/${status}`);
-    console.log("[SUCCESS]", response.data);
     return response.data;
   } catch (error) {
-    // console.log("[ERROR FECTH]", error);
     throw error;
   }
 }
@@ -78,9 +76,19 @@ export async function apiEventDelete({ id }: { id: string }) {
   }
 }
 
-export async function apiEventGetAll() {
+export async function apiEventGetAll({
+  category,
+  userId,
+}: {
+  category?: "beranda" | "contribution" | "all-history" | "my-history";
+  userId?: string;
+}) {
   try {
-    const response = await apiConfig.get(`/mobile/event`);
+    const categoryEvent = category ? `?category=${category}` : "";
+    const userIdCreator = userId ? `&userId=${userId}` : "";
+    const response = await apiConfig.get(
+      `/mobile/event${categoryEvent}${userIdCreator}`
+    );
     return response.data;
   } catch (error) {
     throw error;
@@ -104,7 +112,7 @@ export async function apiEventJoin({
   }
 }
 
-export async function apiEventListOfParticipants({id}: {id: string}){
+export async function apiEventListOfParticipants({ id }: { id?: string }) {
   try {
     const response = await apiConfig.get(`/mobile/event/${id}/participants`);
     return response.data;
@@ -113,3 +121,20 @@ export async function apiEventListOfParticipants({id}: {id: string}){
   }
 }
 
+export async function apiEventCheckParticipants({
+  id,
+  userId,
+}: {
+  id: string;
+  userId?: string;
+}) {
+  try {
+    const selectUserId = userId ? `?userId=${userId}` : "";
+    const response = await apiConfig.get(
+      `/mobile/event/${id}/check-participants${selectUserId}`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}