Compare commits
1 Commits
amalia/10-
...
join
| Author | SHA1 | Date | |
|---|---|---|---|
| 3567629941 |
@@ -244,11 +244,11 @@ export default function DetailDiscussionGeneral() {
|
||||
loading={loadingSend}
|
||||
onSend={viewEdit ? handleEditKomentar : handleKomentar}
|
||||
onCancelEdit={handleViewEditKomentar}
|
||||
files={viewEdit ? [] : commentFiles}
|
||||
onAddFile={viewEdit ? undefined : (newFiles) => setCommentFiles(prev => [...prev, ...newFiles])}
|
||||
onRemoveFile={viewEdit ? undefined : (idx) => setCommentFiles(prev => prev.filter((_, i) => i !== idx))}
|
||||
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={viewEdit ? (fileId) => setRemovedFileIds(prev => prev.includes(fileId) ? prev.filter(id => id !== fileId) : [...prev, fileId]) : undefined}
|
||||
onRemoveExistingFile={(fileId) => setRemovedFileIds(prev => [...prev, fileId])}
|
||||
canSend={canComment}
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -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 DiscussionCommentList, { CommentFile, CommentItem } from "@/components/discussion_general/discussionCommentList";
|
||||
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 {
|
||||
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
|
||||
if (commentFiles.length > 0) {
|
||||
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()
|
||||
}
|
||||
const response = await apiSendDiscussionCommentar({ id: detail, data: { comment: komentar, user: hasil } });
|
||||
if (response.success) { setKomentar(""); 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({
|
||||
id: selectKomentar.id,
|
||||
data: { comment: selectKomentar.comment, user: hasil, filesToRemove: removedFileIds }
|
||||
});
|
||||
const response = await apiEditDiscussionCommentar({ id: selectKomentar.id, data: { comment: selectKomentar.comment, user: hasil } });
|
||||
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[]) {
|
||||
setSelectKomentar({ id, comment, files })
|
||||
setRemovedFileIds([])
|
||||
function handleMenuKomentar(id: string, comment: string) {
|
||||
setSelectKomentar({ id, comment })
|
||||
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
|
||||
data={dataComment}
|
||||
loading={loadingKomentar}
|
||||
myId={entities.id}
|
||||
canInteract={data?.status != 2 && data?.isActive == true}
|
||||
onLongPress={handleMenuKomentar}
|
||||
/>
|
||||
<View style={Styles.mt10}>
|
||||
{loadingKomentar ? (
|
||||
arrSkeleton.map((_, i) => (
|
||||
<Skeleton key={i} width={100} widthType="percent" height={40} borderRadius={5} />
|
||||
))
|
||||
) : (
|
||||
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
|
||||
mode={
|
||||
viewEdit ? 'edit'
|
||||
: canWrite ? 'new'
|
||||
: 'locked'
|
||||
}
|
||||
lockedReason={
|
||||
data?.status == 2 ? "Diskusi telah ditutup"
|
||||
: data?.isActive == false ? "Diskusi telah diarsipkan"
|
||||
: "Hanya anggota divisi yang dapat memberikan komentar"
|
||||
}
|
||||
value={viewEdit ? selectKomentar.comment : komentar}
|
||||
onChange={viewEdit
|
||||
? (val) => setSelectKomentar(prev => ({ ...prev, comment: val }))
|
||||
: setKomentar
|
||||
}
|
||||
loading={loadingSend}
|
||||
onSend={viewEdit ? handleEditKomentar : handleKomentar}
|
||||
onCancelEdit={handleViewEditKomentar}
|
||||
files={viewEdit ? [] : commentFiles}
|
||||
onAddFile={viewEdit ? undefined : (f) => setCommentFiles(prev => [...prev, ...f])}
|
||||
onRemoveFile={viewEdit ? undefined : (idx) => setCommentFiles(prev => prev.filter((_, i) => i !== idx))}
|
||||
existingFiles={viewEdit ? existingFilesForEdit : []}
|
||||
onRemoveExistingFile={viewEdit ? handleRemoveExistingFile : undefined}
|
||||
canSend={canSend}
|
||||
/>
|
||||
<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>
|
||||
<InputForm
|
||||
bg={colors.card}
|
||||
type="default" round multiline
|
||||
placeholder="Kirim Komentar"
|
||||
onChange={(val: string) => setSelectKomentar({ ...selectKomentar, comment: val })}
|
||||
value={selectKomentar.comment}
|
||||
itemRight={
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
selectKomentar.comment != "" && !regexOnlySpacesOrEnter.test(selectKomentar.comment) && !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")
|
||||
&& handleEditKomentar();
|
||||
}}
|
||||
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>
|
||||
|
||||
|
||||
@@ -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}>
|
||||
<MaterialIcons name="close" color={loading ? colors.dimmed : colors.text} size={20} />
|
||||
<Pressable onPress={onCancelEdit}>
|
||||
<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,
|
||||
opacity: loading ? 0.5 : 1
|
||||
marginRight: 8
|
||||
}}
|
||||
>
|
||||
<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,
|
||||
opacity: loading ? 0.5 : 1
|
||||
marginRight: 8
|
||||
}}
|
||||
>
|
||||
<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
|
||||
? <ActivityIndicator size={18} color={sendDisabled ? colors.dimmed : colors.background} />
|
||||
: <Ionicons name="send" size={18} color={sendDisabled ? colors.dimmed : colors.background} />
|
||||
}
|
||||
<Ionicons name="send" size={18} color={sendDisabled ? colors.dimmed : '#fff'} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -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]}>
|
||||
<Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
|
||||
<Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
|
||||
</View>
|
||||
) : data.length > 0 ? (
|
||||
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
|
||||
{data.map((item, index) => (
|
||||
<DiscussionItem
|
||||
key={index}
|
||||
title={item.desc}
|
||||
user={item.user}
|
||||
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, { color: colors.dimmed }]}>Belum ada diskusi aktif</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
|
||||
{
|
||||
loading ?
|
||||
<>
|
||||
<Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
|
||||
<Skeleton width={100} height={70} borderRadius={10} widthType="percent" />
|
||||
</>
|
||||
:
|
||||
data.length > 0 ? (
|
||||
data.map((item, index) => (
|
||||
<DiscussionItem
|
||||
key={index}
|
||||
title={item.desc}
|
||||
user={item.user}
|
||||
date={item.date}
|
||||
onPress={() => {
|
||||
router.push(`/division/${id}/discussion/${item.id}`);
|
||||
}}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]} >
|
||||
Tidak ada diskusi
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 { Platform, Pressable, ScrollView, View } from "react-native";
|
||||
import ImageViewing from "react-native-image-viewing";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Alert, Dimensions, Platform, Pressable, View } from "react-native";
|
||||
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) {
|
||||
if (isImageFile(item.extension.toLowerCase())) {
|
||||
setPreviewFile(item)
|
||||
} else {
|
||||
openExternal(item)
|
||||
}
|
||||
}
|
||||
const openFile = (item: Props) => {
|
||||
if (Platform.OS == 'android') setLoadingOpen(true)
|
||||
let remoteUrl = ConstEnv.url_storage + '/files/' + item.idStorage;
|
||||
const fileName = item.name + '.' + item.extension;
|
||||
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 }}>
|
||||
<Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
|
||||
<Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
|
||||
<Skeleton width={160} widthType="pixel" height={60} borderRadius={8} />
|
||||
</View>
|
||||
) : data.length > 0 ? (
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
|
||||
{data.map((item, index) => {
|
||||
const iconColor = getFileIconColor(item.extension)
|
||||
const iconName = getFileIcon(item.extension)
|
||||
return (
|
||||
<Pressable
|
||||
key={index}
|
||||
onPress={() => handleFilePress(item)}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row', alignItems: 'center', gap: 10,
|
||||
paddingHorizontal: 12, paddingVertical: 10,
|
||||
borderRadius: 8, borderWidth: 1,
|
||||
backgroundColor: pressed ? colors.icon + '08' : colors.card,
|
||||
borderColor: colors.icon + '20',
|
||||
width: 160,
|
||||
})}
|
||||
>
|
||||
<View style={{
|
||||
width: 40, height: 40, borderRadius: 8,
|
||||
backgroundColor: iconColor + '20',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
<MaterialCommunityIcons name={iconName as any} size={22} color={iconColor} />
|
||||
</View>
|
||||
<View style={{ flexShrink: 1 }}>
|
||||
<Text style={[Styles.textSmallSemiBold, { color: colors.text }]} numberOfLines={1}>
|
||||
{item.name}
|
||||
</Text>
|
||||
<Text style={[Styles.textInformation, { color: colors.dimmed, marginTop: 2 }]}>
|
||||
{item.extension.toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</ScrollView>
|
||||
) : (
|
||||
<View style={{ alignItems: 'center', paddingVertical: 16, gap: 6, opacity: 0.5 }}>
|
||||
<MaterialCommunityIcons name="file-document-outline" size={28} color={colors.dimmed} />
|
||||
<Text style={[Styles.textDefault, { color: colors.dimmed }]}>Belum ada dokumen</Text>
|
||||
</View>
|
||||
)}
|
||||
{
|
||||
loading ?
|
||||
<View style={[Styles.rowSpaceBetween]}>
|
||||
<Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
|
||||
<Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
|
||||
<Skeleton width={30} widthType="percent" height={80} borderRadius={10} />
|
||||
</View>
|
||||
:
|
||||
data.length > 0 ?
|
||||
<View style={[Styles.rowItemsCenter]}>
|
||||
{
|
||||
data.map((item, index) => (
|
||||
<Pressable style={[Styles.mr05, { width: '24%' }]} key={index} onPress={() => openFile(item)}>
|
||||
<View style={{ alignItems: 'center' }}>
|
||||
<View style={[Styles.wrapPaper, { alignItems: 'center', backgroundColor: colors.card, borderWidth: 1, borderColor: colors.icon + '20' }]}>
|
||||
<Feather name="file-text" size={50} color={colors.text} style={Styles.mr05} />
|
||||
</View>
|
||||
</View>
|
||||
<View style={[Styles.contentItemCenter]}>
|
||||
<Text style={[Styles.textMediumNormal, Styles.w90, { textAlign: 'center' }]} numberOfLines={1}>{item.name}.{item.extension}</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
))
|
||||
}
|
||||
</View>
|
||||
// <Carousel
|
||||
// ref={ref}
|
||||
// width={width * 1.1}
|
||||
// height={115}
|
||||
// data={data}
|
||||
// loop={true}
|
||||
// autoPlay={false}
|
||||
// autoPlayReverse={false}
|
||||
// pagingEnabled={true}
|
||||
// snapEnabled={true}
|
||||
// vertical={false}
|
||||
// mode="parallax"
|
||||
// modeConfig={{
|
||||
// parallaxScrollingScale: 1,
|
||||
// parallaxScrollingOffset: 310,
|
||||
// parallaxAdjacentItemScale: 1,
|
||||
// }}
|
||||
// style={{ width:'100%' }}
|
||||
// renderItem={({ index }) => (
|
||||
// <View style={{ width: '27%' }}>
|
||||
// <View style={{ alignItems: 'center' }}>
|
||||
// <View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
|
||||
// <Feather name="file-text" size={50} color="black" style={Styles.mr05} />
|
||||
// </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}
|
||||
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>
|
||||
)}
|
||||
/>
|
||||
// )}
|
||||
// />
|
||||
:
|
||||
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada file</Text>
|
||||
}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -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 }}>
|
||||
<MaterialCommunityIcons name="clipboard-check-outline" size={28} color={colors.dimmed} />
|
||||
<Text style={[Styles.textDefault, { color: colors.dimmed }]}>Tidak ada tugas hari ini</Text>
|
||||
</View>
|
||||
<Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada tugas</Text>
|
||||
}
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -105,14 +105,7 @@ export const apiSendDiscussionCommentar = async ({ data, id }: { data: { user: s
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const apiSendDiscussionCommentarWithFile = async (id: string, data: FormData) => {
|
||||
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 }) => {
|
||||
export const apiEditDiscussionCommentar = async ({ data, id }: { data: { user: string, comment: string }, id: string }) => {
|
||||
const response = await api.put(`/mobile/discussion/${id}/comment`, data)
|
||||
return response.data;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user