upd: project

Deskripsi:
- tambah file pada project kegiatan

-nb : blm selesai

No Issues

app/(application)/project/[id]/add-file.tsx

@@ -2,13 +2,122 @@ import BorderBottomItem from "@/components/borderBottomItem"
 import ButtonBackHeader from "@/components/buttonBackHeader"
 import ButtonSaveHeader from "@/components/buttonSaveHeader"
 import ButtonSelect from "@/components/buttonSelect"
+import DrawerBottom from "@/components/drawerBottom"
+import MenuItemRow from "@/components/menuItemRow"
 import Styles from "@/constants/Styles"
-import { MaterialCommunityIcons } from "@expo/vector-icons"
+import { apiAddFileProject, apiCheckFileProject } from "@/lib/api"
+import { setUpdateProject } from "@/lib/projectUpdate"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
+import * as DocumentPicker from "expo-document-picker"
 import { router, Stack, useLocalSearchParams } from "expo-router"
-import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
+import { useState } from "react"
+import { ActivityIndicator, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
 
 export default function ProjectAddFile() {
-   const { id } = useLocalSearchParams()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [listFile, setListFile] = useState<any[]>([])
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
+   const [isModal, setModal] = useState(false)
+   const { token, decryptToken } = useAuthSession()
+   const [loadingCheck, setLoadingCheck] = useState(false)
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.projectUpdate)
+
+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: false
+      });
+      if (!result.canceled) {
+         if (result.assets?.[0].uri) {
+            const check = await handleCheckFile(result.assets?.[0])
+            if (check) {
+               setFileForm([...fileForm, result.assets?.[0]])
+               setListFile([...listFile, result.assets?.[0].name])
+            } else {
+               ToastAndroid.show('File sudah ada', ToastAndroid.SHORT)
+            }
+         }
+      }
+   };
+
+   function deleteFile(index: number) {
+      setListFile([...listFile.filter((val, i) => i !== index)])
+      setFileForm([...fileForm.filter((val, i) => i !== index)])
+      setModal(false)
+   }
+
+   async function handleCheckFile(val: any) {
+      try {
+         setLoadingCheck(true)
+         const hasil = await decryptToken(String(token?.current))
+         const fd = new FormData();
+
+         fd.append("file", {
+            uri: val.uri,
+            type: val.mimeType,
+            name: val.fileName,
+         } as any);
+
+         fd.append(
+            "data",
+            JSON.stringify({
+               user: hasil,
+            })
+         );
+
+         const response = await apiCheckFileProject({ data: fd, id: id })
+         return response.success
+      } catch (error) {
+         console.error(error);
+         return false
+      } finally {
+         setLoadingCheck(false)
+      }
+   }
+
+
+   async function handleAddFile() {
+      try {
+         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: fileForm[i].mimeType,
+               name: fileForm[i].fileName,
+            } as any);
+         }
+
+         fd.append(
+            "data",
+            JSON.stringify({
+               user: hasil,
+            })
+         );
+
+         console.log(fd)
+
+         const response = await apiAddFileProject({ data: fd, id: id })
+         // if (response.success) {
+         //    ToastAndroid.show('Berhasil menambahkan file', ToastAndroid.SHORT)
+         //    dispatch(setUpdateProject({ ...update, file: !update.file }))
+         //    router.back()
+         // } else {
+         //    ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         // }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      }
+   }
+
+
+
 
    return (
       <SafeAreaView>
@@ -17,46 +126,50 @@ export default function ProjectAddFile() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Tambah File',
                headerTitleAlign: 'center',
-               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
+               headerRight: () => <ButtonSaveHeader
-                  ToastAndroid.show('Berhasil menambah data', ToastAndroid.SHORT)
+                  disable={fileForm.length == 0 ? true : false}
-                  router.push('/project/4324')
+                  category="create"
-               }} />
+                  onPress={() => { handleAddFile() }} />
             }}
          />
          <ScrollView>
             <View style={[Styles.p15, Styles.mb100]}>
-               <ButtonSelect value="Upload File" />
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
-               <View style={[Styles.mb15]}>
+               {
-                  <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
+                  listFile.length > 0 && (
-                  <View style={[Styles.wrapPaper]}>
+                     <View style={[Styles.mb15]}>
-                     <BorderBottomItem
+                        <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
-                        borderType="all"
+                        <View style={[Styles.wrapPaper]}>
-                        icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                           {
-                        title="image_pertama.jpg"
+                              listFile.map((item, index) => (
-                        titleWeight="normal"
+                                 <BorderBottomItem
-                     />
+                                    key={index}
-                     <BorderBottomItem
+                                    borderType="all"
-                        borderType="all"
+                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
-                        icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                    title={item}
-                        title="file_kedua.pdf"
+                                    titleWeight="normal"
-                        titleWeight="normal"
+                                    onPress={() => { setIndexDelFile(index); setModal(true) }}
-                     />
+                                 />
-                  </View>
+                              ))
-               </View>
+                           }
-               {/* <ButtonForm
+                        </View>
-                  text="SIMPAN"
+                     </View>
-                  onPress={() => {
+                  )
-                     AlertKonfirmasi({
+               }
-                        title: 'Konfirmasi',
+               {
-                        desc: 'Apakah anda yakin ingin menambahkan data?',
+                  loadingCheck && <ActivityIndicator size="small" />
-                        onPress: () => {
+               }
-                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
-                           router.push('/project/4324')
-                        }
-                     })
-                  }} /> */}
             </View>
          </ScrollView>
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile) }}
+               />
+            </View>
+         </DrawerBottom>
       </SafeAreaView>
    )
 }

app/(application)/project/[id]/index.tsx

@@ -78,7 +78,7 @@ export default function DetailProject() {
          <Stack.Screen
             options={{
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: loading ? '' : data?.title,
+               headerTitle: loading ? 'Loading...' : data?.title,
                headerTitleAlign: 'center',
                headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMember ? null : <HeaderRightProjectDetail id={id} status={data?.status} />,
             }}

components/project/sectionFile.tsx

@@ -24,6 +24,7 @@ export default function SectionFile({ status, member }: { status: number | undef
    const { token, decryptToken } = useAuthSession();
    const { id } = useLocalSearchParams<{ id: string }>();
    const [data, setData] = useState<Props[]>([]);
+   const update = useSelector((state: any) => state.projectUpdate)
 
    async function handleLoad() {
       try {
@@ -41,7 +42,7 @@ export default function SectionFile({ status, member }: { status: number | undef
 
    useEffect(() => {
       handleLoad();
-   }, []);
+   }, [update.file]);
 
    return (
       <>

lib/api.ts

@@ -321,3 +321,27 @@ export const apiDeleteProject = async (data: { user: string }, id: string) => {
    const response = await api.delete(`/mobile/project/${id}/lainnya`, { data })
    return response.data;
 };
+
+export const apiAddFileProject = async ({ data, id }: { data: FormData, id: string }) => {
+   console.log('apiAddFileProject')
+   const response = await api.post(`/mobile/project/file/${id}`, data,
+      {
+         headers: {
+            'Content-Type': 'multipart/form-data',
+         },
+      }
+   )
+   console.log(response)
+   return response.data;
+};
+
+export const apiCheckFileProject = async ({ data, id }: { data: FormData, id: string }) => {
+   const response = await api.put(`/mobile/project/file/${id}`, data,
+      {
+         headers: {
+            'Content-Type': 'multipart/form-data',
+         },
+      }
+   )
+   return response.data;
+};

package.json

@@ -28,7 +28,7 @@
     "expo": "^53.0.9",
     "expo-blur": "~14.1.4",
     "expo-constants": "~17.1.6",
-    "expo-document-picker": "^13.0.3",
+    "expo-document-picker": "^13.1.5",
     "expo-file-system": "~18.1.10",
     "expo-font": "~13.3.1",
     "expo-haptics": "~14.1.4",