From 99f058a92f2a9760c3a33c26886bdb9cc424ed69 Mon Sep 17 00:00:00 2001 From: Bagasbanuna02 Date: Tue, 23 Sep 2025 17:41:03 +0800 Subject: [PATCH] Collaboration Add: - (user)/collaboration/[id]/select-of-participants Fix: - Integrasi ke api di bagian beranda , partisipan dan group ### No Issue --- app/(application)/(user)/_layout.tsx | 11 +- .../(user)/collaboration/(tabs)/group.tsx | 106 ++++++-- .../(user)/collaboration/(tabs)/index.tsx | 5 +- .../collaboration/(tabs)/participant.tsx | 82 ++++-- .../collaboration/[id]/[detail]/info.tsx | 65 +++-- .../collaboration/[id]/[detail]/room-chat.tsx | 2 + .../collaboration/[id]/detail-participant.tsx | 74 +++++- .../[id]/detail-project-main.tsx | 129 +++++---- .../(user)/collaboration/[id]/edit.tsx | 188 ++++++++++--- .../(user)/collaboration/[id]/index.tsx | 32 ++- .../[id]/select-of-participants.tsx | 251 ++++++++++++++++++ .../(user)/forum/[id]/forumku.tsx | 1 + components/Modal/ModalCustom.tsx | 92 +++++++ screens/Collaboration/BoxPublishSection.tsx | 2 +- .../ProjectMainSelectedSection.tsx | 4 +- service/api-client/api-collaboration.ts | 51 +++- 16 files changed, 905 insertions(+), 190 deletions(-) create mode 100644 app/(application)/(user)/collaboration/[id]/select-of-participants.tsx create mode 100644 components/Modal/ModalCustom.tsx diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx index fa5a2b0..d55655f 100644 --- a/app/(application)/(user)/_layout.tsx +++ b/app/(application)/(user)/_layout.tsx @@ -118,13 +118,13 @@ export default function UserLayout() { headerLeft: () => , }} /> - , }} - /> + /> */} , }} /> + , + }} + /> {/* ========== End Collaboration Section ========= */} diff --git a/app/(application)/(user)/collaboration/(tabs)/group.tsx b/app/(application)/(user)/collaboration/(tabs)/group.tsx index 5144f93..3cb28c0 100644 --- a/app/(application)/(user)/collaboration/(tabs)/group.tsx +++ b/app/(application)/(user)/collaboration/(tabs)/group.tsx @@ -1,38 +1,98 @@ -import { BaseBox, Grid, TextCustom } from "@/components"; +/* eslint-disable @typescript-eslint/no-unused-vars */ +/* eslint-disable react-hooks/exhaustive-deps */ +import { + BaseBox, + Grid, + LoaderCustom, + StackCustom, + TextCustom, +} from "@/components"; import ViewWrapper from "@/components/_ShareComponent/ViewWrapper"; import { MainColor } from "@/constants/color-palet"; +import { useAuth } from "@/hooks/use-auth"; +import { apiCollaborationGetAll } from "@/service/api-client/api-collaboration"; import { Feather } from "@expo/vector-icons"; +import { useFocusEffect } from "expo-router"; +import _ from "lodash"; +import { useState, useCallback } from "react"; export default function CollaborationGroup() { - + const { user } = useAuth(); + const [listData, setListData] = useState(); + const [loadingGetData, setLoadingGetData] = useState(false); + + useFocusEffect( + useCallback(() => { + onLoadData(); + }, [user?.id]) + ); + + const onLoadData = async () => { + try { + setLoadingGetData(true); + const response = await apiCollaborationGetAll({ + category: "group", + authorId: user?.id, + }); + + console.log("[RES >>]", JSON.stringify(response.data, null, 2)); + + if (response.success) { + setListData(response.data); + } + } catch (error) { + console.log("[ERROR]", error); + } finally { + setLoadingGetData(false); + } + }; return ( - {Array.from({ length: 10 }).map((_, index) => ( - - - - {generateProjectName()} - 2 Anggota - - + ) : _.isEmpty(listData) ? ( + Tidak ada data + ) : ( + + {listData?.map((item: any, index: any) => ( + - - - - - ))} + + + + {item?.ProjectCollaboration_RoomChat?.name} + + + { + item?.ProjectCollaboration_RoomChat + ?.ProjectCollaboration_AnggotaRoomChat?.length + }{" "} + Anggota + + + + + + + + ))} + + )} ); } - function generateProjectName() { const adjectives = [ "Blue", @@ -65,4 +125,4 @@ function generateProjectName() { const randomNoun = nouns[Math.floor(Math.random() * nouns.length)]; return randomAdjective + randomNoun; -} \ No newline at end of file +} diff --git a/app/(application)/(user)/collaboration/(tabs)/index.tsx b/app/(application)/(user)/collaboration/(tabs)/index.tsx index 1a96457..8c15106 100644 --- a/app/(application)/(user)/collaboration/(tabs)/index.tsx +++ b/app/(application)/(user)/collaboration/(tabs)/index.tsx @@ -23,7 +23,9 @@ export default function CollaborationBeranda() { const onLoadData = async () => { try { setLoadingGetData(true); - const response = await apiCollaborationGetAll(); + const response = await apiCollaborationGetAll({ + category: "beranda", + }); setListData(response.data); } catch (error) { @@ -32,6 +34,7 @@ export default function CollaborationBeranda() { setLoadingGetData(false); } }; + return ( <> ( - "participant" + const [activeCategory, setActiveCategory] = useState< + "participant" | "my-project" + >("participant"); + const { user } = useAuth(); + const [listData, setListData] = useState(); + const [loadingGetData, setLoadingGetData] = useState(false); + + useFocusEffect( + useCallback(() => { + onLoadData(); + }, [activeCategory]) ); + const onLoadData = async () => { + try { + setLoadingGetData(true); + const response = await apiCollaborationGetAll({ + category: + activeCategory === "participant" ? "participant" : "my-project", + authorId: user?.id, + }); + + setListData(response.data); + } catch (error) { + console.log("[ERROR]", error); + } finally { + setLoadingGetData(false); + } + }; + const handlePress = (item: any) => { setActiveCategory(item); // tambahkan logika lain seperti filter dsb. @@ -41,13 +72,13 @@ export default function CollaborationParticipans() { handlePress("main")} + onPress={() => handlePress("my-project")} > Proyek Saya @@ -56,22 +87,27 @@ export default function CollaborationParticipans() { return ( - {Array.from({ length: 10 }).map((_, index) => ( - - ))} + {loadingGetData ? ( + + ) : _.isEmpty(listData) ? ( + Tidak ada data + ) : activeCategory === "participant" ? ( + listData?.map((item: any, index: number) => ( + + )) + ) : ( + listData?.map((item: any, index: number) => ( + + )) + )} ); } diff --git a/app/(application)/(user)/collaboration/[id]/[detail]/info.tsx b/app/(application)/(user)/collaboration/[id]/[detail]/info.tsx index 8362799..316245b 100644 --- a/app/(application)/(user)/collaboration/[id]/[detail]/info.tsx +++ b/app/(application)/(user)/collaboration/[id]/[detail]/info.tsx @@ -1,17 +1,41 @@ +/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable @typescript-eslint/no-unused-vars */ import { AvatarUsernameAndOtherComponent, BackButton, + BaseBox, BoxWithHeaderSection, Grid, StackCustom, TextCustom, ViewWrapper, } from "@/components"; -import { Stack, useLocalSearchParams } from "expo-router"; +import { apiCollaborationGroup } from "@/service/api-client/api-collaboration"; +import { Stack, useFocusEffect, useLocalSearchParams } from "expo-router"; +import { useState, useCallback } from "react"; export default function CollaborationRoomInfo() { const { id, detail } = useLocalSearchParams(); + const [data, setData] = useState(); + + useFocusEffect( + useCallback(() => { + onLoadData(); + }, [id]) + ); + + const onLoadData = async () => { + try { + const response = await apiCollaborationGroup({ id: id as string }); + + if (response.success) { + setData(response.data); + } + } catch (error) { + console.log("[ERROR]", error); + } + }; + return ( <> - {listData.map((item, index) => ( + {listData({ data }).map((item, index) => ( {item.title} @@ -37,37 +61,42 @@ export default function CollaborationRoomInfo() { - - {Array.from({ length: 10 }).map((_, index) => ( - - ))} - + + + {data?.ProjectCollaboration_AnggotaRoomChat?.map( + (item: any, index: number) => ( + + ) + )} + + ); } -const listData = [ +const listData = ({ data }: { data: any }) => [ { title: "Judul Proyek", - value: "Judul Proyek", + value: data?.ProjectCollaboration?.title || "-", }, { title: "Industri", - value: "Pilihan Industri", - }, - { - title: "Deskripsi", - value: "Deskripsi Proyek", + value: + data?.ProjectCollaboration?.ProjectCollaborationMaster_Industri?.name || + "-", }, { title: "Tujuan Proyek", - value: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + value: data?.ProjectCollaboration?.purpose || "-", }, { title: "Keuntungan Proyek", - value: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + value: data?.ProjectCollaboration?.benefit || "-", }, ]; diff --git a/app/(application)/(user)/collaboration/[id]/[detail]/room-chat.tsx b/app/(application)/(user)/collaboration/[id]/[detail]/room-chat.tsx index 542d58f..1e3c9c7 100644 --- a/app/(application)/(user)/collaboration/[id]/[detail]/room-chat.tsx +++ b/app/(application)/(user)/collaboration/[id]/[detail]/room-chat.tsx @@ -1,3 +1,4 @@ + import { BackButton, BoxButtonOnFooter, @@ -15,6 +16,7 @@ import { StyleSheet, TouchableOpacity, View } from "react-native"; export default function CollaborationRoomChat() { const { id, detail } = useLocalSearchParams(); + const inputChat = () => { return ( <> diff --git a/app/(application)/(user)/collaboration/[id]/detail-participant.tsx b/app/(application)/(user)/collaboration/[id]/detail-participant.tsx index 5a11ddd..e7bd6b8 100644 --- a/app/(application)/(user)/collaboration/[id]/detail-participant.tsx +++ b/app/(application)/(user)/collaboration/[id]/detail-participant.tsx @@ -1,26 +1,54 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { - AvatarUsernameAndOtherComponent, - BaseBox, + BackButton, + DotButton, DrawerCustom, - StackCustom, - TextCustom, - ViewWrapper, + MenuDrawerDynamicGrid, + ViewWrapper } from "@/components"; -import { ICON_SIZE_SMALL } from "@/constants/constans-value"; import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection"; -import { MaterialIcons } from "@expo/vector-icons"; -import { useLocalSearchParams } from "expo-router"; -import { useState } from "react"; +import { apiCollaborationGetOne } from "@/service/api-client/api-collaboration"; +import { Ionicons } from "@expo/vector-icons"; +import { router, Stack, useFocusEffect, useLocalSearchParams } from "expo-router"; +import { useCallback, useState } from "react"; export default function CollaborationDetailParticipant() { const { id } = useLocalSearchParams(); const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false); + const [data, setData] = useState(); + + useFocusEffect( + useCallback(() => { + onLoadData(); + }, [id]) + ); + + const onLoadData = async () => { + try { + const response = await apiCollaborationGetOne({ id: id as string }); + if (response.success) { + setData(response.data); + } + } catch (error) { + console.log("[ERROR]", error); + } + }; return ( <> + , + headerRight: () => ( + setOpenDrawerParticipant(true)} /> + ), + }} + /> + - - + + {/* Partisipan @@ -39,13 +67,33 @@ export default function CollaborationDetailParticipant() { } /> ))} - + */} setOpenDrawerParticipant(false)} height={"auto"} + > + , + label: "Daftar Partisipan", + path: `/collaboration/${id}/list-of-participants`, + }, + ]} + onPressItem={(item) => { + router.push(item.path as any); + setOpenDrawerParticipant(false); + }} + /> + + + {/* setOpenDrawerParticipant(false)} + height={"auto"} > Deskripsi Diri @@ -56,7 +104,7 @@ export default function CollaborationDetailParticipant() { Temporibus iusto soluta necessitatibus. - + */} ); } diff --git a/app/(application)/(user)/collaboration/[id]/detail-project-main.tsx b/app/(application)/(user)/collaboration/[id]/detail-project-main.tsx index 51c079b..04d704a 100644 --- a/app/(application)/(user)/collaboration/[id]/detail-project-main.tsx +++ b/app/(application)/(user)/collaboration/[id]/detail-project-main.tsx @@ -1,30 +1,65 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { - AlertDefaultSystem, BackButton, - ButtonCustom, DotButton, DrawerCustom, + LoaderCustom, MenuDrawerDynamicGrid, Spacing, - StackCustom, - TextCustom, - ViewWrapper, + ViewWrapper } from "@/components"; import { IconEdit } from "@/components/_Icon"; import Collaboration_BoxDetailSection from "@/screens/Collaboration/BoxDetailSection"; -import Collaboration_MainParticipanSelectedSection from "@/screens/Collaboration/ProjectMainSelectedSection"; -import { router, Stack, useLocalSearchParams } from "expo-router"; -import { useState } from "react"; +import { + apiCollaborationGetOne +} from "@/service/api-client/api-collaboration"; +import { MaterialIcons } from "@expo/vector-icons"; +import { + router, + Stack, + useFocusEffect, + useLocalSearchParams, +} from "expo-router"; +import { useCallback, useState } from "react"; export default function CollaborationDetailProjectMain() { const { id } = useLocalSearchParams(); const [openDrawer, setOpenDrawer] = useState(false); - const [openDrawerParticipant, setOpenDrawerParticipant] = useState(false); - const [selected, setSelected] = useState<(string | number)[]>([]); + const [data, setData] = useState(); + const [loadingGetData, setLoadingGetData] = useState(false); - const handleEdit = () => { - console.log("Edit collaboration"); - router.push("/(application)/(user)/collaboration/(id)/edit"); + useFocusEffect( + useCallback(() => { + handlerLoadData(); + }, [id]) + ); + + const handlerLoadData = async () => { + try { + setLoadingGetData(true); + await onLoadData(); + } catch (error) { + console.log("[ERROR]", error); + } finally { + setLoadingGetData(false); + } + }; + + const onLoadData = async () => { + try { + const response = await apiCollaborationGetOne({ id: id as string }); + if (response.success) { + setData(response.data); + } + } catch (error) { + console.log("[ERROR]", error); + } + }; + + const handleSubmit = (item: any) => { + console.log("item :", item); + router.push(item.path); + setOpenDrawer(false); }; return ( @@ -37,34 +72,21 @@ export default function CollaborationDetailProjectMain() { }} /> - - + {loadingGetData ? ( + + ) : ( + <> + + {/* */} - { - AlertDefaultSystem({ - title: "Buat Grup", - message: - "Apakah anda yakin ingin membuat grup untuk proyek ini ?", - textLeft: "Tidak", - textRight: "Ya", - onPressLeft: () => {}, - onPressRight: () => { - router.navigate( - "/(application)/(user)/collaboration/(tabs)/group" - ); - console.log("selected :", selected); - }, - }); - }} - > - Buat Grup - - + + + )} , }, + { + label: "Pilih Partisipan", + path: `/(application)/(user)/collaboration/${id}/select-of-participants`, + icon: , + }, ]} - onPressItem={(item) => { - handleEdit(); + onPressItem={(item: any) => { + handleSubmit(item); }} /> - - setOpenDrawerParticipant(false)} - height={"auto"} - > - - Deskripsi Diri - - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, - itaque adipisci. Voluptas, sed quod! Ad facere labore voluptates, - neque quidem aut reprehenderit ducimus mollitia quisquam temporibus! - Temporibus iusto soluta necessitatibus. - - - ); } diff --git a/app/(application)/(user)/collaboration/[id]/edit.tsx b/app/(application)/(user)/collaboration/[id]/edit.tsx index 233bfe8..d4bc4ed 100644 --- a/app/(application)/(user)/collaboration/[id]/edit.tsx +++ b/app/(application)/(user)/collaboration/[id]/edit.tsx @@ -1,53 +1,171 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { ButtonCustom, + LoaderCustom, SelectCustom, StackCustom, TextAreaCustom, TextInputCustom, ViewWrapper, } from "@/components"; -import { router } from "expo-router"; +import { + apiCollaborationEditData, + apiCollaborationGetOne, +} from "@/service/api-client/api-collaboration"; +import { apiMasterCollaborationType } from "@/service/api-client/api-master"; +import { router, useFocusEffect, useLocalSearchParams } from "expo-router"; +import { useCallback, useState } from "react"; +import Toast from "react-native-toast-message"; export default function CollaborationEdit() { + const { id } = useLocalSearchParams(); + console.log("id :", id); + const [data, setData] = useState(); + const [listMaster, setListMaster] = useState([]); + const [loadingData, setLoadingData] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + useFocusEffect( + useCallback(() => { + const fetchData = async () => { + try { + setLoadingData(true); + await onLoadData(); + await onLoadMaster(); + } catch (error) { + console.log("[ERROR]", error); + } finally { + setLoadingData(false); + } + }; + fetchData(); + }, [id]) + ); + + const onLoadData = async () => { + try { + const response = await apiCollaborationGetOne({ id: id as string }); + + if (response.success) { + setData(response.data); + } + } catch (error) { + console.log("[ERROR]", error); + } + }; + + async function onLoadMaster() { + try { + const response = await apiMasterCollaborationType(); + setListMaster(response.data); + } catch (error) { + console.log("[ERROR]", error); + } + } + + const handlerSubmitUpdate = async () => { + if ( + !data?.title || + !data?.lokasi || + !data?.projectCollaborationMaster_IndustriId || + !data?.purpose || + !data?.benefit + ) { + Toast.show({ + type: "error", + text1: "Gagal", + text2: "Harap isi semua data", + }); + return; + } + + try { + setIsLoading(true); + const response = await apiCollaborationEditData({ + id: id as string, + data: data, + }); + + if (response.success) { + Toast.show({ + type: "success", + text1: response.message, + }); + router.back(); + } else { + Toast.show({ + type: "error", + text1: response.message, + }); + } + } catch (error) { + console.log("[ERROR]", error); + } finally { + setIsLoading(false); + } + }; + return ( - - - - console.log(value)} - /> + {loadingData ? ( + + ) : ( + + setData({ ...data, title: value })} + /> + setData({ ...data, lokasi: value })} + /> + ({ + label: item.name, + value: item.id, + }))} + value={data?.projectCollaborationMaster_IndustriId} + onChange={(value) => + setData({ ...data, projectCollaborationMaster_IndustriId: value }) + } + /> - + setData({ ...data, purpose: value })} + /> - + setData({ ...data, benefit: value })} + /> - { - console.log("Update proyek"); - router.back(); - }} - /> - + { + handlerSubmitUpdate(); + }} + /> + + )} ); } diff --git a/app/(application)/(user)/collaboration/[id]/index.tsx b/app/(application)/(user)/collaboration/[id]/index.tsx index 5c5f4c4..43cb50a 100644 --- a/app/(application)/(user)/collaboration/[id]/index.tsx +++ b/app/(application)/(user)/collaboration/[id]/index.tsx @@ -4,6 +4,7 @@ import { ButtonCustom, DotButton, DrawerCustom, + InformationBox, LoaderCustom, MenuDrawerDynamicGrid, ViewWrapper, @@ -26,7 +27,7 @@ import { useCallback, useState } from "react"; export default function CollaborationDetail() { const { user } = useAuth(); const { id } = useLocalSearchParams(); - const [data, setData] = useState(); + const [data, setData] = useState(); const [openDrawerMenu, setOpenDrawerMenu] = useState(false); const [isParticipant, setIsParticipant] = useState(false); const [loadingIsParticipant, setLoadingIsParticipant] = useState(false); @@ -41,6 +42,7 @@ export default function CollaborationDetail() { const onLoadData = async () => { try { const response = await apiCollaborationGetOne({ id: id as string }); + if (response.success) { setData(response.data); } @@ -84,17 +86,25 @@ export default function CollaborationDetail() { ) : ( <> + {user?.id === data?.Author?.id && ( + + )} - - { - router.push(`/collaboration/${id}/create-pacticipants`); - // setOpenDrawerPartisipasi(true); - }} - > - {isParticipant ? "Anda telah berpartisipasi" : "Partisipasi"} - + {user?.id !== data?.Author?.id && ( + { + router.push(`/collaboration/${id}/create-pacticipants`); + // setOpenDrawerPartisipasi(true); + }} + > + {isParticipant ? "Anda telah berpartisipasi" : "Partisipasi"} + + )} )} diff --git a/app/(application)/(user)/collaboration/[id]/select-of-participants.tsx b/app/(application)/(user)/collaboration/[id]/select-of-participants.tsx new file mode 100644 index 0000000..8c2cb8a --- /dev/null +++ b/app/(application)/(user)/collaboration/[id]/select-of-participants.tsx @@ -0,0 +1,251 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import { + AlertDefaultSystem, + AvatarComp, + BaseBox, + BoxButtonOnFooter, + ButtonCustom, + CheckboxCustom, + CheckboxGroup, + DrawerCustom, + Grid, + LoaderCustom, + Spacing, + StackCustom, + TextAreaCustom, + TextCustom, + ViewWrapper, +} from "@/components"; +import ModalCustom from "@/components/Modal/ModalCustom"; +import { ICON_SIZE_SMALL } from "@/constants/constans-value"; +import { useAuth } from "@/hooks/use-auth"; +import { + apiCollaborationCreateGroup, + apiCollaborationGetParticipants, +} from "@/service/api-client/api-collaboration"; +import { MaterialIcons } from "@expo/vector-icons"; +import { router, useLocalSearchParams } from "expo-router"; +import _ from "lodash"; +import { useEffect, useState } from "react"; +import { ScrollView, View } from "react-native"; +import Toast from "react-native-toast-message"; + +export default function CollaborationSelectOfParticipants() { + const { user } = useAuth(); + const { id } = useLocalSearchParams(); + const [listData, setListData] = useState(); + const [loadingGetData, setLoadingGetData] = useState(false); + const [description, setDescription] = useState(""); + const [selected, setSelected] = useState<(string | number)[]>([]); + const [openDrawer, setOpenDrawer] = useState(false); + const [nameGroup, setNameGroup] = useState(""); + const [openModal, setOpenModal] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + onLoadData(); + }, [id]); + + const onLoadData = async () => { + try { + setLoadingGetData(true); + const response = await apiCollaborationGetParticipants({ + category: "list", + id: id as string, + }); + // console.log("response :", JSON.stringify(response.data, null, 2)); + + if (response.success) { + setListData(response.data); + } + } catch (error) { + console.log("[ERROR]", error); + } finally { + setLoadingGetData(false); + } + }; + + const handlerCreateGroup = async () => { + if (_.isEmpty(nameGroup)) { + Toast.show({ + type: "error", + text1: "Nama grup tidak boleh kosong", + }); + return; + } + try { + setIsLoading(true); + const response = await apiCollaborationCreateGroup({ + id: id as string, + data: { + authorId: user?.id, + nameGroup: nameGroup, + listSelect: selected, + }, + }); + + if (response.success) { + Toast.show({ + type: "success", + text1: "Grup berhasil dibuat", + }); + router.push("/(application)/(user)/collaboration/(tabs)/group"); + } else { + Toast.show({ + type: "error", + text1: "Gagal membuat grup", + }); + } + } catch (error) { + console.log("[ERROR]", error); + } finally { + setIsLoading(false); + } + }; + + const handlerSubmit = () => { + return ( + <> + + { + setOpenModal(true); + setNameGroup(""); + }} + > + Buat Grup + + + + ); + }; + + return ( + <> + + {loadingGetData ? ( + + ) : _.isEmpty(listData) ? ( + Tidak ada partisipan + ) : ( + + + *{" "} + + Pilih user yang akan menjadi tim proyek anda + + + + { + console.log("val :", val); + setSelected(val); + }} + > + {listData?.map((item: any, index: any) => ( + + + + + + + + + + + {item?.User?.username} + + + + { + setOpenDrawer(true); + setDescription(item?.deskripsi_diri); + }} + /> + + + + ))} + + + )} + + + + + setNameGroup(val)} + /> + + + { + setOpenModal(false); + }} + > + Batal + + + + { + AlertDefaultSystem({ + title: "Buat Grup", + message: + "Apakah anda yakin ingin membuat grup untuk proyek ini ?", + textLeft: "Tidak", + textRight: "Ya", + onPressLeft: () => {}, + onPressRight: () => { + handlerCreateGroup(); + }, + }); + }} + > + Simpan + + + + + + + {/* Drawer */} + setOpenDrawer(false)} + > + + Deskripsi diri + + + {description} + + + + + + + ); +} diff --git a/app/(application)/(user)/forum/[id]/forumku.tsx b/app/(application)/(user)/forum/[id]/forumku.tsx index 06d48ec..1e14391 100644 --- a/app/(application)/(user)/forum/[id]/forumku.tsx +++ b/app/(application)/(user)/forum/[id]/forumku.tsx @@ -22,6 +22,7 @@ export default function Forumku() { const [status, setStatus] = useState(""); const [alertStatus, setAlertStatus] = useState(false); const [deleteAlert, setDeleteAlert] = useState(false); + return ( <> diff --git a/components/Modal/ModalCustom.tsx b/components/Modal/ModalCustom.tsx new file mode 100644 index 0000000..eb75649 --- /dev/null +++ b/components/Modal/ModalCustom.tsx @@ -0,0 +1,92 @@ +import { AccentColor, MainColor } from "@/constants/color-palet"; +import { TEXT_SIZE_LARGE } from "@/constants/constans-value"; +import React from "react"; +import { + Keyboard, + StyleSheet, + TouchableWithoutFeedback, + View, +} from "react-native"; + +interface AlertCustomProps { + children: React.ReactNode; + isVisible: boolean; +} + +export default function ModalCustom({ + children, + isVisible, +}: AlertCustomProps) { + if (!isVisible) return null; + + return ( + + + + {children} + + + + ); +} + +const styles = StyleSheet.create({ + overlay: { + position: "absolute", + top: 0, + left: 0, + right: 0, + bottom: 0, + backgroundColor: "rgba(0,0,0,0.5)", + justifyContent: "center", + alignItems: "center", + zIndex: 999, + paddingVertical: 20, + }, + alertBox: { + width: "90%", + backgroundColor: MainColor.darkblue, + borderColor: AccentColor.blue, + borderWidth: 1, + borderRadius: 10, + padding: 20, + alignItems: "center", + shadowColor: "#000", + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.25, + elevation: 5, + }, + alertTitle: { + fontSize: TEXT_SIZE_LARGE, + fontWeight: "bold", + marginBottom: 20, + color: MainColor.white_gray, + }, + alertMessage: { + textAlign: "center", + marginBottom: 20, + color: MainColor.white_gray, + }, + alertButtons: { + flexDirection: "row", + justifyContent: "space-between", + width: "100%", + }, + alertButton: { + flex: 1, + padding: 10, + borderRadius: 50, + marginHorizontal: 5, + alignItems: "center", + }, + leftButton: { + backgroundColor: "gray", + }, + rightButton: { + backgroundColor: MainColor.green, + }, + buttonText: { + color: "white", + fontWeight: "bold", + }, +}); diff --git a/screens/Collaboration/BoxPublishSection.tsx b/screens/Collaboration/BoxPublishSection.tsx index 2f63a93..79daeb5 100644 --- a/screens/Collaboration/BoxPublishSection.tsx +++ b/screens/Collaboration/BoxPublishSection.tsx @@ -28,7 +28,7 @@ function Collaboration_BoxPublishSection({ /> - + {data?.title || "-"} {data?.purpose || "-"} diff --git a/screens/Collaboration/ProjectMainSelectedSection.tsx b/screens/Collaboration/ProjectMainSelectedSection.tsx index 3dba588..102a18c 100644 --- a/screens/Collaboration/ProjectMainSelectedSection.tsx +++ b/screens/Collaboration/ProjectMainSelectedSection.tsx @@ -15,10 +15,12 @@ export default function Collaboration_ProjectMainSelectedSection({ selected, setSelected, setOpenDrawerParticipant, + listData, }: { selected: (string | number)[]; setSelected: (value: (string | number)[]) => void; setOpenDrawerParticipant: (value: boolean) => void; + listData: any[]; }) { return ( @@ -31,7 +33,7 @@ export default function Collaboration_ProjectMainSelectedSection({ - {Array.from({ length: 5 }).map((_, index) => ( + {listData?.map((item: any, index: any) => (