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

@@ -1,78 +1,275 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCenteredOnly,
-    ButtonCustom,
-    InformationBox,
-    LandscapeFrameUploaded,
-    SelectCustom,
-    Spacing,
-    StackCustom,
-    TextInputCustom,
-    ViewWrapper,
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  LoaderCustom,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
-import { dummyDonasiDurasi } from "@/lib/dummy-data/donasi/durasi";
-import { dummyDonasiKategori } from "@/lib/dummy-data/donasi/kategori";
-import { router } from "expo-router";
+import API_IMAGE from "@/constants/api-storage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetOne,
+  apiDonationUpdateData,
+} from "@/service/api-client/api-donation";
+import { apiMasterDonation } from "@/service/api-client/api-master";
+import { uploadFileService } from "@/service/upload-service";
+import { formatCurrencyDisplay } from "@/utils/formatCurrencyDisplay";
+import pickFile from "@/utils/pickFile";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
+import Toast from "react-native-toast-message";
+
+interface IEditDonation {
+  donasiMaster_KategoriId: string;
+  donasiMaster_DurasiId: string;
+  title: string;
+  target: string;
+  imageId: string;
+}
 
 export default function DonationEdit() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<IEditDonation>({
+    donasiMaster_DurasiId: "",
+    donasiMaster_KategoriId: "",
+    title: "",
+    target: "",
+    imageId: "",
+  });
+
+  const [image, setImage] = useState<string | null>(null);
+  const [listCategory, setListCategory] = useState<any[]>([]);
+  const [listDuration, setListDuration] = useState<any[]>([]);
+  const [loadList, setLoadList] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState(false);
+
+  const displayTarget = formatCurrencyDisplay(data?.target);
+  const handleChangeCurrency = (field: keyof typeof data) => (text: string) => {
+    const numeric = text.replace(/\D/g, "");
+    setData((prev: any) => ({ ...prev, [field]: numeric }));
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+      onLoadList();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      if (response.success) {
+        setData({
+          donasiMaster_DurasiId: response.data.donasiMaster_DurasiId,
+          donasiMaster_KategoriId: response.data.donasiMaster_KategoriId,
+          title: response.data.title,
+          target: response.data.target,
+          imageId: response.data.imageId,
+        });
+      }
+
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const onLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiMasterDonation({ category: "" });
+
+      setListCategory(response.data.category);
+      setListDuration(response.data.duration);
+    } catch (error) {
+      console.log(["ERROR"], error);
+      setListCategory([]);
+      setListDuration([]);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
+  const validateData = async () => {
+    if (
+      !data.donasiMaster_DurasiId ||
+      !data.donasiMaster_KategoriId ||
+      !data.title ||
+      !data.target ||
+      !data.imageId
+    ) {
+      Toast.show({
+        type: "error",
+        text1: "Harap lengkapi data",
+      });
+
+      return false;
+    }
+
+    return true;
+  };
+
+  const handlerSubmitUpdate = async () => {
+    const isValid = await validateData();
+    if (!isValid) {
+      return;
+    }
+
+    try {
+      let newData;
+
+      newData = {
+        ...data,
+      };
+      setLoading(true);
+
+      if (image && image) {
+        const uploadNewImage = await uploadFileService({
+          dirId: DIRECTORY_ID.donasi_image,
+          imageUri: image,
+        });
+
+        if (!uploadFileService) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal mengunggah gambar",
+          });
+          return;
+        }
+
+        newData = {
+          ...data,
+          newImageId: uploadNewImage.data.id,
+        };
+      }
+
+      const response = await apiDonationUpdateData({
+        id: id as string,
+        data: newData,
+        category: "edit-donation",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: response.message,
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Donasi berhasil diperbarui",
+      });
+
+      router.back();
+    } catch (error) {
+      console.log("[ERROR UPDATE DONASI]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
-      <StackCustom gap={"xs"}>
-        <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
+      <InformationBox text="Lengkapi semua data di bawah untuk selanjutnya mengisi cerita penggalangan dana." />
+      {!data || loadList ? (
+        <LoaderCustom />
+      ) : (
+        <StackCustom gap={"xs"}>
+          <TextInputCustom
+            label="Judul Donasi"
+            placeholder="Masukkan Judul Donasi"
+            required
+            value={data?.title}
+            onChangeText={(value) => setData({ ...data, title: value })}
+          />
+          <TextInputCustom
+            iconLeft="Rp."
+            label="Target Donasi"
+            placeholder="Masukkan Target Donasi"
+            required
+            keyboardType="numeric"
+            value={displayTarget}
+            onChangeText={handleChangeCurrency("target")}
+          />
 
-        <TextInputCustom
-          label="Judul Donasi"
-          placeholder="Masukkan Judul Donasi"
-          required
-        />
-        <TextInputCustom
-          label="Target Donasi"
-          placeholder="Masukkan Target Donasi"
-          required
-          keyboardType="numeric"
-        />
+          <LandscapeFrameUploaded
+            image={image ? image : API_IMAGE.GET({ fileId: data?.imageId })}
+          />
+          <ButtonCenteredOnly
+            onPress={() => {
+              pickFile({
+                setImageUri: ({ uri }) => {
+                  setImage(uri);
+                },
+                allowedType: "image",
+              });
+            }}
+            icon="upload"
+          >
+            Upload
+          </ButtonCenteredOnly>
+          <Spacing />
 
-        <LandscapeFrameUploaded />
-        <ButtonCenteredOnly
-          onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
-          }}
-          icon="upload"
-        >
-          Upload
-        </ButtonCenteredOnly>
-        <Spacing />
+          <SelectCustom
+            data={
+              _.isEmpty(listCategory)
+                ? []
+                : listCategory?.map((item) => ({
+                    label: item.name,
+                    value: item.id,
+                  }))
+            }
+            label="Pilih Kategori Donasi"
+            placeholder="Pilih Kategori Donasi"
+            required
+            value={data?.donasiMaster_KategoriId}
+            onChange={(value: any) =>
+              setData({ ...data, donasiMaster_KategoriId: value })
+            }
+          />
 
-        <SelectCustom
-          data={dummyDonasiKategori.map((item) => ({
-            label: item.label,
-            value: item.value,
-          }))}
-          onChange={(value) => console.log(value)}
-          label="Pilih Kategori Donasi"
-          placeholder="Pilih Kategori Donasi"
-          required
-        />
+          <SelectCustom
+            data={
+              _.isEmpty(listDuration)
+                ? []
+                : listDuration?.map((item) => ({
+                    label: item.name + " hari",
+                    value: item.id,
+                  }))
+            }
+            label="Pilih Durasi Donasi"
+            placeholder="Pilih Durasi Donasi"
+            required
+            value={data?.donasiMaster_DurasiId}
+            onChange={(value: any) =>
+              setData({ ...data, donasiMaster_DurasiId: value })
+            }
+          />
 
-        <SelectCustom
-          data={dummyDonasiDurasi.map((item) => ({
-            label: item.label,
-            value: item.value,
-          }))}
-          onChange={(value) => console.log(value)}
-          label="Pilih Durasi Donasi"
-          placeholder="Pilih Durasi Donasi"
-          required
-        />
-
-        <Spacing />
-        <ButtonCustom
-          onPress={() => {
-            router.back();
-          }}
-        >
-          Update
-        </ButtonCustom>
-      </StackCustom>
+          <Spacing />
+          <ButtonCustom
+            isLoading={isLoading}
+            onPress={() => {
+              handlerSubmitUpdate();
+            }}
+          >
+            Update
+          </ButtonCustom>
+        </StackCustom>
+      )}
       <Spacing />
     </ViewWrapper>
   );

service/api-client/api-donation.ts

@@ -80,3 +80,22 @@ export async function apiDonationDelete({ id }: { id: string }) {
     throw error;
   }
 }
+
+export async function apiDonationUpdateData({
+  id,
+  data,
+  category,
+}: {
+  id: string;
+  data: any;
+  category: "edit-donation" | "edit-story" | "edit-bank-account";
+}) {
+  try {
+    const response = await apiConfig.put(`/mobile/donation/${id}?category=${category}`, {
+      data: data,
+    });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}