feat: tambah fitur hapus file existing saat edit komentar diskusi umum

- Edit mode menampilkan file existing dengan chip ✕ merah untuk tandai hapus
- File yang ditandai dikirim sebagai filesToRemove ke backend saat submit
- Reset removedFileIds saat cancel edit

app/(application)/discussion/[id].tsx

@@ -1,247 +1,178 @@
 import AppHeader from "@/components/AppHeader";
 import BorderBottomItem2 from "@/components/borderBottomItem2";
+import DiscussionCommentInput from "@/components/discussion_general/discussionCommentInput";
+import DiscussionCommentList, { CommentFile, CommentItem } from "@/components/discussion_general/discussionCommentList";
 import HeaderRightDiscussionGeneralDetail from "@/components/discussion_general/headerDiscussionDetail";
 import DrawerBottom from "@/components/drawerBottom";
-import ImageUser from "@/components/imageNew";
-import { InputForm } from "@/components/inputForm";
 import MenuItemRow from "@/components/menuItemRow";
 import ModalConfirmation from "@/components/ModalConfirmation";
-import Skeleton from "@/components/skeleton";
 import SkeletonContent from "@/components/skeletonContent";
 import Text from '@/components/Text';
 import { ConstEnv } from "@/constants/ConstEnv";
-import { regexOnlySpacesOrEnter } from "@/constants/OnlySpaceOrEnter";
 import Styles from "@/constants/Styles";
-import { apiDeleteDiscussionGeneralCommentar, apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar, apiUpdateDiscussionGeneralCommentar } from "@/lib/api";
+import { apiDeleteDiscussionGeneralCommentar, apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar, apiSendDiscussionGeneralCommentarWithFile, apiUpdateDiscussionGeneralCommentar } from "@/lib/api";
 import { getDB } from "@/lib/firebaseDatabase";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
-import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { ref } from '@react-native-firebase/database';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { router, Stack, useLocalSearchParams } from "expo-router";
-import React, { useEffect, useState } from "react";
-import { KeyboardAvoidingView, Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
+import { useEffect, useState } from "react";
+import { KeyboardAvoidingView, Platform, RefreshControl, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
 
-type Props = {
-   id: string
-   isActive: boolean
-   title: string
-   desc: string
-   status: number
-   createdAt: string
+type DiscussionDetail = {
+   id: string; isActive: boolean; title: string
+   desc: string; status: number; createdAt: string
 }
 
-type PropsKomentar = {
-   id: string
-   comment: string
-   createdAt: string
-   idUser: string
-   img: string
-   username: string
-   isEdited: boolean
-   updatedAt: string
-}
-
-type PropsFile = {
-   id: string;
-   idStorage: string;
-   name: string;
-   extension: string
-}
+type PropsFile = { id: string; idStorage: string; name: string; extension: string }
 
 export default function DetailDiscussionGeneral() {
    const { token, decryptToken } = useAuthSession()
-   const { colors } = useTheme();
+   const { colors } = useTheme()
    const entityUser = useSelector((state: any) => state.user)
    const entities = useSelector((state: any) => state.entities)
-   const { id } = useLocalSearchParams<{ id: string }>();
-   const [data, setData] = useState<Props>()
-   const [dataKomentar, setDataKomentar] = useState<PropsKomentar[]>([])
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [data, setData] = useState<DiscussionDetail>()
+   const [dataKomentar, setDataKomentar] = useState<CommentItem[]>([])
    const [memberDiscussion, setMemberDiscussion] = useState(false)
    const [fileDiscussion, setFileDiscussion] = useState<PropsFile[]>([])
    const [komentar, setKomentar] = useState('')
+   const [commentFiles, setCommentFiles] = useState<{ uri: string; name: string }[]>([])
    const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
    const [loading, setLoading] = useState(true)
    const [loadingKomentar, setLoadingKomentar] = useState(true)
-   const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
-   const reference = ref(getDB(), `/discussion-general/${id}`);
-   const headerHeight = useHeaderHeight();
-   const [detailMore, setDetailMore] = useState<any>([])
-   const [loadingSendKomentar, setLoadingSendKomentar] = useState(false)
+   const [loadingSend, setLoadingSend] = useState(false)
    const [isVisible, setVisible] = useState(false)
    const [refreshing, setRefreshing] = useState(false)
-   const [selectKomentar, setSelectKomentar] = useState({
-      id: '',
-      comment: ''
-   })
+   const [selectKomentar, setSelectKomentar] = useState<{ id: string; comment: string; files: CommentFile[] }>({ id: '', comment: '', files: [] })
+   const [removedFileIds, setRemovedFileIds] = useState<string[]>([])
    const [viewEdit, setViewEdit] = useState(false)
    const [showDeleteModal, setShowDeleteModal] = useState(false)
+   const reference = ref(getDB(), `/discussion-general/${id}`)
+   const headerHeight = useHeaderHeight()
 
    useEffect(() => {
       const onValueChange = reference.on('value', snapshot => {
-         if (snapshot.val() == null) {
-            reference.set({ trigger: true })
-         }
+         if (snapshot.val() == null) reference.set({ trigger: true })
          handleLoad('komentar', false)
-      });
-
-      // Stop listening for updates when no longer required
-      return () => reference.off('value', onValueChange);
-   }, []);
+      })
+      return () => reference.off('value', onValueChange)
+   }, [])
 
    function updateTrigger() {
       reference.once('value', snapshot => {
-         const data = snapshot.val();
-         reference.update({ trigger: !data.trigger });
-      });
+         reference.update({ trigger: !snapshot.val().trigger })
+      })
    }
 
-
-   async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota' | 'file', loading: boolean) {
+   async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota' | 'file', showLoading: boolean) {
       try {
-         if (cat == "detail") {
-            setLoading(loading)
-         } else if (cat == "komentar") {
-            setLoadingKomentar(loading)
-         }
-
+         if (cat === 'detail') setLoading(showLoading)
+         else if (cat === 'komentar') setLoadingKomentar(showLoading)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat })
-
-         if (cat == 'detail') {
-            setData(response.data)
-         } else if (cat == 'komentar') {
-            setDataKomentar(response.data)
-         } else if (cat == 'cek-anggota') {
-            setMemberDiscussion(response.data)
-         } else if (cat == 'file') {
-            setFileDiscussion(response.data)
-         }
-
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-         setLoadingKomentar(false)
-      }
+         const response = await apiGetDiscussionGeneralOne({ id, user: hasil, cat })
+         if (cat === 'detail') setData(response.data)
+         else if (cat === 'komentar') setDataKomentar(response.data)
+         else if (cat === 'cek-anggota') setMemberDiscussion(response.data)
+         else if (cat === 'file') setFileDiscussion(response.data)
+      } catch (error) { console.error(error) }
+      finally { setLoading(false); setLoadingKomentar(false) }
    }
 
    useEffect(() => {
-      handleLoad('detail', false)
-      handleLoad('komentar', false)
-      handleLoad('cek-anggota', false)
-      handleLoad('file', false)
-   }, [update]);
+      handleLoad('detail', true); handleLoad('komentar', true)
+      handleLoad('cek-anggota', true); handleLoad('file', true)
+   }, [])
 
    useEffect(() => {
-      handleLoad('detail', true)
-      handleLoad('komentar', true)
-      handleLoad('cek-anggota', true)
-      handleLoad('file', true)
-   }, []);
+      handleLoad('detail', false); handleLoad('komentar', false)
+      handleLoad('cek-anggota', false); handleLoad('file', false)
+   }, [update])
 
    async function handleKomentar() {
       try {
-         setLoadingSendKomentar(true)
-         if (komentar != '') {
-            const hasil = await decryptToken(String(token?.current))
-            const response = await apiSendDiscussionGeneralCommentar({ id: id, data: { desc: komentar, user: hasil } })
-            if (response.success) {
-               setKomentar('')
-               updateTrigger()
-            } else {
-               Toast.show({ type: 'small', text1: response.message })
-            }
+         setLoadingSend(true)
+         const hasil = await decryptToken(String(token?.current))
+         let response
+         if (commentFiles.length > 0) {
+            const fd = new FormData()
+            commentFiles.forEach((f, i) =>
+               fd.append(`file${i}`, { uri: f.uri, type: 'application/octet-stream', name: f.name } as any)
+            )
+            fd.append("data", JSON.stringify({ desc: komentar, user: hasil }))
+            response = await apiSendDiscussionGeneralCommentarWithFile(id, fd)
+         } else {
+            response = await apiSendDiscussionGeneralCommentar({ id, data: { desc: komentar, user: hasil } })
+         }
+         if (response.success) {
+            setKomentar(''); setCommentFiles([])
+            updateTrigger()
+         } else {
+            Toast.show({ type: 'small', text1: response.message })
          }
       } catch (error: any) {
-         console.error(error);
-         const message = error?.response?.data?.message || "Gagal menambahkan data"
-
-         Toast.show({ type: 'small', text1: message })
-      } finally {
-         setLoadingSendKomentar(false)
-      }
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menambahkan data" })
+      } finally { setLoadingSend(false) }
    }
 
    async function handleEditKomentar() {
       try {
-         setLoadingSendKomentar(true)
+         setLoadingSend(true)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiUpdateDiscussionGeneralCommentar({ id: selectKomentar.id, data: { desc: selectKomentar.comment, user: hasil } })
-         if (response.success) {
-            updateTrigger()
-         } else {
-            Toast.show({ type: 'small', text1: response.message })
-         }
+         const response = await apiUpdateDiscussionGeneralCommentar({ id: selectKomentar.id, data: { desc: selectKomentar.comment, user: hasil, filesToRemove: removedFileIds } })
+         if (response.success) updateTrigger()
+         else Toast.show({ type: 'small', text1: response.message })
       } catch (error: any) {
-         console.error(error);
-         const message = error?.response?.data?.message || "Gagal mengupdate data"
-
-         Toast.show({ type: 'small', text1: message })
-      } finally {
-         setLoadingSendKomentar(false)
-         handleViewEditKomentar()
-      }
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal mengupdate data" })
+      } finally { setLoadingSend(false); handleViewEditKomentar() }
    }
 
    async function handleDeleteKomentar() {
       try {
-         setLoadingSendKomentar(true)
+         setLoadingSend(true)
          const hasil = await decryptToken(String(token?.current))
          const response = await apiDeleteDiscussionGeneralCommentar({ id: selectKomentar.id, data: { user: hasil } })
-         if (response.success) {
-            updateTrigger()
-         } else {
-            Toast.show({ type: 'small', text1: response.message })
-         }
+         if (response.success) updateTrigger()
+         else Toast.show({ type: 'small', text1: response.message })
       } catch (error: any) {
-         console.error(error);
-         const message = error?.response?.data?.message || "Gagal menghapus data"
-
-         Toast.show({ type: 'small', text1: message })
-      } finally {
-         setLoadingSendKomentar(false)
-         setVisible(false)
-      }
+         Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menghapus data" })
+      } finally { setLoadingSend(false); setVisible(false) }
    }
 
-   function handleMenuKomentar(id: string, comment: string) {
-      setSelectKomentar({ id, comment })
-      setVisible(true)
-   }
+   function handleViewEditKomentar() { setVisible(false); setViewEdit(!viewEdit); setRemovedFileIds([]) }
 
-   function handleViewEditKomentar() {
-      setVisible(false)
-      setViewEdit(!viewEdit)
+   const isLocked = data?.status === 2 || !data?.isActive
+   const isMember = memberDiscussion || (entityUser.role !== "user" && entityUser.role !== "coadmin")
+   const canComment = !isLocked && isMember
+
+   function lockedReason() {
+      if (data?.status === 2) return "Diskusi telah ditutup"
+      if (!data?.isActive) return "Diskusi telah diarsipkan"
+      return "Hanya anggota diskusi yang dapat memberikan komentar"
    }
 
    const handleRefresh = async () => {
       setRefreshing(true)
-      handleLoad('detail', false)
-      handleLoad('komentar', false)
-      handleLoad('cek-anggota', false)
-      handleLoad('file', false)
-      await new Promise(resolve => setTimeout(resolve, 2000));
+      handleLoad('detail', false); handleLoad('komentar', false)
+      handleLoad('cek-anggota', false); handleLoad('file', false)
+      await new Promise(resolve => setTimeout(resolve, 2000))
       setRefreshing(false)
-   };
+   }
 
    return (
       <>
          <Stack.Screen
             options={{
-               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Diskusi',
-               headerTitleAlign: 'center',
-               // headerRight: () => <HeaderRightDiscussionGeneralDetail id={id} active={data?.isActive !== undefined ? data.isActive : false} status={data?.status !== undefined ? data.status : 0} />,
                header: () => (
                   <AppHeader
                      title="Diskusi"
                      showBack={true}
                      onPressLeft={() => router.back()}
-                     right={<HeaderRightDiscussionGeneralDetail id={id} active={data?.isActive !== undefined ? data.isActive : false} status={data?.status !== undefined ? data.status : 0} />}
+                     right={<HeaderRightDiscussionGeneralDetail id={id} active={data?.isActive ?? false} status={data?.status ?? 0} />}
                   />
                )
             }}
@@ -250,219 +181,97 @@ export default function DetailDiscussionGeneral() {
             <ScrollView
                showsVerticalScrollIndicator={false}
                style={[Styles.h100, { backgroundColor: colors.background }]}
-               refreshControl={
-                  <RefreshControl
-                     refreshing={refreshing}
-                     onRefresh={() => handleRefresh()}
-                     tintColor={colors.icon}
-                  />
-               }
+               refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor={colors.icon} />}
             >
-               <View style={[Styles.p15]}>
-                  {
-                     loading ?
-                        <SkeletonContent />
-                        :
-                        <BorderBottomItem2
-                           dataFile={fileDiscussion}
-                           descEllipsize={false}
-                           borderType="all"
-                           bgColor="white"
-                           icon={
-                              <View style={[Styles.discussionIconCircleLg, { backgroundColor: colors.icon + '20' }]}>
-                                 <Feather name="message-circle" size={22} color={colors.icon} />
-                              </View>
-                           }
-                           title={data?.title}
-                           titleShowAll={true}
-                           subtitle={
-                              <View style={[Styles.discussionStatusPill, {
-                                 borderColor: !data?.isActive
-                                    ? '#F59E0B'
-                                    : data?.status == 1 ? '#10B981' : colors.dimmed + '80',
-                              }]}>
-                                 <Text style={[Styles.discussionStatusText, {
-                                    color: !data?.isActive
-                                       ? '#F59E0B'
-                                       : data?.status == 1 ? '#10B981' : colors.dimmed,
-                                 }]}>
-                                    {!data?.isActive ? 'Arsip' : data?.status == 1 ? 'Buka' : 'Tutup'}
-                                 </Text>
-                              </View>
-                           }
-                           desc={data?.desc}
-                           leftBottomInfo={
-                              <View style={[Styles.rowItemsCenter]}>
-                                 <Feather name="message-square" size={14} color={colors.dimmed} style={Styles.mr05} />
-                                 <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{dataKomentar.length} Komentar</Text>
-                              </View>
-                           }
-                           rightBottomInfo={
-                              <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{data?.createdAt}</Text>
-                           }
-                        />
-                  }
-                  <View style={[Styles.mt10]}>
-                     {
-                        loadingKomentar ?
-                           arrSkeleton.map((item: any, i: number) => {
-                              return (
-                                 <Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
-                              )
-                           })
-                           :
-                           dataKomentar.map((item, i) => (
-                              <Pressable
-                                 key={i}
-                                 onPress={() => {
-                                    setDetailMore((prev: any) =>
-                                       prev.includes(item.id)
-                                          ? prev.filter((id: string) => id !== item.id)
-                                          : [...prev, item.id]
-                                    )
-                                 }}
-                                 onLongPress={() => {
-                                    item.idUser == entities.id && data?.status != 2 && data?.isActive && handleMenuKomentar(item.id, item.comment)
-                                 }}
-                                 style={({ pressed }) => [
-                                    Styles.discussionCommentCard,
-                                    {
-                                       backgroundColor: pressed ? colors.icon + '10' : colors.card,
-                                       borderColor: colors.icon + '20',
-                                    }
-                                 ]}
-                              >
-                                 <View style={Styles.flex1}>
-                                    {/* Name + time */}
-                                    <View style={[Styles.rowSpaceBetween, Styles.itemsCenter, Styles.mb05]}>
-                                       <View style={[Styles.rowItemsCenter, { gap: 8, flex: 1, marginRight: 8 }]}>
-                                          <ImageUser src={`${ConstEnv.url_storage}/files/${item.img}`} size="xs" />
-                                          <Text style={[Styles.textMediumSemiBold, { color: colors.text }]} numberOfLines={1}>
-                                             {item.username}
-                                          </Text>
-                                          {item.isEdited && (
-                                             <Text style={[Styles.discussionEditedText, { color: colors.dimmed }]}>
-                                                diedit
-                                             </Text>
-                                          )}
-                                       </View>
-                                       <Text style={[Styles.discussionDateText, { color: colors.dimmed, flexShrink: 0 }]}>
-                                          {item.createdAt}
-                                       </Text>
-                                    </View>
-
-                                    {/* Comment text */}
-                                    <Text
-                                       style={[Styles.textDefault, { color: colors.text }]}
-                                       numberOfLines={detailMore.includes(item.id) ? 0 : 3}
-                                    >
-                                       {item.comment}
-                                    </Text>
-                                 </View>
-                              </Pressable>
-                           ))
-                     }
-                  </View>
-               </View>
-            </ScrollView>
-            <KeyboardAvoidingView
-               behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-               keyboardVerticalOffset={headerHeight}
-            >
-               <View style={[
-                  Styles.contentItemCenter,
-                  Styles.w100,
-                  { backgroundColor: colors.background },
-                  viewEdit && Styles.borderTop
-               ]}>
-                  {
-                     viewEdit ?
-                        <>
-                           <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
-                              <View style={[Styles.rowItemsCenter]}>
-                                 <Feather name="edit-3" color={colors.text} size={22} style={[Styles.mh05]} />
-                                 <Text style={[Styles.textMediumSemiBold]}>Edit Komentar</Text>
-                              </View>
-                              <Pressable onPress={() => handleViewEditKomentar()}>
-                                 <MaterialIcons name="close" color={colors.text} size={22} />
-                              </Pressable>
+               <View style={Styles.p15}>
+                  {loading ? <SkeletonContent /> : (
+                     <BorderBottomItem2
+                        dataFile={fileDiscussion}
+                        descEllipsize={false}
+                        borderType="all"
+                        bgColor="white"
+                        icon={
+                           <View style={[Styles.discussionIconCircleLg, { backgroundColor: colors.icon + '20' }]}>
+                              <Feather name="message-circle" size={22} color={colors.icon} />
                            </View>
-                           <InputForm
-                              disable={(data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin")))}
-                              type="default"
-                              round
-                              placeholder="Kirim Komentar"
-                              onChange={(val: string) => setSelectKomentar({ ...selectKomentar, comment: val })}
-                              value={selectKomentar.comment}
-                              multiline
-                              focus={viewEdit}
-                              itemRight={
-                                 <Pressable
-                                    onPress={() => {
-                                       (!loadingSendKomentar && selectKomentar.comment != '' && !regexOnlySpacesOrEnter.test(selectKomentar.comment) && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
-                                          && handleEditKomentar()
-                                    }}
-                                    style={[Platform.OS == 'android' && Styles.mb12]}
-                                 >
-   <MaterialIcons name="send" size={25} style={(loadingSendKomentar || selectKomentar.comment == '' || regexOnlySpacesOrEnter.test(selectKomentar.comment) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? { color: colors.dimmed } : { color: colors.tint }} />
-                                 </Pressable>
-                              }
-                           />
-                        </>
-                        :
-                        data?.status != 2 && data?.isActive && ((entityUser.role != "user" && entityUser.role != "coadmin") || memberDiscussion)
-                           ?
-                           <InputForm
-                              disable={(data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin")))}
-                              type="default"
-                              round
-                              placeholder="Kirim Komentar"
-                              onChange={setKomentar}
-                              value={komentar}
-                              multiline
-                              focus={viewEdit}
-                              itemRight={
-                                 <Pressable
-                                    onPress={() => {
-                                       (!loadingSendKomentar && komentar != '' && !regexOnlySpacesOrEnter.test(komentar) && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
-                                          && handleKomentar()
-                                    }}
-                                    style={[Platform.OS == 'android' && Styles.mb12]}
-                                 >
-   <MaterialIcons name="send" size={25} style={(loadingSendKomentar || komentar == '' || regexOnlySpacesOrEnter.test(komentar) || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? { color: colors.dimmed } : { color: colors.tint }} />
-                                 </Pressable>
-                              }
-                           />
-                           :
-                           <View style={[Styles.pv20, Styles.itemsCenter]}>
-                              <Text style={[Styles.textInformation, { color: colors.dimmed }]}>
-                                 {
-                                    data?.status == 2 ? "Diskusi telah ditutup" : data?.isActive == false ? "Diskusi telah diarsipkan" : "Hanya anggota diskusi yang dapat memberikan komentar"
-                                 }
+                        }
+                        title={data?.title}
+                        titleShowAll={true}
+                        subtitle={
+                           <View style={[Styles.discussionStatusPill, {
+                              borderColor: !data?.isActive ? '#F59E0B' : data?.status === 1 ? '#10B981' : colors.dimmed + '80'
+                           }]}>
+                              <Text style={[Styles.discussionStatusText, {
+                                 color: !data?.isActive ? '#F59E0B' : data?.status === 1 ? '#10B981' : colors.dimmed
+                              }]}>
+                                 {!data?.isActive ? 'Arsip' : data?.status === 1 ? 'Buka' : 'Tutup'}
                               </Text>
                            </View>
-                  }
-
+                        }
+                        desc={data?.desc}
+                        leftBottomInfo={
+                           <View style={Styles.rowItemsCenter}>
+                              <Feather name="message-square" size={14} color={colors.dimmed} style={Styles.mr05} />
+                              <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{dataKomentar.length} Komentar</Text>
+                           </View>
+                        }
+                        rightBottomInfo={<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{data?.createdAt}</Text>}
+                     />
+                  )}
+                  <DiscussionCommentList
+                     data={dataKomentar}
+                     loading={loadingKomentar}
+                     myId={entities.id}
+                     canInteract={data?.status !== 2 && data?.isActive === true}
+                     onLongPress={(commentId, comment, files) => {
+                        setSelectKomentar({ id: commentId, comment, files })
+                        setRemovedFileIds([])
+                        setVisible(true)
+                     }}
+                  />
                </View>
+            </ScrollView>
+
+            <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={headerHeight}>
+               {canComment ? (
+                  <DiscussionCommentInput
+                     mode={viewEdit ? 'edit' : 'new'}
+                     value={viewEdit ? selectKomentar.comment : komentar}
+                     onChange={viewEdit
+                        ? (val) => setSelectKomentar({ ...selectKomentar, comment: val })
+                        : setKomentar
+                     }
+                     loading={loadingSend}
+                     onSend={viewEdit ? handleEditKomentar : handleKomentar}
+                     onCancelEdit={handleViewEditKomentar}
+                     files={commentFiles}
+                     onAddFile={(newFiles) => setCommentFiles(prev => [...prev, ...newFiles])}
+                     onRemoveFile={(idx) => setCommentFiles(prev => prev.filter((_, i) => i !== idx))}
+                     existingFiles={viewEdit ? selectKomentar.files.filter(f => !removedFileIds.includes(f.id)) : []}
+                     onRemoveExistingFile={(fileId) => setRemovedFileIds(prev => [...prev, fileId])}
+                     canSend={canComment}
+                  />
+               ) : (
+                  <DiscussionCommentInput
+                     mode="locked"
+                     lockedReason={lockedReason()}
+                     value="" onChange={() => {}} loading={false} onSend={() => {}} canSend={false}
+                  />
+               )}
             </KeyboardAvoidingView>
-         </View >
+         </View>
 
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
                   icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
-                  onPress={() => { handleViewEditKomentar() }}
+                  onPress={() => handleViewEditKomentar()}
                />
                <MenuItemRow
                   icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
                   title="Hapus"
-                  onPress={() => {
-                     setVisible(false)
-                     setTimeout(() => {
-                        setShowDeleteModal(true)
-                     }, 600)
-                  }}
+                  onPress={() => { setVisible(false); setTimeout(() => setShowDeleteModal(true), 600) }}
                />
             </View>
          </DrawerBottom>
@@ -471,14 +280,11 @@ export default function DetailDiscussionGeneral() {
             visible={showDeleteModal}
             title="Konfirmasi"
             message="Apakah anda yakin ingin menghapus komentar?"
-            onConfirm={() => {
-               setShowDeleteModal(false)
-               handleDeleteKomentar()
-            }}
+            onConfirm={() => { setShowDeleteModal(false); handleDeleteKomentar() }}
             onCancel={() => setShowDeleteModal(false)}
             confirmText="Hapus"
             cancelText="Batal"
          />
       </>
    )
-}
+}

lib/api/discussion.api.ts

@@ -39,7 +39,14 @@ export const apiSendDiscussionGeneralCommentar = async ({ id, data }: { id: stri
    return response.data;
 };
 
-export const apiUpdateDiscussionGeneralCommentar = async ({ id, data }: { id: string, data: { desc: string, user: string } }) => {
+export const apiSendDiscussionGeneralCommentarWithFile = async (id: string, data: FormData) => {
+   const response = await api.post(`/mobile/discussion-general/${id}/comment`, data, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+   })
+   return response.data;
+};
+
+export const apiUpdateDiscussionGeneralCommentar = async ({ id, data }: { id: string, data: { desc: string, user: string, filesToRemove?: string[] } }) => {
    const response = await api.put(`/mobile/discussion-general/${id}/comment`, data)
    return response.data;
 };