From 005b79868816184b8b67c54a57b9cf8d0aed1f88 Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Fri, 12 Sep 2025 14:14:37 +0800 Subject: [PATCH] Event Fix: - UI: status, detail status, delete button, detail utama, tampilan utama - Semua terintergrasi ke API mobile ### No Issue --- .../(user)/event/(tabs)/index.tsx | 54 +++++++++++--- app/(application)/(user)/event/[id]/edit.tsx | 14 ++-- .../(user)/event/[id]/publish.tsx | 39 +++++++--- .../AvataraAndOtherHeaderComponent.tsx | 7 +- screens/Event/BoxDetailPublishSection.tsx | 72 ++++++++++--------- screens/Event/BoxPublishSection.tsx | 23 ++---- screens/Event/ButtonStatusSection.tsx | 28 ++++++-- service/api-client/api-event.ts | 20 ++++++ utils/dateTimeView.ts | 4 +- 9 files changed, 180 insertions(+), 81 deletions(-) diff --git a/app/(application)/(user)/event/(tabs)/index.tsx b/app/(application)/(user)/event/(tabs)/index.tsx index d54f026..c51ad3c 100644 --- a/app/(application)/(user)/event/(tabs)/index.tsx +++ b/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 ( router.push("/event/create")} /> } > - {Array.from({ length: 10 }).map((_, index) => ( - - ))} + {isLoadData ? ( + + ) : _.isEmpty(listData) ? ( + Belum ada event + ) : ( + listData.map((item: any, index) => ( + + {dateTimeView({ date: item?.tanggal, withoutTime: true })} + + } + /> + )) + )} ); } diff --git a/app/(application)/(user)/event/[id]/edit.tsx b/app/(application)/(user)/event/[id]/edit.tsx index 11e8395..9ca46ed 100644 --- a/app/(application)/(user)/event/[id]/edit.tsx +++ b/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 = { diff --git a/app/(application)/(user)/event/[id]/publish.tsx b/app/(application)/(user)/event/[id]/publish.tsx index 6f143c5..35a2408 100644 --- a/app/(application)/(user)/event/[id]/publish.tsx +++ b/app/(application)/(user)/event/[id]/publish.tsx @@ -1,23 +1,42 @@ +/* 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 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"; import { Alert } from "react-native"; export default function EventDetailPublish() { const { id } = useLocalSearchParams(); const [openDrawer, setOpenDrawer] = 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); router.navigate(item.path as any); @@ -44,19 +63,19 @@ export default function EventDetailPublish() { }} /> - + setOpenDrawer(false)} - height={250} + height={"auto"} > diff --git a/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx b/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx index d25ef4b..9d61fdb 100644 --- a/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx +++ b/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 = ({ <> - + > ", JSON.stringify(data, null, 2)); + return ( <> - + + + - Judul event publish + {data?.title || "-"} {listData.map((item, index) => ( @@ -28,34 +57,9 @@ export default function Event_BoxDetailPublishSection({ ))} - + {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!", - }, -]; diff --git a/screens/Event/BoxPublishSection.tsx b/screens/Event/BoxPublishSection.tsx index 7440e41..5aaea57 100644 --- a/screens/Event/BoxPublishSection.tsx +++ b/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({ - {title || "Lorem ipsum dolor sit"} - - - {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 || "-"} + {data?.deskripsi || "-"} diff --git a/screens/Event/ButtonStatusSection.tsx b/screens/Event/ButtonStatusSection.tsx index 077b168..ac58dc9 100644 --- a/screens/Event/ButtonStatusSection.tsx +++ b/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); + } }, }); }; diff --git a/service/api-client/api-event.ts b/service/api-client/api-event.ts index 6e7098b..b0d9cff 100644 --- a/service/api-client/api-event.ts +++ b/service/api-client/api-event.ts @@ -62,3 +62,23 @@ 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; + } +} + \ No newline at end of file diff --git a/utils/dateTimeView.ts b/utils/dateTimeView.ts index c5c675c..bbed84a 100644 --- a/utils/dateTimeView.ts +++ b/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; };