req: pengumuman

Deskripsi:
- pengaplikasian api tambah, detail dan edit pengumuman

No Issues

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

@@ -30,7 +30,7 @@ export default function DetailAnnouncement() {
    const { token, decryptToken } = useAuthSession()
    const [data, setData] = useState<Props>({ id: '', title: '', desc: '' })
    const [dataMember, setDataMember] = useState<any>({})
-   const [dataFile, setDataFile] = useState<{ idStorage: string; name: string; extension: string }[]>([])
+   const [dataFile, setDataFile] = useState<{ id:string; idStorage: string; name: string; extension: string }[]>([])
    const update = useSelector((state: any) => state.announcementUpdate)
    const entityUser = useSelector((state: any) => state.user)
    const contentWidth = Dimensions.get('window').width
@@ -48,6 +48,7 @@ export default function DetailAnnouncement() {
          if (response.success) {
             setData(response.data)
             setDataMember(response.member)
+            setDataFile(response.file)
          } else {
             Toast.show({ type: 'small', text1: response.message })
          }

app/(application)/announcement/create.tsx

@@ -76,9 +76,26 @@ export default function CreateAnnouncement() {
       try {
          setLoading(true)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiCreateAnnouncement({
+         const fd = new FormData()
-            data: { ...dataForm, user: hasil, groups: divisionMember },
+
-         });
+         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, groups: divisionMember, ...dataForm }
+         ))
+
+         const response = await apiCreateAnnouncement(fd)
+
+         // const response = await apiCreateAnnouncement({
+         //    data: { ...dataForm, user: hasil, groups: divisionMember },
+         // });
+
          if (response.success) {
             dispatch(setUpdateAnnouncement(!update))
             Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })

app/(application)/announcement/edit/[id].tsx

@@ -38,7 +38,8 @@ export default function EditAnnouncement() {
    const [disableBtn, setDisableBtn] = useState(true);
    const [dataMember, setDataMember] = useState<any>([]);
    const [fileForm, setFileForm] = useState<any[]>([])
-   const [indexDelFile, setIndexDelFile] = useState<number>(0)
+   const [dataFile, setDataFile] = useState<{ id: string; idStorage: string; name: string; extension: string; delete?: boolean }[]>([])
+   const [indexDelFile, setIndexDelFile] = useState<{ id: string | number; cat: "newFile" | "oldFile" }>({ id: "", cat: "newFile" })
    const [isModalFile, setModalFile] = useState(false)
    const [loading, setLoading] = useState(false)
    const [dataForm, setDataForm] = useState({
@@ -73,6 +74,7 @@ export default function EditAnnouncement() {
             arrNew.push(newObject)
          })
          setDataMember(arrNew);
+         setDataFile(response.file);
       } catch (error) {
          console.error(error);
       }
@@ -119,9 +121,22 @@ export default function EditAnnouncement() {
       try {
          setLoading(true)
          const hasil = await decryptToken(String(token?.current))
-         const response = await apiEditAnnouncement({
+         const fd = new FormData()
-            ...dataForm, user: hasil, groups: dataMember,
+         for (let i = 0; i < fileForm.length; i++) {
-         }, id);
+            fd.append(`file${i}`, {
+               uri: fileForm[i].uri,
+               type: 'application/octet-stream',
+               name: fileForm[i].name,
+            } as any);
+         }
+
+         fd.append("data", JSON.stringify(
+            {
+               ...dataForm, user: hasil, groups: dataMember, oldFile: dataFile
+            }
+         ))
+
+         const response = await apiEditAnnouncement(fd, id);
          if (response.success) {
             dispatch(setUpdateAnnouncement(!update))
             Toast.show({ type: 'small', text1: 'Berhasil mengubah data', })
@@ -148,8 +163,18 @@ export default function EditAnnouncement() {
       }
    };
 
-   function deleteFile(index: number) {
+   function deleteFile(index: number | string, cat: "newFile" | "oldFile" | null) {
+      if (cat == "newFile") {
          setFileForm([...fileForm.filter((val, i) => i !== index)])
+      } else {
+         setDataFile(prev =>
+            prev.map(item =>
+               item.id === index
+                  ? { ...item, delete: true }
+                  : item
+            )
+         );
+      }
       setModalFile(false)
    }
 
@@ -207,19 +232,31 @@ export default function EditAnnouncement() {
                />
                <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
                {
-                  fileForm.length > 0
+                  (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
                   &&
                   <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}>
                      <Text style={[Styles.textDefaultSemiBold]}>File</Text>
+                     {
+                        dataFile.filter((val) => !val.delete).map((item, index) => (
+                           <BorderBottomItem
+                              key={index}
+                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
+                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                              title={item.name + '.' + item.extension}
+                              titleWeight="normal"
+                              onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
+                           />
+                        ))
+                     }
                      {
                         fileForm.map((item, index) => (
                            <BorderBottomItem
                               key={index}
-                              borderType={fileForm.length > 1 ? "bottom" : "none"}
+                              borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
                               icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
                               title={item.name}
                               titleWeight="normal"
-                              onPress={() => { setIndexDelFile(index); setModalFile(true) }}
+                              onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
                            />
                         ))
                      }
@@ -275,7 +312,7 @@ export default function EditAnnouncement() {
                <MenuItemRow
                   icon={<Ionicons name="trash" color="black" size={25} />}
                   title="Hapus"
-                  onPress={() => { deleteFile(indexDelFile) }}
+                  onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }}
                />
             </View>
          </DrawerBottom>

lib/api.ts

@@ -256,21 +256,41 @@ export const apiGetDivisionGroup = async ({ user }: { user: string }) => {
    return response.data;
 };
 
-export const apiCreateAnnouncement = async ({ data }: { data: { title: string, desc: string, user: string, groups: any[] } }) => {
+// export const apiCreateAnnouncement = async ({ data }: { data: { title: string, desc: string, user: string, groups: any[] } }) => {
-   const response = await api.post(`/mobile/announcement`, data)
+//    const response = await api.post(`/mobile/announcement`, data)
+//    return response.data;
+// };
+
+export const apiCreateAnnouncement = async (data: FormData) => {
+   const response = await api.post(`/mobile/announcement`, data, {
+      headers: {
+         'Content-Type': 'multipart/form-data',
+      },
+   })
    return response.data;
 };
 
+
 export const apiGetAnnouncementOne = async ({ user, id }: { user: string, id: string }) => {
    const response = await api.get(`mobile/announcement/${id}?user=${user}`);
    return response.data;
 };
 
-export const apiEditAnnouncement = async (data: { title: string, desc: string, user: string, groups: any[] }, id: string) => {
+// export const apiEditAnnouncement = async (data: { title: string, desc: string, user: string, groups: any[], oldFile: any[] }, id: string) => {
-   const response = await api.put(`/mobile/announcement/${id}`, data)
+//    const response = await api.put(`/mobile/announcement/${id}`, data)
+//    return response.data;
+// };
+
+export const apiEditAnnouncement = async (data: FormData, id: string) => {
+   const response = await api.put(`/mobile/announcement/${id}`, data, {
+      headers: {
+         'Content-Type': 'multipart/form-data',
+      },
+   })
    return response.data;
 };
 
+
 export const apiDeleteAnnouncement = async (data: { user: string }, id: string) => {
    const response = await api.delete(`mobile/announcement/${id}`, { data })
    return response.data