From 3370f482386d7297031de4b976efe4ee7c8a7c4e Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 9 Jun 2026 17:35:22 +0800
Subject: [PATCH] feat: redesign input komentar gaya messaging app dan tampilan
 file lampiran

- Input komentar: tombol + di kiri, pill input flex-1, tombol send lingkaran di kanan
- Tampilan file di komentar: semua tipe file sebagai card (tidak ada preview inline)
- Grid 2 kolom untuk file, chip '+N lainnya' jika lebih dari 2
- Modal full screen saat klik '+N lainnya' dengan grid 2 kolom
- Preview gambar via ImageViewing (dalam modal dan di luar modal)
- File non-gambar dibuka via native viewer (download + intent/share)
---
 .../discussionCommentInput.tsx                | 171 +++++++++++
 .../discussionCommentList.tsx                 | 275 ++++++++++++++++++
 2 files changed, 446 insertions(+)
 create mode 100644 components/discussion_general/discussionCommentInput.tsx
 create mode 100644 components/discussion_general/discussionCommentList.tsx

diff --git a/components/discussion_general/discussionCommentInput.tsx b/components/discussion_general/discussionCommentInput.tsx
new file mode 100644
index 0000000..020177f
--- /dev/null
+++ b/components/discussion_general/discussionCommentInput.tsx
@@ -0,0 +1,171 @@
+import Text from "@/components/Text";
+import { regexOnlySpacesOrEnter } from "@/constants/OnlySpaceOrEnter";
+import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
+import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
+import { Platform, Pressable, ScrollView, TextInput, View } from "react-native";
+import Toast from "react-native-toast-message";
+
+type Props = {
+   mode: 'new' | 'edit' | 'locked'
+   lockedReason?: string
+   value: string
+   onChange: (val: string) => void
+   loading: boolean
+   onSend: () => void
+   onCancelEdit?: () => void
+   files?: { uri: string; name: string }[]
+   onAddFile?: (files: { uri: string; name: string }[]) => void
+   onRemoveFile?: (index: number) => void
+   existingFiles?: { id: string; name: string; extension: string }[]
+   onRemoveExistingFile?: (id: string) => void
+   canSend: boolean
+}
+
+export default function DiscussionCommentInput({
+   mode, lockedReason, value, onChange, loading, onSend,
+   onCancelEdit, files = [], onAddFile, onRemoveFile,
+   existingFiles = [], onRemoveExistingFile, canSend
+}: Props) {
+   const { colors } = useTheme()
+
+   async function pickFiles() {
+      const result = await DocumentPicker.getDocumentAsync({ type: ['*/*'], multiple: true })
+      if (!result.canceled && onAddFile) {
+         let skipped = 0
+         const newFiles: { uri: string; name: string }[] = []
+         for (const asset of result.assets) {
+            if (!asset.uri) continue
+            if (files.some(f => f.name === asset.name)) { skipped++; continue }
+            newFiles.push({ uri: asset.uri, name: asset.name })
+         }
+         if (skipped > 0) Toast.show({ type: 'small', text1: 'Beberapa file sudah ditambahkan' })
+         if (newFiles.length > 0) onAddFile(newFiles)
+      }
+   }
+
+   if (mode === 'locked') {
+      return (
+         <View style={[Styles.pv20, Styles.itemsCenter]}>
+            <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{lockedReason}</Text>
+         </View>
+      )
+   }
+
+   const sendDisabled = loading || value.trim() === '' || regexOnlySpacesOrEnter.test(value) || !canSend
+
+   return (
+      <View style={{ backgroundColor: colors.background, borderTopWidth: mode === 'edit' ? 1 : 0, borderTopColor: colors.icon + '20' }}>
+         {mode === 'edit' && (
+            <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
+               <View style={Styles.rowItemsCenter}>
+                  <Feather name="edit-3" color={colors.text} size={20} style={Styles.mh05} />
+                  <Text style={Styles.textMediumSemiBold}>Edit Komentar</Text>
+               </View>
+               <Pressable onPress={onCancelEdit}>
+                  <MaterialIcons name="close" color={colors.text} size={20} />
+               </Pressable>
+            </View>
+         )}
+
+         {(existingFiles.length > 0 || files.length > 0) && (
+            <ScrollView horizontal style={[Styles.ph15, Styles.pv05]} showsHorizontalScrollIndicator={false}>
+               {existingFiles.map((f) => (
+                  <Pressable
+                     key={f.id}
+                     onPress={() => onRemoveExistingFile?.(f.id)}
+                     style={{
+                        flexDirection: 'row', alignItems: 'center', gap: 6,
+                        paddingHorizontal: 10, paddingVertical: 6,
+                        borderRadius: 20, borderWidth: 1,
+                        backgroundColor: colors.card, borderColor: colors.icon + '18',
+                        marginRight: 8
+                     }}
+                  >
+                     <MaterialCommunityIcons name="file-outline" size={14} color={colors.dimmed} />
+                     <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, maxWidth: 100 }]} numberOfLines={1}>
+                        {f.name}.{f.extension}
+                     </Text>
+                     <MaterialIcons name="close" size={14} color='#F03E3E' />
+                  </Pressable>
+               ))}
+               {files.map((f, idx) => (
+                  <Pressable
+                     key={idx}
+                     onPress={() => onRemoveFile?.(idx)}
+                     style={{
+                        flexDirection: 'row', alignItems: 'center', gap: 6,
+                        paddingHorizontal: 10, paddingVertical: 6,
+                        borderRadius: 20, borderWidth: 1,
+                        backgroundColor: colors.card, borderColor: colors.icon + '18',
+                        marginRight: 8
+                     }}
+                  >
+                     <MaterialCommunityIcons name="file-outline" size={14} color={colors.dimmed} />
+                     <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, maxWidth: 100 }]} numberOfLines={1}>
+                        {f.name}
+                     </Text>
+                     <MaterialIcons name="close" size={14} color={colors.dimmed} />
+                  </Pressable>
+               ))}
+            </ScrollView>
+         )}
+
+         <View style={{
+            flexDirection: 'row', alignItems: 'flex-end',
+            paddingHorizontal: 12,
+            paddingBottom: Platform.OS === 'ios' ? 10 : 6,
+            paddingTop: 6,
+            gap: 8
+         }}>
+            {mode === 'new' && (
+               <Pressable
+                  onPress={pickFiles}
+                  style={{ marginBottom: 6 }}
+               >
+                  <MaterialIcons
+                     name="add"
+                     size={28}
+                     color={files.length > 0 ? colors.tabActive : colors.dimmed}
+                  />
+               </Pressable>
+            )}
+
+            <View style={{
+               flex: 1,
+               backgroundColor: colors.input,
+               borderRadius: 30, borderWidth: 1, borderColor: colors.icon + '20',
+               paddingHorizontal: 14,
+               paddingVertical: 10,
+            }}>
+               <TextInput
+                  style={{
+                     color: colors.text,
+                     maxHeight: 100,
+                     paddingVertical: Platform.OS === 'android' ? 4 : 0,
+                     textAlignVertical: 'bottom',
+                  }}
+                  placeholder="Kirim Komentar"
+                  placeholderTextColor={colors.dimmed}
+                  value={value}
+                  onChangeText={onChange}
+                  multiline
+               />
+            </View>
+
+            <Pressable
+               onPress={() => !sendDisabled && onSend()}
+               style={{
+                  width: 40, height: 40, borderRadius: 20,
+                  backgroundColor: sendDisabled ? colors.dimmed + '40' : colors.tint,
+                  justifyContent: 'center', alignItems: 'center',
+                  marginBottom: 0
+               }}
+            >
+               <Ionicons name="send" size={18} color={sendDisabled ? colors.dimmed : '#fff'} />
+            </Pressable>
+         </View>
+      </View>
+   )
+}
diff --git a/components/discussion_general/discussionCommentList.tsx b/components/discussion_general/discussionCommentList.tsx
new file mode 100644
index 0000000..d1666c6
--- /dev/null
+++ b/components/discussion_general/discussionCommentList.tsx
@@ -0,0 +1,275 @@
+import ImageUser from "@/components/imageNew";
+import Skeleton from "@/components/skeleton";
+import Text from "@/components/Text";
+import { ConstEnv } from "@/constants/ConstEnv";
+import { isImageFile } from "@/constants/FileExtensions";
+import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
+import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
+import * as FileSystem from 'expo-file-system';
+import { startActivityAsync } from 'expo-intent-launcher';
+import * as Sharing from 'expo-sharing';
+import { useState } from "react";
+import { Modal, Platform, Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import ImageViewing from "react-native-image-viewing";
+import * as mime from 'react-native-mime-types';
+import Toast from "react-native-toast-message";
+
+export type CommentFile = {
+   id: string
+   name: string
+   extension: string
+   idStorage: string
+}
+
+export type CommentItem = {
+   id: string
+   comment: string
+   createdAt: string
+   idUser: string
+   img: string
+   username: string
+   isEdited: boolean
+   updatedAt: string
+   files: CommentFile[]
+}
+
+type Props = {
+   data: CommentItem[]
+   loading: boolean
+   myId: string
+   canInteract: boolean
+   onLongPress: (id: string, comment: string, files: CommentFile[]) => void
+}
+
+function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
+   if (isImageFile(ext)) return 'image-outline'
+   if (ext === 'pdf') return 'file-pdf-box'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return 'video-outline'
+   if (['doc', 'docx'].includes(ext)) return 'file-word-outline'
+   if (['xls', 'xlsx'].includes(ext)) return 'file-excel-outline'
+   if (['zip', 'rar', '7z'].includes(ext)) return 'zip-box-outline'
+   return 'file-outline'
+}
+
+function getFileColor(ext: string): string {
+   if (isImageFile(ext)) return '#339AF0'
+   if (ext === 'pdf') return '#F03E3E'
+   if (['mp4', 'mov', 'avi', 'mkv'].includes(ext)) return '#AE3EC9'
+   if (['doc', 'docx'].includes(ext)) return '#1C7ED6'
+   if (['xls', 'xlsx'].includes(ext)) return '#2F9E44'
+   if (['zip', 'rar', '7z'].includes(ext)) return '#E8590C'
+   return '#868E96'
+}
+
+function FileCard({ file, colors, onPress }: { file: CommentFile; colors: any; onPress: () => void }) {
+   const ext = file.extension.toLowerCase()
+   return (
+      <Pressable
+         onPress={onPress}
+         style={({ pressed }) => [Styles.fileCard, {
+            borderColor: colors.icon + '18',
+            backgroundColor: pressed ? colors.icon + '10' : 'transparent'
+         }]}
+      >
+         <View style={[Styles.sectionIconBox, { backgroundColor: getFileColor(ext) + '20' }]}>
+            <MaterialCommunityIcons name={getFileIcon(ext)} size={18} color={getFileColor(ext)} />
+         </View>
+         <View style={Styles.flex1}>
+            <Text style={Styles.textDefault} numberOfLines={1}>{file.name}</Text>
+            <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
+         </View>
+      </Pressable>
+   )
+}
+
+export default function DiscussionCommentList({ data, loading, myId, canInteract, onLongPress }: Props) {
+   const { colors } = useTheme()
+   const [expandedIds, setExpandedIds] = useState<string[]>([])
+   const [modalFiles, setModalFiles] = useState<CommentFile[]>([])
+   const [modalVisible, setModalVisible] = useState(false)
+   const [previewFile, setPreviewFile] = useState<CommentFile | null>(null)
+   const [modalPreviewFile, setModalPreviewFile] = useState<CommentFile | null>(null)
+   const [loadingOpen, setLoadingOpen] = useState(false)
+   const arrSkeleton = Array.from({ length: 3 }, (_, i) => i)
+
+   function toggleExpand(id: string) {
+      setExpandedIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
+   }
+
+   async function openExternal(file: CommentFile) {
+      try {
+         setLoadingOpen(true)
+         const remoteUrl = `${ConstEnv.url_storage}/files/${file.idStorage}`
+         const fileName = `${file.name}.${file.extension}`
+         const localPath = `${FileSystem.documentDirectory}/${fileName}`
+         const dl = await FileSystem.downloadAsync(remoteUrl, localPath)
+         if (dl.status !== 200) throw new Error('Download failed')
+         const contentURL = await FileSystem.getContentUriAsync(dl.uri)
+         const mimeType = mime.lookup(fileName) as string
+         if (Platform.OS === 'android') {
+            await startActivityAsync('android.intent.action.VIEW', { data: contentURL, flags: 1, type: mimeType })
+         } else {
+            await Sharing.shareAsync(localPath)
+         }
+      } catch {
+         Toast.show({ type: 'error', text1: 'Gagal membuka file' })
+      } finally {
+         setLoadingOpen(false)
+      }
+   }
+
+   function handleFilePress(file: CommentFile) {
+      if (isImageFile(file.extension.toLowerCase())) {
+         setPreviewFile(file)
+      } else {
+         openExternal(file)
+      }
+   }
+
+   if (loading) {
+      return (
+         <View style={Styles.mt10}>
+            {arrSkeleton.map((_, i) => (
+               <Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
+            ))}
+         </View>
+      )
+   }
+
+   return (
+      <>
+         <View style={Styles.mt10}>
+            {data.map((item, i) => (
+               <Pressable
+                  key={i}
+                  onPress={() => toggleExpand(item.id)}
+                  onLongPress={() => item.idUser === myId && canInteract && onLongPress(item.id, item.comment, item.files ?? [])}
+                  style={({ pressed }) => [
+                     Styles.discussionCommentCard,
+                     { backgroundColor: pressed ? colors.icon + '10' : colors.card, borderColor: colors.icon + '20' }
+                  ]}
+               >
+                  <View style={Styles.flex1}>
+                     <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>
+
+                     {item.comment.length > 0 && (
+                        <Text
+                           style={[Styles.textDefault, { color: colors.text }]}
+                           numberOfLines={expandedIds.includes(item.id) ? 0 : 3}
+                        >
+                           {item.comment}
+                        </Text>
+                     )}
+
+                     {item.files?.length > 0 && (
+                        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: item.comment.length > 0 ? 8 : 0 }}>
+                           {(item.files.length > 2 ? item.files.slice(0, 1) : item.files).map((file, idx) => (
+                              <FileCard key={idx} file={file} colors={colors} onPress={() => handleFilePress(file)} />
+                           ))}
+                           {item.files.length > 2 && (
+                              <Pressable
+                                 onPress={() => { setModalFiles(item.files); setModalVisible(true) }}
+                                 style={[Styles.fileCard, { borderColor: colors.icon + '18', backgroundColor: 'transparent' }]}
+                              >
+                                 <View style={[Styles.sectionIconBox, { backgroundColor: '#868E96' + '20' }]}>
+                                    <MaterialCommunityIcons name="folder-multiple-outline" size={18} color="#868E96" />
+                                 </View>
+                                 <View style={Styles.flex1}>
+                                    <Text style={Styles.textDefault} numberOfLines={1}>+{item.files.length - 1} lainnya</Text>
+                                    <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>Lihat semua</Text>
+                                 </View>
+                              </Pressable>
+                           )}
+                        </View>
+                     )}
+                  </View>
+               </Pressable>
+            ))}
+         </View>
+
+         <Modal visible={modalVisible} animationType="slide" onRequestClose={() => setModalVisible(false)}>
+            <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+               <View style={[Styles.rowSpaceBetween, Styles.itemsCenter, Styles.ph15, Styles.pv10, { borderBottomWidth: 1, borderBottomColor: colors.icon + '20' }]}>
+                  <Text style={Styles.textLargeSemiBold}>Lampiran ({modalFiles.length} file)</Text>
+                  <Pressable onPress={() => setModalVisible(false)}>
+                     <MaterialIcons name="close" size={24} color={colors.text} />
+                  </Pressable>
+               </View>
+               <ScrollView contentContainerStyle={[Styles.ph15, Styles.pv10, { flexDirection: 'row', flexWrap: 'wrap', gap: 8 }]}>
+                  {modalFiles.map((file, idx) => (
+                     <FileCard
+                        key={idx} file={file} colors={colors}
+                        onPress={() => {
+                           if (isImageFile(file.extension.toLowerCase())) {
+                              setModalPreviewFile(file)
+                           } else {
+                              openExternal(file)
+                           }
+                        }}
+                     />
+                  ))}
+               </ScrollView>
+            </SafeAreaView>
+            <ImageViewing
+               images={[{ uri: `${ConstEnv.url_storage}/files/${modalPreviewFile?.idStorage}` }]}
+               imageIndex={0}
+               visible={modalPreviewFile !== null}
+               onRequestClose={() => setModalPreviewFile(null)}
+               doubleTapToZoomEnabled
+               HeaderComponent={() => (
+                  <View style={Styles.headerModalViewImg}>
+                     <Pressable onPress={() => setModalPreviewFile(null)}>
+                        <Text style={{ color: 'white', fontSize: 26 }}>✕</Text>
+                     </Pressable>
+                     <Pressable onPress={() => modalPreviewFile && openExternal(modalPreviewFile)} disabled={loadingOpen}>
+                        <Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 26 }}>⋯</Text>
+                     </Pressable>
+                  </View>
+               )}
+               FooterComponent={() => (
+                  <View style={{ paddingBottom: 20, paddingHorizontal: 16, alignItems: 'center' }}>
+                     <Text style={{ color: 'white', fontSize: 16 }}>{modalPreviewFile?.name}.{modalPreviewFile?.extension}</Text>
+                  </View>
+               )}
+            />
+         </Modal>
+
+         <ImageViewing
+            images={[{ uri: `${ConstEnv.url_storage}/files/${previewFile?.idStorage}` }]}
+            imageIndex={0}
+            visible={previewFile !== null}
+            onRequestClose={() => setPreviewFile(null)}
+            doubleTapToZoomEnabled
+            HeaderComponent={() => (
+               <View style={Styles.headerModalViewImg}>
+                  <Pressable onPress={() => setPreviewFile(null)}>
+                     <Text style={{ color: 'white', fontSize: 26 }}>✕</Text>
+                  </Pressable>
+                  <Pressable onPress={() => previewFile && openExternal(previewFile)} disabled={loadingOpen}>
+                     <Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 26 }}>⋯</Text>
+                  </Pressable>
+               </View>
+            )}
+            FooterComponent={() => (
+               <View style={{ paddingBottom: 20, paddingHorizontal: 16, alignItems: 'center' }}>
+                  <Text style={{ color: 'white', fontSize: 16 }}>{previewFile?.name}.{previewFile?.extension}</Text>
+               </View>
+            )}
+         />
+      </>
+   )
+}