app/(application)/(user)/donation/[id]/(news)/[news]/edit-news.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ButtonCenteredOnly,
   ButtonCustom,
@@ -9,17 +10,120 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import API_STRORAGE from "@/constants/base-url-api-strorage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetNewsById,
+  apiDonationUpdateNews,
+} from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationEditNews() {
+  const { news } = useLocalSearchParams();
+  const [data, setData] = useState<any>(null);
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [news])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetNewsById({
+        id: news as string,
+        category: "get-one",
+      });
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    let newData;
+    if (!data.title || !data.deskripsi) {
+      Toast.show({
+        type: "error",
+        text1: "Judul dan deskripsi harus diisi",
+      });
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      newData = {
+        title: data?.title,
+        deskripsi: data?.deskripsi,
+      };
+
+      if (image && image?.uri) {
+        const uploadNewImage = await uploadFileService({
+          dirId: DIRECTORY_ID.donasi_kabar,
+          imageUri: image?.uri,
+        });
+
+        newData = {
+          title: data?.title,
+          deskripsi: data?.deskripsi,
+          newImageId: uploadNewImage.data.id,
+        };
+      }
+
+      const response = await apiDonationUpdateNews({
+        id: news as string,
+        data: newData,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengupdate berita",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Berita berhasil diperbarui",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
         <InformationBox text="Upload gambar bersifat opsional untuk melengkapi kabar terkait donasi Anda." />
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded
+          image={
+            image
+              ? image.uri
+              : data && data.imageId
+              ? API_STRORAGE.GET({ fileId: data.imageId })
+              : undefined
+          }
+        />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri(file) {
+                setImage(file);
+              },
+            });
           }}
           icon="upload"
         >
@@ -30,6 +134,8 @@ export default function DonationEditNews() {
           label="Judul Berita"
           placeholder="Masukan judul berita"
           required
+          value={data?.title}
+          onChangeText={(value) => setData({ ...data, title: value })}
         />
         <TextAreaCustom
           label="Deskripsi Berita"
@@ -37,12 +143,16 @@ export default function DonationEditNews() {
           required
           showCount
           maxLength={1000}
+          value={data?.deskripsi}
+          onChangeText={(value) => setData({ ...data, deskripsi: value })}
         />
 
         <Spacing />
         <ButtonCustom
+          disabled={!data?.title || !data?.deskripsi}
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmitUpdate();
           }}
         >
           Update

app/(application)/(user)/donation/[id]/(news)/[news]/index.tsx

@@ -14,9 +14,11 @@ import {
 import { IconEdit } from "@/components/_Icon";
 import { IconTrash } from "@/components/_Icon/IconTrash";
 import { useAuth } from "@/hooks/use-auth";
-import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
+import {
+  apiDonationDeleteNews,
+  apiDonationGetNewsById,
+} from "@/service/api-client/api-donation";
 import { formatChatTime } from "@/utils/formatChatTime";
-import dayjs from "dayjs";
 import {
   router,
   Stack,
@@ -24,6 +26,7 @@ import {
   useLocalSearchParams,
 } from "expo-router";
 import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationNews() {
   const { user } = useAuth();
@@ -57,7 +60,7 @@ export default function DonationNews() {
           title: "Detail Kabar",
           headerLeft: () => <BackButton />,
           headerRight: () =>
-            user?.id === data && data?.authorId && (
+            user?.id === data?.authorId && (
               <DotButton onPress={() => setOpenDrawer(true)} />
             ),
         }}
@@ -97,7 +100,7 @@ export default function DonationNews() {
             {
               icon: <IconTrash />,
               label: "Hapus Berita",
-              path: `/donation/[id]/(news)/${news}/edit-news` as any,
+              path: "",
               color: "red",
             },
           ]}
@@ -109,7 +112,23 @@ export default function DonationNews() {
                 message: "Apakah Anda yakin ingin menghapus berita ini?",
                 textLeft: "Batal",
                 textRight: "Hapus",
-                onPressRight: () => {
+                onPressRight: async () => {
+                  const response = await apiDonationDeleteNews({
+                    id: news as string,
+                  });
+
+                  if (!response.success) {
+                    Toast.show({
+                      type: "error",
+                      text1: "Gagal menghapus berita",
+                    });
+                    return;
+                  }
+
+                  Toast.show({
+                    type: "success",
+                    text1: "Berita berhasil dihapus",
+                  });
                   router.back();
                 },
               });

app/(application)/(user)/donation/[id]/(news)/add-news.tsx

@@ -19,7 +19,6 @@ import Toast from "react-native-toast-message";
 
 export default function DonationAddNews() {
   const { id } = useLocalSearchParams();
-  console.log("[ID]", id);
   const [data, setData] = useState({
     title: "",
     deskripsi: "",
@@ -48,8 +47,6 @@ export default function DonationAddNews() {
         data: newData,
       });
 
-      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
-
       if (!response.success) {
         Toast.show({
           type: "error",

app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx

@@ -12,7 +12,6 @@ import {
 import { IconPlus } from "@/components/_Icon";
 import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
 import { formatChatTime } from "@/utils/formatChatTime";
-import dayjs from "dayjs";
 import {
   router,
   Stack,
@@ -42,7 +41,6 @@ export default function DonationRecapOfNews() {
         category: "get-all",
       });
 
-      console.log("[RESPONSE LIST]", JSON.stringify(response, null, 2));
       setList(response.data);
     } catch (error) {
       console.log("[ERROR]", error);

app/(application)/(user)/donation/[id]/(news)/recap-of-news.tsx

@@ -13,7 +13,6 @@ import {
 import { IconPlus } from "@/components/_Icon";
 import { apiDonationGetNewsById } from "@/service/api-client/api-donation";
 import { formatChatTime } from "@/utils/formatChatTime";
-import dayjs from "dayjs";
 import {
   router,
   Stack,
@@ -25,7 +24,6 @@ import { useCallback, useState } from "react";
 
 export default function DonationRecapOfNews() {
   const { id } = useLocalSearchParams();
-  console.log("[ID]", id);
   const [openDrawer, setOpenDrawer] = useState(false);
   const [list, setList] = useState<any[] | null>(null);
   const [loadList, setLoadList] = useState<boolean>(false);
@@ -44,7 +42,6 @@ export default function DonationRecapOfNews() {
         category: "get-all",
       });
 
-      console.log("[RESPONSE LIST]", JSON.stringify(response, null, 2));
       setList(response.data);
     } catch (error) {
       console.log("[ERROR]", error);

app/(application)/(user)/donation/[id]/infromation-fundrising.tsx

@@ -32,10 +32,6 @@ export default function DonationInformationFunrising() {
     try {
       setLoadList(true);
       const response = await apiDonationFundrising({ id: id as string });
-      console.log(
-        "[RES GET FUNDRISING]",
-        JSON.stringify(response.data, null, 2)
-      );
 
       setData(response?.data?.user);
       setList(response?.data?.donasi);
@@ -78,7 +74,7 @@ export default function DonationInformationFunrising() {
         {loadList ? (
           <LoaderCustom />
         ) : _.isEmpty(list) ? (
-          <TextCustom>Belum ada data</TextCustom>
+          <TextCustom align="center" color="gray" size="small">Belum ada data</TextCustom>
         ) : (
           list?.map((item: any, index: number) => (
             <Donation_BoxPublish key={index} id={item?.id} data={item} />

service/api-client/api-donation.ts

@@ -213,11 +213,45 @@ export async function apiDonationCreateNews({
   }
 }
 
-export async function apiDonationGetNewsById({ id , category}: { id: string , category: "get-all" | "get-one"}) {
+export async function apiDonationGetNewsById({
+  id,
+  category,
+}: {
+  id: string;
+  category: "get-all" | "get-one";
+}) {
   try {
-    const response = await apiConfig.get(`/mobile/donation/${id}/news?category=${category}`);
+    const response = await apiConfig.get(
+      `/mobile/donation/${id}/news?category=${category}`
+    );
     return response.data;
   } catch (error) {
     throw error;
   }
-}
+}
+
+export async function apiDonationUpdateNews({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
+  try {
+    const response = await apiConfig.put(`/mobile/donation/${id}/news`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiDonationDeleteNews({ id }: { id: string }) {
+  try {
+    const response = await apiConfig.delete(`/mobile/donation/${id}/news`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}