Merge pull request 'amalia/09-jun-26' (#57) from amalia/09-jun-26 into join

Reviewed-on: #57

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

@@ -244,11 +244,11 @@ export default function DetailDiscussionGeneral() {
                      loading={loadingSend}
                      onSend={viewEdit ? handleEditKomentar : handleKomentar}
                      onCancelEdit={handleViewEditKomentar}
-                     files={viewEdit ? [] : commentFiles}
+                     files={commentFiles}
-                     onAddFile={viewEdit ? undefined : (newFiles) => setCommentFiles(prev => [...prev, ...newFiles])}
+                     onAddFile={(newFiles) => setCommentFiles(prev => [...prev, ...newFiles])}
-                     onRemoveFile={viewEdit ? undefined : (idx) => setCommentFiles(prev => prev.filter((_, i) => i !== idx))}
+                     onRemoveFile={(idx) => setCommentFiles(prev => prev.filter((_, i) => i !== idx))}
                      existingFiles={viewEdit ? selectKomentar.files.filter(f => !removedFileIds.includes(f.id)) : []}
-                     onRemoveExistingFile={viewEdit ? (fileId) => setRemovedFileIds(prev => prev.includes(fileId) ? prev.filter(id => id !== fileId) : [...prev, fileId]) : undefined}
+                     onRemoveExistingFile={(fileId) => setRemovedFileIds(prev => [...prev, fileId])}
                      canSend={canComment}
                   />
                ) : (

app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx

@@ -2,13 +2,15 @@ import AppHeader from "@/components/AppHeader";
 import BorderBottomItem2 from "@/components/borderBottomItem2";
 import HeaderRightDiscussionDetail from "@/components/discussion/headerDiscussionDetail";
 import DrawerBottom from "@/components/drawerBottom";
-import DiscussionCommentInput from "@/components/discussion_general/discussionCommentInput";
+import ImageUser from "@/components/imageNew";
-import DiscussionCommentList, { CommentFile, CommentItem } from "@/components/discussion_general/discussionCommentList";
+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 {
    apiDeleteDiscussionCommentar,
@@ -16,7 +18,6 @@ import {
    apiGetDiscussionOne,
    apiGetDivisionOneFeature,
    apiSendDiscussionCommentar,
-   apiSendDiscussionCommentarWithFile,
 } from "@/lib/api";
 import { getDB } from "@/lib/firebaseDatabase";
 import { useAuthSession } from "@/providers/AuthProvider";
@@ -29,7 +30,6 @@ import { useEffect, useState } from "react";
 import { KeyboardAvoidingView, Platform, Pressable, RefreshControl, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useSelector } from "react-redux";
-import ImageUser from "@/components/imageNew";
 
 type Props = {
    id: string;
@@ -44,6 +44,17 @@ type Props = {
    isActive: boolean;
 };
 
+type PropsComment = {
+   id: string;
+   comment: string;
+   createdAt: string;
+   username: string;
+   img: string;
+   idUser: string;
+   isEdited: boolean;
+   updatedAt: string;
+};
+
 type PropsFile = {
    id: string;
    idStorage: string;
@@ -55,11 +66,10 @@ export default function DiscussionDetail() {
    const { colors } = useTheme();
    const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
    const [data, setData] = useState<Props>();
-   const [dataComment, setDataComment] = useState<CommentItem[]>([]);
+   const [dataComment, setDataComment] = useState<PropsComment[]>([]);
    const [fileDiscussion, setFileDiscussion] = useState<PropsFile[]>([])
    const { token, decryptToken } = useAuthSession();
    const [komentar, setKomentar] = useState("");
-   const [commentFiles, setCommentFiles] = useState<{ uri: string; name: string }[]>([])
    const [loadingSend, setLoadingSend] = useState(false);
    const update = useSelector((state: any) => state.discussionUpdate);
    const entityUser = useSelector((state: any) => state.user);
@@ -68,15 +78,16 @@ export default function DiscussionDetail() {
    const [isCreator, setIsCreator] = useState(false);
    const [loading, setLoading] = useState(true)
    const [loadingKomentar, setLoadingKomentar] = useState(true)
+   const arrSkeleton = Array.from({ length: 3 })
    const reference = ref(getDB(), `/discussion-division/${detail}`);
    const [refreshing, setRefreshing] = useState(false)
    const headerHeight = useHeaderHeight();
+   const [detailMore, setDetailMore] = useState<any>([])
    const entities = useSelector((state: any) => state.entities)
    const [isVisible, setVisible] = useState(false)
-   const [selectKomentar, setSelectKomentar] = useState<{ id: string; comment: string; files: CommentFile[] }>({ id: '', comment: '', files: [] })
+   const [selectKomentar, setSelectKomentar] = useState({ id: '', comment: '' })
    const [viewEdit, setViewEdit] = useState(false)
    const [showDeleteModal, setShowDeleteModal] = useState(false)
-   const [removedFileIds, setRemovedFileIds] = useState<string[]>([])
 
    useEffect(() => {
       const onValueChange = reference.on('value', snapshot => {
@@ -141,22 +152,8 @@ export default function DiscussionDetail() {
       try {
          setLoadingSend(true);
          const hasil = await decryptToken(String(token?.current));
-         let response
+         const response = await apiSendDiscussionCommentar({ id: detail, data: { comment: komentar, user: hasil } });
-         if (commentFiles.length > 0) {
+         if (response.success) { setKomentar(""); updateTrigger() }
-            const fd = new FormData()
-            fd.append('data', JSON.stringify({ comment: komentar, user: hasil }))
-            commentFiles.forEach((f, i) => {
-               fd.append(`file${i}`, { uri: f.uri, name: f.name, type: 'application/octet-stream' } as any)
-            })
-            response = await apiSendDiscussionCommentarWithFile(detail, fd)
-         } else {
-            response = await apiSendDiscussionCommentar({ id: detail, data: { comment: komentar, user: hasil } });
-         }
-         if (response.success) {
-            setKomentar("");
-            setCommentFiles([])
-            updateTrigger()
-         }
       } catch (error: any) {
          console.error(error);
          Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menambahkan komentar" })
@@ -169,10 +166,7 @@ export default function DiscussionDetail() {
       try {
          setLoadingSend(true);
          const hasil = await decryptToken(String(token?.current));
-         const response = await apiEditDiscussionCommentar({
+         const response = await apiEditDiscussionCommentar({ id: selectKomentar.id, data: { comment: selectKomentar.comment, user: hasil } });
-            id: selectKomentar.id,
-            data: { comment: selectKomentar.comment, user: hasil, filesToRemove: removedFileIds }
-         });
          if (response.success) { updateTrigger() } else { Toast.show({ type: 'small', text1: response.message }) }
       } catch (error: any) {
          console.error(error);
@@ -198,20 +192,14 @@ export default function DiscussionDetail() {
       }
    }
 
-   function handleMenuKomentar(id: string, comment: string, files: CommentFile[]) {
+   function handleMenuKomentar(id: string, comment: string) {
-      setSelectKomentar({ id, comment, files })
+      setSelectKomentar({ id, comment })
-      setRemovedFileIds([])
       setVisible(true)
    }
 
    function handleViewEditKomentar() {
       setVisible(false)
       setViewEdit(!viewEdit)
-      if (viewEdit) setRemovedFileIds([])
-   }
-
-   function handleRemoveExistingFile(fileId: string) {
-      setRemovedFileIds(prev => prev.includes(fileId) ? prev.filter(id => id !== fileId) : [...prev, fileId])
    }
 
    const handleRefresh = async () => {
@@ -224,9 +212,6 @@ export default function DiscussionDetail() {
 
    const canWrite = data?.status != 2 && data?.isActive && ((entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision)
    const isOpen = data?.status === 1
-   const canSend = (entityUser.role == "admin" || entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin") || isMemberDivision
-
-   const existingFilesForEdit = selectKomentar.files.filter(f => !removedFileIds.includes(f.id))
 
    return (
       <>
@@ -288,43 +273,123 @@ export default function DiscussionDetail() {
                      />
                   )}
 
-                  <DiscussionCommentList
+                  <View style={Styles.mt10}>
-                     data={dataComment}
+                     {loadingKomentar ? (
-                     loading={loadingKomentar}
+                        arrSkeleton.map((_, i) => (
-                     myId={entities.id}
+                           <Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
-                     canInteract={data?.status != 2 && data?.isActive == true}
+                        ))
-                     onLongPress={handleMenuKomentar}
+                     ) : (
-                  />
+                        dataComment.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}>
+                                 <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>
+                                 <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}>
-               <DiscussionCommentInput
+               <View style={[Styles.contentItemCenter, Styles.w100, { backgroundColor: colors.background }, viewEdit && Styles.borderTop]}>
-                  mode={
+                  {viewEdit ? (
-                     viewEdit ? 'edit'
+                     <>
-                     : canWrite ? 'new'
+                        <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
-                     : 'locked'
+                           <View style={Styles.rowItemsCenter}>
-                  }
+                              <Feather name="edit-3" color={colors.text} size={22} style={Styles.mh05} />
-                  lockedReason={
+                              <Text style={Styles.textMediumSemiBold}>Edit Komentar</Text>
-                     data?.status == 2 ? "Diskusi telah ditutup"
+                           </View>
-                     : data?.isActive == false ? "Diskusi telah diarsipkan"
+                           <Pressable onPress={() => handleViewEditKomentar()}>
-                     : "Hanya anggota divisi yang dapat memberikan komentar"
+                              <MaterialIcons name="close" color={colors.text} size={22} />
-                  }
+                           </Pressable>
-                  value={viewEdit ? selectKomentar.comment : komentar}
+                        </View>
-                  onChange={viewEdit
+                        <InputForm
-                     ? (val) => setSelectKomentar(prev => ({ ...prev, comment: val }))
+                           bg={colors.card}
-                     : setKomentar
+                           type="default" round multiline
-                  }
+                           placeholder="Kirim Komentar"
-                  loading={loadingSend}
+                           onChange={(val: string) => setSelectKomentar({ ...selectKomentar, comment: val })}
-                  onSend={viewEdit ? handleEditKomentar : handleKomentar}
+                           value={selectKomentar.comment}
-                  onCancelEdit={handleViewEditKomentar}
+                           itemRight={
-                  files={viewEdit ? [] : commentFiles}
+                              <Pressable
-                  onAddFile={viewEdit ? undefined : (f) => setCommentFiles(prev => [...prev, ...f])}
+                                 onPress={() => {
-                  onRemoveFile={viewEdit ? undefined : (idx) => setCommentFiles(prev => prev.filter((_, i) => i !== idx))}
+                                    selectKomentar.comment != "" && !regexOnlySpacesOrEnter.test(selectKomentar.comment) && !loadingSend && data?.status != 2 && data?.isActive
-                  existingFiles={viewEdit ? existingFilesForEdit : []}
+                                       && (((entityUser.role == "user" || entityUser.role == "coadmin") && isMemberDivision) || entityUser.role == "admin" || entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin")
-                  onRemoveExistingFile={viewEdit ? handleRemoveExistingFile : undefined}
+                                       && handleEditKomentar();
-                  canSend={canSend}
+                                 }}
-               />
+                                 style={[Platform.OS == 'android' && Styles.mb12]}
+                              >
+                                 <MaterialIcons name="send" size={25}
+                                    style={[
+                                       selectKomentar.comment == "" || regexOnlySpacesOrEnter.test(selectKomentar.comment) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
+                                          ? { color: colors.dimmed } : { color: colors.tint },
+                                    ]}
+                                 />
+                              </Pressable>
+                           }
+                        />
+                     </>
+                  ) : canWrite ? (
+                     <InputForm
+                        type="default" round multiline
+                        placeholder="Kirim Komentar"
+                        onChange={setKomentar} value={komentar}
+                        itemRight={
+                           <Pressable
+                              onPress={() => {
+                                 komentar != "" && !regexOnlySpacesOrEnter.test(komentar) && !loadingSend && data?.status != 2 && data?.isActive
+                                    && (((entityUser.role == "user" || entityUser.role == "coadmin") && isMemberDivision) || entityUser.role == "admin" || entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin")
+                                    && handleKomentar();
+                              }}
+                              style={[Platform.OS == 'android' && Styles.mb12]}
+                           >
+                              <MaterialIcons name="send" size={25}
+                                 style={[
+                                    komentar == "" || regexOnlySpacesOrEnter.test(komentar) || loadingSend || ((entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision)
+                                       ? { 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 divisi yang dapat memberikan komentar"}
+                        </Text>
+                     </View>
+                  )}
+               </View>
             </KeyboardAvoidingView>
          </View>
 

components/discussion_general/discussionCommentInput.tsx

@@ -4,7 +4,7 @@ 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 { ActivityIndicator, Platform, Pressable, ScrollView, TextInput, View } from "react-native";
+import { Platform, Pressable, ScrollView, TextInput, View } from "react-native";
 import Toast from "react-native-toast-message";
 
 type Props = {
@@ -58,39 +58,29 @@ export default function DiscussionCommentInput({
    return (
       <View style={{ backgroundColor: colors.background, borderTopWidth: mode === 'edit' ? 1 : 0, borderTopColor: colors.icon + '20' }}>
          {mode === 'edit' && (
-            <View style={[Styles.rowSpaceBetween, Styles.pv05, { paddingHorizontal: 12 }]}>
+            <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>
-                  {loading && (
-                     <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed, marginLeft: 6 }]}>Mengirim...</Text>
-                  )}
                </View>
-               <Pressable onPress={onCancelEdit} disabled={loading}>
+               <Pressable onPress={onCancelEdit}>
-                  <MaterialIcons name="close" color={loading ? colors.dimmed : colors.text} size={20} />
+                  <MaterialIcons name="close" color={colors.text} size={20} />
                </Pressable>
             </View>
          )}
 
-         {loading && mode === 'new' && (files.length > 0 || existingFiles.length > 0) && (
-            <View style={{ paddingHorizontal: 15, paddingTop: 6 }}>
-               <Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>Mengirim...</Text>
-            </View>
-         )}
-
          {(existingFiles.length > 0 || files.length > 0) && (
             <ScrollView horizontal style={[Styles.ph15, Styles.pv05]} showsHorizontalScrollIndicator={false}>
                {existingFiles.map((f) => (
                   <Pressable
                      key={f.id}
-                     onPress={() => !loading && onRemoveExistingFile?.(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,
+                        marginRight: 8
-                        opacity: loading ? 0.5 : 1
                      }}
                   >
                      <MaterialCommunityIcons name="file-outline" size={14} color={colors.dimmed} />
@@ -103,14 +93,13 @@ export default function DiscussionCommentInput({
                {files.map((f, idx) => (
                   <Pressable
                      key={idx}
-                     onPress={() => !loading && onRemoveFile?.(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,
+                        marginRight: 8
-                        opacity: loading ? 0.5 : 1
                      }}
                   >
                      <MaterialCommunityIcons name="file-outline" size={14} color={colors.dimmed} />
@@ -133,13 +122,12 @@ export default function DiscussionCommentInput({
             {mode === 'new' && (
                <Pressable
                   onPress={pickFiles}
-                  disabled={loading}
                   style={{ marginBottom: 6 }}
                >
                   <MaterialIcons
                      name="add"
                      size={28}
-                     color={loading ? colors.dimmed + '60' : files.length > 0 ? colors.tabActive : colors.dimmed}
+                     color={files.length > 0 ? colors.tabActive : colors.dimmed}
                   />
                </Pressable>
             )}
@@ -150,7 +138,6 @@ export default function DiscussionCommentInput({
                borderRadius: 30, borderWidth: 1, borderColor: colors.icon + '20',
                paddingHorizontal: 14,
                paddingVertical: 10,
-               opacity: loading ? 0.6 : 1
             }}>
                <TextInput
                   style={{
@@ -164,7 +151,6 @@ export default function DiscussionCommentInput({
                   value={value}
                   onChangeText={onChange}
                   multiline
-                  editable={!loading}
                />
             </View>
 
@@ -174,12 +160,10 @@ export default function DiscussionCommentInput({
                   width: 40, height: 40, borderRadius: 20,
                   backgroundColor: sendDisabled ? colors.dimmed + '40' : colors.tint,
                   justifyContent: 'center', alignItems: 'center',
+                  marginBottom: 0
                }}
             >
-               {loading
+               <Ionicons name="send" size={18} color={sendDisabled ? colors.dimmed : '#fff'} />
-                  ? <ActivityIndicator size={18} color={sendDisabled ? colors.dimmed : colors.background} />
-                  : <Ionicons name="send" size={18} color={sendDisabled ? colors.dimmed : colors.background} />
-               }
             </Pressable>
          </View>
       </View>

components/division/discussionDivisionDetail.tsx

@@ -2,7 +2,6 @@ import Styles from "@/constants/Styles";
 import { apiGetDivisionOneFeature } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { View } from "react-native";
@@ -55,31 +54,33 @@ export default function DiscussionDivisionDetail({ refreshing }: { refreshing: b
   return (
     <View style={[Styles.mb15]}>
       <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
-      {loading ? (
+      <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
-        <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
+        {
-          <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+          loading ?
-          <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
+            <>
-        </View>
+              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
-      ) : data.length > 0 ? (
+              <Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
-        <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
+            </>
-          {data.map((item, index) => (
+            :
-            <DiscussionItem
+            data.length > 0 ? (
-              key={index}
+              data.map((item, index) => (
-              title={item.desc}
+                <DiscussionItem
-              user={item.user}
+                  key={index}
-              date={item.date}
+                  title={item.desc}
-              onPress={() => {
+                  user={item.user}
-                router.push(`/division/${id}/discussion/${item.id}`);
+                  date={item.date}
-              }}
+                  onPress={() => {
-            />
+                    router.push(`/division/${id}/discussion/${item.id}`);
-          ))}
+                  }}
-        </View>
+                />
-      ) : (
+              ))
-        <View style={{ alignItems: 'center', paddingVertical: 16, gap: 6, opacity: 0.5 }}>
+            ) : (
-          <MaterialCommunityIcons name="chat-outline" size={28} color={colors.dimmed} />
+              <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]} >
-          <Text style={[Styles.textDefault, { color: colors.dimmed }]}>Belum ada diskusi aktif</Text>
+                Tidak ada diskusi
-        </View>
+              </Text>
-      )}
+            )
+        }
+      </View>
     </View>
   );
 }

components/division/fileDivisionDetail.tsx

@@ -1,18 +1,17 @@
 import { ConstEnv } from "@/constants/ConstEnv";
-import { isImageFile } from "@/constants/FileExtensions";
 import Styles from "@/constants/Styles";
 import { apiGetDivisionOneFeature } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Feather } from "@expo/vector-icons";
 import * as FileSystem from 'expo-file-system';
 import { startActivityAsync } from 'expo-intent-launcher';
 import { useLocalSearchParams } from "expo-router";
 import * as Sharing from 'expo-sharing';
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
-import { Platform, Pressable, ScrollView, View } from "react-native";
+import { Alert, Dimensions, Platform, Pressable, 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";
+import { ICarouselInstance } from "react-native-reanimated-carousel";
+import ModalLoading from "../modalLoading";
 import Skeleton from "../skeleton";
 import { useTheme } from "@/providers/ThemeProvider";
 import Text from "../Text";
@@ -26,36 +25,15 @@ type Props = {
    idStorage: string
 }
 
-function getFileIconColor(ext: string): string {
-   const e = ext.toLowerCase()
-   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(e)) return '#339AF0'
-   if (e === 'pdf') return '#F03E3E'
-   if (['doc', 'docx'].includes(e)) return '#1C7ED6'
-   if (['xls', 'xlsx', 'csv'].includes(e)) return '#2F9E44'
-   if (['ppt', 'pptx'].includes(e)) return '#F97316'
-   if (['zip', 'rar', '7z'].includes(e)) return '#E8590C'
-   return '#868E96'
-}
-
-function getFileIcon(ext: string): string {
-   const e = ext.toLowerCase()
-   if (isImageFile(e)) return 'image-outline'
-   if (e === 'pdf') return 'file-pdf-box'
-   if (['doc', 'docx'].includes(e)) return 'file-word-outline'
-   if (['xls', 'xlsx', 'csv'].includes(e)) return 'file-excel-outline'
-   if (['ppt', 'pptx'].includes(e)) return 'file-powerpoint-outline'
-   if (['zip', 'rar', '7z'].includes(e)) return 'folder-zip-outline'
-   return 'file-document-outline'
-}
-
 export default function FileDivisionDetail({ refreshing }: { refreshing: boolean }) {
    const { colors } = useTheme();
+   const ref = React.useRef<ICarouselInstance>(null);
+   const width = Dimensions.get("window").width;
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>()
    const [loading, setLoading] = useState(true)
    const [loadingOpen, setLoadingOpen] = useState(false)
-   const [previewFile, setPreviewFile] = useState<Props | null>(null)
 
    async function handleLoad(loading: boolean) {
       try {
@@ -71,119 +49,113 @@ export default function FileDivisionDetail({ refreshing }: { refreshing: boolean
    }
 
    useEffect(() => {
-      if (refreshing) handleLoad(false)
+      if (refreshing)
+         handleLoad(false)
    }, [refreshing])
 
    useEffect(() => {
       handleLoad(true)
    }, [])
 
-   async function openExternal(item: Props) {
-      try {
-         setLoadingOpen(true)
-         const remoteUrl = `${ConstEnv.url_storage}/files/${item.idStorage}`
-         const fileName = `${item.name}.${item.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(item: Props) {
+   const openFile = (item: Props) => {
-      if (isImageFile(item.extension.toLowerCase())) {
+      if (Platform.OS == 'android') setLoadingOpen(true)
-         setPreviewFile(item)
+      let remoteUrl = ConstEnv.url_storage + '/files/' + item.idStorage;
-      } else {
+      const fileName = item.name + '.' + item.extension;
-         openExternal(item)
+      let localPath = `${FileSystem.documentDirectory}/${fileName}`;
-      }
+      const mimeType = mime.lookup(fileName)
-   }
+
+      FileSystem.downloadAsync(remoteUrl, localPath).then(async ({ uri }) => {
+         const contentURL = await FileSystem.getContentUriAsync(uri);
+         setLoadingOpen(false)
+         try {
+            if (Platform.OS == 'android') {
+               // open with android intent
+               await startActivityAsync(
+                  'android.intent.action.VIEW',
+                  {
+                     data: contentURL,
+                     flags: 1,
+                     type: mimeType as string,
+                  }
+               );
+               // or
+               // Sharing.shareAsync(localPath);
+
+            } else if (Platform.OS == 'ios') {
+               Sharing.shareAsync(localPath);
+            }
+         } catch (error) {
+            Alert.alert('INFO', 'Gagal membuka file, tidak ada aplikasi yang dapat membuka file ini');
+         } finally {
+            if (Platform.OS == 'android') setLoadingOpen(false)
+         }
+      });
+   };
+
 
    return (
       <View style={[Styles.mb15]}>
+         <ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Dokumen Terkini</Text>
-         {loading ? (
+         {
-            <View style={{ flexDirection: 'row', gap: 8 }}>
+            loading ?
-               <Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
+               <View style={[Styles.rowSpaceBetween]}>
-               <Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
-               <Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
-            </View>
+                  <Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
-         ) : data.length > 0 ? (
+               </View>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
+               :
-               {data.map((item, index) => {
+               data.length > 0 ?
-                  const iconColor = getFileIconColor(item.extension)
+                  <View style={[Styles.rowItemsCenter]}>
-                  const iconName = getFileIcon(item.extension)
+                     {
-                  return (
+                        data.map((item, index) => (
-                     <Pressable
+                           <Pressable style={[Styles.mr05, { width: '24%' }]} key={index} onPress={() => openFile(item)}>
-                        key={index}
+                              <View style={{ alignItems: 'center' }}>
-                        onPress={() => handleFilePress(item)}
+                                 <View style={[Styles.wrapPaper, { alignItems: 'center', backgroundColor: colors.card, borderWidth: 1, borderColor: colors.icon + '20' }]}>
-                        style={({ pressed }) => ({
+                                    <Feather name="file-text" size={50} color={colors.text} style={Styles.mr05} />
-                           flexDirection: 'row', alignItems: 'center', gap: 10,
+                                 </View>
-                           paddingHorizontal: 12, paddingVertical: 10,
+                              </View>
-                           borderRadius: 8, borderWidth: 1,
+                              <View style={[Styles.contentItemCenter]}>
-                           backgroundColor: pressed ? colors.icon + '08' : colors.card,
+                                 <Text style={[Styles.textMediumNormal, Styles.w90, { textAlign: 'center' }]} numberOfLines={1}>{item.name}.{item.extension}</Text>
-                           borderColor: colors.icon + '20',
+                              </View>
-                           width: 160,
+                           </Pressable>
-                        })}
+                        ))
-                     >
+                     }
-                        <View style={{
+                  </View>
-                           width: 40, height: 40, borderRadius: 8,
+                  // <Carousel
-                           backgroundColor: iconColor + '20',
+                  //    ref={ref}
-                           alignItems: 'center', justifyContent: 'center',
+                  //    width={width * 1.1}
-                           flexShrink: 0,
+                  //    height={115}
-                        }}>
+                  //    data={data}
-                           <MaterialCommunityIcons name={iconName as any} size={22} color={iconColor} />
+                  //    loop={true}
-                        </View>
+                  //    autoPlay={false}
-                        <View style={{ flexShrink: 1 }}>
+                  //    autoPlayReverse={false}
-                           <Text style={[Styles.textSmallSemiBold, { color: colors.text }]} numberOfLines={1}>
+                  //    pagingEnabled={true}
-                              {item.name}
+                  //    snapEnabled={true}
-                           </Text>
+                  //    vertical={false}
-                           <Text style={[Styles.textInformation, { color: colors.dimmed, marginTop: 2 }]}>
+                  //    mode="parallax"
-                              {item.extension.toUpperCase()}
+                  //    modeConfig={{
-                           </Text>
+                  //       parallaxScrollingScale: 1,
-                        </View>
+                  //       parallaxScrollingOffset: 310,
-                     </Pressable>
+                  //       parallaxAdjacentItemScale: 1,
-                  )
+                  //    }}
-               })}
+                  //    style={{ width:'100%' }}
-            </ScrollView>
+                  //    renderItem={({ index }) => (
-         ) : (
+                  //       <View style={{ width: '27%' }}>
-            <View style={{ alignItems: 'center', paddingVertical: 16, gap: 6, opacity: 0.5 }}>
+                  //          <View style={{ alignItems: 'center' }}>
-               <MaterialCommunityIcons name="file-document-outline" size={28} color={colors.dimmed} />
+                  //             <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
-               <Text style={[Styles.textDefault, { color: colors.dimmed }]}>Belum ada dokumen</Text>
+                  //                <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
-            </View>
+                  //             </View>
-         )}
+                  //          </View>
+                  //          <Text style={[Styles.textMediumNormal, { textAlign: 'center' }]} numberOfLines={1}>{data[index].name}.{data[index].extension}</Text>
+                  //       </View>
 
-         <ImageViewing
+                  //    )}
-            images={[{ uri: `${ConstEnv.url_storage}/files/${previewFile?.idStorage}` }]}
+                  // />
-            imageIndex={0}
+                  :
-            visible={previewFile !== null}
+                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada file</Text>
-            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>
-            )}
-         />
       </View>
    )
-}
+}

components/division/taskDivisionDetail.tsx

@@ -2,7 +2,7 @@ import Styles from "@/constants/Styles";
 import { apiGetDivisionOneFeature } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
-import { Feather, MaterialCommunityIcons } from "@expo/vector-icons";
+import { Feather } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
 import React, { useEffect, useState } from "react";
 import { Dimensions, Pressable, View } from "react-native";
@@ -90,10 +90,7 @@ export default function TaskDivisionDetail({ refreshing }: { refreshing: boolean
                   //    )}
                   // />
                   :
-                  <View style={{ alignItems: 'center', paddingVertical: 16, gap: 6, opacity: 0.5 }}>
+                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
-                     <MaterialCommunityIcons name="clipboard-check-outline" size={28} color={colors.dimmed} />
-                     <Text style={[Styles.textDefault, { color: colors.dimmed }]}>Tidak ada tugas hari ini</Text>
-                  </View>
          }
       </View>
    )

lib/api/discussion.api.ts

@@ -105,14 +105,7 @@ export const apiSendDiscussionCommentar = async ({ data, id }: { data: { user: s
    return response.data;
 };
 
-export const apiSendDiscussionCommentarWithFile = async (id: string, data: FormData) => {
+export const apiEditDiscussionCommentar = async ({ data, id }: { data: { user: string, comment: string }, id: string }) => {
-   const response = await api.post(`/mobile/discussion/${id}/comment`, data, {
-      headers: { 'Content-Type': 'multipart/form-data' },
-   })
-   return response.data;
-};
-
-export const apiEditDiscussionCommentar = async ({ data, id }: { data: { user: string, comment: string, filesToRemove?: string[] }, id: string }) => {
    const response = await api.put(`/mobile/discussion/${id}/comment`, data)
    return response.data;
 };