Event

Fix: Intergrasi pada UI - Beranda, Kontibusi & Riwayat - Detail beranda, detail kontribusi & detail riwayat - List partisipan ### No issue
2025-09-15 17:17:50 +08:00
parent 1d2153b253
commit 76fb14ed0c
12 changed files with 365 additions and 91 deletions
--- a/app/(application)/(user)/event/(tabs)/contribution.tsx
+++ b/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) => (
-        <BoxWithHeaderSection key={index} href={`/event/${index}/contribution`}>
-          <StackCustom>
-            <AvatarUsernameAndOtherComponent
-              avatarHref={`/profile/${index}`}
-              rightComponent={
-                <TextCustom truncate>
-                  {new Date().toLocaleDateString()}
-                </TextCustom>
-              }
-            />
+      {isLoadList ? (
+        <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?.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">
-              Judul Event Disini
-            </TextCustom>
+              <TextCustom bold align="center" size="xlarge">
+                {item?.Event?.title}
+              </TextCustom>
+              <Spacing height={10} />

-            <Grid>
-              {Array.from({ length: 4 }).map((_, index2) => (
-                <Grid.Col span={3} key={index2}>
-                  <AvatarCustom size="sm" href={`/profile/${index2}`} />
-                </Grid.Col>
-              ))}
-            </Grid>
-          </StackCustom>
-        </BoxWithHeaderSection>
-      ))}
+              {/* <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>
  );
 }
--- a/app/(application)/(user)/event/(tabs)/history.tsx
+++ b/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) => (
-        <Event_BoxPublishSection
-          key={index.toString()}
-          id={index.toString()}
-          username={`Riwayat ${activeCategory === "main" ? "Saya" : "Semua"}`}
-          rightComponentAvatar={
-            <TextCustom>{new Date().toLocaleDateString()}</TextCustom>
-          }
-          href={`/event/${index}/history`}
-        />
-      ))}
+      {isLoadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(listData) ? (
+        <TextCustom align="center">Belum ada riwayat</TextCustom>
+      ) : (
+        listData.map((item: any, index: number) => (
+          <Event_BoxPublishSection
+            key={index.toString()}
+            data={item}
+            rightComponentAvatar={
+              <TextCustom>
+                {dateTimeView({ date: item?.tanggal, withoutTime: true })}
+              </TextCustom>
+            }
+            href={`/event/${item.id}/history`}
+          />
+        ))
+      )}
    </ViewWrapper>
  );
 }
--- a/app/(application)/(user)/event/(tabs)/index.tsx
+++ b/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) {
--- a/app/(application)/(user)/event/[id]/contribution.tsx
+++ b/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>
    </>
--- a/app/(application)/(user)/event/[id]/history.tsx
+++ b/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>
    </>
--- a/app/(application)/(user)/event/[id]/list-of-participants.tsx
+++ b/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>
        ))
--- a/app/(application)/(user)/event/[id]/publish.tsx
+++ b/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
--- a/app/(application)/(user)/user-search/index.tsx
+++ b/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