Event

Fix: Intergrasi tampilan ke API

Package.json
Fix: Pem baharuan SDK53 -> SDK54

### No Issue

app.config.js

@@ -36,6 +36,7 @@ export default {
 
   plugins: [
     'expo-router',
+    'expo-web-browser',
     [
       'expo-splash-screen',
       {

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

@@ -1,9 +1,36 @@
+import { LoaderCustom, TextCustom } from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import FloatingButton from "@/components/Button/FloatingButton";
 import Event_BoxPublishSection from "@/screens/Event/BoxPublishSection";
-import { router } from "expo-router";
+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();
+      // console.log("Response", JSON.stringify(response.data, null, 2));
+      setListData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
   return (
     <ViewWrapper
       hideFooter
@@ -11,13 +38,24 @@ export default function EventBeranda() {
         <FloatingButton onPress={() => router.push("/event/create")} />
       }
     >
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Event_BoxPublishSection
-          key={index}
-          id={index.toString()}
-          href={`/event/${index}/publish`}
-        />
-      ))}
+      {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]/edit.tsx

@@ -80,7 +80,7 @@ export default function EventEdit() {
     }
   };
 
-  const validateDate = () => {
+  const validateDate = async () => {
     if (
       data?.title === "" ||
       data?.lokasi === "" ||
@@ -92,7 +92,8 @@ export default function EventEdit() {
         text1: "Info",
         text2: "Lengkapi semua data",
       });
-      return;
+
+      return false;
     }
 
     const startDate = new Date(selectedDate as any);
@@ -104,12 +105,17 @@ export default function EventEdit() {
         text1: "Info",
         text2: "Ubah tanggal berakhirnya event",
       });
-      return;
+
+      return false;
     }
+
+    return true;
   };
 
   const handlerSubmit = async () => {
-    validateDate();
+    const isValid = await validateDate();
+    if (!isValid) return;
+
     try {
       setIsLoading(true);
       const newData = {

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

@@ -1,17 +1,58 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   AvatarUsernameAndOtherComponent,
+  BadgeCustom,
   BaseBox,
-  ViewWrapper,
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper
 } from "@/components";
+import { apiEventListOfParticipants } from "@/service/api-client/api-event";
+import { useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
 
 export default function EventListOfParticipants() {
+  const { id } = useLocalSearchParams();
+  const [listData, setListData] = useState([]);
+  const [isLoadData, setIsLoadData] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    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);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadData(false);
+    }
+  };
+
   return (
     <ViewWrapper>
-      {Array.from({ length: 10 }).map((_, index) => (
-        <BaseBox key={index} paddingBlock={0}>
-          <AvatarUsernameAndOtherComponent avatarHref={`/profile/${index}`} />
-        </BaseBox>
-      ))}
+      {isLoadData ? (
+        <LoaderCustom />
+      ) : listData.length === 0 ? (
+        <TextCustom align="center">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={<BadgeCustom color={item?.isPresent ? "green" : "red"}>{item?.isPresent ? "Hadir" : "Tidak Hadir"}</BadgeCustom>}
+            />
+          </BaseBox>
+        ))
+      )}
     </ViewWrapper>
   );
 }

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

@@ -1,22 +1,44 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCustom,
-    DotButton,
-    DrawerCustom,
-    MenuDrawerDynamicGrid,
-    Spacing,
-    ViewWrapper
+  ButtonCustom,
+  DotButton,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  Spacing,
+  ViewWrapper,
 } from "@/components";
 import { IMenuDrawerItem } from "@/components/_Interface/types";
 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 { useState } from "react";
-import { Alert } from "react-native";
+import { useEffect, 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 [isLoadingJoin, setIsLoadingJoin] = useState(false);
+
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  async function onLoadData() {
+    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);
@@ -24,11 +46,43 @@ export default function EventDetailPublish() {
     setOpenDrawer(false);
   };
 
+  const handlerJoin = async () => {
+    const userId = user?.id;
+    if (!userId) {
+      return Toast.show({
+        type: "error",
+        text2: "Anda belum login",
+      });
+    }
+
+    try {
+      setIsLoadingJoin(true);
+      const response = await apiEventJoin({
+        id: id as string,
+        userId: userId as string,
+      });
+      if (response.success) {
+        router.navigate(
+          `/(application)/(user)/event/${id}/list-of-participants`
+        );
+        Toast.show({
+          type: "success",
+          text1: "Anda berhasil join",
+        });
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setIsLoadingJoin(false);
+    }
+  };
+
   const footerButton = (
     <ButtonCustom
+      isLoading={isLoadingJoin}
       backgroundColor="green"
       textColor="white"
-      onPress={() => Alert.alert("Anda berhasil join event ini")}
+      onPress={() => handlerJoin()}
     >
       Join
     </ButtonCustom>
@@ -44,19 +98,22 @@ export default function EventDetailPublish() {
         }}
       />
       <ViewWrapper>
-        <Event_BoxDetailPublishSection footerButton={footerButton} />
+        <Event_BoxDetailPublishSection
+          data={data}
+          footerButton={footerButton}
+        />
         <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>
     </>

components/Drawer/MenuDrawerDynamicGird.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { TEXT_SIZE_SMALL } from "@/constants/constans-value";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
@@ -5,19 +6,23 @@ import { IMenuDrawerItem } from "../_Interface/types";
 import { Href } from "expo-router";
 
 type IMenuDrawerItemProps = {
-    icon: React.ReactNode;
-    label: string;
-    value?: string;
-    path?: Href | string;
-    color?: string;
-}
+  icon: React.ReactNode;
+  label: string;
+  value?: string;
+  path?: Href | string;
+  color?: string;
+};
 
 interface MenuDrawerDynamicGridProps {
-    data: IMenuDrawerItemProps[];
-    columns?: number;
-    onPressItem?: (item: IMenuDrawerItemProps) => void;
+  data: IMenuDrawerItemProps[];
+  columns?: number;
+  onPressItem?: (item: IMenuDrawerItemProps) => void;
 }
-const MenuDrawerDynamicGrid = ({ data, columns = 4, onPressItem }: MenuDrawerDynamicGridProps) => {
+const MenuDrawerDynamicGrid = ({
+  data,
+  columns = 4,
+  onPressItem,
+}: MenuDrawerDynamicGridProps) => {
   const numColumns = columns;
 
   return (

components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx

@@ -1,7 +1,6 @@
-import { ImageSourcePropType } from "react-native";
 import Divider from "../Divider/Divider";
 import Grid from "../Grid/GridCustom";
-import AvatarCustom from "../Image/AvatarCustom";
+import AvatarComp from "../Image/AvatarComp";
 import TextCustom from "../Text/TextCustom";
 
 const AvatarUsernameAndOtherComponent = ({
@@ -12,7 +11,7 @@ const AvatarUsernameAndOtherComponent = ({
   withBottomLine = false,
 }: {
   avatarHref?: string;
-  avatar?: ImageSourcePropType;
+  avatar?: string;
   name?: string;
   rightComponent?: React.ReactNode;
   withBottomLine?: boolean;
@@ -21,7 +20,7 @@ const AvatarUsernameAndOtherComponent = ({
     <>
       <Grid containerStyle={{ zIndex: 10 }}>
         <Grid.Col span={2}>
-          <AvatarCustom source={avatar} href={avatarHref as any} />
+          <AvatarComp fileId={avatar} href={avatarHref as any} size="base" />
         </Grid.Col>
         <Grid.Col
           span={rightComponent ? 6 : 10}

package.json

@@ -11,65 +11,69 @@
     "lint": "expo lint"
   },
   "dependencies": {
-    "@expo/vector-icons": "^14.1.0",
-    "@react-native-async-storage/async-storage": "2.1.2",
-    "@react-native-community/datetimepicker": "8.4.1",
-    "@react-navigation/bottom-tabs": "^7.4.2",
-    "@react-navigation/drawer": "^7.5.2",
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/datetimepicker": "8.4.4",
+    "@react-navigation/bottom-tabs": "^7.3.10",
+    "@react-navigation/drawer": "^7.3.9",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
-    "@react-navigation/native-stack": "^7.3.21",
+    "@react-navigation/native-stack": "^7.3.10",
     "@types/lodash": "^4.17.20",
     "@types/react-native-vector-icons": "^6.4.18",
     "axios": "^1.11.0",
     "dayjs": "^1.11.13",
-    "expo": "53.0.17",
-    "expo-blur": "~14.1.5",
-    "expo-camera": "~16.1.10",
-    "expo-clipboard": "~7.1.5",
-    "expo-constants": "~17.1.7",
-    "expo-dev-client": "~5.2.4",
-    "expo-document-picker": "~13.1.6",
-    "expo-file-system": "~18.1.11",
-    "expo-font": "~13.3.2",
-    "expo-haptics": "~14.1.4",
-    "expo-image": "~2.3.2",
-    "expo-image-picker": "~16.1.4",
-    "expo-linking": "~7.1.7",
-    "expo-router": "~5.1.3",
-    "expo-splash-screen": "~0.30.10",
-    "expo-status-bar": "~2.2.3",
-    "expo-symbols": "~0.4.5",
-    "expo-system-ui": "~5.0.10",
-    "expo-web-browser": "~14.2.0",
+    "expo": "^54.0.0",
+    "expo-blur": "~15.0.7",
+    "expo-camera": "~17.0.7",
+    "expo-clipboard": "~8.0.7",
+    "expo-constants": "~18.0.8",
+    "expo-dev-client": "~6.0.12",
+    "expo-document-picker": "~14.0.7",
+    "expo-file-system": "~19.0.12",
+    "expo-font": "~14.0.8",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.8",
+    "expo-image-picker": "~17.0.8",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.1",
+    "expo-splash-screen": "~31.0.9",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "expo-system-ui": "~6.0.7",
+    "expo-web-browser": "~15.0.7",
     "lodash": "^4.17.21",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.5",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
     "react-native-dotenv": "^3.4.11",
-    "react-native-gesture-handler": "~2.24.0",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-international-phone-number": "^0.9.3",
     "react-native-maps": "1.20.1",
     "react-native-otp-entry": "^1.8.5",
-    "react-native-pager-view": "6.7.1",
+    "react-native-pager-view": "6.9.1",
     "react-native-paper": "^5.14.5",
     "react-native-qrcode-svg": "^6.3.15",
-    "react-native-reanimated": "~3.17.4",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.11.1",
-    "react-native-svg": "15.11.2",
+    "react-native-reanimated": "~4.1.0",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1",
     "react-native-toast-message": "^2.3.3",
     "react-native-vector-icons": "^10.2.0",
-    "react-native-web": "~0.20.0",
-    "react-native-webview": "13.13.5"
+    "react-native-web": "^0.21.0",
+    "react-native-webview": "13.15.0",
+    "react-native-worklets": "^0.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@types/react": "~19.0.10",
+    "@types/react": "~19.1.10",
     "eslint": "^9.25.0",
-    "eslint-config-expo": "~9.2.0",
+    "eslint-config-expo": "~10.0.0",
     "expo-module-scripts": "^4.1.10",
-    "typescript": "~5.8.3"
+    "typescript": "~5.9.2"
   },
-  "private": true
+  "private": true,
+  "engines": {
+    "bun": ">=1.0.0"
+  }
 }

screens/Event/BoxDetailPublishSection.tsx

@@ -1,21 +1,49 @@
-import {
-    BaseBox,
-    Grid,
-    StackCustom,
-    TextCustom
-} from "@/components";
+import { AvatarUsernameAndOtherComponent, BoxWithHeaderSection, Grid, StackCustom, TextCustom } from "@/components";
+import { dateTimeView } from "@/utils/dateTimeView";
 
 export default function Event_BoxDetailPublishSection({
+  data,
   footerButton,
 }: {
+  data?: any;
   footerButton?: React.ReactNode;
 }) {
+  const listData = [
+    {
+      title: "Lokasi",
+      value: data?.lokasi || "-",
+    },
+    {
+      title: "Tipe Acara",
+      value: data?.EventMaster_TipeAcara?.name || "-",
+    },
+    {
+      title: "Tanggal Mulai",
+      value: dateTimeView({ date: data?.tanggal }) || "-",
+    },
+    {
+      title: "Tanggal Berakhir",
+      value: dateTimeView({ date: data?.tanggalSelesai }) || "-",
+    },
+    {
+      title: "Deskripsi",
+      value: data?.deskripsi || "-",
+    },
+  ];
+
+
   return (
     <>
-      <BaseBox>
+      <BoxWithHeaderSection>
         <StackCustom>
+          <AvatarUsernameAndOtherComponent
+            avatarHref={`/profile/${data?.Author?.Profile?.id}`}
+            name={data?.Author?.username || "-"}
+            avatar={data?.Author?.Profile?.imageId || ""}
+          />
+
           <TextCustom bold align="center" size="xlarge">
-            Judul event publish
+            {data?.title || "-"}
           </TextCustom>
           {listData.map((item, index) => (
             <Grid key={index}>
@@ -28,34 +56,9 @@ export default function Event_BoxDetailPublishSection({
             </Grid>
           ))}
         </StackCustom>
-      </BaseBox>
+      </BoxWithHeaderSection>
 
       {footerButton}
     </>
   );
 }
-
-const listData = [
-  {
-    title: "Lokasi",
-    value:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
-  },
-  {
-    title: "Tipe Acara",
-    value: "Workshop",
-  },
-  {
-    title: "Tanggal Mulai",
-    value: "Senin, 18 Juli 2025, 10:00 WIB",
-  },
-  {
-    title: "Tanggal Berakhir",
-    value: "Selasa, 19 Juli 2025, 12:00 WIB",
-  },
-  {
-    title: "Deskripsi",
-    value:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur eveniet ab eum ducimus tempore a quia deserunt quisquam. Tempora, atque. Aperiam minima asperiores dicta perferendis quis adipisci, dolore optio porro!",
-  },
-];

screens/Event/BoxPublishSection.tsx

@@ -7,21 +7,15 @@ import {
 import { Href } from "expo-router";
 
 export default function Event_BoxPublishSection({
-  id,
-  title,
-  username,
-  description,
   href,
+  data,
 
   // Avatar
   sourceAvatar,
   rightComponentAvatar,
 }: {
-  id: string;
-  title?: string;
-  username?: string;
-  description?: string;
   href: Href;
+  data?: any;
 
   // Avatar
   sourceAvatar?: string;
@@ -32,18 +26,15 @@ export default function Event_BoxPublishSection({
       <BoxWithHeaderSection href={href}>
         <StackCustom gap={"xs"}>
           <AvatarUsernameAndOtherComponent
-            avatarHref={`/profile/${id}`}
-            name={username || "Lorem ipsum dolor sit"}
+            avatarHref={`/profile/${data?.Author?.Profile?.id}`}
+            name={data?.Author?.username || "-"}
             rightComponent={rightComponentAvatar}
-            avatar={sourceAvatar as any}
+            avatar={data?.Author?.Profile?.imageId || ""}
           />
           <TextCustom truncate bold>
-            {title || "Lorem ipsum dolor sit"}
-          </TextCustom>
-          <TextCustom truncate={2}>
-            {description ||
-              "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, obcaecati quia suscipit numquam, voluptates commodi porro impedit natus quos doloremque!"}
+            {data?.title || "-"}
           </TextCustom>
+          <TextCustom truncate={2}>{data?.deskripsi || "-"}</TextCustom>
         </StackCustom>
       </BoxWithHeaderSection>
     </>

screens/Event/ButtonStatusSection.tsx

@@ -1,5 +1,8 @@
 import { AlertDefaultSystem, ButtonCustom, Grid } from "@/components";
-import { apiEventUpdateStatus } from "@/service/api-client/api-event";
+import {
+  apiEventDelete,
+  apiEventUpdateStatus,
+} from "@/service/api-client/api-event";
 import { router } from "expo-router";
 import Toast from "react-native-toast-message";
 
@@ -118,9 +121,26 @@ export default function Event_ButtonStatusSection({
       message: "Apakah Anda yakin ingin menghapus data ini?",
       textLeft: "Batal",
       textRight: "Hapus",
-      onPressRight: () => {
-        console.log("Hapus");
-        router.back();
+      onPressRight: async () => {
+        try {
+          const response = await apiEventDelete({ id: id });
+          if (response.success) {
+            Toast.show({
+              type: "success",
+              text1: response.message,
+            });
+            router.back();
+          } else {
+            Toast.show({
+              type: "info",
+              text1: "Info",
+              text2: response.message,
+            });
+            router.back();
+          }
+        } catch (error) {
+          console.log("[ERROR]", error);
+        }
       },
     });
   };

service/api-client/api-event.ts

@@ -52,7 +52,13 @@ export async function apiEventUpdateStatus({
   }
 }
 
-export async function apiEventUpdateData({ id, data }: { id: string; data: any }) {
+export async function apiEventUpdateData({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
   try {
     const response = await apiConfig.put(`/mobile/event/${id}`, {
       data: data,
@@ -62,3 +68,48 @@ export async function apiEventUpdateData({ id, data }: { id: string; data: any }
     throw error;
   }
 }
+
+export async function apiEventDelete({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.delete(`/mobile/event/${id}`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiEventGetAll() {
+  try {
+    const response = await apiConfig.get(`/mobile/event`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiEventJoin({
+  id,
+  userId,
+}: {
+  id: string;
+  userId?: string;
+}) {
+  try {
+    const response = await apiConfig.post(`/mobile/event/${id}/participants`, {
+      userId: userId,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiEventListOfParticipants({id}: {id: string}){
+  try {
+    const response = await apiConfig.get(`/mobile/event/${id}/participants`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+  

utils/dateTimeView.ts

@@ -7,6 +7,8 @@ export const dateTimeView = ({
   date: any;
   withoutTime?: boolean;
 }) => {
-  const newDate = dayjs(date).format(`DD-MM-YYYY, ${withoutTime ? "" : "HH:mm"}`);
+  const newDate = dayjs(date).format(
+    `DD-MM-YYYY ${withoutTime ? "" : ", HH:mm"}`
+  );
   return newDate;
 };