196 lines
8.9 KiB
TypeScript
196 lines
8.9 KiB
TypeScript
import AppHeader from "@/components/AppHeader"
|
|
import ButtonSaveHeader from "@/components/buttonSaveHeader"
|
|
import DrawerBottom from "@/components/drawerBottom"
|
|
import { InputForm } from "@/components/inputForm"
|
|
import LoadingCenter from "@/components/loadingCenter"
|
|
import MenuItemRow from "@/components/menuItemRow"
|
|
import Text from "@/components/Text"
|
|
import Styles from "@/constants/Styles"
|
|
import { apiCreateDiscussion } from "@/lib/api"
|
|
import { setUpdateDiscussion } from "@/lib/discussionUpdate"
|
|
import { useAuthSession } from "@/providers/AuthProvider"
|
|
import { useTheme } from "@/providers/ThemeProvider"
|
|
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
|
|
import * as DocumentPicker from "expo-document-picker"
|
|
import { router, Stack, useLocalSearchParams } from "expo-router"
|
|
import { useState } from "react"
|
|
import { Pressable, SafeAreaView, ScrollView, View } from "react-native"
|
|
import Toast from "react-native-toast-message"
|
|
import { useDispatch, useSelector } from "react-redux"
|
|
|
|
function getFileIcon(ext: string): keyof typeof MaterialCommunityIcons.glyphMap {
|
|
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(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 (['jpg', 'jpeg', 'png', 'gif', 'webp', 'heic', 'heif'].includes(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'
|
|
}
|
|
|
|
export default function CreateDiscussionDivision() {
|
|
const { colors } = useTheme();
|
|
const { id } = useLocalSearchParams<{ id: string }>()
|
|
const [desc, setDesc] = useState('')
|
|
const { token, decryptToken } = useAuthSession()
|
|
const update = useSelector((state: any) => state.discussionUpdate)
|
|
const dispatch = useDispatch();
|
|
const [loading, setLoading] = useState(false)
|
|
const [fileForm, setFileForm] = useState<any[]>([])
|
|
const [isModalFile, setModalFile] = useState(false)
|
|
const [indexDelFile, setIndexDelFile] = useState<number>(0)
|
|
|
|
const pickDocumentAsync = async () => {
|
|
const result = await DocumentPicker.getDocumentAsync({ type: ["*/*"], multiple: true });
|
|
if (!result.canceled) {
|
|
let skipped = 0
|
|
for (const asset of result.assets) {
|
|
if (!asset.uri) continue
|
|
if (fileForm.some(f => f.name === asset.name)) {
|
|
skipped++
|
|
} else {
|
|
setFileForm(prev => [...prev, asset])
|
|
}
|
|
}
|
|
if (skipped > 0) Toast.show({ type: 'small', text1: 'Beberapa file sudah ditambahkan' })
|
|
}
|
|
};
|
|
|
|
function deleteFile(index: number) {
|
|
setFileForm(fileForm.filter((_, i) => i !== index))
|
|
setModalFile(false)
|
|
}
|
|
|
|
async function handleCreate() {
|
|
try {
|
|
setLoading(true)
|
|
const hasil = await decryptToken(String(token?.current))
|
|
const fd = new FormData()
|
|
for (let i = 0; i < fileForm.length; i++) {
|
|
fd.append(`file${i}`, { uri: fileForm[i].uri, type: 'application/octet-stream', name: fileForm[i].name } as any);
|
|
}
|
|
fd.append("data", JSON.stringify({ user: hasil, desc, idDivision: id }))
|
|
const response = await apiCreateDiscussion(fd)
|
|
if (response.success) {
|
|
Toast.show({ type: 'small', text1: 'Berhasil menambahkan data' })
|
|
dispatch(setUpdateDiscussion({ ...update, data: !update.data }));
|
|
router.back()
|
|
} else {
|
|
Toast.show({ type: 'small', text1: response.message })
|
|
}
|
|
} catch (error: any) {
|
|
console.error(error);
|
|
Toast.show({ type: 'small', text1: error?.response?.data?.message || "Gagal menambahkan data" })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
|
|
<Stack.Screen
|
|
options={{
|
|
header: () => (
|
|
<AppHeader
|
|
title="Tambah Diskusi"
|
|
showBack={true}
|
|
onPressLeft={() => router.back()}
|
|
right={
|
|
<ButtonSaveHeader
|
|
disable={desc == "" || loading}
|
|
category="create"
|
|
onPress={() => handleCreate()}
|
|
/>
|
|
}
|
|
/>
|
|
)
|
|
}}
|
|
/>
|
|
{loading && <LoadingCenter />}
|
|
<ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
|
|
<View style={[Styles.p15, Styles.mb100]}>
|
|
<InputForm
|
|
label="Diskusi"
|
|
type="default"
|
|
placeholder="Hal yang didiskusikan"
|
|
required
|
|
onChange={setDesc}
|
|
multiline
|
|
bg={colors.card}
|
|
/>
|
|
|
|
{/* File */}
|
|
<View style={[Styles.wrapPaper, Styles.mb15, Styles.sectionCard,
|
|
{ backgroundColor: colors.card, borderColor: colors.icon + '18' }]}>
|
|
<Pressable
|
|
onPress={pickDocumentAsync}
|
|
style={[Styles.sectionActionRow, { marginBottom: fileForm.length > 0 ? 12 : 0 }]}
|
|
>
|
|
<View style={[Styles.sectionIconBox, { backgroundColor: colors.icon + '15' }]}>
|
|
<MaterialCommunityIcons name="paperclip" size={18} color={colors.dimmed} />
|
|
</View>
|
|
<View style={Styles.flex1}>
|
|
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>File</Text>
|
|
{fileForm.length === 0 && (
|
|
<Text style={[Styles.textMediumNormal, { color: colors.dimmed }]}>Opsional — ketuk untuk upload</Text>
|
|
)}
|
|
</View>
|
|
{fileForm.length > 0 && (
|
|
<View style={[Styles.sectionBadge, { backgroundColor: colors.dimmed + '18' }]}>
|
|
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{fileForm.length} file</Text>
|
|
</View>
|
|
)}
|
|
<MaterialCommunityIcons name="chevron-right" size={18} color={colors.dimmed} />
|
|
</Pressable>
|
|
{fileForm.length > 0 && (
|
|
<View style={Styles.fileGrid}>
|
|
{fileForm.map((item, index) => {
|
|
const ext = item.name.split('.').pop()?.toLowerCase() ?? ''
|
|
const baseName = item.name.includes('.') ? item.name.split('.').slice(0, -1).join('.') : item.name
|
|
const iconName = getFileIcon(ext)
|
|
const iconColor = getFileColor(ext)
|
|
return (
|
|
<Pressable
|
|
key={index}
|
|
onPress={() => { setIndexDelFile(index); setModalFile(true) }}
|
|
style={[Styles.fileCard, { backgroundColor: 'transparent', borderColor: colors.icon + '18' }]}
|
|
>
|
|
<View style={[Styles.sectionIconBox, { backgroundColor: iconColor + '20' }]}>
|
|
<MaterialCommunityIcons name={iconName} size={18} color={iconColor} />
|
|
</View>
|
|
<View style={Styles.flex1}>
|
|
<Text style={Styles.textDefault} numberOfLines={1}>{baseName}</Text>
|
|
<Text style={[Styles.textSmallSemiBold, { color: colors.dimmed }]}>{ext.toUpperCase()}</Text>
|
|
</View>
|
|
</Pressable>
|
|
)
|
|
})}
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
|
|
<View style={Styles.rowItemsCenter}>
|
|
<MenuItemRow
|
|
icon={<Ionicons name="trash-outline" color={colors.text} size={25} />}
|
|
title="Hapus"
|
|
onPress={() => deleteFile(indexDelFile)}
|
|
/>
|
|
</View>
|
|
</DrawerBottom>
|
|
</SafeAreaView>
|
|
)
|
|
}
|