Donasi Create

# feat:
- Create Donasi
## No Issuee

src/app_modules/donasi/create/create_cerita_penggalang.tsx

@@ -5,6 +5,7 @@ import {
   AspectRatio,
   Button,
   Center,
+  FileButton,
   Image,
   Paper,
   Stack,
@@ -16,24 +17,65 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { gs_donasi_tabs_posting } from "../global_state";
 import BoxInformasiDonasi from "../component/box_informasi";
+import { MODEL_DONASI_TEMPORARY } from "../model/interface";
+import _ from "lodash";
+import toast from "react-simple-toasts";
+import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
 
-export default function CreateCeritaPenggalangDonasi() {
+export default function CreateCeritaPenggalangDonasi({
+  dataTemporary,
+  userId
+}: {
+  dataTemporary: MODEL_DONASI_TEMPORARY;
+  userId: string
+}) {
   const router = useRouter();
   const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
     gs_donasi_tabs_posting
   );
-  const [value, setValue] = useState({
+  const [create, setCreate] = useState({
     pembukaan: "",
     cerita: "",
   });
+  const [temporary, setTemporary] = useState(dataTemporary);
+  const [file, setFile] = useState<File | null>(null);
+  const [imageCerita, setImageCerita] = useState<any | null>();
+
   async function onCreate() {
-    router.push(RouterDonasi.page_pop_up_create)
-setTabsPostingDonasi("Review")
+    if (_.values(create).includes("")) return toast("Lengkapi Data");
+    if (!file) return toast("Lengkapi Gambar");
+
+    const gambar = new FormData();
+    gambar.append("file", file as any);
+
+    const body = {
+      id: temporary.id,
+      title: temporary.title,
+      target: temporary.target,
+      imagesId: temporary.imagesId,
+      donasiMaster_KategoriId: temporary.donasiMaster_KategoriId,
+      donasiMaster_DurasiId: temporary.donasiMaster_DurasiId,
+      authorId: userId,
+      CeritaDonasi: {
+        pembukaan: create.pembukaan,
+        cerita: create.cerita,
+      },
+    };
+
+    await Donasi_funCreate(body as any, gambar).then((res) => {
+      if (res.status === 201) {
+        router.push(RouterDonasi.page_pop_up_create);
+        setTabsPostingDonasi("Review");
+      } else {
+        toast(res.message)
+      }
+    });
   }
   return (
     <>
       <Stack spacing={"md"} px={"md"}>
-        <BoxInformasiDonasi informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!"/>
+        {/* <pre>{JSON.stringify(dataTempo, null, 2)}</pre> */}
+        <BoxInformasiDonasi informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
         <Textarea
           autosize
           minRows={2}
@@ -42,12 +84,53 @@ setTabsPostingDonasi("Review")
           label="Pembukaan"
           placeholder="Pembuka dari isi cerita"
           onChange={(val) =>
-            setValue({
-              ...value,
+            setCreate({
+              ...create,
               pembukaan: val.target.value,
             })
           }
         />
+        <Stack spacing={"xs"}>
+          <AspectRatio ratio={16 / 9}>
+            <Paper radius={"md"}>
+              <Image
+                alt="Foto"
+                src={imageCerita ? imageCerita : "/aset/no-img.png"}
+              />
+            </Paper>
+          </AspectRatio>
+
+          <Center>
+            <FileButton
+              onChange={async (files: any | null) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  // console.log(buffer, "ini buffer");
+                  // console.log(files, " ini file");
+                  setImageCerita(buffer);
+                  setFile(files);
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+              accept="image/png,image/jpeg"
+            >
+              {(props) => (
+                <Button
+                  {...props}
+                  radius={"xl"}
+                  variant="outline"
+                  w={150}
+                  leftIcon={<IconCamera />}
+                >
+                  Upload
+                </Button>
+              )}
+            </FileButton>
+          </Center>
+        </Stack>
         <Textarea
           autosize
           minRows={2}
@@ -56,30 +139,13 @@ setTabsPostingDonasi("Review")
           label="Cerita"
           placeholder="Ceritakan alasan mengapa harus membuat Penggalangan Dana"
           onChange={(val) =>
-            setValue({
-              ...value,
+            setCreate({
+              ...create,
               cerita: val.target.value,
             })
           }
         />
 
-        <Stack spacing={"xs"}>
-          <Center>
-            <Button
-              radius={"xl"}
-              variant="outline"
-              w={150}
-              leftIcon={<IconCamera />}
-            >
-              Upload
-            </Button>
-          </Center>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"}>
-              <Image alt="Foto" src={"/aset/no-img.png"} />
-            </Paper>
-          </AspectRatio>
-        </Stack>
         <Button w={"100%"} radius={"xl"} onClick={() => onCreate()}>
           Simpan
         </Button>